/* ============================================================
 * Babel Arcaea Code — Mermaid 响应式渲染
 *
 * 架构：
 *   Markdown → Mermaid 代码块 → Mermaid.js → SVG
 *   → 玻璃拟态容器 → 自动缩放 → 超宽滚动 → 全屏预览
 *
 * 设计理念：
 *   - 小图自动居中，保持自然尺寸
 *   - 大图容器滚动，不挤压 SVG
 *   - 玻璃拟态（Glassmorphism）适配 Arcaea 暗色风格
 *   - 发光边框 + 悬停微动效
 *   - 深色主题联动
 * ============================================================ */

/* ── Mermaid 外层包裹容器 ──
 * 职责：玻璃拟态背景、横向滚动、悬停动效
 * 小图 → 无滚动，SVG 居中
 * 大图 → 横向滚动条出现，不挤压 SVG
 */
.arcaea-mermaid-box {
  position: relative;

  /* 玻璃拟态 — 对齐 Arcaea 设计 Token */
  /* Token: --arcaea-bg + backdrop-filter: blur(12px) saturate(130%) */
  background: rgba(8, 21, 42, 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);

  /* Token: --arcaea-border */
  border: 1px solid rgba(230, 238, 255, 0.78);
  border-radius: 10px;

  /* Token: 卡片投影 + 内嵌白色高光边 */
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  margin: 2rem 0;
  padding: 1rem;

  /* 响应式滚动策略：
   *   超宽图 → 横向滚动
   *   超高图 → 纵向滚动（max-height 限制 + overflow-y auto）
   */
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(90vh, 960px);

  /* 悬停动效准备 — 仅 border-color, box-shadow 过渡 */
  transition: border-color 0.25s ease, box-shadow 0.25s ease;

  overscroll-behavior: contain;
}

/* Hover — 仅增强边框与阴影，不做 scale（避免 SVG 重新光栅化） */
.arcaea-mermaid-box:hover {
  border-color: rgba(160, 220, 255, 0.42);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* 禁用旧的发光伪元素 */
.arcaea-mermaid-box::before {
  display: none !important;
  content: none !important;
}

/* ── Mermaid 图表内部容器 ──
 * MerPress-style: <pre class="mermaid"> holds the Mermaid source
 * and Mermaid.run() replaces it with SVG. */
pre.mermaid {
  width: 100%;
  max-width: 100%;

  display: flex;
  justify-content: center;

  margin: 0.5rem 0;
  padding: 0;
  background: transparent !important;
  border: none !important;
  color: rgba(238, 244, 255, 0.94);

  font-family:
    "FiraCode Nerd Font",
    "Fira Code",
    "JetBrains Mono",
    "Noto Sans SC",
    "Microsoft YaHei",
    sans-serif;
}

/* Override Prism glassmorphism pre styling for Mermaid containers.
   Mermaid .arcaea-mermaid-box already provides the glass effect;
   the inner pre.mermaid should be transparent. */
.arcaea-mermaid-box pre.mermaid {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
  padding: 0.5rem !important;
}

/* ── SVG 基本样式 ──
 * useMaxWidth:true 已设置 max-width:100% + height:auto 在 SVG 上，
 * 此处只添加装饰样式。超宽图由 .arcaea-mermaid-box overflow-x:auto 滚动。
 */
pre.mermaid svg {
  display: block;
  height: auto;
  max-width: 100%;

  margin: 0 auto;
  padding: 8px;
  box-sizing: content-box;

  /* 对齐 Arcaea Token: 深蓝半透明底 + 亮白细边框 + 内嵌高光边 */
  background:
    linear-gradient(180deg,
      rgba(8, 21, 42, 0.32),
      rgba(5, 12, 24, 0.20));
  border: 1px solid rgba(230, 238, 255, 0.78);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── 文字样式 ──
 * Mermaid 初始化 JS 的 themeVariables 已注入内联样式作为基准，
 * 此处 CSS 提高优先级（选择器特异性）而非滥用 !important。
 */
pre.mermaid svg text,
pre.mermaid .label,
pre.mermaid .nodeLabel,
pre.mermaid .edgeLabel,
pre.mermaid .actor,
pre.mermaid .messageText,
pre.mermaid .noteText {
  fill: rgba(238, 244, 255, 0.94);
  color: rgba(238, 244, 255, 0.94);

  font-size: 15px;
  font-weight: 500;

  font-family:
    "FiraCode Nerd Font",
    "Fira Code",
    "JetBrains Mono",
    "Noto Sans SC",
    "Microsoft YaHei",
    sans-serif;
}

/* ── 节点边框 ── 对齐 Arcaea Token: ice blue #a0dcff */
pre.mermaid .node rect,
pre.mermaid .node circle,
pre.mermaid .node ellipse,
pre.mermaid .node polygon,
pre.mermaid .node path {
  stroke: rgba(160, 220, 255, 0.50);
  stroke-width: 1.6px;
}

/* ── 连线 ── */
pre.mermaid .edgePath path,
pre.mermaid .flowchart-link {
  stroke: rgba(160, 220, 255, 0.60);
  stroke-width: 1.6px;
}

/* ── 箭头标记 ── */
pre.mermaid marker path,
pre.mermaid marker polygon,
pre.mermaid marker circle {
  fill: rgba(160, 220, 255, 0.60);
  stroke: rgba(160, 220, 255, 0.60);
}

/* ── 边标签背景 ── */
pre.mermaid .edgeLabel {
  border-radius: 6px;
}

/* ── 集群盒子 ── 对齐 Arcaea Token: clusterBorder #8ab0ff */
pre.mermaid .cluster rect {
  fill: transparent;
  stroke: rgba(138, 176, 255, 0.72);
}

/* ── 错误状态 ── */
.arcaea-mermaid-box.arcaea-mermaid-error {
  border-color: rgba(255, 120, 160, 0.38);
  background:
    linear-gradient(135deg,
      rgba(255, 95, 140, 0.10),
      rgba(120, 180, 255, 0.06));
}

.arcaea-mermaid-error-message {
  margin-top: 0.85rem;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  color: #ffd9e5;
  background: rgba(80, 20, 42, 0.55);
  border: 1px solid rgba(255, 150, 185, 0.25);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ── 全屏预览按钮 ── */
.arcaea-mermaid-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  /* 全屏按钮 backdrop */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(20, 25, 35, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  color: rgba(238, 244, 255, 0.7);
  font-size: 16px;
  cursor: pointer;

  opacity: 0;
  -webkit-transition: opacity 0.2s ease, background 0.2s ease;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.arcaea-mermaid-box:hover .arcaea-mermaid-fullscreen-btn {
  opacity: 1;
}

.arcaea-mermaid-fullscreen-btn:hover {
  background: rgba(40, 50, 70, 0.8);
  color: rgba(238, 244, 255, 1);
}

/* ── 全屏覆层 ── */
.arcaea-mermaid-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(10, 12, 18, 0.92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);

  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.arcaea-mermaid-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.arcaea-mermaid-overlay .arcaea-mermaid-overlay-content {
  max-width: 94vw;
  max-height: 92vh;
  overflow: auto;
  border-radius: 18px;
  background: rgba(20, 25, 35, 0.5);
  padding: 1rem;
}

.arcaea-mermaid-overlay .arcaea-mermaid-overlay-content svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.arcaea-mermaid-overlay-close {
  position: absolute;
  top: 20px;
  right: 24px;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(20, 25, 35, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  color: rgba(238, 244, 255, 0.85);
  font-size: 22px;
  cursor: pointer;

  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
  z-index: 10;
}

.arcaea-mermaid-overlay-close:hover {
  background: rgba(60, 30, 40, 0.8);
  color: #fff;
}

/* ── 滚动条美化 ── */
.arcaea-mermaid-box::-webkit-scrollbar,
.arcaea-mermaid-overlay-content::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.arcaea-mermaid-box::-webkit-scrollbar-track,
.arcaea-mermaid-overlay-content::-webkit-scrollbar-track {
  background: transparent;
}

.arcaea-mermaid-box::-webkit-scrollbar-thumb,
.arcaea-mermaid-overlay-content::-webkit-scrollbar-thumb {
  background: rgba(160, 220, 255, 0.25);
  border-radius: 3px;
}

.arcaea-mermaid-box::-webkit-scrollbar-thumb:hover,
.arcaea-mermaid-overlay-content::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 220, 255, 0.4);
}

/* ── 响应式：平板 ── */
@media (max-width: 768px) {
  .arcaea-mermaid-box {
    margin: 1.4rem 0;
    padding: 0.75rem;
    border-radius: 14px;
  }

  pre.mermaid svg {
    padding: 6px;
  }

  .arcaea-mermaid-fullscreen-btn {
    opacity: 1;
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .arcaea-mermaid-overlay .arcaea-mermaid-overlay-content {
    max-width: 98vw;
    max-height: 96vh;
    padding: 0.5rem;
  }
}

/* ── 响应式：小手机 ── */
@media (max-width: 420px) {
  .arcaea-mermaid-box {
    padding: 0.5rem;
    border-radius: 12px;
    margin: 1rem 0;
  }

  pre.mermaid svg {
    padding: 4px;
    border-radius: 10px;
  }
}

/* ── 减少动效 ── */
@media (prefers-reduced-motion: reduce) {

  .arcaea-mermaid-box,
  .arcaea-mermaid-box:hover {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  .arcaea-mermaid-overlay {
    transition: none !important;
  }
}