/* Canvas visual polish: dark dotted workspace, low-glow selections, softer links. */

/* ========================================
   Image/Video Loading Performance Optimization
   ======================================== */

/* Reduce decode blocking by using lower quality during scroll/zoom */
#v2-canvas img {
  content-visibility: auto;
  contain-intrinsic-size: 320px 240px;
}

/* GPU acceleration for media elements */
#v2-canvas .img-node-preview img,
#v2-canvas .video-node-preview video,
#v2-canvas .v2-media-preview,
#v2-canvas .aigen-image-media {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Prioritize visible viewport images */
#v2-canvas .v2-node:not(.is-viewport-culled) img {
  content-visibility: visible;
}

:root {
  --ej-canvas-bg: #030304;
  --ej-grid-step: 24px;
  --ej-grid-x: 0px;
  --ej-grid-y: 0px;
  --ej-dot-radius: 1px;
  --ej-dot-alpha: 0.13;
  --ej-grid-opacity: 1;
}

:root,
[data-theme='dark'] {
  --bg: #030304 !important;
  --bg-header: transparent !important;
  --bg-sidebar: transparent !important;
}

html,
body {
  background: #030304 !important;
}

#v2-wrap,
#v2-wrap.has-grid-dots,
#v2-wrap.theme-dark,
#v2-wrap[data-theme='dark'] {
  background-color: var(--ej-canvas-bg) !important;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, var(--ej-dot-alpha)) var(--ej-dot-radius),
    transparent calc(var(--ej-dot-radius) + 0.38px)
  ) !important;
  background-size: var(--ej-grid-step) var(--ej-grid-step) !important;
  background-position: var(--ej-grid-x) var(--ej-grid-y) !important;
}

#v2-wrap::before,
#v2-wrap.theme-light::before {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

#v2-wrap.is-pan-shortcut-held::after,
body.is-panning #v2-wrap::after {
  content: "";
  position: fixed;
  inset: var(--header-h, 52px) 0 0 0;
  z-index: 2147483000;
  cursor: var(--grab-cursor);
  pointer-events: auto;
  background: transparent;
}

body.is-image-annotating #v2-canvas .node-floating-toolbar {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.v2-pan-proxy-preview {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  pointer-events: none;
  contain: strict;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

/* Keep panels above pan proxy and canvas nodes */
.sidebar-floating {
  z-index: 2147482500 !important;
}
.minimap-wrapper {
  z-index: 2147482500 !important;
}
.canvas-controls-floating {
  z-index: 2147482500 !important;
}

/* Keep header and tabs above canvas at all times */
.canvas-header,
.header-tabs,
.canvas-tab,
[class*="header"],
[class*="tab-bar"] {
  z-index: 2147482600 !important;
  position: relative;
}

/* Ensure canvas stays below UI */
#v2-canvas,
#v2-canvas * {
  z-index: auto !important;
}

#v2-canvas {
  z-index: 1 !important;
}

#v2-canvas.v2-pan-proxy-source-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

#v2-canvas,
.v2-canvas,
.canvas,
.canvas-area,
.workspace,
.workspace-canvas {
  background: transparent !important;
}

#v2-canvas .v2-node,
#v2-canvas .node,
#v2-canvas .node-card,
#v2-canvas .media-card,
#v2-canvas .img-node-preview,
#v2-canvas .video-node-preview,
#v2-canvas .v2-node-component,
#v2-canvas .text-prompt-panel,
#v2-canvas .node-floating-toolbar,
#v2-canvas .prompt-attachment-btn,
#v2-canvas .ref-thumb-wrap,
#v2-canvas .sb-cell.drag-hover .cell-overlay,
#v2-canvas .v2-node.selection-related,
#v2-canvas .v2-node.conn-src,
#v2-canvas .v2-node.conn-hoverTarget,
#v2-canvas .is-connecting-source,
#v2-canvas .connection-main,
#v2-canvas .connection-bg,
#v2-canvas .connection-group,
#v2-canvas svg,
#v2-canvas path,
#v2-canvas polyline {
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
}

#v2-canvas .v2-node.selected,
#v2-canvas .v2-node.v2-selected,
#v2-canvas .node.selected {
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  animation: none !important;
}

/* Only lift z-order while editing prompt — avoids prompt panel covering nearby nodes. */
body.is-editing-prompt #v2-canvas .v2-node.selected,
body.is-editing-prompt #v2-canvas .v2-node.v2-selected,
body.is-editing-prompt #v2-canvas .node.selected {
  z-index: 50 !important;
}

#v2-canvas .img-node-preview,
#v2-canvas .video-node-preview,
#v2-canvas .node-card.media-card {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#v2-canvas .img-node-preview > img,
#v2-canvas .img-node-preview .node-img,
#v2-canvas .img-node-preview .v2-media-preview,
#v2-canvas .img-node-preview .aigen-image-media,
#v2-canvas .video-node-preview > video,
#v2-canvas .video-node-preview video,
#v2-canvas .node-card.media-card img,
#v2-canvas .node-card.media-card video {
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none !important;
  border-radius: inherit !important;
}

#v2-canvas .v2-node.selected .img-node-preview,
#v2-canvas .v2-node.v2-selected .img-node-preview,
#v2-canvas .node.selected .img-node-preview,
#v2-canvas .v2-node.selected .video-node-preview,
#v2-canvas .v2-node.v2-selected .video-node-preview,
#v2-canvas .node.selected .video-node-preview,
#v2-canvas .v2-node.selected .node-card.media-card,
#v2-canvas .node.selected .node-card.media-card {
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38) !important;
  outline: none !important;
}

#v2-canvas .v2-node.selection-related:not(.selected),
#v2-canvas .v2-node.selection-related:not(.v2-selected),
#v2-canvas .v2-node.conn-src,
#v2-canvas .v2-node.conn-hoverTarget {
  box-shadow: none !important;
  outline: none !important;
}

#v2-canvas .v2-node.selection-related:not(.selected) .img-node-preview,
#v2-canvas .v2-node.selection-related:not(.v2-selected) .img-node-preview,
#v2-canvas .v2-node.selection-related:not(.selected) .video-node-preview,
#v2-canvas .v2-node.selection-related:not(.v2-selected) .video-node-preview,
#v2-canvas .v2-node.selection-related:not(.selected) .node-card.media-card,
#v2-canvas .v2-node.selection-related:not(.v2-selected) .node-card.media-card,
#v2-canvas .v2-node.conn-src .img-node-preview,
#v2-canvas .v2-node.conn-src .video-node-preview,
#v2-canvas .v2-node.conn-src .node-card.media-card {
  border-color: var(--selection-related-color, rgba(255, 255, 255, 0.62)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24) !important;
  outline: none !important;
}

/* P0-3b: removed expensive :has() selection-related selector. */
#v2-canvas .connection-main,
#v2-canvas .v2-connection .connection-main,
#v2-canvas .connection-group .connection-main,
#v2-canvas svg .connection-main {
  stroke: rgba(190, 195, 200, 0.38) !important;
  stroke-width: 2.05px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
  opacity: 1 !important;
  vector-effect: non-scaling-stroke;
}

/* Hover must not change stroke — dense graphs flicker when crossing 20px hitboxes. */
#v2-canvas .connection-group:hover .connection-main {
  stroke: rgba(190, 195, 200, 0.38) !important;
  stroke-width: 2.05px !important;
  filter: none !important;
  opacity: 1 !important;
}

#v2-canvas .connection-group.connection-highlighted .connection-main,
#v2-canvas .connection-group.selected .connection-main,
#v2-canvas .connection-group.v2-selected .connection-main {
  stroke: rgba(215, 220, 225, 0.52) !important;
  stroke-width: 2.35px !important;
  filter: none !important;
  opacity: 1 !important;
}

#v2-canvas .connection-bg,
#v2-canvas .v2-connection .connection-bg,
#v2-canvas .connection-group .connection-bg,
#v2-canvas svg .connection-bg {
  stroke: transparent !important;
  stroke-opacity: 0 !important;
  opacity: 0 !important;
  filter: none !important;
  pointer-events: none !important;
}

/* Large graphs: extra guard (hitboxes disabled globally above). */
html.has-many-edges #v2-canvas .connection-group:hover .connection-main {
  stroke: rgba(190, 195, 200, 0.38) !important;
  stroke-width: 2.05px !important;
}

html.has-many-nodes body.is-panning #v2-canvas #v2-edges-wrapper,
html.has-many-nodes body.is-zooming #v2-canvas #v2-edges-wrapper,
html.has-many-nodes body.is-viewport-animating #v2-canvas #v2-edges-wrapper {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.has-many-nodes body.is-panning #v2-canvas,
html.has-many-nodes body.is-zooming #v2-canvas {
  will-change: transform;
}

html.has-many-nodes #v2-canvas .connection-group:hover .connection-main {
  stroke: rgba(190, 195, 200, 0.38) !important;
  stroke-width: 2.05px !important;
}

#v2-canvas .v2-draft-edge,
#v2-canvas .draft-edge,
#v2-canvas .temp-connection,
#v2-canvas .connection-draft,
.conn-path-highlight {
  stroke: rgba(190, 195, 200, 0.34) !important;
  stroke-width: 2px !important;
  filter: none !important;
  opacity: 1 !important;
}

body.is-panning #v2-canvas .connection-main,
body.is-zooming #v2-canvas .connection-main,
body.is-panning #v2-canvas .v2-node,
body.is-zooming #v2-canvas .v2-node {
  filter: none !important;
  animation: none !important;
}

body.is-panning #v2-canvas {
  will-change: transform;
  backface-visibility: hidden;
}

body.is-zooming #v2-canvas {
  will-change: transform;
  backface-visibility: hidden;
}

/* Edges live in world coords inside the canvas transform — keep them visually stable. */
body.is-panning #v2-canvas .connection-bg,
body.is-zooming #v2-canvas .connection-bg {
  display: block !important;
}

body.is-panning #v2-canvas #v2-edges,
body.is-zooming #v2-canvas #v2-edges {
  opacity: 1 !important;
  shape-rendering: geometricPrecision;
  pointer-events: none !important;
}

body.is-dragging #v2-canvas #v2-edges {
  shape-rendering: optimizeSpeed;
}

body.is-panning #v2-edges-wrapper,
body.is-zooming #v2-edges-wrapper {
  will-change: transform;
  backface-visibility: hidden;
  /* Do not use contain:paint — edges extend in world space and get clipped during scale. */
  pointer-events: none !important;
}

/* Focus (prompt editing only): dim distant nodes + their edges together. */
body.is-editing-prompt.is-canvas-focus-context #v2-canvas .v2-node:not(.is-focus-context):not(.selected):not(.v2-selected) {
  opacity: 0.2 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body.is-editing-prompt.is-canvas-focus-context #v2-canvas .v2-node.selected,
body.is-editing-prompt.is-canvas-focus-context #v2-canvas .v2-node.v2-selected,
body.is-editing-prompt.is-canvas-focus-context #v2-canvas .v2-node.is-focus-context {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.is-editing-prompt.is-canvas-focus-context #v2-edges-wrapper .connection-group:not(.is-focus-context) {
  opacity: 0.2 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body.is-editing-prompt.is-canvas-focus-context #v2-edges-wrapper .connection-group.is-focus-context {
  opacity: 1 !important;
}

/* Viewport culling: hide off-screen nodes without display:none flicker */
#v2-canvas .v2-node.is-viewport-culled {
  visibility: hidden !important;
  pointer-events: none !important;
  content-visibility: hidden;
  contain: layout style paint;
}

/* Aggressively unload media in culled nodes to reduce memory pressure */
#v2-canvas .v2-node.is-viewport-culled img,
#v2-canvas .v2-node.is-viewport-culled video,
#v2-canvas .v2-node.is-viewport-culled canvas {
  visibility: hidden !important;
  opacity: 0 !important;
  content-visibility: hidden !important;
}

html.canvas-preview-thumb #v2-canvas .v2-node:not(.selected):not(.v2-selected) img.node-img,
html.canvas-preview-thumb #v2-canvas .v2-node:not(.selected):not(.v2-selected) .aigen-image-media,
html.canvas-preview-thumb #v2-canvas .v2-node:not(.selected):not(.v2-selected) .v2-media-preview {
  image-rendering: auto;
}

body.is-editing-prompt #v2-canvas .text-prompt-panel {
  background: var(--bg-panel-solid, rgba(22, 24, 28, 0.98)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-editing-prompt #v2-canvas .v2-node:not(.selected):not(.v2-selected) .node-floating-toolbar {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-editing-prompt #v2-canvas .prompt-textarea {
  contain: layout style paint;
  will-change: contents;
}

/* Dragging: hide prompt chrome so panels don't stack over other nodes. */
body.is-dragging #v2-canvas .text-prompt-panel,
body.is-dragging #v2-canvas .node-floating-toolbar,
body.is-dragging #v2-canvas .prompt-panel-footer,
body.is-dragging #v2-canvas .vid-duration-wrap,
body.is-dragging #v2-canvas .vid-duration-pop {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-dragging #v2-canvas .v2-node.is-drag-active {
  z-index: 100 !important;
}

body.is-dragging #v2-canvas .v2-node.selected:not(.is-drag-active),
body.is-dragging #v2-canvas .v2-node.v2-selected:not(.is-drag-active) {
  z-index: auto !important;
}

/* Media nodes: size container drives prompt width by preview aspect ratio. */
#v2-canvas .v2-node.video-node,
#v2-canvas .v2-node.image-node {
  container-type: size;
}

#v2-canvas .v2-node.video-node > .v2-node-component,
#v2-canvas .v2-node.image-node > .v2-node-component {
  overflow: visible !important;
}

/* Clamp prompt inverse zoom; anchor from top so panel grows downward (not over video). */
#v2-canvas .text-prompt-panel {
  top: calc(100% + 14px) !important;
  max-width: 616px !important;
  transform: translateX(-50%) scale(var(--prompt-zoom-inv, var(--zoom-inv))) !important;
  transform-origin: top center !important;
  z-index: 1;
  pointer-events: none !important;
  cursor: var(--pointer-cursor) !important;
}

#v2-canvas .text-prompt-panel *,
#v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src):not(.is-focus-context) .text-prompt-panel .prompt-textarea,
#v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src):not(.is-focus-context) .text-prompt-panel [contenteditable="true"] {
  pointer-events: none !important;
  cursor: var(--pointer-cursor) !important;
}

#v2-canvas .v2-node.selected .text-prompt-panel,
#v2-canvas .v2-node.v2-selected .text-prompt-panel,
#v2-canvas .v2-node.conn-src .text-prompt-panel,
#v2-canvas .video-node.selected .text-prompt-panel,
#v2-canvas .v2-node.selected .text-prompt-panel,
#v2-canvas .v2-node.v2-selected .text-prompt-panel,
#v2-canvas .v2-node.conn-src .text-prompt-panel,
#v2-canvas .image-node.selected .text-prompt-panel,
#v2-canvas .audio-node.selected .text-prompt-panel,
#v2-canvas .text-node.selected .text-prompt-panel,
#v2-canvas .video-node.selected .text-prompt-panel {
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: var(--pointer-cursor) !important;
}

/* Selected nodes themselves need higher z-index to stay above others */
#v2-canvas .v2-node.selected,
#v2-canvas .v2-node.v2-selected,
#v2-canvas .v2-node.conn-src {
  z-index: 9998 !important;
}

/* Original rules */
#v2-canvas .image-node.selected .text-prompt-panel,
#v2-canvas .audio-node.selected .text-prompt-panel,
#v2-canvas .text-node.selected .text-prompt-panel {
  z-index: 20 !important;
  pointer-events: auto !important;
  cursor: var(--pointer-cursor) !important;
}

/* Audio clipping owns the pointer surface below the selected node. The
   selected prompt rules above must not intercept the clip handles, and the
   clip bar must escape the canvas-wide z-index reset. */
#v2-wrap.is-audio-clip-mode #v2-canvas .v2-node.is-audio-clip-target .text-prompt-panel,
#v2-wrap.is-audio-clip-mode #v2-canvas .v2-node.is-audio-clip-target .text-prompt-panel * {
  pointer-events: none !important;
}

#v2-wrap.is-audio-clip-mode #v2-canvas .v2-node.is-audio-clip-target .v2-video-clipbar {
  z-index: 10000 !important;
  pointer-events: auto !important;
}

/* Video clipping uses the same below-node editor surface, but the selected
   prompt/ref strip normally owns a higher interactive layer. During clipping
   the target node and its clip bar must own that stack, while the prompt
   descendants stay inert so hover previews cannot intercept the handles. */
#v2-wrap.is-video-clip-mode #v2-canvas .v2-node.is-video-clip-target {
  z-index: 10000 !important;
  isolation: isolate;
}

#v2-wrap.is-video-clip-mode #v2-canvas .v2-node.is-video-clip-target .text-prompt-panel,
#v2-wrap.is-video-clip-mode #v2-canvas .v2-node.is-video-clip-target .text-prompt-panel * {
  pointer-events: none !important;
}

#v2-wrap.is-video-clip-mode #v2-canvas .v2-node.is-video-clip-target .v2-video-clipbar {
  z-index: 10001 !important;
  pointer-events: auto !important;
}

#v2-canvas .v2-node.selected .text-prompt-panel .prompt-panel-footer,
#v2-canvas .v2-node.selected .text-prompt-panel .img-model-pills,
#v2-canvas .v2-node.selected .text-prompt-panel .img-model-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .dreamina-task-model-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .img-ratio-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .vid-mode-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .vid-duration-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .img-pill-btn,
#v2-canvas .v2-node.selected .text-prompt-panel .node-ref-bar,
#v2-canvas .v2-node.selected .text-prompt-panel .ref-thumb-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .prompt-attachment-btn,
#v2-canvas .v2-node.selected .text-prompt-panel .prompt-actions,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-panel-footer,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .img-model-pills,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .img-model-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .dreamina-task-model-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .img-ratio-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .vid-mode-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .vid-duration-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .img-pill-btn,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .node-ref-bar,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .ref-thumb-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-attachment-btn,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-actions,
#v2-canvas .v2-node.conn-src .text-prompt-panel .prompt-panel-footer,
#v2-canvas .v2-node.conn-src .text-prompt-panel .img-model-pills,
#v2-canvas .v2-node.conn-src .text-prompt-panel .img-model-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .dreamina-task-model-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .img-ratio-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .vid-mode-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .vid-duration-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .img-pill-btn,
#v2-canvas .v2-node.conn-src .text-prompt-panel .node-ref-bar,
#v2-canvas .v2-node.conn-src .text-prompt-panel .ref-thumb-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .prompt-attachment-btn,
#v2-canvas .v2-node.conn-src .text-prompt-panel .prompt-actions {
  pointer-events: auto !important;
}

/* Prompt controls must remain real hit targets. The broad panel rule above
   intentionally disables idle descendants, but it must not swallow the
   remove buttons once a prompt is active. */
#v2-canvas .v2-node.selected .text-prompt-panel .ref-thumb-delete,
#v2-canvas .v2-node.selected .text-prompt-panel .ref-upload-delete,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .ref-thumb-delete,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .ref-upload-delete,
#v2-canvas .v2-node.conn-src .text-prompt-panel .ref-thumb-delete,
#v2-canvas .v2-node.conn-src .text-prompt-panel .ref-upload-delete,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .ref-thumb-delete,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .ref-upload-delete {
  pointer-events: auto !important;
  cursor: var(--link-cursor) !important;
}

#v2-canvas .v2-node.selected .text-prompt-panel .prompt-textarea,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-textarea,
#v2-canvas .v2-node.conn-src .text-prompt-panel .prompt-textarea,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .prompt-textarea {
  pointer-events: auto !important;
  cursor: var(--pointer-cursor) !important;
}

/* Generated text is a canvas drag surface until the explicit double-click
   edit state is active. Keep these states in this authoritative interaction
   layer so selected-node rules cannot turn browsing back into text editing. */
#v2-canvas .v2-node.selected .aigen-text-output[contenteditable="false"],
#v2-canvas .v2-node.v2-selected .aigen-text-output[contenteditable="false"],
#v2-canvas .v2-node.is-focus-context .aigen-text-output[contenteditable="false"] {
  pointer-events: auto !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: var(--grab-cursor) !important;
}

#v2-canvas .v2-node.selected .aigen-text-output[contenteditable="true"],
#v2-canvas .v2-node.v2-selected .aigen-text-output[contenteditable="true"],
#v2-canvas .v2-node.is-focus-context .aigen-text-output[contenteditable="true"] {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: var(--text-cursor) !important;
}

#v2-canvas .aigen-text-output[hidden],
#v2-canvas .aigen-text-placeholder[hidden] {
  display: none !important;
}

/* Audio footer controls need explicit hit targets alongside the older prompt
   controls enabled above. This is the authoritative canvas interaction layer. */
#v2-canvas .v2-node.selected .text-prompt-panel .audio-speaker-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .audio-speaker-open,
#v2-canvas .v2-node.selected .text-prompt-panel .audio-duration-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .audio-duration-menu-wrap,
#v2-canvas .v2-node.selected .text-prompt-panel .audio-duration-trigger,
#v2-canvas .v2-node.selected .text-prompt-panel .audio-duration-menu,
#v2-canvas .v2-node.selected .text-prompt-panel .audio-duration-item,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .audio-speaker-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .audio-speaker-open,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .audio-duration-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .audio-duration-menu-wrap,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .audio-duration-trigger,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .audio-duration-menu,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .audio-duration-item,
#v2-canvas .v2-node.conn-src .text-prompt-panel .audio-speaker-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .audio-speaker-open,
#v2-canvas .v2-node.conn-src .text-prompt-panel .audio-duration-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .audio-duration-menu-wrap,
#v2-canvas .v2-node.conn-src .text-prompt-panel .audio-duration-trigger,
#v2-canvas .v2-node.conn-src .text-prompt-panel .audio-duration-menu,
#v2-canvas .v2-node.conn-src .text-prompt-panel .audio-duration-item,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .audio-speaker-wrap,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .audio-speaker-open,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .audio-duration-wrap,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .audio-duration-menu-wrap,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .audio-duration-trigger,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .audio-duration-menu,
#v2-canvas .v2-node.is-focus-context .text-prompt-panel .audio-duration-item {
  pointer-events: auto !important;
  cursor: var(--link-cursor) !important;
}

body.is-editing-prompt #v2-canvas .text-prompt-panel .prompt-textarea,
body.is-editing-prompt #v2-canvas .text-prompt-panel [contenteditable="true"] {
  pointer-events: auto !important;
  cursor: var(--text-cursor) !important;
}

#v2-canvas .v2-node.selected .text-prompt-panel .prompt-panel-footer,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-panel-footer,
#v2-canvas .v2-node.conn-src .text-prompt-panel .prompt-panel-footer {
  position: relative;
  z-index: 3;
}

/* Landscape preview (16:9, 4:3, 21:9…): idle prompt stays within node width. */
@container (aspect-ratio > 1) {
  #v2-canvas .text-prompt-panel {
    width: min(616px, 100%) !important;
  }

  /* Selected landscape: use full prompt width so footer pills + generate stay readable. */
  #v2-canvas .v2-node.selected .text-prompt-panel,
  #v2-canvas .v2-node.v2-selected .text-prompt-panel,
  #v2-canvas .v2-node.conn-src .text-prompt-panel,
  #v2-canvas .video-node.selected .text-prompt-panel,
  #v2-canvas .image-node.selected .text-prompt-panel {
    width: 616px !important;
  }
}

/* Portrait / square (9:16, 1:1, 3:4…): standard 616px prompt for readable footer controls. */
@container (aspect-ratio <= 1) {
  #v2-canvas .text-prompt-panel {
    width: 616px !important;
  }
}

/* Media preview paints above idle prompt chrome; selected prompt panel wins z-order for clicks. */
#v2-canvas .v2-node .img-node-preview,
#v2-canvas .v2-node .video-node-preview,
#v2-canvas .v2-node .node-card.media-card {
  position: relative;
  z-index: 2;
}

#v2-canvas .v2-node.selected .video-node-preview,
#v2-canvas .v2-node.v2-selected .video-node-preview,
#v2-canvas .v2-node.conn-src .video-node-preview,
#v2-canvas .v2-node.selected .img-node-preview,
#v2-canvas .v2-node.v2-selected .img-node-preview,
#v2-canvas .v2-node.conn-src .img-node-preview {
  pointer-events: none;
}

#v2-canvas .v2-node.selected .video-node-preview .video-controls,
#v2-canvas .v2-node.v2-selected .video-node-preview .video-controls,
#v2-canvas .v2-node.conn-src .video-node-preview .video-controls {
  pointer-events: auto;
}

/* ai-video uses .img-node-preview — keep mute/play controls clickable when selected. */
#v2-canvas .v2-node.selected .img-node-preview .video-mute-btn,
#v2-canvas .v2-node.v2-selected .img-node-preview .video-mute-btn,
#v2-canvas .v2-node.conn-src .img-node-preview .video-mute-btn,
#v2-canvas .v2-node.selected .img-node-preview .video-controls,
#v2-canvas .v2-node.v2-selected .img-node-preview .video-controls,
#v2-canvas .v2-node.conn-src .img-node-preview .video-controls,
#v2-canvas .v2-node.selected .img-node-preview .gen-video-center-indicator .indicator-inner,
#v2-canvas .v2-node.v2-selected .img-node-preview .gen-video-center-indicator .indicator-inner,
#v2-canvas .v2-node.conn-src .img-node-preview .gen-video-center-indicator .indicator-inner {
  pointer-events: auto;
}

/* Video overlays use the same light icon language as the timeline controls.
 * The old opaque rounded rectangles looked disproportionately heavy once a
 * video node was scaled down on the canvas.  Keep generous click targets, but
 * let the play, snapshot and mute glyphs be the visual focus. */
#v2-canvas .video-mute-btn,
#v2-canvas .video-center-indicator .indicator-inner,
#v2-canvas .gen-video-center-indicator .indicator-inner {
  background: transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--text-primary) !important;
  text-shadow: 0 1px 4px var(--black-90), 0 0 2px var(--black-90);
}

#v2-canvas .video-mute-btn {
  width: 26px !important;
  height: 26px !important;
  border: 1px solid var(--white-75, rgba(255, 255, 255, 0.75)) !important;
  box-shadow: 0 1px 5px var(--black-45) !important;
}

#v2-canvas .video-center-indicator .indicator-inner,
#v2-canvas .gen-video-center-indicator .indicator-inner {
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
}

#v2-canvas .video-play-btn,
#v2-canvas .video-snap-btn,
#v2-canvas .video-mute-btn {
  color: var(--text-primary) !important;
  text-shadow: 0 1px 4px var(--black-90), 0 0 2px var(--black-90);
}

#v2-canvas .video-mute-btn svg,
#v2-canvas .video-play-btn svg,
#v2-canvas .video-snap-btn svg {
  filter: drop-shadow(0 1px 2px var(--black-90));
}

#v2-canvas .video-node.selected .text-prompt-panel,
#v2-canvas .image-node.selected .text-prompt-panel,
#v2-canvas .audio-node.selected .text-prompt-panel,
#v2-canvas .text-node.selected .text-prompt-panel,
#v2-canvas .v2-node.conn-src .text-prompt-panel {
  transform: translateX(-50%) translateY(0) scale(var(--prompt-zoom-inv, var(--zoom-inv))) !important;
}

#v2-canvas .v2-node.is-viewport-culled .node-floating-toolbar,
#v2-canvas .v2-node.is-viewport-culled .text-prompt-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

#v2-canvas .v2-node.selected.is-viewport-culled .text-prompt-panel,
#v2-canvas .v2-node.v2-selected.is-viewport-culled .text-prompt-panel,
#v2-canvas .v2-node.conn-src.is-viewport-culled .text-prompt-panel {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Only show toolbar on the actively selected node, not connection source */
#v2-canvas .v2-node.conn-src:not(.selected):not(.v2-selected) .node-floating-toolbar {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.has-many-nodes #v2-canvas .node-floating-toolbar,
html.has-many-nodes #v2-canvas .text-prompt-panel {
  transition: none !important;
}

/* Minimap: keep viewport indicator behind node dots */
.minimap-viewport {
  z-index: 1 !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.minimap-node {
  z-index: 2;
}

/* Bottom-left toolbar sits near viewport edge; keep tooltips fully visible. */
.canvas-controls-floating {
  overflow: visible;
}

@keyframes canvasControlTooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.canvas-controls-floating > .cc-btn:first-child[data-tooltip]:hover::after {
  left: 0 !important;
  transform: none !important;
  animation: canvasControlTooltipFadeIn 0.2s forwards !important;
  animation-delay: 0.1s;
}

.canvas-controls-floating > .cc-btn:first-child[data-tooltip]:hover::before {
  left: 19px !important;
  transform: translateX(-50%) !important;
  animation: canvasControlTooltipFadeIn 0.2s forwards !important;
  animation-delay: 0.1s;
}

/* P0-Perf-1: viewport fast path. During pan/zoom, keep interaction on the composited canvas layer. */
body.is-panning #v2-wrap,
body.is-zooming #v2-wrap {
  cursor: grabbing;
}

body.is-panning #v2-canvas,
body.is-zooming #v2-canvas {
  will-change: transform !important;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: none !important;
  pointer-events: none !important;
}

body.is-panning #v2-canvas .v2-node,
body.is-zooming #v2-canvas .v2-node,
body.is-zoom-low #v2-canvas .v2-node,
body.is-panning #v2-canvas #v2-edges,
body.is-zooming #v2-canvas #v2-edges {
  transition: none !important;
  animation-play-state: paused !important;
}

body.is-panning #v2-canvas .v2-node,
body.is-zooming #v2-canvas .v2-node {
  pointer-events: none !important;
}

body.is-panning #v2-canvas .v2-node,
body.is-zooming #v2-canvas .v2-node,
body.is-zoom-low #v2-canvas .v2-node {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-panning #v2-canvas .connection-bg,
body.is-zooming #v2-canvas .connection-bg,
body.is-zoom-low #v2-canvas .connection-bg,
body.is-panning #v2-canvas .connection-hit,
body.is-zooming #v2-canvas .connection-hit,
body.is-zoom-low #v2-canvas .connection-hit {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-panning #v2-canvas #v2-edges,
body.is-zooming #v2-canvas #v2-edges {
  shape-rendering: optimizeSpeed !important;
}

/* P0-3m Mac trackpad LOD: at low zoom, hide prompt chrome on non-active nodes only. */
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .text-prompt-panel,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .prompt-panel-footer {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .node-floating-toolbar {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .node-floating-toolbar,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .node-floating-toolbar {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#v2-canvas .v2-node .node-floating-toolbar {
  margin-left: var(--node-toolbar-safe-shift-x, 0px);
}

#v2-canvas .v2-node.node-bottom-toolbar-anchor .node-floating-toolbar {
  top: calc(100% + 12px) !important;
  bottom: auto !important;
  transform-origin: top center !important;
}

#v2-canvas .v2-node.node-bottom-toolbar-anchor.selected .node-floating-toolbar,
#v2-canvas .v2-node.node-bottom-toolbar-anchor.v2-selected .node-floating-toolbar,
#v2-canvas .v2-node.node-bottom-toolbar-anchor.conn-src .node-floating-toolbar {
  transform: translateX(-50%) translateY(0) scale(var(--zoom-inv, 1)) !important;
}

#v2-canvas .v2-node.node-inside-toolbar-anchor .node-floating-toolbar {
  top: 12px !important;
  bottom: auto !important;
  left: 12px !important;
  right: 12px !important;
  max-width: calc(100% - 24px) !important;
  width: max-content !important;
  transform-origin: top center !important;
}

#v2-canvas .v2-node.node-inside-toolbar-anchor.selected .node-floating-toolbar,
#v2-canvas .v2-node.node-inside-toolbar-anchor.v2-selected .node-floating-toolbar,
#v2-canvas .v2-node.node-inside-toolbar-anchor.conn-src .node-floating-toolbar {
  transform: translateX(0) translateY(0) scale(var(--zoom-inv, 1)) !important;
}

body.is-zoom-low #v2-canvas .connection-bg,
body.is-zoom-low #v2-canvas .connection-hit {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-zoom-low #v2-edges-wrapper {
  display: block !important;
  opacity: 0.58 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body.is-zoom-low.is-panning #v2-canvas .v2-node video,
body.is-zoom-low.is-panning #v2-canvas .v2-node canvas,
body.is-zoom-low.is-panning #v2-canvas .img-node-preview img,
body.is-zoom-low.is-panning #v2-canvas .video-node-preview img,
body.is-zoom-low.is-panning #v2-canvas .v2-media-preview,
body.is-zoom-low.is-panning #v2-canvas .aigen-image-media {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-zoom-low.is-panning #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) {
  contain: layout style !important;
}


body.is-zoom-low #v2-canvas .connection-main {
  stroke: rgba(220, 228, 238, 0.24) !important;
  stroke-width: 1.15px !important;
  filter: none !important;
  vector-effect: non-scaling-stroke;
}

body.is-zoom-low #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) {
  contain: layout style paint;
}

body.is-zoom-low.is-dragging-node #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) video,
body.is-zoom-low.is-dragging #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) video,
body.is-zoom-low.is-dragging-node #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) canvas,
body.is-zoom-low.is-dragging #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) canvas {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Low-zoom drag: keep node frames + static thumbs visible; only pause live video decode. */
body.is-zoom-low.is-dragging-node #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite),
body.is-zoom-low.is-dragging #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) {
  contain: layout style !important;
  opacity: 0.92 !important;
}

body.is-zoom-low.is-dragging-node #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) .img-node-preview,
body.is-zoom-low.is-dragging #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) .img-node-preview,
body.is-zoom-low.is-dragging-node #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) .img-node-preview img,
body.is-zoom-low.is-dragging #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) .img-node-preview img,
body.is-zoom-low.is-dragging-node #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) .video-node-preview img,
body.is-zoom-low.is-dragging #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) .video-node-preview img,
body.is-zoom-low.is-dragging-node #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) .v2-media-preview,
body.is-zoom-low.is-dragging #v2-canvas .v2-node:not(.is-drag-active):not(.is-drag-media-lite) .v2-media-preview {
  visibility: visible !important;
  opacity: 1 !important;
}

body.is-zoom-low #v2-canvas .connection-bg,
body.is-zoom-low #v2-canvas .connection-hit {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the 20px edge hit area interactive on ordinary canvases, including the
   low zoom level commonly used for wiring. Heavy graphs and active gestures
   keep their performance guards. */
html:not(.has-many-edges):not(.has-many-nodes) body:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .connection-bg {
  display: block !important;
  visibility: visible !important;
  opacity: 0 !important;
  pointer-events: stroke !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .img-node-preview,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .img-node-preview img,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .image-node img,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .source-image img,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-media-preview,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .aigen-image-media {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) {
  opacity: 0.58 !important;
  transition: opacity 0.15s ease-out !important;
}

body.is-zoom-low.is-panning #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src),
body.is-zoom-low.is-zooming #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src),
body.is-zoom-low.is-dragging #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) {
  transition: none !important;
}

body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) .node-card,
body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) .v2-node-component,
body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) .img-node-preview,
body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) .video-node-preview,
body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) .node-job-ui {
  background: rgba(18, 22, 28, 0.36) !important;
  border-color: rgba(190, 205, 224, 0.12) !important;
  box-shadow: none !important;
}

body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) img,
body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) video,
body.is-zoom-low #v2-canvas .v2-node.no-visible-media:not(.selected):not(.v2-selected):not(.conn-src) canvas {
  opacity: 0.2 !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node:not(.image-node):not(.source-image):not(.video-node) .node-card,
body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node:not(.image-node):not(.source-image):not(.video-node) .v2-node-component {
  background: rgba(22, 26, 32, 0.78) !important;
  border-color: rgba(180, 198, 220, 0.22) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node:not(.image-node):not(.source-image):not(.video-node) .prompt-textarea,
body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node:not(.image-node):not(.source-image):not(.video-node) .text-card-content,
body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node:not(.image-node):not(.source-image):not(.video-node) .source-text-content,
body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node:not(.image-node):not(.source-image):not(.video-node) .text-output-content {
  background: transparent !important;
  color: rgba(245, 247, 250, 0.78) !important;
  opacity: 1 !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node:not(.image-node):not(.source-image):not(.video-node) .img-loading-overlay,
body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node:not(.image-node):not(.source-image):not(.video-node) .img-loading-shimmer {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.is-panning #v2-canvas .v2-node video,
body.is-zooming #v2-canvas .v2-node video,
body.is-panning #v2-canvas .v2-node canvas,
body.is-zooming #v2-canvas .v2-node canvas {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.is-panning #v2-canvas .video-node-preview,
body.is-zooming #v2-canvas .video-node-preview,
body.is-panning #v2-canvas .node-card.media-card,
body.is-zooming #v2-canvas .node-card.media-card {
  background: rgba(20, 24, 30, 0.68) !important;
  border-color: rgba(180, 198, 220, 0.16) !important;
}

body.is-zoom-low.is-panning #v2-canvas .v2-node video,
body.is-zoom-low.is-zooming #v2-canvas .v2-node video,
body.is-zoom-low.is-panning #v2-canvas .v2-node canvas,
body.is-zoom-low.is-zooming #v2-canvas .v2-node canvas {
  visibility: hidden !important;
  opacity: 0 !important;
}

body.is-zoom-low.is-panning #v2-canvas .video-node-preview,
body.is-zoom-low.is-zooming #v2-canvas .video-node-preview,
body.is-zoom-low.is-panning #v2-canvas .node-card.media-card,
body.is-zoom-low.is-zooming #v2-canvas .node-card.media-card {
  background: rgba(20, 24, 30, 0.68) !important;
  border-color: rgba(180, 198, 220, 0.16) !important;
}

body.is-panning .runtime-diagnostics-panel,
body.is-zooming .runtime-diagnostics-panel {
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-panning .v2-asset-sidebar-panel,
body.is-zooming .v2-asset-sidebar-panel {
  transition: none !important;
}

/* Keep virtualization effective during live viewport gestures. Revealing culled
   image nodes here forces thumbnail/display image decode while panning. */
body.is-panning #v2-canvas .v2-node.is-viewport-culled,
body.is-zooming #v2-canvas .v2-node.is-viewport-culled {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  content-visibility: hidden !important;
}

/* During zoom/pan, reduce render load by hiding node media */
body.is-zooming #v2-canvas .v2-node:not(.selected):not(.v2-selected) img,
body.is-zooming #v2-canvas .v2-node:not(.selected):not(.v2-selected) video,
body.is-zooming #v2-canvas .v2-node:not(.selected):not(.v2-selected) canvas {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Aggressive culling during zoom for smoother performance */
body.is-zooming #v2-canvas .v2-node {
  will-change: transform;
  contain: layout style paint;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming) #v2-canvas .v2-node.is-viewport-culled {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  content-visibility: visible !important;
}

body.is-panning #v2-canvas .v2-node,
body.is-zooming #v2-canvas .v2-node,
body.is-zoom-low #v2-canvas .v2-node {
  transition: none !important;
}

/* P0-Perf-1C: hide SVG edges while panning/zooming large graphs — restore on pointerup. */
html.has-many-edges body.is-panning #v2-edges-wrapper,
html.has-many-edges body.is-zooming #v2-edges-wrapper,
html.has-many-edges body.is-panning #v2-canvas #v2-edges,
html.has-many-edges body.is-zooming #v2-canvas #v2-edges {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  filter: none !important;
  transition: none !important;
}

html.has-many-edges body.is-zoom-low.is-panning #v2-edges-wrapper,
html.has-many-edges body.is-zoom-low.is-zooming #v2-edges-wrapper,
html.has-many-edges body.is-zoom-low.is-panning #v2-canvas #v2-edges,
html.has-many-edges body.is-zoom-low.is-zooming #v2-canvas #v2-edges {
  visibility: hidden !important;
  opacity: 0 !important;
}

html.has-many-edges body.is-panning #v2-canvas .connection-main,
html.has-many-edges body.is-zooming #v2-canvas .connection-main {
  stroke-width: 1.2px !important;
  filter: none !important;
  vector-effect: non-scaling-stroke;
}

html.has-many-nodes body.is-panning #v2-canvas .text-prompt-panel,
html.has-many-nodes body.is-zooming #v2-canvas .text-prompt-panel {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.has-many-nodes body.is-panning #v2-canvas,
html.has-many-nodes body.is-zooming #v2-canvas {
  will-change: transform;
}

body.is-panning #v2-canvas .node-glow,
body.is-zooming #v2-canvas .node-glow,
body.is-panning #v2-canvas .node-shadow,
body.is-zooming #v2-canvas .node-shadow {
  display: none !important;
}

/* P0-2c: visual dimming disabled. If any legacy code still adds is-low-quality-preview,
   keep full opacity/visibility so nodes and edges do not turn gray during movement. */
body.is-low-quality-preview #v2-canvas .v2-node,
body.is-low-quality-preview #v2-canvas .v2-node img,
body.is-low-quality-preview #v2-canvas #v2-edges,
body.is-low-quality-preview #v2-edges-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

/* P0-Perf-Rebase-1A/B: unified low-quality interaction preview.
   During pan/zoom/node-drag, keep the canvas responsive by preventing heavy
   media and chrome from repainting every frame. Full fidelity returns after
   the interaction mode clears. */
body.is-low-quality-preview #v2-canvas,
body.is-low-quality-preview #v2-canvas .v2-node,
body.is-low-quality-preview #v2-canvas #v2-edges,
body.is-low-quality-preview #v2-canvas .connection-main,
body.is-low-quality-preview #v2-canvas .connection-bg,
body.is-low-quality-preview #v2-canvas .connection-hit,
body.is-low-quality-preview #v2-canvas .node-card,
body.is-low-quality-preview #v2-canvas .node-floating-toolbar,
body.is-low-quality-preview #v2-canvas .text-prompt-panel,
body.is-low-quality-preview #v2-canvas .prompt-panel-footer {
  transition: none !important;
  animation: none !important;
}

body.is-low-quality-preview #v2-canvas .v2-node {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: transform;
}

body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) video,
body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) iframe,
body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) canvas {
  visibility: hidden !important;
}

body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) img {
  opacity: 1 !important;
  filter: none !important;
}

body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .node-floating-toolbar,
body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .text-prompt-panel,
body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .prompt-panel-footer,
body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .node-ref-bar,
body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .video-controls,
body.is-low-quality-preview #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .image-toolbar {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-low-quality-preview .runtime-diagnostics-panel,
body.is-low-quality-preview .v2-asset-sidebar-panel,
body.is-low-quality-preview .v2-asset-create-panel {
  transition: none !important;
}

.v2-asset-sidebar-panel:not(.show) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(-50%) translateX(-24px) !important;
}

.v2-asset-sidebar-panel.show,
.v2-asset-sidebar-panel.show .v2-asset-sidebar-header,
.v2-asset-sidebar-panel.show .v2-asset-sidebar-tabs,
.v2-asset-sidebar-panel.show .v2-asset-sidebar-content,
.v2-asset-sidebar-panel.show .v2-asset-search-input,
.v2-asset-sidebar-panel.show .v2-asset-refresh-btn,
.v2-asset-sidebar-panel.show .v2-asset-sidebar-tab,
.v2-asset-sidebar-panel.show .v2-asset-item,
.v2-asset-sidebar-panel.show .v2-asset-subitem,
.v2-asset-sidebar-panel.show [data-ui-action],
.v2-asset-sidebar-panel.show button,
.v2-asset-sidebar-panel.show input,
.v2-asset-sidebar-panel.show textarea,
.v2-asset-sidebar-panel.show select,
.v2-asset-create-panel.show,
.v2-asset-create-panel.v2-asset-ready,
.v2-asset-create-panel.show [data-ui-action],
.v2-asset-create-panel.v2-asset-ready [data-ui-action],
.v2-asset-create-panel.show button,
.v2-asset-create-panel.v2-asset-ready button,
.v2-asset-create-panel.show input,
.v2-asset-create-panel.v2-asset-ready input,
.v2-asset-create-panel.show textarea,
.v2-asset-create-panel.v2-asset-ready textarea,
.v2-asset-create-panel.show select,
.v2-asset-create-panel.v2-asset-ready select {
  pointer-events: auto !important;
}

/* Low zoom visual LOD: keep real media readable, but remove node chrome and
   reduce unresolved/empty nodes to quiet outlines so the canvas reads as a map. */
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .node-floating-toolbar,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .v2-img-toolbar,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .node-timer,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .node-video-meta,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .node-ref-bar,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .prompt-attachment-btn,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .video-controls,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .img-gen-btn,
body.is-zoom-low #v2-canvas .v2-node:not(.selected):not(.v2-selected):not(.conn-src) .upload-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src),
body.is-zoom-low #v2-canvas .v2-node.is-placeholder:not(.selected):not(.v2-selected):not(.conn-src) {
  opacity: 0.56 !important;
}

body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src) .node-card,
body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src) .v2-node-component,
body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src) .img-node-preview,
body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src) .video-node-preview,
body.is-zoom-low #v2-canvas .v2-node.is-placeholder:not(.selected):not(.v2-selected):not(.conn-src) .node-card,
body.is-zoom-low #v2-canvas .v2-node.is-placeholder:not(.selected):not(.v2-selected):not(.conn-src) .v2-node-component {
  background: rgba(255, 255, 255, 0.022) !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src) .img-node-placeholder,
body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src) .v2-node-fallback,
body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src) .empty-result,
body.is-zoom-low #v2-canvas .v2-node.no-result:not(.selected):not(.v2-selected):not(.conn-src) .placeholder {
  color: rgba(255, 255, 255, 0.18) !important;
  opacity: 0.28 !important;
}

/* P0-Perf-Rebase-1C: node drag + edge fast path.
   Keep drag interactions on transform + main SVG path only; defer expensive hit/bg paths. */
body.is-dragging-node #v2-canvas .connection-bg,
body.is-dragging-node #v2-canvas .connection-hit,
body.is-dragging #v2-canvas .connection-bg,
body.is-dragging #v2-canvas .connection-hit {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-dragging-node #v2-canvas .connection-main,
body.is-dragging #v2-canvas .connection-main {
  filter: none !important;
  stroke-width: 1.6px !important;
  shape-rendering: optimizeSpeed;
}

body.is-dragging-node #v2-canvas .connection-group,
body.is-dragging #v2-canvas .connection-group,
body.is-dragging-node #v2-edges-wrapper,
body.is-dragging #v2-edges-wrapper {
  pointer-events: none !important;
}

body.is-dragging-node #v2-canvas .v2-node,
body.is-dragging #v2-canvas .v2-node {
  transition: none !important;
  animation: none !important;
  filter: none !important;
}


/* P0-Perf-Rebase-1D: hub-node drag fast path.
   When a node has hundreds of connected SVG edges, live path rewriting is the bottleneck.
   Freeze the SVG edge layer during the drag and restore it on pointerup. */
body.is-heavy-edge-drag #v2-edges-wrapper,
body.is-heavy-edge-drag .v2-edges-wrapper,
body.is-heavy-edge-drag #v2-canvas svg,
body.is-heavy-edge-drag .connection-group,
body.is-heavy-edge-drag .connection-main,
body.is-heavy-edge-drag .connection-bg,
body.is-heavy-edge-drag .connection-hit {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.is-heavy-edge-drag .v2-node.is-drag-active {
  will-change: transform !important;
}

/* P0-Perf-Rebase-1E: high-degree drag ghost/proxy mode.
   When dragging a hub node with many connections, keep the real complex node parked
   and move a lightweight fixed overlay instead. This avoids repainting large media DOM
   while the cursor is moving. */
.v2-drag-proxy-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
  contain: strict;
}

.v2-drag-proxy-node {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 1px solid rgba(120, 170, 255, 0.92);
  border-radius: 10px;
  background: rgba(28, 32, 42, 0.82);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 10px 28px rgba(0,0,0,.30);
  transform-origin: 0 0;
  will-change: transform;
  overflow: hidden;
  contain: layout paint style;
}

.v2-drag-proxy-node::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events: none;
}

.v2-drag-proxy-label {
  position: absolute;
  left: 8px;
  top: 6px;
  right: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.v2-node.is-drag-proxy-source {
  visibility: hidden !important;
}


/* P0-3b: removed all :has(.img-ratio-popup) rules; popup open state is now class-driven. */

/* P0-3b: class-driven Seedance size/ratio popup layout. No :has() selectors. */
#v2-canvas .v2-node.ratio-popup-open,
#v2-canvas .v2-node.video-node.ratio-popup-open {
  z-index: 5000 !important;
  overflow: visible !important;
}

#v2-canvas .v2-node.ratio-popup-open .aigen-node-root,
#v2-canvas .v2-node.ratio-popup-open .text-prompt-panel,
#v2-canvas .v2-node.ratio-popup-open .prompt-panel-footer {
  overflow: visible !important;
}

#v2-canvas .v2-node.ratio-popup-open .prompt-panel-footer {
  z-index: 5001 !important;
}

#v2-canvas .v2-node.ratio-popup-open .img-ratio-wrap {
  position: relative !important;
  z-index: 5002 !important;
}

#v2-canvas .v2-node.ratio-popup-open .img-ratio-popup {
  top: calc(100% + 12px) !important;
  bottom: auto !important;
  z-index: 5003 !important;
  transform: none !important;
  animation: none !important;
  isolation: isolate !important;
}

/* P0-3b: while dragging, keep visible lines but remove invisible hit paths and transitions from the hot paint path. */
body.is-dragging #v2-canvas .connection-bg,
body.is-dragging-node #v2-canvas .connection-bg {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.is-dragging #v2-canvas #v2-edges,
body.is-dragging-node #v2-canvas #v2-edges {
  shape-rendering: optimizeSpeed !important;
}

body.is-dragging #v2-canvas .connection-main,
body.is-dragging-node #v2-canvas .connection-main {
  transition: none !important;
  filter: none !important;
}



/* P0-3c: Seedance prompt attachments stay in one horizontal row.
   Avoid wrapping into a second row, which changes panel height and triggers extra layout work. */
#v2-canvas .video-node .node-ref-bar,
#v2-canvas .image-node .node-ref-bar,
#v2-canvas .ai-video-node .node-ref-bar,
#v2-canvas .aigen-video-node .node-ref-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: calc(100% - 92px) !important;
  max-height: 58px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  contain: layout paint style !important;
}
#v2-canvas .video-node .node-ref-bar::-webkit-scrollbar,
#v2-canvas .image-node .node-ref-bar::-webkit-scrollbar,
#v2-canvas .ai-video-node .node-ref-bar::-webkit-scrollbar,
#v2-canvas .aigen-video-node .node-ref-bar::-webkit-scrollbar {
  display: none !important;
}
#v2-canvas .video-node .node-ref-bar .ref-thumb-wrap,
#v2-canvas .image-node .node-ref-bar .ref-thumb-wrap,
#v2-canvas .ai-video-node .node-ref-bar .ref-thumb-wrap,
#v2-canvas .aigen-video-node .node-ref-bar .ref-thumb-wrap {
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
}
#v2-canvas .video-node .node-ref-bar .ref-thumb-wrap img,
#v2-canvas .image-node .node-ref-bar .ref-thumb-wrap img,
#v2-canvas .ai-video-node .node-ref-bar .ref-thumb-wrap img,
#v2-canvas .aigen-video-node .node-ref-bar .ref-thumb-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* P0-3c: the ratio/resolution menu should not affect the preview stacking context. */
#v2-canvas .v2-node.ratio-popup-open .img-ratio-popup,
#v2-canvas .video-node .img-ratio-popup,
#v2-canvas .image-node .img-ratio-popup {
  top: calc(100% + 12px) !important;
  bottom: auto !important;
  z-index: 6000 !important;
}

/* P0-3c: during active node drag, remove costly backdrop/filter work inside the selected media node
   without hiding the visible node or connection lines. */
body.is-dragging-node #v2-canvas .v2-node.is-drag-active:not(.is-drag-media-lite),
body.is-dragging #v2-canvas .v2-node.is-drag-active:not(.is-drag-media-lite) {
  contain: layout style paint !important;
  will-change: transform !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.is-dragging-node #v2-canvas .v2-node.is-drag-active .node-floating-toolbar,
body.is-dragging-node #v2-canvas .v2-node.is-drag-active .prompt-panel-footer,
body.is-dragging-node #v2-canvas .v2-node.is-drag-active .img-ratio-popup,
body.is-dragging-node #v2-canvas .v2-node.is-drag-active .vid-duration-wrap,
body.is-dragging-node #v2-canvas .v2-node.is-drag-active .vid-duration-pop,
body.is-dragging #v2-canvas .v2-node.is-drag-active .node-floating-toolbar,
body.is-dragging #v2-canvas .v2-node.is-drag-active .prompt-panel-footer,
body.is-dragging #v2-canvas .v2-node.is-drag-active .img-ratio-popup,
body.is-dragging #v2-canvas .v2-node.is-drag-active .vid-duration-wrap,
body.is-dragging #v2-canvas .v2-node.is-drag-active .vid-duration-pop {
  visibility: hidden !important;
  pointer-events: none !important;
}


/* P0-3d: reference thumbs are a single 12-slot visual row.
   Only existing thumbnails are shown; no empty slots are rendered. */
#v2-canvas .video-node .node-ref-bar.active,
#v2-canvas .image-node .node-ref-bar.active,
#v2-canvas .ai-video-node .node-ref-bar.active,
#v2-canvas .aigen-video-node .node-ref-bar.active,
#v2-canvas .v2-node .node-ref-bar.active {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  height: 56px !important;
  max-height: 56px !important;
  overflow: hidden !important;
  padding: 6px 0 0 0 !important;
  margin-bottom: 0 !important;
}
#v2-canvas .video-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .image-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .ai-video-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .aigen-video-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .v2-node .node-ref-bar.active .prompt-attachment-btn {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
}
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 60px) !important;
  height: 52px !important;
  max-height: 52px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  contain: layout paint style !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container::-webkit-scrollbar {
  display: none !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  overflow: hidden !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap:nth-child(n+13) {
  display: none !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: cover !important;
}


/* P0-3e: stronger single-line reference thumb row.
   Show up to 12 existing thumbnails in one row; do not wrap into a second line. */
#v2-canvas .v2-node .node-ref-bar.active {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  height: 46px !important;
  max-height: 46px !important;
  overflow: hidden !important;
  padding: 2px 0 0 0 !important;
  margin: 0 !important;
}
#v2-canvas .v2-node .node-ref-bar.active .prompt-attachment-btn {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(12 * 42px + 11 * 8px) !important;
  height: 42px !important;
  max-height: 42px !important;
  overflow: hidden !important;
  contain: layout paint style !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  overflow: hidden !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap:nth-child(n+13) {
  display: none !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: cover !important;
}

/* P0-3f: media drag lite mode.
   For connected image/video nodes, painting the full media DOM at high zoom is the bottleneck.
   During active drag, replace heavy child painting with a single lightweight thumbnail layer.
   The node shape and all connection lines remain visible; the full DOM is restored on pointerup. */
body.is-dragging-node #v2-canvas .v2-node.is-drag-media-lite,
body.is-dragging #v2-canvas .v2-node.is-drag-media-lite {
  position: absolute !important;
  contain: layout paint style !important;
  will-change: transform !important;
  overflow: hidden !important;
  background: var(--bg-node) !important;
}
body.is-dragging-node #v2-canvas .v2-node.is-drag-media-lite > *,
body.is-dragging #v2-canvas .v2-node.is-drag-media-lite > * {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.is-dragging-node #v2-canvas .v2-node.is-drag-media-lite::after,
body.is-dragging #v2-canvas .v2-node.is-drag-media-lite::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--bg-node);
  background-image: var(--drag-lite-thumb);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  box-shadow: inset 0 0 0 1px var(--white-18);
}
body.is-dragging-node #v2-canvas .v2-node.is-drag-media-lite::before,
body.is-dragging #v2-canvas .v2-node.is-drag-media-lite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--white-35), 0 12px 32px var(--black-40);
}

/* Prompt lock guard: during viewport/node gestures, prompt panels must never
   receive pointer/focus hits, including selected nodes and legacy node-base rules. */
body.is-panning #v2-canvas .text-prompt-panel,
body.is-zooming #v2-canvas .text-prompt-panel,
body.is-dragging-node #v2-canvas .text-prompt-panel,
body.is-dragging #v2-canvas .text-prompt-panel,
body.is-viewport-animating #v2-canvas .text-prompt-panel,
body.is-canvas-interacting #v2-canvas .text-prompt-panel,
body.is-panning #v2-canvas .prompt-textarea,
body.is-zooming #v2-canvas .prompt-textarea,
body.is-dragging-node #v2-canvas .prompt-textarea,
body.is-dragging #v2-canvas .prompt-textarea,
body.is-viewport-animating #v2-canvas .prompt-textarea,
body.is-canvas-interacting #v2-canvas .prompt-textarea {
  pointer-events: none !important;
  user-select: none !important;
  cursor: var(--grab-cursor) !important;
}

body:not(.is-editing-prompt):not(.is-panning):not(.is-zooming):not(.is-dragging-node):not(.is-dragging):not(.is-canvas-interacting) #v2-canvas .v2-node.selected .text-prompt-panel .prompt-textarea,
body:not(.is-editing-prompt):not(.is-panning):not(.is-zooming):not(.is-dragging-node):not(.is-dragging):not(.is-canvas-interacting) #v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-textarea,
body:not(.is-editing-prompt):not(.is-panning):not(.is-zooming):not(.is-dragging-node):not(.is-dragging):not(.is-canvas-interacting) #v2-canvas .v2-node.is-focus-context .text-prompt-panel .prompt-textarea {
  pointer-events: auto !important;
  user-select: none !important;
  cursor: var(--pointer-cursor) !important;
}

body.is-editing-prompt:not(.is-panning):not(.is-zooming):not(.is-dragging-node):not(.is-dragging):not(.is-canvas-interacting) #v2-canvas .v2-node.selected .text-prompt-panel .prompt-textarea,
body.is-editing-prompt:not(.is-panning):not(.is-zooming):not(.is-dragging-node):not(.is-dragging):not(.is-canvas-interacting) #v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-textarea,
body.is-editing-prompt:not(.is-panning):not(.is-zooming):not(.is-dragging-node):not(.is-dragging):not(.is-canvas-interacting) #v2-canvas .v2-node.is-focus-context .text-prompt-panel .prompt-textarea {
  pointer-events: auto !important;
  user-select: text !important;
  cursor: text !important;
}

/* Interaction fast path: reduce edge rendering load while canvas/nodes are moving.
   Keep edges visible but low-opacity so layout calculations remain valid for connection anchors. */
body.is-panning #v2-edges-wrapper,
body.is-zooming #v2-edges-wrapper,
body.is-dragging-node #v2-edges-wrapper,
body.is-panning #v2-canvas #v2-edges,
body.is-zooming #v2-canvas #v2-edges,
body.is-dragging-node #v2-canvas #v2-edges {
  opacity: 0.25 !important;
  pointer-events: none !important;
  transition: none !important;
  filter: none !important;
}

/* During generic dragging (not node-specific), keep minimal edge visibility for anchors */
body.is-dragging:not(.is-dragging-node) #v2-edges-wrapper,
body.is-dragging:not(.is-dragging-node) #v2-canvas #v2-edges {
  opacity: 0.1 !important;
  pointer-events: none !important;
  transition: none !important;
  filter: none !important;
}

/* P0-3f: stronger 12-thumb single row. Shrink thumbs slightly so 12 visible refs fit in one line. */
#v2-canvas .v2-node .node-ref-bar.active {
  height: 40px !important;
  max-height: 40px !important;
  gap: 6px !important;
  overflow: hidden !important;
  padding-top: 2px !important;
}
#v2-canvas .v2-node .node-ref-bar.active .prompt-attachment-btn {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container {
  gap: 6px !important;
  height: 36px !important;
  max-height: 36px !important;
  max-width: calc(12 * 36px + 11 * 6px) !important;
  overflow: hidden !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: cover !important;
}


/* P0-3g: stronger 12-thumbnail single-row layout. */
#v2-canvas .video-node .node-ref-bar.active,
#v2-canvas .image-node .node-ref-bar.active,
#v2-canvas .ai-video-node .node-ref-bar.active,
#v2-canvas .aigen-video-node .node-ref-bar.active,
#v2-canvas .v2-node .node-ref-bar.active {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-auto-flow: column !important;
  align-items: center !important;
  column-gap: 8px !important;
  width: calc(100% - 20px) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 42px !important;
  max-height: 42px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
#v2-canvas .video-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .image-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .ai-video-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .aigen-video-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .v2-node .node-ref-bar.active .prompt-attachment-btn {
  grid-column: 1 !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
}
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container {
  grid-column: 2 !important;
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 34px !important;
  grid-template-columns: repeat(12, 34px) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 6px !important;
  width: min(474px, 100%) !important;
  max-width: min(474px, 100%) !important;
  min-width: 0 !important;
  height: 36px !important;
  max-height: 36px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  contain: layout paint style !important;
}
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container::-webkit-scrollbar,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container::-webkit-scrollbar,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container::-webkit-scrollbar,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container::-webkit-scrollbar,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container::-webkit-scrollbar {
  display: none !important;
}
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap:nth-child(n+13),
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap:nth-child(n+13),
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap:nth-child(n+13),
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap:nth-child(n+13),
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap:nth-child(n+13) {
  display: none !important;
}
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img {
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: cover !important;
}

#v2-drag-edge-preview-canvas {
  pointer-events: none !important;
  image-rendering: auto !important;
}

/* P0-3h: compact 12-thumb single row override. 30px thumbs allow 12 refs to fit in the prompt node width. */
#v2-canvas .v2-node .node-ref-bar.active,
#v2-canvas .video-node .node-ref-bar.active,
#v2-canvas .image-node .node-ref-bar.active,
#v2-canvas .ai-video-node .node-ref-bar.active,
#v2-canvas .aigen-video-node .node-ref-bar.active {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  column-gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  max-height: 36px !important;
  overflow: hidden !important;
}
#v2-canvas .v2-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .video-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .image-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .ai-video-node .node-ref-bar.active .prompt-attachment-btn,
#v2-canvas .aigen-video-node .node-ref-bar.active .prompt-attachment-btn {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  border-radius: 8px !important;
  animation: none !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 2 !important;
}
#v2-canvas .v2-node .node-ref-bar.active .prompt-attachment-btn svg,
#v2-canvas .video-node .node-ref-bar.active .prompt-attachment-btn svg,
#v2-canvas .image-node .node-ref-bar.active .prompt-attachment-btn svg,
#v2-canvas .ai-video-node .node-ref-bar.active .prompt-attachment-btn svg,
#v2-canvas .aigen-video-node .node-ref-bar.active .prompt-attachment-btn svg {
  width: 24px !important;
  height: 24px !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 30px !important;
  grid-template-columns: repeat(12, 30px) !important;
  margin-left: 0 !important;
  gap: 5px !important;
  align-items: center !important;
  justify-content: start !important;
  width: min(415px, 100%) !important;
  max-width: min(415px, 100%) !important;
  height: 32px !important;
  max-height: 32px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap,
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-delete,
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-delete,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container .ref-thumb-delete,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-delete,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-delete {
  top: 0 !important;
  right: 0 !important;
  width: 12px !important;
  height: 12px !important;
  font-size: 9px !important;
  line-height: 1 !important;
}
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .v2-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img,
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .image-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .ai-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-media,
#v2-canvas .aigen-video-node .node-ref-bar.active .ref-thumb-container .ref-thumb-wrap img {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  object-fit: cover !important;
}

body .v2-asset-sidebar-panel.v2-asset-ready:not(.show),
body .v2-asset-sidebar-panel:not(.show) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translateY(-50%) translateX(-24px) !important;
}

.canvas-header-right-ready {
  gap: 8px;
  flex-wrap: nowrap;
  max-width: calc(100vw - 340px);
  overflow: visible;
}

.billing-balance-chip,
.billing-user-chip {
  min-height: 30px;
  border: 1px solid var(--white-10);
  border-radius: 999px;
  background: var(--bg-panel-card);
  color: var(--white-78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.billing-balance-chip {
  max-width: 130px;
}

.billing-user-chip {
  min-width: 210px;
  max-width: none;
  height: 42px;
}

.billing-balance-chip:hover,
.billing-user-chip:hover {
  background: var(--white-08);
  color: var(--white);
}

.billing-balance-chip-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: 0 0 auto;
}

.billing-balance-chip-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.billing-balance-chip-value[data-insufficient="1"] {
  color: var(--red-light);
}

.billing-user-chip-team {
  color: var(--white-40);
}

/* ponytail: is-hidden is opacity-only; zoom-low selected toolbar uses opacity:1 !important */
#v2-canvas .panorama-scene-component .node-floating-toolbar.v2-panorama-scene-toolbar.is-hidden,
#v2-canvas .panorama-scene-component .node-floating-toolbar.v2-panorama-mode-toolbar.is-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.panorama-scene-component.is-director-iframe .act-fullscreen,
.panorama-scene-component.is-director-iframe .act-upload-panorama {
  display: none !important;
}

.panorama-scene-component:not(.is-director-iframe) .v2-panorama-scene-toolbar .act-open-director-standalone {
  display: none !important;
}

.panorama-scene-component.is-director-iframe .panorama-scene-bottom-toolbar-anchor,
.panorama-scene-component.is-director-iframe .panorama-scene-fixed-toolbar,
.panorama-scene-component.is-director-iframe .v2-panorama-scene-corner-toolbar,
.panorama-scene-component.is-director-iframe .panorama-scene-capture-safe-frame,
.panorama-scene-component.is-director-iframe .panorama-scene-fixed-info-dock {
  display: none !important;
}

.panorama-scene-component.is-director-iframe.is-editing .v2-panorama-mode-toolbar .panorama-scene-tool-btn:not(.panorama-scene-toolbar-btn--collapse):not(.act-open-director-standalone):not(.panorama-scene-close-btn),
.panorama-scene-component.is-director-iframe.is-editing .v2-panorama-mode-toolbar .ftb-divider,
.panorama-scene-component.is-director-iframe.is-editing .v2-panorama-mode-toolbar .toolbar-divider {
  display: none !important;
}

.panorama-scene-component.is-director-iframe.is-editing .v2-panorama-mode-toolbar .act-open-director-standalone {
  display: inline-flex !important;
}

.panorama-scene-component.is-director-iframe.is-editing .v2-panorama-mode-toolbar,
.panorama-scene-component.is-director-iframe:not(.is-editing) .v2-panorama-scene-toolbar {
  z-index: 130;
  pointer-events: auto;
}

.panorama-scene-component.is-director-iframe.is-editing .v2-panorama-scene-corner-toolbar,
.panorama-scene-component.is-director-iframe.is-editing .panorama-scene-bottom-toolbar-anchor,
.panorama-scene-component.is-director-iframe.is-editing .panorama-scene-capture-safe-frame {
  display: none !important;
}

.panorama-scene-component.is-director-iframe .panorama-scene-viewport {
  overflow: hidden;
}

.panorama-scene-component.is-director-iframe.is-editing .panorama-scene-viewport::before {
  display: none;
}

.panorama-director-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 16px;
  border: none;
  background: transparent;
  color: var(--white-85);
  cursor: grab;
  font: inherit;
  pointer-events: auto;
}

.panorama-director-placeholder:active {
  cursor: grabbing;
}

.panorama-director-placeholder__title {
  font-size: 15px;
  font-weight: 600;
}

.panorama-director-placeholder__hint {
  font-size: 12px;
  color: var(--white-60);
}

.panorama-director-placeholder:hover .panorama-director-placeholder__hint {
  color: var(--white-85);
}

.panorama-scene-component.is-director-iframe.is-editing .panorama-director-placeholder {
  pointer-events: none;
}

.panorama-scene-component .node-resizer {
  z-index: 120;
  transform: scale(var(--zoom-inv-raw, var(--zoom-inv, 1)));
  transform-origin: center;
}

.v2-node.selected.panorama-scene-node .node-resizer,
.v2-node.panorama-scene-node:hover .node-resizer {
  opacity: 1;
}

/* Fix: popup panels inside text-prompt-panel need pointer-events for selected nodes */
#v2-canvas .v2-node.selected .text-prompt-panel .floating-menu,
#v2-canvas .v2-node.selected .text-prompt-panel .floating-menu *,
#v2-canvas .v2-node.selected .text-prompt-panel .img-ratio-popup,
#v2-canvas .v2-node.selected .text-prompt-panel .img-ratio-popup *,
#v2-canvas .v2-node.selected .text-prompt-panel .vid-mode-menu,
#v2-canvas .v2-node.selected .text-prompt-panel .vid-mode-menu *,
#v2-canvas .v2-node.selected .text-prompt-panel .vid-duration-pop,
#v2-canvas .v2-node.selected .text-prompt-panel .vid-duration-pop *,
#v2-canvas .v2-node.selected .text-prompt-panel .rh-vram-adv-panel,
#v2-canvas .v2-node.selected .text-prompt-panel .rh-vram-adv-panel *,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .floating-menu,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .floating-menu *,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .img-ratio-popup,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .img-ratio-popup *,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .vid-mode-menu,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .vid-mode-menu *,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .vid-duration-pop,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .vid-duration-pop *,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .rh-vram-adv-panel,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .rh-vram-adv-panel *,
#v2-canvas .v2-node.conn-src .text-prompt-panel .floating-menu,
#v2-canvas .v2-node.conn-src .text-prompt-panel .floating-menu *,
#v2-canvas .v2-node.conn-src .text-prompt-panel .img-ratio-popup,
#v2-canvas .v2-node.conn-src .text-prompt-panel .img-ratio-popup *,
#v2-canvas .v2-node.conn-src .text-prompt-panel .vid-mode-menu,
#v2-canvas .v2-node.conn-src .text-prompt-panel .vid-mode-menu *,
#v2-canvas .v2-node.conn-src .text-prompt-panel .vid-duration-pop,
#v2-canvas .v2-node.conn-src .text-prompt-panel .vid-duration-pop *,
#v2-canvas .v2-node.conn-src .text-prompt-panel .rh-vram-adv-panel,
#v2-canvas .v2-node.conn-src .text-prompt-panel .rh-vram-adv-panel * {
  pointer-events: auto !important;
}

/* Video provider menus must escape the canvas-wide z-index reset. The menu
   placement helper writes the same values inline, while these targeted
   !important rules win over `#v2-canvas * { z-index: auto !important; }`. */
#v2-canvas .video-node .text-prompt-panel .img-model-menu[data-video-provider-menu] {
  z-index: 1400 !important;
}

#v2-canvas .video-node .text-prompt-panel .img-model-menu[data-video-provider-menu] > .volcano-submenu {
  z-index: 1401 !important;
}

/* Keep the audio workflow menu above the prompt attachment control without
   changing any audio generation request or workflow selection behavior. */
#v2-canvas .audio-node .text-prompt-panel .prompt-panel-footer {
  z-index: 40 !important;
}

#v2-canvas .audio-node .text-prompt-panel .img-model-wrap {
  z-index: 41 !important;
}

#v2-canvas .audio-node .text-prompt-panel .img-model-menu {
  z-index: 42 !important;
  isolation: isolate;
}

/* Panorama browser mode must sit above the account/project header so its
   exit control remains visible and receives the click. */
.panorama-scene-browser-fullscreen {
  z-index: 20000 !important;
  isolation: isolate;
}

.panorama-scene-browser-fullscreen__exit {
  top: auto !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 30 !important;
  height: 36px;
  padding: 0 14px;
  box-shadow: 0 8px 24px var(--black-55);
}

/* Global prompt hit-layer contract: selecting text must never take priority
   over a node's footer, reference strip, or an open parameter menu. */
#v2-canvas .text-prompt-panel .node-ref-bar {
  position: relative;
  z-index: 4;
}

#v2-canvas .text-prompt-panel .prompt-panel-footer {
  position: relative;
  z-index: 5;
  isolation: isolate;
}

body.is-editing-prompt #v2-canvas .text-prompt-panel :is(
  .node-ref-bar,
  .node-ref-bar *,
  .prompt-panel-footer,
  .prompt-panel-footer *,
  .floating-menu,
  .floating-menu *,
  .img-model-menu,
  .img-model-menu *,
  .img-ratio-popup,
  .img-ratio-popup *,
  .vid-mode-menu,
  .vid-mode-menu *,
  .vid-duration-pop,
  .vid-duration-pop *,
  .dreamina-task-model-menu,
  .dreamina-task-model-menu *,
  .rh-vram-adv-panel,
  .rh-vram-adv-panel *,
  .audio-speaker-wrap,
  .audio-speaker-wrap *,
  .audio-duration-wrap,
  .audio-duration-wrap *,
  .audio-voice-library,
  .audio-voice-library *,
  button,
  select,
  input
) {
  pointer-events: auto !important;
  cursor: var(--pointer-cursor) !important;
}