/* Canvas TapNow theme - node cards and graph connection controls. */

/* Nodes and graph connection controls */
.canvas-page .canvas-node {
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: #1f1f1f;
  box-shadow: none;
  transition: border-color var(--canvas-motion-fast), background var(--canvas-motion-fast), box-shadow var(--canvas-motion-fast), filter var(--canvas-motion-fast);
}

.canvas-page .canvas-node.hovered:not(.selected) {
  border-color: rgba(255, 255, 255, 0.45);
  background: #1f1f1f;
  box-shadow: none;
}

.canvas-page .canvas-node.selected,
.canvas-page .canvas-node-image_asset.selected:has(.canvas-media-thumb img[src]),
.canvas-page .canvas-node-video_asset.selected:has(.canvas-media-thumb video[src]) {
  border-color: rgb(122, 122, 122);
  background: #1f1f1f;
  box-shadow: 0 0 0 1px rgb(122, 122, 122);
}

.canvas-page .canvas-node.is-dragging:not(.selected) {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.54);
}

.canvas-page .canvas-node-image_asset:has(.canvas-media-thumb img[src]) {
  border-color: rgba(255, 255, 255, 0.2);
  background: #0f0f0f;
  box-shadow: none;
}

.canvas-page .canvas-node-video_asset:has(.canvas-media-thumb video[src]) {
  border-color: rgba(255, 255, 255, 0.2);
  background: #0f0f0f;
  box-shadow: none;
}

.canvas-page .canvas-node-image_asset.hovered:not(.selected):has(.canvas-media-thumb img[src]) {
  border-color: rgba(255, 255, 255, 0.45);
}

.canvas-page .canvas-node-video_asset.hovered:not(.selected):has(.canvas-media-thumb video[src]) {
  border-color: rgba(255, 255, 255, 0.45);
}

.canvas-page .canvas-node-head {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.canvas-page .canvas-node-title {
  color: rgba(245, 245, 245, 0.6);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.72);
}

.canvas-page .canvas-node.selected .canvas-node-title {
  color: var(--canvas-text);
}

.canvas-page .canvas-node-body,
.canvas-page .canvas-node-placeholder,
.canvas-page .canvas-generation-empty,
.canvas-page .canvas-node-muted,
.canvas-page .canvas-status,
.canvas-page .canvas-input-slots,
.canvas-page .canvas-panel-asset-note {
  color: var(--canvas-text-muted);
}

.canvas-page .canvas-connect-plus,
.canvas-page .canvas-connect-handle,
.canvas-page .canvas-input-ring {
  border-color: rgba(255, 255, 255, 0.38);
  background: #262626;
  color: var(--canvas-text);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42), inset 0 0.5px 0 rgba(255, 255, 255, 0.16), 0 0 0 6px rgba(255, 255, 255, 0.055);
}

.canvas-page .canvas-connect-plus::before,
.canvas-page .canvas-connect-plus::after {
  background: #f5f5f5;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.38);
}

.canvas-page .canvas-input-ring::after {
  border-color: #f5f5f5;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.34);
}

.canvas-page .canvas-connect-zone:hover .canvas-connect-plus {
  border-color: #ffffff;
  background: var(--canvas-surface-raised);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.46), inset 0 0.5px 0 rgba(255, 255, 255, 0.18), 0 0 0 8px rgba(255, 255, 255, 0.08);
}