/* ═══════════════════════════════════════════════════════════
   Eptss 技术监督知识图谱 — 子页面样式
   复用 style.css 的 CSS 变量（--bg / --text / --accent …），
   跟随明暗主题。
   ═══════════════════════════════════════════════════════════ */

.kg-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 0;
  min-height: 0;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}

/* ─────────────── 左侧画布 ─────────────── */

.kg-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--border);
}

.kg-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex: none;
}

.kg-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  transition: border-color .16s, box-shadow .16s;
}
.kg-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.kg-search-icon { color: var(--text-3); flex: none; }
.kg-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--font);
}
.kg-search input::placeholder { color: var(--text-3); }
.kg-search-count { font-size: 12px; color: var(--text-3); flex: none; }

.kg-tools { display: flex; align-items: center; gap: 8px; flex: none; }

.kg-depth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
}
.kg-depth select {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--font);
  outline: none;
  cursor: pointer;
}

.kg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--text-2);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .16s;
}
.kg-btn:hover { color: var(--accent-text); border-color: var(--accent); }

.kg-canvas-host {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--border-strong) 1px, transparent 0) 0 0 / 26px 26px,
    var(--bg);
}

#kgCanvas { width: 100%; height: 100%; display: block; cursor: grab; }
#kgCanvas.is-panning { cursor: grabbing; }

.kg-legend {
  position: absolute;
  left: 14px;
  bottom: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-2);
}
.kg-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.kg-legend-item i {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex: none;
}

.kg-hint {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 11.5px;
  color: var(--text-3);
  pointer-events: none;
}

.kg-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(2px);
  z-index: 5;
}
.kg-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: kg-spin .8s linear infinite;
}
@keyframes kg-spin { to { transform: rotate(360deg); } }

/* SVG 图元 */

.kg-link {
  stroke: var(--border-strong);
  stroke-opacity: .55;
  transition: stroke .15s, stroke-opacity .15s;
}
.kg-link.is-dim { stroke-opacity: .08; }
.kg-link.is-hl { stroke: var(--accent); stroke-opacity: .9; }

.kg-node { cursor: pointer; }
.kg-node circle {
  stroke: var(--bg);
  stroke-width: 1.5;
  transition: stroke .15s, r .15s;
}
.kg-node.is-selected circle {
  stroke: var(--accent);
  stroke-width: 2.5;
}
.kg-node.is-dim { opacity: .18; }
.kg-node text {
  font-size: 10.5px;
  fill: var(--text-2);
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.kg-node.is-hl text { fill: var(--text); font-weight: 600; }

/* ─────────────── 右侧面板 ─────────────── */

.kg-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}

.kg-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 16px 6px;
  flex: none;
}
.kg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.kg-card b { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.kg-card span { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }

.kg-block {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.kg-block-grow { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.kg-block-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: .3px;
}
.kg-block-sub { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.kg-block-close {
  border: none; background: none; cursor: pointer;
  color: var(--text-3); font-size: 16px; line-height: 1;
  padding: 0 2px;
}
.kg-block-close:hover { color: var(--text); }

/* 搜索结果 */
.kg-result-list, .kg-neighbor-list, .kg-comm-list, .kg-bridge-list {
  list-style: none;
  overflow-y: auto;
  min-height: 0;
}
.kg-result-list { max-height: 240px; }

.kg-result-item, .kg-neighbor-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 4px;
  font-size: 13px;
  font-family: var(--font);
  text-align: left;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all .14s;
}
.kg-result-item:hover, .kg-neighbor-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.kg-result-item .kg-item-label,
.kg-neighbor-item .kg-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kg-item-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex: none; display: inline-block;
}
.kg-item-deg {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* 实体详情 */
.kg-detail-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  word-break: break-all;
  margin-bottom: 6px;
}
.kg-detail-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.kg-tag {
  font-size: 11px;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 9px;
}
.kg-tag:last-child { color: var(--text-2); background: var(--bg-soft); }
.kg-detail-path {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  word-break: break-all;
  line-height: 1.5;
}

/* Tabs */
.kg-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg-soft);
  border-radius: 10px;
  margin-bottom: 10px;
  flex: none;
}
.kg-tab {
  flex: 1;
  padding: 6px 0;
  font-size: 12.5px;
  font-family: var(--font);
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.kg-tab.is-active {
  color: var(--text);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}

.kg-tabpane { flex: 1; min-height: 0; overflow-y: auto; }

.kg-comm-list { max-height: none; }
.kg-comm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-family: var(--font);
  text-align: left;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all .14s;
}
.kg-comm-item:hover { border-color: var(--accent); }
.kg-comm-rank {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex: none;
}
.kg-comm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-comm-count { font-size: 11px; color: var(--text-3); flex: none; font-variant-numeric: tabular-nums; }

/* 洞察 */
.kg-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.kg-insight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.kg-insight b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kg-insight span { font-size: 10px; color: var(--text-3); text-align: center; line-height: 1.3; }

.kg-sub-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin: 4px 0 8px;
}
.kg-bridge-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-family: var(--font);
  text-align: left;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  transition: all .14s;
}
.kg-bridge-item:hover { border-color: var(--accent); }
.kg-bridge-item .kg-item-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 11px;
}

.kg-empty {
  font-size: 12.5px;
  color: var(--text-3);
  padding: 14px 4px;
  text-align: center;
}

.kg-back-link { text-decoration: none; }

/* ─────────────── 窄屏：上下堆叠 ─────────────── */

@media (max-width: 960px) {
  .kg-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 55vh auto;
    height: auto;
    overflow: visible;
  }
  .kg-stage { border-right: none; border-bottom: 1px solid var(--border); }
  .kg-panel { overflow: visible; }
}

/* 首页顶栏的知识图谱入口（与 kg-back-link 对称） */
.kg-nav-link { text-decoration: none; }

/* ═══════════ 骨架屏 / 加载占位 ═══════════ */

/* loading 覆盖层：默认隐藏，.is-on 时淡入 */
.kg-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg);
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.kg-loading.is-on {
  opacity: 1;
  visibility: visible;
}

.kg-skeleton-graph {
  width: min(78%, 560px);
  height: auto;
  overflow: visible;
}

/* 示意节点：呼吸 */
.kg-sk-node { animation: sk-breathe 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sk-breathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
/* 节点外光环：由内向外扩散 */
.kg-sk-halo {
  animation: sk-halo 2.4s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes sk-halo {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
/* 示意连线：流动虚线 */
.kg-sk-link {
  stroke-dasharray: 5 7;
  animation: sk-flow 1.6s linear infinite;
}
@keyframes sk-flow {
  to { stroke-dashoffset: -24; }
}

.kg-loading-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.kg-loading-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-2);
}
.kg-loading-sub {
  font-size: 11.5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* 统计卡骨架态 */
.kg-cards.is-loading .kg-card b {
  color: transparent;
  position: relative;
  min-width: 34px;
}
.kg-cards.is-loading .kg-card b::after {
  content: '';
  position: absolute;
  inset: 3px 0;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--bg-soft) 25%, var(--border-strong) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
}

/* 列表骨架条 */
.kg-skeleton-list { padding: 2px 0; }
.kg-sk-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: 9px;
  background: var(--bg-soft);
}
.kg-sk-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--border-strong);
}
.kg-sk-bar {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--bg-soft) 25%, var(--border-strong) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s linear infinite;
}
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kg-sk-node, .kg-sk-halo, .kg-sk-link,
  .kg-sk-bar, .kg-cards.is-loading .kg-card b::after { animation: none; }
}