/* ============================================================
   graph.css · 力导向知识图谱（TW.Graph）
   浅色克制风：白底 + 极淡径向渐变与点阵，与 view-chat.css 同密度
   ============================================================ */

/* ---------------- 画布 ---------------- */
.tw-graph-host {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  /* 中心略亮的径向渐变，给图谱一点纵深 */
  background:
    radial-gradient(124% 108% at 50% 44%,
      var(--surface) 0%,
      var(--surface-2) 54%,
      var(--surface-3) 100%);
}
/* 极淡点阵，像纸面网格，克制到几乎看不见 */
.tw-graph-host::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(16, 24, 40, .06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
}

.tw-graph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.tw-graph.is-over-node { cursor: grab; }
.tw-graph.is-dragging { cursor: grabbing; }
.tw-graph.is-panning { cursor: default; }

/* ---------------- 边 ---------------- */
.tw-graph__edge {
  stroke: #cbd5e1;
  stroke-opacity: .5;
  stroke-width: 1;
  stroke-linecap: round;
  transition: stroke .18s var(--ease), stroke-opacity .18s var(--ease),
              stroke-width .18s var(--ease), opacity .18s var(--ease);
}
.tw-graph__edge.is-lit {
  stroke: var(--brand-500);
  stroke-opacity: 1;
  stroke-width: 1.8;
}
.tw-graph__edge.is-dim { opacity: .18; }

/* ---------------- 节点 ---------------- */
.tw-graph__node { transition: opacity .18s var(--ease); }
.tw-graph__node.is-dim { opacity: .18; }

/* 同色半透明外发光 */
.tw-graph__halo {
  fill-opacity: .12;
  transition: fill-opacity .18s var(--ease);
}
.tw-graph__node.is-hover .tw-graph__halo { fill-opacity: .22; }
.tw-graph__node.is-selected .tw-graph__halo { fill-opacity: .2; }

.tw-graph__dot {
  stroke: var(--surface);
  stroke-width: 1.5;
  transition: stroke-width .18s var(--ease);
}

/* 选中外环：虚线环 + 更粗的白边，比同级节点醒目 */
.tw-graph__ring {
  fill: none;
  stroke-width: 0;
  opacity: 0;
  transition: opacity .18s var(--ease), stroke-width .18s var(--ease);
}
.tw-graph__node.is-selected .tw-graph__ring {
  opacity: 1;
  stroke-width: 2;
  stroke-dasharray: 5 4;
}
.tw-graph__node.is-selected .tw-graph__dot { stroke-width: 2.5; }
.tw-graph__node.is-hover .tw-graph__dot { stroke-width: 2.5; }

/* ---------------- 标签 ----------------
   始终显示：知识网的关键是老师一眼看到概念名字。
   白描边保证压在连线上也看得清。 */
.tw-graph__label {
  font-family: var(--font);
  font-size: var(--fs-11);          /* 12px：中文字号下限 */
  font-weight: 400;
  fill: var(--text-2);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}
/* 大节点（r ≥ 20）：13px / 600 */
.tw-graph__label--lg {
  font-size: var(--fs-12);
  font-weight: 600;
  fill: var(--text);
}
.tw-graph__node.is-selected .tw-graph__label {
  font-weight: 700;
  fill: var(--brand-800);
}
.tw-graph__node.is-hover .tw-graph__label {
  font-weight: 600;
  fill: var(--text);
}