/**
 * public/workspace_styles/collab.css
 *
 * Collaborative claim indicator styles.
 *
 * The ClaimIndicatorLayer sets `--claim-color` and `.peer-claimed` / `.self-claimed`
 * on `.react-flow__node` wrapper elements whenever a claim is active.
 * These rules use those hooks to recolor the NodeResizer border lines and
 * corner handles without touching any individual node component.
 *
 * !important is required here because @reactflow/node-resizer renders its colors
 * as inline styles (via the `color` prop), which take precedence over class rules.
 */

/* ─── Peer claim: colored ring around the node ─────────────────────────────── */

.react-flow__node.peer-claimed::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid var(--claim-color, #38bdf8);
  border-radius: 10px;
  pointer-events: none;
  z-index: 9000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 8px 0 color-mix(in srgb, var(--claim-color, #38bdf8) 40%, transparent);
  animation: collab-ring-pulse 2.5s ease-in-out infinite;
}

/* ─── Self claim: subtle own-color ring ────────────────────────────────────── */

.react-flow__node.self-claimed::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1.5px dashed var(--claim-color, #38bdf8);
  border-radius: 10px;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.6;
}

/* ─── NodeResizer lines: override inline border-color ─────────────────────── */

.react-flow__node.peer-claimed .react-flow__resize-control.line {
  border-color: var(--claim-color, #38bdf8) !important;
}

.react-flow__node.self-claimed .react-flow__resize-control.line {
  border-color: var(--claim-color, #38bdf8) !important;
}

/* ─── NodeResizer corner handles: override inline background + border ──────── */

.react-flow__node.peer-claimed .react-flow__resize-control.handle {
  background: var(--claim-color, #38bdf8) !important;
  border-color: var(--claim-color, #38bdf8) !important;
}

.react-flow__node.self-claimed .react-flow__resize-control.handle {
  background: color-mix(in srgb, var(--claim-color, #38bdf8) 40%, var(--background-color, #111827)) !important;
  border-color: var(--claim-color, #38bdf8) !important;
}

/* ─── Pulse animation on peer ring ────────────────────────────────────────── */

@keyframes collab-ring-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* ─── Prevent the ::after pseudo-element from clipping on nodes with
       overflow:hidden. Most nodes already set overflow:visible, but just
       in case — ensure the wrapper itself doesn't clip us. ──────────────── */
.react-flow__node.peer-claimed,
.react-flow__node.self-claimed {
  overflow: visible !important;
}