/* Canonical reference, prompt interaction, and low-zoom reference presentation. */
.ref-pill.is-stale {
  border-color: rgba(255, 165, 0, 0.45);
  background: rgba(255, 165, 0, 0.1);
  color: rgba(255, 214, 153, 0.9);
  text-decoration: line-through;
  opacity: 0.78;
}

#v2-canvas .ref-thumb-wrap.highlight {
  outline: 2px solid var(--blue-70, rgba(96, 165, 250, 0.95));
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
  transform: scale(1.08);
  z-index: 3;
  position: relative;
}

.text-prompt-panel .node-ref-bar.active .ref-thumb-wrap.highlight {
  outline: 2px solid rgba(96, 165, 250, 0.98) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.42) !important;
}

#v2-canvas .ref-pill.is-ref-hover {
  border-color: var(--blue-70, rgba(96, 165, 250, 0.95));
  background: rgba(59, 130, 246, 0.22);
}

/* Reference pills remain interactive while the canonical prompt panel owns pointer routing. */
#v2-canvas .v2-node.selected .text-prompt-panel .ref-pill,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .ref-pill,
#v2-canvas .v2-node.conn-src .text-prompt-panel .ref-pill,
body.is-editing-prompt #v2-canvas .text-prompt-panel .ref-pill {
  pointer-events: auto !important;
  cursor: var(--pointer-cursor) !important;
}

/* footer controls sit under .text-prompt-panel * { pointer-events: none } */
#v2-canvas .v2-node.selected .text-prompt-panel .img-gen-btn,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .img-gen-btn,
#v2-canvas .v2-node.conn-src .text-prompt-panel .img-gen-btn,
#v2-canvas .v2-node.selected .text-prompt-panel .prompt-submit,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-submit,
#v2-canvas .v2-node.conn-src .text-prompt-panel .prompt-submit,
#v2-canvas .v2-node.selected .text-prompt-panel .billing-generate-cost-chip,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .billing-generate-cost-chip,
#v2-canvas .v2-node.conn-src .text-prompt-panel .billing-generate-cost-chip,
#v2-canvas .v2-node.selected .text-prompt-panel .img-pill-btn,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .img-pill-btn,
#v2-canvas .v2-node.conn-src .text-prompt-panel .img-pill-btn {
  pointer-events: auto !important;
  cursor: var(--pointer-cursor) !important;
}

/*
 * Free-angle controls are embedded inside text-prompt-panel. The canvas-wide
 * prompt rule intentionally disables child pointer events until a node is
 * selected, so this tool needs an explicit interaction boundary of its own.
 */
#v2-canvas .v2-node.selected .text-prompt-panel .v2-free-angle-embedded,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .v2-free-angle-embedded,
#v2-canvas .v2-node.conn-src .text-prompt-panel .v2-free-angle-embedded,
#v2-canvas .v2-node.selected .text-prompt-panel .v2-free-angle-embedded .fa-preview-area,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .v2-free-angle-embedded .fa-preview-area,
#v2-canvas .v2-node.conn-src .text-prompt-panel .v2-free-angle-embedded .fa-preview-area,
#v2-canvas .v2-node.selected .text-prompt-panel .v2-free-angle-embedded .fa-slider,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .v2-free-angle-embedded .fa-slider,
#v2-canvas .v2-node.conn-src .text-prompt-panel .v2-free-angle-embedded .fa-slider,
#v2-canvas .v2-node.selected .text-prompt-panel .v2-free-angle-embedded button,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .v2-free-angle-embedded button,
#v2-canvas .v2-node.conn-src .text-prompt-panel .v2-free-angle-embedded button {
  pointer-events: auto !important;
}

#v2-canvas .v2-node.selected .text-prompt-panel .v2-free-angle-embedded .fa-slider,
#v2-canvas .v2-node.v2-selected .text-prompt-panel .v2-free-angle-embedded .fa-slider,
#v2-canvas .v2-node.conn-src .text-prompt-panel .v2-free-angle-embedded .fa-slider {
  cursor: pointer !important;
}

.text-prompt-panel .node-ref-bar.active .ref-thumb-wrap.highlight .ref-thumb-media,
.text-prompt-panel .node-ref-bar.active .ref-thumb-wrap.highlight img {
  transform: scale(1.2) !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.95), 0 4px 14px rgba(59, 130, 246, 0.45) !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node img,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node video,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node canvas,
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 .video-node-preview,
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 .node-card.media-card {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node .img-node-preview,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node .video-node-preview,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node .node-card.media-card {
  pointer-events: auto !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src {
  contain: layout style !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .text-prompt-panel,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .text-prompt-panel,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .text-prompt-panel {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 20 !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .prompt-panel-footer,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .prompt-panel-footer,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .prompt-panel-footer {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .prompt-textarea,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .prompt-textarea,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .prompt-textarea {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .img-gen-btn,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .img-gen-btn,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .img-gen-btn {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .text-prompt-panel .img-pill-btn,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .text-prompt-panel .img-pill-btn,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .text-prompt-panel .img-pill-btn,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .text-prompt-panel .node-ref-bar,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .text-prompt-panel .node-ref-bar,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .text-prompt-panel .node-ref-bar,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .text-prompt-panel .ref-thumb-wrap,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .text-prompt-panel .ref-thumb-wrap,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .text-prompt-panel .ref-thumb-wrap,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .text-prompt-panel .prompt-attachment-btn,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .text-prompt-panel .prompt-attachment-btn,
body.is-zoom-low:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .text-prompt-panel .prompt-attachment-btn {
  pointer-events: auto !important;
}

body.is-zoom-low:not(.is-editing-prompt):not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .prompt-textarea,
body.is-zoom-low:not(.is-editing-prompt):not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .prompt-textarea,
body.is-zoom-low:not(.is-editing-prompt):not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .prompt-textarea {
  cursor: var(--pointer-cursor) !important;
  user-select: none !important;
}

body.is-zoom-low.is-editing-prompt:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.selected .prompt-textarea,
body.is-zoom-low.is-editing-prompt:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.v2-selected .prompt-textarea,
body.is-zoom-low.is-editing-prompt:not(.is-panning):not(.is-zooming):not(.is-dragging):not(.is-dragging-node) #v2-canvas .v2-node.conn-src .prompt-textarea {
  cursor: var(--text-cursor) !important;
  user-select: text !important;
}

/* Empty text prompts use the canvas connector; reveal references only after a link exists. */
.aigen-text-node-root .text-prompt-panel .node-ref-bar:not(.active) {
  display: none !important;
}

.aigen-text-node-root .text-prompt-panel .node-ref-bar:not(.active) + .prompt-input-wrapper {
  box-sizing: border-box !important;
  padding-left: 0 !important;
}

.text-prompt-panel .node-ref-bar.active {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  column-gap: 6px !important;
  align-items: center !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin-bottom: 4px !important;
  overflow: hidden !important;
}

.text-prompt-panel .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;
}

.text-prompt-panel .node-ref-bar.active .prompt-attachment-btn svg {
  width: 24px !important;
  height: 24px !important;
}

.text-prompt-panel .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;
  gap: 5px !important;
  align-items: center !important;
  justify-content: start !important;
  margin-left: 0 !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;
}