.editor-shell.relation-tool-active,
.editor-shell.relation-tool-active .react-flow__pane {
  cursor: crosshair;
}

.relation-tool-button.active {
  color: #6d4bd1;
  background: #f0ebff;
  box-shadow: inset 0 0 0 1px rgba(109, 75, 209, 0.28);
}

.mind-node.relation-connectable {
  cursor: crosshair;
  transition:
    box-shadow 120ms ease,
    transform 120ms ease,
    filter 120ms ease;
}

.mind-node.relation-source {
  box-shadow: 0 0 0 3px rgba(138, 99, 210, 0.34), 0 8px 24px rgba(75, 52, 142, 0.16);
}

.mind-node.relation-target {
  box-shadow: 0 0 0 4px rgba(255, 139, 38, 0.42), 0 10px 28px rgba(255, 139, 38, 0.2);
  filter: brightness(1.02);
  transform: scale(1.025);
}

.relation-tool-preview {
  position: fixed;
  inset: 0;
  z-index: 10020;
  width: 100vw;
  height: 100vh;
  overflow: visible;
  pointer-events: none;
}

.relation-tool-preview path {
  fill: none;
  stroke: #8a63d2;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 7;
  animation: mapas-relation-dash 700ms linear infinite;
  filter: drop-shadow(0 2px 4px rgba(79, 52, 158, 0.24));
}

.relation-tool-preview circle {
  fill: #ff8b26;
  stroke: #fff;
  stroke-width: 2;
}

.relation-endpoint-handle {
  fill: #fff;
  stroke: #8a63d2;
  stroke-width: 2.5;
  cursor: grab;
  pointer-events: all;
  filter: drop-shadow(0 2px 4px rgba(79, 52, 158, 0.24));
}

.relation-endpoint-handle:hover {
  fill: #f3efff;
  stroke-width: 3;
}

.relation-endpoint-handle:active {
  cursor: grabbing;
}

.react-flow__node.relation-endpoint-candidate .mind-node {
  box-shadow: 0 0 0 4px rgba(255, 139, 38, 0.42), 0 10px 28px rgba(255, 139, 38, 0.2);
  filter: brightness(1.02);
}

.relation-inline-label-foreign {
  overflow: visible;
  pointer-events: all;
}

.relation-inline-label,
.relation-inline-label-input {
  display: block;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgba(138, 99, 210, 0.28);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.97);
  color: #34313d;
  font: 600 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  box-shadow: 0 3px 12px rgba(36, 29, 58, 0.12);
}

.relation-inline-label {
  padding: 0 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: text;
}

.relation-inline-label.is-empty {
  border-style: dashed;
  color: #7654cf;
  background: rgba(248, 245, 255, 0.98);
}

.relation-inline-label-input {
  padding: 0 11px;
  outline: none;
  border-color: #7654cf;
  box-shadow: 0 0 0 3px rgba(118, 84, 207, 0.15), 0 4px 14px rgba(36, 29, 58, 0.14);
}

@keyframes mapas-relation-dash {
  to {
    stroke-dashoffset: -30;
  }
}

@media (prefers-reduced-motion: reduce) {
  .relation-tool-preview path {
    animation: none;
  }
}