/* ============================================================
   Knowledge Chat Soul v2 —— 玻璃拟态胶囊对话入口（按参考图复刻）
   配色体系：#0a0a1a 深空底 · #5a5aff 科技蓝 · #a0a0ff 辅紫
   ============================================================ */

/* ---- 玻璃胶囊输入栏 ---- */
.kg-input-capsule {
  background: rgba(18, 18, 31, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(100, 100, 255, .22);
  border-radius: 24px;
  box-shadow: 0 0 12px rgba(100, 100, 255, .10), 0 8px 32px rgba(0, 0, 0, .45);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.kg-input-capsule:focus-within {
  border-color: rgba(90, 90, 255, .65);
  box-shadow: 0 0 22px rgba(100, 100, 255, .30), 0 8px 32px rgba(0, 0, 0, .5);
}
.kg-input-capsule textarea::placeholder { color: #a0a0ff; opacity: .55; }

/* ---- 圆形纸飞机发送按钮 ---- */
.kg-send-btn {
  width: 40px; height: 40px;
  flex: none;
  background: #5a5aff;
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(90, 90, 255, .45);
  transition: all .2s ease;
}
.kg-send-btn:hover { background: #6b6bff; box-shadow: 0 0 20px rgba(90, 90, 255, .65); transform: translateY(-1px); }
.kg-send-btn:active { transform: scale(.92); }

/* ---- 胶囊内圆形图标按钮（展开/麦克风） ---- */
.kg-capsule-iconbtn {
  width: 32px; height: 32px;
  flex: none;
  background: rgba(100, 100, 255, .10);
  border: 1px solid rgba(100, 100, 255, .18);
  border-radius: 50%;
  color: #a0a0ff;
  font-size: 13px;
  cursor: pointer;
  transition: all .18s ease;
}
.kg-capsule-iconbtn:hover { background: rgba(100, 100, 255, .22); color: #e0e0ff; box-shadow: 0 0 10px rgba(100, 100, 255, .3); }
.kg-capsule-iconbtn:active { transform: scale(.92); }

/* ---- 角色徽章（胶囊内玻璃胶囊） ---- */
.kg-capsule-badge {
  font-size: 10px;
  flex: none;
  background: rgba(139, 92, 246, .16);
  color: #a78bfa;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, .3);
  white-space: nowrap;
  letter-spacing: .5px;
}

/* ---- ✨ 星芒呼吸 ---- */
.kg-sparkle {
  font-size: 15px;
  flex: none;
  animation: kgSparkle 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(160, 160, 255, .6));
}
@keyframes kgSparkle {
  0%, 100% { opacity: .6; transform: scale(.92) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(8deg); }
}

/* ---- 快捷问题（玻璃小胶囊） ---- */
#kgChatDock .kg-quick {
  font-size: 10px;
  background: rgba(18, 18, 31, .6);
  color: #a0a0ff;
  border: 1px solid rgba(100, 100, 255, .2);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all .18s ease;
}
#kgChatDock .kg-quick:hover {
  transform: translateY(-2px);
  border-color: rgba(90, 90, 255, .6);
  color: #d0d0ff;
  box-shadow: 0 4px 14px rgba(90, 90, 255, .25);
}

/* ---- 玻璃拟态气泡（覆盖原内联样式） ---- */
#kgChatBox > div > div {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#kgChatBox .kg-bubble-user,
#kgChatBox > div > div[style*="margin-left:auto"] {
  background: rgba(90, 90, 255, .16) !important;
  border: 1px solid rgba(100, 100, 255, .3) !important;
  border-radius: 16px 16px 4px 16px !important;
  color: #fff;
}
#kgChatBox .kg-bubble-ai {
  background: rgba(26, 26, 46, .72) !important;
  border: 1px solid rgba(100, 100, 255, .18) !important;
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

/* ---- 历史面板玻璃化 ---- */
#kgChatHistory {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(18, 18, 31, .78) !important;
  border: 1px solid rgba(100, 100, 255, .25) !important;
  border-radius: 18px 18px 8px 8px !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .5), 0 0 20px rgba(100, 100, 255, .08) !important;
}
#kgChatHistory #kgChatBox {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 255, .3) transparent;
}

/* ---- 节点↔对话 贯通连接线（knowledge-soul.js 动态绘制） ---- */
.kg-connect-line {
  position: absolute;
  pointer-events: none;
  z-index: 60;
  overflow: visible;
}
.kg-connect-line path {
  fill: none;
  stroke: rgba(139, 92, 246, .7);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, .6));
  animation: kgLineFlow 1.1s linear infinite;
}
@keyframes kgLineFlow { to { stroke-dashoffset: -11; } }

/* ---- 无障碍 ---- */
@media (prefers-reduced-motion: reduce) {
  .kg-sparkle, .kg-connect-line path { animation: none !important; }
}

/* ============================================================
   Knowledge Chat Soul v3 —— 协调性修复层
   ============================================================ */

/* ---- 1. 历史面板半透明：图谱可从背后透出，不再是实心遮挡 ---- */
#kgChatHistory {
  background: rgba(18, 18, 31, .82) !important;
}

/* ---- 2. Dock 底部渐入融合：胶囊与页面之间加柔和渐变垫，消除硬切割 ---- */
#kgChatDock > .kg-glass-bar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -36px;
  height: 36px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 26, .55));
  pointer-events: none;
}
#kgChatDock > .kg-glass-bar { position: relative; }

/* ---- 3. 物理参数面板降噪：默认半透明收起感，悬停才唤醒 ---- */
#kgPhysicsPanel {
  opacity: .55;
  transition: opacity .25s ease;
}
#kgPhysicsPanel:hover { opacity: 1; }

/* ---- 4. 统一圆角语言：右侧卡片标题区与胶囊的视觉呼应 ---- */
#page-knowledge .card {
  border-radius: 12px;
}

/* ---- 5. 快捷问题区与胶囊间距节奏 ---- */
#kgChatDock .kg-glass-bar { padding-bottom: 12px; }

/* ---- 6. 右侧停靠面板入场动画 ---- */
@keyframes kgDockPanelIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 覆盖 v2 的圆角（右侧停靠后四角都要圆） */
#kgChatHistory { border-radius: 12px !important; }

/* ---- 7. 语音实时聆听：按钮呼吸脉冲 ---- */
#kgMicBtn.kg-mic-live {
  background: rgba(239, 68, 68, .18) !important;
  border-color: rgba(239, 68, 68, .5) !important;
  color: #f87171 !important;
  animation: kgMicPulse 1.4s ease-in-out infinite;
}
@keyframes kgMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* ---- 8. 麦克风状态轻提示（胶囊下方浮起） ---- */
#kgMicToast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(18, 18, 31, .92);
  border: 1px solid rgba(100, 100, 255, .3);
  color: #d8d8ff;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 9500;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
  white-space: nowrap;
  max-width: 90vw;
}
#kgMicToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  #kgMicBtn.kg-mic-live { animation: none !important; }
}