.connectorLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
  transition: opacity 0.2s ease;
}

.connectorLayerHidden {
  opacity: 0;
  pointer-events: none;
}

/* Endpoint anchors sit above widgets so they're always visible and interactive */
.endpointLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
  transition: opacity 0.2s ease;
}

.connectorPath {
  fill: none;
  stroke: var(--connector-stroke, var(--color-foreground-accent, #0969da));
  stroke-width: var(--connector-stroke-width, 4px);
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke 0.15s ease, stroke-width 0.15s ease;
}

.connectorPath:hover {
  stroke: var(--connector-hover-stroke, var(--color-foreground-danger, #cf222e));
  stroke-width: var(--connector-hover-stroke-width, 5px);
}

.connectorEndpoint {
  fill: var(--connector-endpoint-fill, var(--color-foreground-accent, #0969da));
  stroke: var(--connector-endpoint-stroke, var(--color-background, #ffffff));
  stroke-width: var(--connector-endpoint-stroke-width, 3px);
  pointer-events: auto;
  cursor: crosshair;
  transition: filter 0.1s ease;
}

.connectorEndpoint:hover {
  filter: drop-shadow(0 0 4px var(--connector-endpoint-fill, var(--color-foreground-accent, #0969da)));
}

/* Invisible expanded hit area around connector endpoints */
.endpointHitArea {
  fill: transparent;
  stroke: none;
  pointer-events: auto;
  cursor: crosshair;
}

/* Glow effect when hovering endpoint hit area */
.endpointHitArea:hover ~ .connectorEndpoint {
  filter: drop-shadow(0 0 4px var(--connector-endpoint-fill, var(--color-foreground-accent, #0969da)));
}

.connectorPathHitArea {
  fill: none;
  stroke: transparent;
  stroke-width: var(--connector-hit-area-width, 16px);
  pointer-events: stroke;
  cursor: pointer;
}

/* Trigger the visible connector's hover style from the wider hit area */
.connectorPathHitArea:hover ~ .connectorPath {
  stroke: var(--connector-hover-stroke, var(--color-foreground-danger, #cf222e));
  stroke-width: var(--connector-hover-stroke-width, 5px);
}

.dragPreviewPath {
  fill: none;
  stroke: var(--connector-drag-stroke, var(--color-foreground-accent, #0969da));
  stroke-width: var(--connector-drag-stroke-width, 2px);
  stroke-dasharray: var(--connector-drag-dasharray, 6 4);
  pointer-events: none;
  opacity: var(--connector-drag-opacity, 0.7);
}

/* Broadcast-active connector — transparent base, 50% wider */
.connectorBroadcast {
  stroke: transparent;
  stroke-width: 6px;
}

.connectorPathHitArea:hover ~ .connectorBroadcast {
  stroke: var(--connector-hover-stroke, var(--color-foreground-danger, #cf222e));
  stroke-width: var(--connector-hover-stroke-width, 5px);
}

/* Flowing dots animation along broadcast connectors */
.broadcastFlow {
  fill: none;
  stroke: var(--color-background-accent-emphasis, #0969da);
  stroke-width: 6px;
  stroke-dasharray: 3 17;
  stroke-linecap: round;
  pointer-events: none;
  animation: broadcastFlowAnim 0.8s linear infinite;
  transition: opacity 0.15s ease;
}

/* Hide dots on hover so the red delete indicator shows cleanly */
.connectorPathHitArea:hover ~ .broadcastFlow {
  opacity: 0;
}

.broadcastFlowReverse {
  animation-direction: reverse;
}

@keyframes broadcastFlowAnim {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -20; }
}
