/**
 * graph-view.css — 全屏知识图谱视图样式。
 * 全部复用 app.css 的 :root 设计 token；不改动任何既有卡片视图类。
 */

:root {
  /* 章节配色：从既有 token 派生，保持蓝图克制美学 */
  --graph-edge: rgba(23, 32, 27, 0.13);
  --chapter-base: var(--color-blueprint);
  --chapter-ctx: var(--color-green);
  --chapter-rag: color-mix(in srgb, var(--color-green) 55%, var(--color-blueprint));
  --chapter-tool: color-mix(in srgb, var(--color-yellow) 70%, var(--color-red));
  --chapter-agent: var(--color-red);
  --chapter-train: color-mix(in srgb, var(--color-blueprint) 60%, var(--color-code));
  --chapter-eval: var(--color-muted);
}

/* ---- 顶栏视图切换 ---- */
.view-switch {
  display: inline-flex;
  align-items: stretch;
  height: var(--touch-target);
  box-sizing: border-box;
  padding: var(--space-1);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  gap: var(--space-1);
}

.view-switch__btn {
  display: inline-flex;
  align-items: center;
  min-width: auto;
  min-height: 0;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--text-sm);
}

.view-switch__btn[aria-pressed="true"] {
  background: var(--color-code);
  color: var(--color-surface);
}

/* ---- 视图容器切换 ---- */
.graph-view { display: none; }
body.graph-mode .app-shell { display: none; }
body.graph-mode .graph-view { display: block; }

.graph-only { display: none; }
body.graph-mode .graph-only { display: inline-flex; }
body.graph-mode .card-only { display: none; }

.graph-view {
  position: relative;
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.graph-stage {
  position: absolute;
  inset: 0;
  touch-action: none;            /* 自管 pinch/pan，禁用浏览器默认手势 */
  cursor: grab;
  background:
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px),
    linear-gradient(0deg, var(--color-grid) 1px, transparent 1px),
    var(--color-canvas);
  background-size: var(--space-6) var(--space-6);
}

.graph-stage:active { cursor: grabbing; }

.graph-edges {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.graph-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}

/* ---- 节点（0×0 锚点，dot 中心落在世界坐标）---- */
.gnode {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  will-change: transform;
}

.gnode__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-sm);
  background: var(--chapter-base);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-ink) 18%, transparent);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.gnode__label {
  position: absolute;
  left: 12px;
  top: 0;
  transform: translateY(-50%);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  line-height: var(--line-tight);
  white-space: nowrap;
  pointer-events: none;
}

/* 章节着色（dot） */
.gnode[data-chapter="base"]  .gnode__dot { background: var(--chapter-base); }
.gnode[data-chapter="ctx"]   .gnode__dot { background: var(--chapter-ctx); }
.gnode[data-chapter="rag"]   .gnode__dot { background: var(--chapter-rag); }
.gnode[data-chapter="tool"]  .gnode__dot { background: var(--chapter-tool); }
.gnode[data-chapter="agent"] .gnode__dot { background: var(--chapter-agent); }
.gnode[data-chapter="train"] .gnode__dot { background: var(--chapter-train); }
.gnode[data-chapter="eval"]  .gnode__dot { background: var(--chapter-eval); }

/* support 节点：空心方点 + 默认隐藏标签（减少视觉噪声） */
.gnode.is-support .gnode__dot {
  width: 10px;
  height: 10px;
  background: var(--color-surface);
  border: 1.5px dashed currentColor;
  box-shadow: none;
}
.gnode[data-chapter="base"].is-support  .gnode__dot { color: var(--chapter-base); }
.gnode[data-chapter="ctx"].is-support   .gnode__dot { color: var(--chapter-ctx); }
.gnode[data-chapter="rag"].is-support   .gnode__dot { color: var(--chapter-rag); }
.gnode[data-chapter="tool"].is-support  .gnode__dot { color: var(--chapter-tool); }
.gnode[data-chapter="agent"].is-support .gnode__dot { color: var(--chapter-agent); }
.gnode[data-chapter="train"].is-support .gnode__dot { color: var(--chapter-train); }
.gnode[data-chapter="eval"].is-support  .gnode__dot { color: var(--chapter-eval); }

.gnode.is-support .gnode__label { opacity: 0; }
.gnode.is-support:hover .gnode__label,
.gnode.is-support:focus-visible .gnode__label,
.gnode.is-support.is-related .gnode__label,
.gnode.is-support.is-selected .gnode__label { opacity: 1; }

/* 交互状态 */
.gnode:hover .gnode__dot { transform: translate(-50%, -50%) scale(1.35); }

.gnode.is-selected { z-index: 3; }
.gnode.is-selected .gnode__dot {
  transform: translate(-50%, -50%) scale(1.5);
  border-color: var(--color-blueprint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-blueprint) 35%, transparent);
}
.gnode.is-selected .gnode__label {
  background: var(--color-blueprint);
  color: var(--color-surface);
  font-weight: 600;
}

.gnode.is-related { z-index: 2; }
.gnode.is-related .gnode__label {
  background: color-mix(in srgb, var(--color-blueprint) 14%, var(--color-surface));
}

.gnode.is-dim { opacity: 0.32; }
.gnode.is-dragging .gnode__dot { transform: translate(-50%, -50%) scale(1.5); }

/* ---- 详情浮层 ---- */
.graph-detail {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: var(--panel-width);
  max-width: calc(100% - var(--space-7));
  max-height: calc(100% - var(--space-8));
  overflow-y: auto;
  padding: var(--space-5);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.graph-detail__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.graph-detail__head h2 {
  flex: 1;
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--line-tight);
}
.graph-detail__chapter {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-blueprint) 10%, var(--color-surface));
  color: var(--color-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}
.graph-detail__close {
  min-width: auto;
  min-height: auto;
  width: var(--space-6);
  height: var(--space-6);
  border: var(--border-thin);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.graph-detail__close:hover { color: var(--color-ink); border-color: var(--color-ink); }

.graph-detail__line { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.graph-detail__line strong { color: var(--color-ink); }

.graph-detail__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-3) 0; }
.graph-tag {
  padding: 2px var(--space-2);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.graph-detail__rel-head { margin: var(--space-3) 0 var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }
.graph-detail__rels { display: flex; flex-direction: column; gap: var(--space-1); }
.graph-rel {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: auto;
  padding: var(--space-2);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  text-align: left;
}
.graph-rel:hover { border-color: var(--color-blueprint); background: color-mix(in srgb, var(--color-blueprint) 6%, var(--color-surface)); }
.graph-rel__label { flex: 0 0 auto; color: var(--color-muted); font-size: var(--text-xs); }
.graph-rel__target { font-size: var(--text-sm); }

/* ---- 控制条提示 ---- */
.graph-hint {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  color: var(--color-muted);
  font-size: var(--text-xs);
  pointer-events: none;
}

/* ---- 缩放控件 ---- */
.graph-zoom {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-node);
}
.graph-zoom__btn {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.graph-zoom__btn:hover {
  background: color-mix(in srgb, var(--color-blueprint) 8%, var(--color-surface));
}

/* ---- 响应式 ---- */
@media (max-width: 720px) {
  /* 详情 sheet 贴底时，缩放控件移到右上避让 */
  .graph-zoom { top: var(--space-3); bottom: auto; right: var(--space-3); }
  .graph-detail {
    top: auto;
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    width: auto;
    max-height: 46%;
  }
  .graph-hint { left: var(--space-3); bottom: auto; top: var(--space-3); }
  .view-switch__btn { padding: var(--space-1) var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .gnode__dot { transition: none; }
}