/* ============================================
 Mermaid.js 客户端渲染样式
 暗色/亮色主题适配 + 动画效果
 替代旧的 D2 预渲染 SVG 样式
 ============================================ */

/* ---- 容器基础样式 ---- */
pre.mermaid {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rem 0;
  padding: 1.5rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  position: relative;
  transition: all 0.3s ease;
}

/* 暗色主题容器 */
[data-theme="dark"] pre.mermaid,
:not([data-theme]) pre.mermaid {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 亮色主题容器 */
[data-theme="light"] pre.mermaid {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---- 淡入动画（替代旧的D2动画） ---- */
pre.mermaid {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

pre.mermaid[data-processed] {
  opacity: 1;
  transform: translateY(0);
}

/* ---- SVG 响应式 ---- */
pre.mermaid svg {
  max-width: 100%;
  max-height: 75vh;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---- 节点悬停效果 ---- */
pre.mermaid .node rect,
pre.mermaid .node polygon,
pre.mermaid .node circle {
  transition: filter 0.25s ease, transform 0.25s ease;
  cursor: default;
}

pre.mermaid .node:hover rect,
pre.mermaid .node:hover polygon,
pre.mermaid .node:hover circle {
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
}

/* ---- 亮色主题下 Mermaid 内部样式覆盖 ---- */
[data-theme="light"] pre.mermaid .node rect,
[data-theme="light"] pre.mermaid .node polygon {
  fill: #eef2ff !important;
  stroke: #6366f1 !important;
}

[data-theme="light"] pre.mermaid .edgeLabel {
  background: #f8fafc !important;
  color: #334155 !important;
}

[data-theme="light"] pre.mermaid .label {
  color: #1e293b !important;
}

[data-theme="light"] pre.mermaid .cluster rect {
  fill: #f1f5f9 !important;
  stroke: #94a3b8 !important;
}

/* ---- 暗色主题下 Mermaid 内部样式覆盖 ---- */
[data-theme="dark"] pre.mermaid .node rect,
:not([data-theme]) pre.mermaid .node rect,
[data-theme="dark"] pre.mermaid .node polygon,
:not([data-theme]) pre.mermaid .node polygon {
  fill: #1e293b !important;
  stroke: #6366f1 !important;
}

[data-theme="dark"] pre.mermaid .edgeLabel,
:not([data-theme]) pre.mermaid .edgeLabel {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] pre.mermaid .label,
:not([data-theme]) pre.mermaid .label {
  color: #f1f5f9 !important;
}

[data-theme="dark"] pre.mermaid .cluster rect,
:not([data-theme]) pre.mermaid .cluster rect {
  fill: rgba(30, 41, 59, 0.6) !important;
  stroke: #475569 !important;
}

/* ---- 渲染错误样式 ---- */
pre.mermaid div[style*="color: red"] {
  padding: 1rem;
  margin: 1rem 0;
  border: 1px dashed #ef4444;
  border-radius: 0.75rem;
  color: #ef4444;
  font-size: 0.875rem;
  background: rgba(239, 68, 68, 0.05);
}

/* ---- 减弱动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  pre.mermaid {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- 手机端适配 ---- */
@media (max-width: 640px) {
  pre.mermaid {
    margin: 1.5rem -1rem;
    padding: 1rem 0.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre.mermaid svg {
    max-height: 55vh;
    min-width: 280px;
  }
}

/* ============================================
 兼容旧的 .mermaid-chart 类选择器
 （旧CSS引用的回退，避免其他页面样式丢失）
 ============================================ */
.mermaid-chart {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0;
  padding: 1.5rem;
  border-radius: 0.75rem;
  overflow-x: auto;
  position: relative;
  opacity: 1;
  transform: none;
}

.mermaid-chart svg {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---- 图表容器通用淡入 ---- */
.chart-wrapper .mermaid-chart {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.chart-wrapper .mermaid-chart.visible {
  opacity: 1;
  transform: translateY(0);
}