.bh-agent-graph {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.bh-agent-graph .node-bg {
  fill: var(--color-bg-secondary);
  stroke: var(--color-border);
  stroke-width: 2;
  transition: fill 300ms ease, stroke 300ms ease;
  rx: 12;
  ry: 12;
}

.bh-agent-graph .node-name {
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  fill: var(--color-text-primary);
  pointer-events: none;
}

.bh-agent-graph .node-icon {
  font-family: var(--font-family);
  font-size: 18px;
  fill: var(--color-text-tertiary);
  pointer-events: none;
  transition: fill 300ms ease;
}

.bh-agent-graph .node-status {
  font-family: var(--font-family);
  font-size: 11px;
  fill: var(--color-text-secondary);
  pointer-events: none;
}

.bh-agent-graph .node-indicator {
  fill: var(--color-border);
  transition: fill 300ms ease;
}

.agent-node[data-state="idle"] .node-bg {
  fill: var(--color-bg-secondary);
  stroke: var(--color-border);
}

.agent-node[data-state="idle"] .node-indicator {
  fill: var(--color-border);
}

.agent-node[data-state="idle"] .node-icon {
  fill: var(--color-text-tertiary);
}

.agent-node[data-state="active"] .node-bg {
  fill: var(--node-bg-color, rgba(59, 130, 246, 0.08));
  stroke: var(--node-color, #3B82F6);
  stroke-width: 2.5;
  animation: agentPulse 2s ease-in-out infinite;
}

.agent-node[data-state="active"] .node-indicator {
  fill: var(--node-color, #3B82F6);
}

.agent-node[data-state="active"] .node-icon {
  fill: var(--node-color, #3B82F6);
}

.agent-node[data-state="active"] .node-name {
  fill: var(--node-color, #3B82F6);
}

.agent-node[data-state="complete"] .node-bg {
  fill: var(--color-bg-secondary);
  stroke: var(--node-color, #3B82F6);
  stroke-width: 2;
}

.agent-node[data-state="complete"] .node-indicator {
  fill: var(--color-success);
}

.agent-node[data-state="complete"] .node-icon {
  fill: var(--node-color, #3B82F6);
}

.agent-node[data-state="alert"] .node-bg {
  fill: #FEF2F2;
  stroke: #DC2626;
  stroke-width: 3;
  animation: agentAlert 0.8s ease-in-out infinite;
}

.agent-node[data-state="alert"] .node-indicator {
  fill: #DC2626;
  animation: alertBlink 0.5s ease-in-out infinite;
}

.agent-node[data-state="alert"] .node-icon {
  fill: #DC2626;
}

.agent-node[data-state="alert"] .node-name {
  fill: #DC2626;
}

.agent-node[data-state="alert"] .node-status {
  fill: #DC2626;
  font-weight: 600;
}

.connection-path {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  transition: stroke 200ms ease;
}

.connection-path[data-state="active"] {
  stroke: var(--conn-color, #3B82F6);
  stroke-width: 2.5;
  stroke-dasharray: 5 5;
  animation: connectionFlow 0.8s linear infinite;
}

.connection-path[data-state="complete"] {
  stroke: var(--conn-color, #3B82F6);
  stroke-width: 2;
  stroke-dasharray: none;
}

.connection-path[data-state="alert"] {
  stroke: #DC2626;
  stroke-width: 3;
  stroke-dasharray: 5 5;
  animation: connectionFlow 0.4s linear infinite;
}

@keyframes agentPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.3));
  }
}

@keyframes agentAlert {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(220, 38, 38, 0));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(220, 38, 38, 0.5));
  }
}

@keyframes alertBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes connectionFlow {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

.agent-node {
  cursor: default;
  transition: transform 150ms ease;
}

.agent-node.orchestrator-node .node-bg {
  --node-color: #1E40AF;
  --node-bg-color: rgba(30, 64, 175, 0.08);
}
.agent-node.safety-node .node-bg {
  --node-color: #DC2626;
  --node-bg-color: rgba(220, 38, 38, 0.08);
}
.agent-node.knowledge-node .node-bg {
  --node-color: #0D9488;
  --node-bg-color: rgba(13, 148, 136, 0.08);
}
.agent-node.compliance-node .node-bg {
  --node-color: #7C3AED;
  --node-bg-color: rgba(124, 58, 237, 0.08);
}
.agent-node.context-node .node-bg {
  --node-color: #D97706;
  --node-bg-color: rgba(217, 119, 6, 0.08);
}
.agent-node.coordination-node .node-bg {
  --node-color: #059669;
  --node-bg-color: rgba(5, 150, 105, 0.08);
}

.agent-node.orchestrator-node { --node-color: #1E40AF; --node-bg-color: rgba(30, 64, 175, 0.08); }
.agent-node.safety-node { --node-color: #DC2626; --node-bg-color: rgba(220, 38, 38, 0.08); }
.agent-node.knowledge-node { --node-color: #0D9488; --node-bg-color: rgba(13, 148, 136, 0.08); }
.agent-node.compliance-node { --node-color: #7C3AED; --node-bg-color: rgba(124, 58, 237, 0.08); }
.agent-node.context-node { --node-color: #D97706; --node-bg-color: rgba(217, 119, 6, 0.08); }
.agent-node.coordination-node { --node-color: #059669; --node-bg-color: rgba(5, 150, 105, 0.08); }

.conn-orchestrator { --conn-color: #1E40AF; }
.conn-safety { --conn-color: #DC2626; }
.conn-knowledge { --conn-color: #0D9488; }
.conn-compliance { --conn-color: #7C3AED; }
.conn-context { --conn-color: #D97706; }
.conn-coordination { --conn-color: #059669; }

.bh-agent-graph-container {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}