.mermaid-container {
  margin-block: var(--flow-media, calc(16em / 14)) 0;
  position: relative;
}
.mermaid-wrapper {
  border: 1px solid var(--surface0);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: var(--mantle);
}
/* 工具栏与方向盘的显隐落在按钮自身：按钮是玻璃（自带 backdrop-filter），若淡入淡出挂在
   容器上，容器 opacity < 1 期间会成为 Backdrop Root，按钮的模糊要等淡入结束才「啪」地出现 */
.mermaid-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 20;
  display: flex;
  gap: 4px;
}
.mermaid-toolbar .btn,
.mermaid-viewer-grid-panel .btn {
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .mermaid-wrapper:hover :is(.mermaid-toolbar, .mermaid-viewer-grid-panel) .btn {
    opacity: 1;
  }
}
.mermaid-wrapper.is-controls-visible :is(.mermaid-toolbar, .mermaid-viewer-grid-panel) .btn,
.mermaid-wrapper:focus-within :is(.mermaid-toolbar, .mermaid-viewer-grid-panel) .btn,
.mermaid-toolbar .preview-diagram {
  opacity: 1;
}
.mermaid-view-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
  overflow: hidden;
  cursor: grab;
  touch-action: pinch-zoom;
  display: flex;
  flex-direction: column;
}
.mermaid-view-container.is-dragging {
  cursor: grabbing;
}
.mermaid-content {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  transform-origin: center;
  transition: transform 200ms var(--ease-out);
}
.mermaid-view-container.is-dragging .mermaid-content {
  transition: none;
}
.mermaid-viewer-grid-panel {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 10;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}
.mermaid-viewer-grid-panel .grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.mermaid-viewer-grid-panel .empty-cell {
  width: 32px;
  height: 32px;
}
/* 小号玻璃方钮：材质取 default.css 的 --glass-* token；不挂 .glass 类（按钮由脚本生成），
   描边高光走 inset box-shadow。离图边 8px，圆角 10px */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: var(--glass-fill);
  box-shadow:
    0 0 0 0.5px var(--glass-edge),
    inset 0 1px 0 var(--glass-rim-lo),
    inset 0 0 0 1px var(--glass-rim-mid),
    var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    scale 420ms var(--glass-spring),
    color 0.2s ease,
    background-color 0.2s ease;
  color: var(--title-text-color);
  padding: 0;
}
.btn:hover {
  background-color: color-mix(in oklab, var(--glass-fill), var(--title-text-color) 6%);
}
.btn:active {
  scale: 0.96;
  background-color: color-mix(in oklab, var(--glass-fill), oklch(1 0 0) var(--glass-press-mix));
  transition-duration: 0.2s, 140ms, 0.2s, 90ms;
}
.btn svg {
  fill: currentColor;
}
.btn .mermaid-preview-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mermaid-container .btn:focus-visible,
.mermaid-preview .btn:focus-visible {
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .mermaid-wrapper {
    border-radius: 3px;
  }
  .btn {
    width: 28px;
    height: 28px;
  }
}

/* 原生 dialog 铺满视口；背景 inert、焦点约束与 Esc 由浏览器提供。 */
html:has(.mermaid-preview[open]) {
  overflow: hidden;
}
dialog.mermaid-preview {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--mantle);
  color: var(--sub-text-color);
}
.mermaid-preview[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.mermaid-preview::backdrop {
  background: var(--mantle);
}
.mermaid-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--surface0);
}
.mermaid-preview .mermaid-preview-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--title-text-color);
}
.mermaid-preview .mermaid-container {
  min-height: 0;
  margin: 0;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.mermaid-preview .mermaid-wrapper {
  height: 100%;
  border: none;
  border-radius: 0;
}
.mermaid-preview .mermaid-view-container {
  min-height: 0;
}
.mermaid-preview .mermaid-content {
  min-height: 0;
  height: 100%;
  padding: clamp(1rem, 4vw, 3rem);
}
.mermaid-preview[open] .mermaid-container .mermaid-content > svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.mermaid-preview .btn,
.mermaid-preview .empty-cell {
  width: 40px;
  height: 40px;
}
.mermaid-preview .btn {
  opacity: 1;
}
.mermaid-preview .preview-diagram {
  display: none;
}
@media (pointer: coarse) {
  .mermaid-container .btn,
  .mermaid-container .empty-cell,
  .mermaid-preview .btn {
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mermaid-content,
  .mermaid-container .btn,
  .mermaid-preview .btn {
    transition: none;
  }
}

/* 构建期由 agentic-mermaid 内联的 SVG。库自带的通用 <style>（不限定作用域的
   text / svg / .mono 规则）已在服务端剥除，这里把同一套派生色阶限定在图内重新声明——权重与
   agentic-mermaid theme.ts 的 color-mix 一致，test/mermaid_render.test.js 校验同步；
   --bg / --fg / --accent 由渲染期写在 <svg style> 上，指向站内色板，随主题即时切换。
   与浏览器脚本使用相同的预渲染判定，也兼容 Hexo 数据库中缓存的旧版 SVG。 */
[data-mermaid-renderer]:not([data-mermaid-renderer="mermaid-js"]) .mermaid-content svg {
  max-width: 100%;
  height: auto;
  --_text: var(--fg);
  --_text-sec: var(--muted, color-mix(in srgb, var(--fg) 78%, var(--bg)));
  --_text-muted: var(--muted, color-mix(in srgb, var(--fg) 66%, var(--bg)));
  --_text-faint: color-mix(in srgb, var(--fg) 54%, var(--bg));
  --_line: var(--line, color-mix(in srgb, var(--fg) 50%, var(--bg)));
  --_arrow: var(--accent, color-mix(in srgb, var(--fg) 85%, var(--bg)));
  --_node-fill: var(--surface, color-mix(in srgb, var(--fg) 3%, var(--bg)));
  --_node-stroke: var(--border, color-mix(in srgb, var(--fg) 20%, var(--bg)));
  --_group-fill: var(--bg);
  --_group-hdr: color-mix(in srgb, var(--fg) 5%, var(--bg));
  --_inner-stroke: color-mix(in srgb, var(--fg) 12%, var(--bg));
  --_key-badge: color-mix(in srgb, var(--fg) 10%, var(--bg));

  text {
    font-family: var(--font, var(--font-sans-serif));
  }
  /* 类图成员等代码体文本 */
  .mono {
    font-family: var(--font-mono);
  }
}