/* ========================================
   Unified Node Loading States
   ======================================== */

/*
  Three clear states:
  1. Empty node (no-result) - solid gray background
  2. Loading (img-preview-loading) - gray background + semi-transparent overlay
  3. Loaded - show actual content with white border
*/

/* ========================================
   State 1: Empty Node (No Content)
   ======================================== */

/* Base empty state - solid gray background, always visible */
#v2-canvas .img-node-preview,
#v2-canvas .video-node-preview,
#v2-canvas .node-card.media-card {
  background: rgb(26, 26, 28) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  min-height: 260px;
}

/* Keep empty nodes fully opaque at all times */
#v2-canvas .v2-node.no-visible-media .img-node-preview,
#v2-canvas .v2-node.no-visible-media .video-node-preview,
#v2-canvas .v2-node.no-visible-media .node-card {
  opacity: 1 !important;
  background: rgb(26, 26, 28) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ========================================
   State 2: Loading (Content Loading)
   ======================================== */

/* Loading state base - keep same background, add semi-transparent overlay */
#v2-canvas .img-preview-loading .img-node-preview,
#v2-canvas .img-preview-loading .video-node-preview {
  background: rgb(26, 26, 28) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: relative;
}

/* Loading overlay - semi-transparent layer on top */
#v2-canvas .img-preview-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 28, 0.5);
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
}

/* Keep the animated progress overlay created by loadingOverlay.js visible.
   The static ::before layer alone gives no feedback that generation is alive. */
#v2-canvas .img-preview-loading > .img-loading-overlay {
  display: block !important;
  opacity: 1 !important;
}

#v2-canvas .img-preview-loading .img-loading-shimmer {
  display: block !important;
  opacity: 1 !important;
}

/* ========================================
   State 3: Loaded (Show Content)
   ======================================== */

/* When content is loaded and visible, show it normally */
#v2-canvas .img-node-preview img.node-img,
#v2-canvas .img-node-preview .aigen-image-media,
#v2-canvas .img-node-preview .v2-media-preview,
#v2-canvas .video-node-preview video {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Loaded nodes keep white border */
#v2-canvas .v2-node:not(.no-visible-media) .img-node-preview,
#v2-canvas .v2-node:not(.no-visible-media) .video-node-preview {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ========================================
   Interaction States (Unified)
   ======================================== */

/* During drag/pan/zoom: reduce opacity but keep state intact */
body.is-dragging #v2-canvas .v2-node:not(.is-drag-active),
body.is-panning #v2-canvas .v2-node,
body.is-zooming #v2-canvas .v2-node {
  opacity: 0.85 !important;
  transition: none !important;
}

/* Active dragged node stays fully visible */
body.is-dragging #v2-canvas .v2-node.is-drag-active {
  opacity: 1 !important;
}

/* During interaction, maintain background regardless of state */
body.is-dragging #v2-canvas .img-node-preview,
body.is-panning #v2-canvas .img-node-preview,
body.is-zooming #v2-canvas .img-node-preview,
body.is-dragging #v2-canvas .video-node-preview,
body.is-panning #v2-canvas .video-node-preview,
body.is-zooming #v2-canvas .video-node-preview {
  background: rgb(26, 26, 28) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Don't change loading state during interactions */
body.is-dragging #v2-canvas .img-preview-loading::before,
body.is-panning #v2-canvas .img-preview-loading::before,
body.is-zooming #v2-canvas .img-preview-loading::before {
  opacity: 0.5 !important;
}

/* ========================================
   Zoom-Low State (Small Zoom)
   ======================================== */

/* At low zoom, keep all states consistent */
body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) {
  opacity: 0.65 !important;
}

/* Empty nodes at zoom-low keep solid background */
body.is-zoom-low #v2-canvas .v2-node.no-visible-media .img-node-preview,
body.is-zoom-low #v2-canvas .v2-node.no-visible-media .video-node-preview {
  background: rgb(26, 26, 28) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Loading nodes at zoom-low keep their overlay */
body.is-zoom-low #v2-canvas .img-preview-loading::before {
  opacity: 0.5 !important;
}

/* ========================================
   Hide Broken Images
   ======================================== */

/* Hide broken image icons completely */
#v2-canvas .img-node-preview img:not([src]),
#v2-canvas .img-node-preview img[src=""],
#v2-canvas .image-node img:not([src]),
#v2-canvas .image-node img[src=""],
#v2-canvas .source-image img:not([src]),
#v2-canvas .source-image img[src=""] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* At zoom-low, also hide broken images */
body.is-zoom-low #v2-canvas .img-node-preview img:not([src]),
body.is-zoom-low #v2-canvas .img-node-preview img[src=""],
body.is-zoom-low #v2-canvas .image-node img:not([src]),
body.is-zoom-low #v2-canvas .image-node img[src=""] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ========================================
   Placeholder Text (Empty State)
   ======================================== */

/* Placeholder remains visible in empty nodes */
#v2-canvas .v2-node.no-visible-media .img-node-placeholder,
#v2-canvas .v2-node.no-visible-media .aigen-media-placeholder {
  display: flex !important;
  opacity: 0.5 !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Hide placeholder when content is loading or loaded */
#v2-canvas .v2-node:not(.no-visible-media) .img-node-placeholder,
#v2-canvas .img-preview-loading .img-node-placeholder {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ========================================
   Audio Node Fix - Source audio uses correct dimensions
   ======================================== */

/* Source audio nodes minimum size (from node type definition) */
#v2-canvas .v2-node[data-type="source-audio"] {
  min-width: 320px !important;
  min-height: 140px !important;
}

/* Ensure audio card and waveform respect parent dimensions */
#v2-canvas .audio-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 140px !important;
}

#v2-canvas .audio-card .waveform {
  width: 100% !important;
  height: 100% !important;
  min-height: 140px !important;
}