.nodeView {
  position: absolute;
  background-color: var(--node-editor-control-background, #ffffff);
  border: none;
  border-radius: var(--node-editor-radius-sm);
  box-shadow: var(--node-editor-shadow-sm);
  min-width: 150px;
  min-height: 50px;
  cursor: move;
  transition: box-shadow var(--node-editor-transition-duration);
  display: flex;
  flex-direction: column;
  overflow: visible;
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.nodeView::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: var(--node-editor-input-border);
  border-radius: var(--node-editor-radius-sm);
  pointer-events: none;
  transition: border-color var(--node-editor-transition-duration);
}

.nodeView:hover {
  box-shadow: var(--node-editor-shadow-md);
}

/* Locked nodes should not be visually highlighted beyond the icon */
.nodeView[data-locked="true"] {}

.nodeView[data-selected="true"] {
  box-shadow: var(--node-editor-shadow-md);
}

.nodeView[data-selected="true"]::before {
  border-color: var(--node-editor-accent-color, #0066cc);
}

.nodeView[data-dragging="true"] {
  cursor: grabbing;
}

/* Hint the browser during continuous transforms. */
.nodeView[data-dragging="true"],
.nodeView[data-resizing="true"] {
  will-change: transform;
}

/* Resizing changes both geometry and position (for west/north handles). */
.nodeView[data-resizing="true"] {
  will-change: transform, width, height;
}

.nodeView[data-is-group="true"] {
  /* Subdued, token-driven appearance */
  background-color: var(--node-editor-group-node-background,
      color-mix(in srgb, var(--node-editor-separator-color, rgba(0, 0, 0, 0.12)) 6%, transparent));
  box-shadow: none;
  z-index: var(--node-editor-z-index-group);
}

.nodeView[data-is-group="true"]::before {
  border-style: dashed;
  border-width: 1px;
  border-color: var(--node-editor-group-node-border, var(--node-editor-divider-color, rgba(0, 0, 0, 0.12)));
}

.nodeView[data-is-group="true"][data-has-children="true"] {
  background-color: var(--node-editor-group-node-active-background,
      color-mix(in srgb, var(--node-editor-accent-color, #0066cc) 8%, transparent));
}

.nodeView[data-is-group="true"][data-has-children="true"]::before {
  border-color: var(--node-editor-group-node-active-color,
      color-mix(in srgb,
        var(--node-editor-accent-color, #0066cc) 45%,
        var(--node-editor-divider-color, rgba(0, 0, 0, 0.12))));
}

.nodeView[data-visual-state="info"] {
  background-color: rgba(0, 102, 204, 0.05);
}

.nodeView[data-visual-state="info"]::before {
  border-color: var(--node-editor-accent-color, #0066cc);
}

.nodeView[data-visual-state="success"] {
  background-color: rgba(52, 199, 89, 0.05);
}

.nodeView[data-visual-state="success"]::before {
  border-color: var(--node-editor-success-color, #34c759);
}

.nodeView[data-visual-state="warning"] {
  background-color: rgba(255, 149, 0, 0.05);
}

.nodeView[data-visual-state="warning"]::before {
  border-color: var(--node-editor-warning-color, #ff9500);
}

.nodeView[data-visual-state="error"] {
  background-color: rgba(255, 59, 48, 0.05);
}

.nodeView[data-visual-state="error"]::before {
  border-color: var(--node-editor-caution-color, #ff3b30);
}

.nodeView[data-visual-state="disabled"] {
  opacity: var(--node-editor-opacity-disabled);
  pointer-events: none;
}

/* Placeholder for resizing state */
.nodeView[data-resizing="true"] {}

/* Decoration-less node appearance for label-like nodes */
.nodeView[data-plain-node="true"] {
  background-color: transparent;
  box-shadow: none;
  min-width: unset;
  min-height: unset;
}

.nodeView[data-plain-node="true"]::before {
  border-color: transparent;
  transition: border-color var(--node-editor-transition-duration);
}

.nodeView[data-plain-node="true"]:hover::before {
  border-color: var(--node-editor-divider-color, rgba(0, 0, 0, 0.12));
}

.nodeView[data-plain-node="true"][data-selected="true"]::before {
  border-color: var(--node-editor-accent-color, #0066cc);
}

.nodeView[data-plain-node="true"][data-selected="true"],
.nodeView[data-plain-node="true"]:hover,
.nodeView[data-plain-node="true"][data-locked="true"],
.nodeView[data-plain-node="true"][data-dragging="true"] {
  box-shadow: none;
}

/* Nodes with disabled outline: set highlight colors to transparent */
.nodeView[data-disable-outline="true"] {
  --node-editor-accent-color: transparent;
  --node-editor-input-border: 1px solid transparent;
  --node-editor-shadow-sm: none;
  --node-editor-shadow-md: none;
  background-color: transparent;
}

/* Unknown/Corrupted node type styling */
.nodeView[data-unknown-type="true"] {
  background: linear-gradient(135deg, #2a1010 0%, #1a0808 100%);
  border: 1px solid rgba(200, 60, 60, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nodeView[data-unknown-type="true"]::before {
  border: none;
}

.nodeView[data-unknown-type="true"][data-selected="true"] {
  border-color: #c84040;
  box-shadow: 0 2px 12px rgba(200, 64, 64, 0.3);
}

/* Override group node styles for unknown types */
.nodeView[data-unknown-type="true"][data-is-group="true"],
.nodeView[data-unknown-type="true"][data-is-group="true"][data-has-children="true"] {
  background: linear-gradient(135deg, #2a1010 0%, #1a0808 100%);
  border: 1px dashed rgba(200, 60, 60, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nodeView[data-unknown-type="true"][data-is-group="true"]::before,
.nodeView[data-unknown-type="true"][data-is-group="true"][data-has-children="true"]::before {
  border: none;
}

/* Override plain/label node styles for unknown types */
.nodeView[data-unknown-type="true"][data-plain-node="true"] {
  background: linear-gradient(135deg, #2a1010 0%, #1a0808 100%);
  border: 1px solid rgba(200, 60, 60, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 150px;
  min-height: 50px;
}

.nodeView[data-unknown-type="true"][data-plain-node="true"]::before {
  border: none;
}

.nodeView[data-unknown-type="true"][data-plain-node="true"]:hover::before {
  border: none;
}