/* port-colors.css — kind-coded port + connection-line colors.
 *
 * Each port carries inline `--this-port-color` set by the renderer in
 * workflow.html (mapped from the port's `kind`). Connection paths
 * carry `data-kind` and resolve a stroke via these selectors. Loaded
 * AFTER nodes.css so the color rules win the cascade for properties
 * we want to override (border, glyph color). The 36×36 socket geometry
 * from nodes.css stays intact — only the colors change here.
 */

/* ── Port colors ──────────────────────────────────────── */
.workflow-node .port {
  border: 2px solid var(--this-port-color, var(--text-secondary)) !important;
  /* Output ports get a tinted fill; inputs stay outlined. */
  background: var(--socket-bg, rgba(0, 0, 0, 0.6)) !important;
}
.workflow-node .port.output {
  background: color-mix(in srgb, var(--this-port-color, var(--text-secondary)) 18%, var(--socket-bg, rgba(0,0,0,0.6))) !important;
}
.workflow-node .port::after {
  color: var(--this-port-color, var(--text-secondary)) !important;
}
.workflow-node .port:hover {
  border-color: var(--this-port-color, var(--text-secondary)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--this-port-color, currentColor) 25%, transparent) !important;
}
.workflow-node .port:hover::after {
  color: var(--this-port-color, var(--text-secondary)) !important;
}

/* ── Drag-feedback ports (compatible / incompatible) ── */
/* Existing classes from startConnection are .compatible / .incompatible.
   Color them by the target port's own --this-port-color so the user
   sees "this socket accepts in green/blue/etc." */
.workflow-node .port.compatible {
  border-color: var(--this-port-color, var(--accent)) !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--this-port-color, currentColor) 35%, transparent) !important;
  animation: cgPortPulse 1.2s ease-in-out infinite;
}
@keyframes cgPortPulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--this-port-color, currentColor) 30%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--this-port-color, currentColor) 15%, transparent); }
}
.workflow-node .port.incompatible {
  opacity: 0.25;
  border-color: var(--danger, #ef4444) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ── Connection-line colors ───────────────────────────── */
#connSvg path { stroke-width: 2.5; opacity: 0.85; fill: none; }
#connSvg path:hover { opacity: 1; stroke-width: 3.5; cursor: pointer; }

#connSvg path[data-kind="text"],
#connSvg path[data-kind="prompt"],
#connSvg path[data-kind="string"]      { stroke: var(--port-text); }
#connSvg path[data-kind="image"],
#connSvg path[data-kind="image_input"],
#connSvg path[data-kind="image_url"]   { stroke: var(--port-image); }
#connSvg path[data-kind="video"],
#connSvg path[data-kind="video_input"] { stroke: var(--port-video); }
#connSvg path[data-kind="audio"],
#connSvg path[data-kind="audio_input"] { stroke: var(--port-audio); }
#connSvg path[data-kind="file"]        { stroke: var(--port-any); }
#connSvg path[data-kind="mask"],
#connSvg path[data-kind="region"]      { stroke: var(--port-mask); }
#connSvg path[data-kind="seed"],
#connSvg path[data-kind="params"]      { stroke: var(--port-params); }

/* Ghost (in-progress drag) line — dashed, colored by source kind. */
#connSvg path#ghost-path { stroke-dasharray: 4 4; opacity: 0.7; }

/* Selected connection — thicker + full opacity for the click→Delete UX. */
#connSvg path.connection-path.selected {
  stroke-width: 3.5;
  opacity: 1;
}

/* Occupied input port — small filled inner dot signals "this slot is
   already wired" so the user doesn't waste a drag. The "+" glyph is
   replaced by the dot via opacity tricks (the existing ::after rule
   uses content:'+' which we override with content:'•' here). */
.workflow-node .port.input[data-connected="true"] {
  background: color-mix(in srgb, var(--this-port-color, var(--accent)) 28%, var(--socket-bg, rgba(0,0,0,0.6))) !important;
  border-color: var(--this-port-color, var(--accent)) !important;
}
.workflow-node .port.input[data-connected="true"]::after {
  content: '●';
  font-size: 12px;
  color: var(--this-port-color, var(--accent)) !important;
}