/*
 * graph_render.css — стили холста графа и tooltip'а.
 *
 * Используется CSS-переменные (--ink, --rule, --surface) — если в проекте
 * их нет, в самом низу есть fallback-значения. Можно менять через
 * родительский стиль / тему DaisyUI / любой свой дизайн-токен.
 */

.graph-render {
  position: relative;
  min-height: 480px;
  height: calc(100vh - 220px);
  width: 100%;
}
@media (max-width: 1100px) {
  .graph-render {
    height: 560px;
    min-height: 480px;
  }
}

.graph-canvas {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  position: relative;
}

.graph-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-muted, #6b6e72);
  font-size: 13px;
  font-family: var(--font-serif, Georgia, serif);
}

/* Tooltip висит поверх canvas. pointer-events: none — критично:
   иначе перехватит клик и tap по узлу не сработает. */
.graph-tooltip {
  position: fixed;
  z-index: 200;
  background: var(--surface, #ffffff);
  border: 1px solid var(--ink, #1a1c1e);
  padding: 12px 14px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #1a1c1e);
  max-width: 380px;
  box-shadow: 0 10px 24px rgba(26, 28, 30, 0.12);
  pointer-events: none !important;
}
.graph-tooltip[hidden] {
  display: none !important;
}
.graph-tooltip__name {
  display: block;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  color: var(--ink-muted, #6b6e72);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.graph-tooltip__text {
  margin: 0;
}