/* ============================================================
   Knowledge Soul v1 —— 知识图谱对话灵魂动效层（只加不删）
   参考：呼吸感图谱 · 思考涌动 · 节点聚焦脉冲 · 知识卡片浮现
   ============================================================ */

/* ---- 1. 图谱容器：思考时呼吸辉光 ---- */
#kgGraphCard {
  position: relative;
  transition: box-shadow .6s ease, border-color .6s ease;
}
#kgGraphCard.kg-thinking {
  animation: kgCardBreath 1.6s ease-in-out infinite;
  border-color: rgba(139, 92, 246, .45);
}
@keyframes kgCardBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0), 0 0 24px rgba(139, 92, 246, .10); }
  50% { box-shadow: 0 0 0 3px rgba(139, 92, 246, .12), 0 0 42px rgba(139, 92, 246, .28); }
}

/* ---- 2. 节点被对话命中：脉冲环扩散 ---- */
.kg-node.kg-soul-hit .kg-pulse-ring {
  display: block !important;
  animation: kgPulseRing 1.4s ease-out infinite;
}
@keyframes kgPulseRing {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.1); }
}
.kg-node .kg-pulse-ring { transform-box: fill-box; transform-origin: center; }

/* 命中节点本体的辉光 */
.kg-node.kg-soul-hit circle:nth-of-type(2) {
  filter: drop-shadow(0 0 10px currentColor);
}

/* ---- 3. 思考时边的流光 ---- */
#kgCanvas.kg-thinking-edges .kg-edge.focused {
  stroke-dasharray: 6 4;
  animation: kgEdgeFlow 1.2s linear infinite;
}
@keyframes kgEdgeFlow {
  to { stroke-dashoffset: -20; }
}

/* ---- 4. 知识浮现卡片 ---- */
#kgSoulCard {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 250px;
  background: linear-gradient(165deg, rgba(26, 22, 46, .96), rgba(15, 15, 20, .97));
  border: 1px solid rgba(139, 92, 246, .45);
  border-radius: 12px;
  padding: 12px 14px;
  z-index: 30;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 20px rgba(139, 92, 246, .18);
  opacity: 0;
  transform: translateY(-14px) scale(.96);
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.2, .8, .25, 1), transform .45s cubic-bezier(.2, .8, .25, 1);
}
#kgSoulCard.kg-soul-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#kgSoulCard .kg-soul-title {
  font-size: 12px;
  font-weight: 700;
  color: #e6e8ee;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
#kgSoulCard .kg-soul-sub {
  font-size: 10px;
  color: #a78bfa;
  margin-bottom: 6px;
}
#kgSoulCard .kg-soul-body {
  font-size: 11px;
  color: #a1a5b3;
  line-height: 1.7;
  max-height: 88px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
#kgSoulCard .kg-soul-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
#kgSoulCard .kg-soul-btn {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
#kgSoulCard .kg-soul-open { background: #7c3aed; color: #fff; }
#kgSoulCard .kg-soul-close { background: #27272a; color: #a1a1aa; }

/* ---- 5. 思考状态徽标（图谱左上角浮出） ---- */
#kgSoulStatus {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 25;
  font-size: 10px;
  color: #c4b5fd;
  background: rgba(30, 25, 54, .85);
  border: 1px solid rgba(139, 92, 246, .35);
  padding: 4px 10px;
  border-radius: 10px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  letter-spacing: .5px;
}
#kgSoulStatus.kg-soul-show { opacity: 1; }
#kgSoulStatus .kg-soul-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #a78bfa;
  margin-right: 5px;
  animation: kgStatusBlink 1s ease-in-out infinite;
}
@keyframes kgStatusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ---- 6. 对话输入区聚焦辉光 ---- */
#kgQaInput:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .18), 0 0 14px rgba(124, 58, 237, .12);
}

/* ---- 7. 语音聆听时的呼吸 ---- */
#kgMicBtn.kg-listening {
  background: #7f1d1d !important;
  animation: kgMicBreath 1.2s ease-in-out infinite;
}
@keyframes kgMicBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .4); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ---- 8. 减少动效偏好（无障碍） ---- */
@media (prefers-reduced-motion: reduce) {
  #kgGraphCard.kg-thinking,
  .kg-node.kg-soul-hit .kg-pulse-ring,
  #kgCanvas.kg-thinking-edges .kg-edge.focused,
  #kgSoulStatus .kg-soul-dot,
  #kgMicBtn.kg-listening { animation: none !important; }
}