/* Graph-specific styles - nodos, aristas, labels */

.node {
  cursor: pointer;
  transition: opacity 0.25s var(--ease-out, ease);
}

/* Halos y núcleos de nodos estilo neuronal */
.node .node-halo {
  animation: neural-pulse 3s infinite ease-in-out;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.node .node-core {
  stroke-width: 1.5;
  transition: r 0.25s, fill 0.2s, stroke 0.2s, stroke-width 0.2s, filter 0.2s;
}

@keyframes neural-pulse {
  0% { transform: scale(1); opacity: 0.12; }
  50% { transform: scale(1.4); opacity: 0.30; }
  100% { transform: scale(1); opacity: 0.12; }
}

/* Colores por source usando CSS variables */
.node.source-teclera circle  { fill: var(--c-teclera);  stroke: var(--c-teclera-dim); color: var(--c-teclera); }
.node.source-geojobs circle  { fill: var(--c-geojobs);  stroke: var(--c-geojobs-dim); color: var(--c-geojobs); }
.node.source-totem circle    { fill: var(--c-totem);    stroke: var(--c-totem-dim); color: var(--c-totem); }
.node.source-emerald circle  { fill: var(--c-emerald);  stroke: var(--c-emerald-dim); color: var(--c-emerald); }
.node.source-vault circle    { fill: var(--c-vault);    stroke: var(--c-vault-dim); color: var(--c-vault); }
.node.source-manual circle   { fill: var(--c-manual);   stroke: var(--c-manual-dim); color: var(--c-manual); }
.node.source-telegram circle { fill: var(--c-telegram); stroke: var(--c-telegram-dim); color: var(--c-telegram); }
.node.source-pdf circle      { fill: var(--c-pdf);      stroke: var(--c-pdf-dim); color: var(--c-pdf); }
.node.source-session circle  { fill: var(--c-session);  stroke: var(--c-session-dim); color: var(--c-session); }
.node.source-email circle    { fill: var(--c-email);    stroke: var(--c-email-dim); color: var(--c-email); }
.node.source-stub circle     { fill: var(--c-stub);     stroke: var(--c-stub-dim); color: var(--c-stub); }
/* Agent sources (agent:master, agent:hermes, etc.) */
.node[class*="source-agent"] circle { fill: var(--c-agent); stroke: var(--c-agent-dim); color: var(--c-agent); }
/* Fallback */
.node circle                 { fill: var(--c-default);  stroke: var(--c-default-dim); color: var(--c-default); }

.node:hover .node-core {
  stroke: var(--fg);
  stroke-width: 2.8;
  filter: drop-shadow(0 0 12px var(--accent-bright, #c7ff3a));
}

.node.selected .node-core {
  stroke: var(--fg);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 16px var(--accent-bright, #c7ff3a));
}

.node.pinned .node-core {
  stroke: var(--accent-bright, #c7ff3a);
  stroke-width: 3;
}

/* Partículas de impulso sináptico */
.synapse-particle {
  pointer-events: none;
  opacity: 0.85;
}

/* Dim state — both .dim and .dimmed for compatibility */
.node.dim .node-halo,
.node.dimmed .node-halo { opacity: 0; }
.synapses.dim,
.synapses.dimmed { opacity: 0.1; }

.node-label {
  fill: var(--label-fill, #ffffff);
  font-size: 11px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--label-stroke, #0a0a0f);
  stroke-width: 3px;
  stroke-linejoin: round;
  text-anchor: start;
  dominant-baseline: middle;
  transition: opacity 0.2s;
}

/* Links por kind */
.link {
  fill: none;
  stroke-opacity: 0.6;
  transition: stroke-opacity 0.2s;
}

.link.wikilink {
  stroke: var(--link-wikilink);
  stroke-opacity: 0.4;
}

.link.semantic {
  stroke: var(--link-semantic);
  stroke-opacity: 0.35;
  stroke-dasharray: 3 3;
}

.link.entity {
  stroke: var(--link-entity);
  stroke-opacity: 0.45;
}

.link.temporal {
  stroke: var(--link-temporal);
  stroke-opacity: 0.4;
  stroke-dasharray: 5 2;
}

.link:not(.wikilink):not(.semantic):not(.entity):not(.temporal) {
  stroke: var(--link-default);
}

/* Hover/click affordances — both .dim and .dimmed */
.node.dim circle,
.node.dimmed circle { opacity: 0.15; }
.node.dim .node-label,
.node.dimmed .node-label { opacity: 0.15; }
.link.dim,
.link.dimmed { stroke-opacity: 0.04; }

.node.highlight circle {
  stroke: var(--fg);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--accent, #a8e10c));
}

/* ===== Zoom controls overlay ===== */
#zoom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 16;
}

#zoom-controls button {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border, #252530);
  background: var(--bg-elevated, #12121a);
  color: var(--fg, #e8e8ef);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

#zoom-controls button:hover {
  background: var(--accent, #a8e10c);
  color: var(--text-on-accent, #0a0a0f);
  border-color: var(--accent-bright, #c7ff3a);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(168, 225, 12, 0.3);
}

#zoom-controls button:active {
  transform: scale(0.95);
}

/* ===== Theme toggle button ===== */
#theme-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border, #252530);
  background: var(--bg-elevated, #12121a);
  color: var(--fg, #e8e8ef);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 16;
  backdrop-filter: blur(8px);
}

#theme-toggle:hover {
  background: var(--accent, #a8e10c);
  color: var(--text-on-accent, #0a0a0f);
  border-color: var(--accent-bright, #c7ff3a);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(168, 225, 12, 0.3);
}

#theme-toggle:active {
  transform: scale(0.95);
}