/**
 * Mermaid lightbox 私有样式（壳由 lightbox-shell 提供）。
 *
 * 给 SVG 一个白底底板，避免 mermaid 的深色文字直接落在黑色 backdrop 上。
 *
 * 尺寸注意：
 * LightboxShell 的 `.sc-lightbox-shell__content-inner > svg` 兜底规则只命中
 * 直接子 svg。本组件用一层 div 包裹 SVG（提供白底/padding），SVG 不是直接子，
 * 该兜底不会生效，必须在此处自行约束尺寸。
 *
 * 此外 mermaid 渲染器开启了 `useMaxWidth: true`，会在 SVG 上写入 inline
 * `style="max-width: <自然宽度>px"`，把矢量图钉死在自然宽度。内联预览时容器
 * 有明确宽度、SVG width="100%" 能撑开；全屏后容器 shrink-to-fit 回退到自然
 * 尺寸，再被 inline max-width 限制 → 图显得过小。下面在 PC 端覆盖该 inline
 * 值并给容器一个基于视口的明确宽度，让矢量图放大到适配视口。
 */
.sc-mermaid-lightbox-svg {
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  max-width: 100vw;
  max-height: 100vh;
}
.sc-mermaid-lightbox-svg svg {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 48px);
}
@media (min-width: 769px) {
  .sc-mermaid-lightbox-svg {
    width: calc(100vw - 160px);
    max-width: 100%;
    max-height: calc(100vh - 148px);
  }
  .sc-mermaid-lightbox-svg svg {
    max-width: none !important;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 196px);
    object-fit: contain;
  }
}

/**
 * Mermaid 插件颜色单一数据源（design tokens）。
 *
 * 所有 `--sc-mermaid-*` 变量的默认值集中声明在此，作为整个插件颜色的唯一声明处。
 * 声明在 :root 上，确保：
 * - mermaidjs 渲染器通过 getComputedStyle(documentElement) 能解析到图表色；
 * - 消费方可在任意祖先选择器（或 :root）覆盖变量，自动跟随宿主 light/dark，
 *   无需改代码、无需重渲染。
 *
 * 命名规范：统一 `--sc-mermaid-` 前缀（插件标识）+ 语义化名称；
 * 每个变量的默认值 fallback 到原全局变量 / 原硬编码值，保证重构后像素级零变化。
 */
:root {
  /* ── 图表 SVG 主题色（渲染器实际消费，见 theme-map.ts DEFAULT_THEME_COLORS） ── */
  --sc-mermaid-bg: #ffffff;
  --sc-mermaid-fg: #1f1f1f;
  --sc-mermaid-accent: #6366f1;
  --sc-mermaid-border: #c7c7f4;
  --sc-mermaid-surface: #ededfc;
  --sc-mermaid-muted: #6b7280;
  /* ── 排版（Typography） ──
   * 代码编辑区 + 行号 + 预览错误详情共用等宽字体；
   * 工具栏 / 菜单项 / 视图切换用辅助字号。
   * 编辑器内的缩放声明见下方 [data-sc-theme] 块（--sc-font-scale 排版整体缩放）。 */
  --sc-mermaid-font-family-code: 'SFMono-Regular', Consolas, 'PT Mono', 'Liberation Mono', Courier, monospace;
  --sc-mermaid-font-size-code: 13px;
  /* 代码编辑区 + 行号 */
  --sc-mermaid-font-size-ui: 12px;
  /* toolbar 按钮 / 视图切换 / 菜单项 */
  --sc-mermaid-font-size-preview: 13px;
  /* 预览空态 / 错误提示正文 */
  --sc-mermaid-font-size-detail: 12px;
  /* 错误详情代码段 */
  --sc-mermaid-line-height-code: 1.6;
  /* 代码编辑区行高 */
  /* ── 代码编辑区 ── */
  /* 代码盒：默认灰底 */
  --sc-mermaid-code-bg: #f6f7f9;
  /* ── 外层卡片容器（.sc-mermaid-editor） ── */
  --sc-mermaid-card-bg: var(--sc-bg-page, #fff);
  --sc-mermaid-card-border: var(--line, rgba(0, 0, 0, 0.08));
  --sc-mermaid-card-hover-border: rgba(0, 0, 0, 0.16);
  --sc-mermaid-card-hover-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  /* 选中态：点击预览区 / 框选命中时（BlockShell 给外壳加 is-selected）
   * 描边色与 image block 选中态（.sc-image-media outline）保持一致：
   * 主题色 --sc-ui-primary 按 55% 透明度混合，而非纯色实心蓝。 */
  --sc-mermaid-card-focused-border: color-mix(in srgb, var(--sc-ui-primary) 55%, transparent);
  --sc-mermaid-card-focused-shadow: inset 0 0 0 1px var(--sc-text-blue), 0 0 0 2px rgba(41, 114, 244, 0.08);
  /* ── 预览空态 / 错误态 ── */
  --sc-mermaid-muted-fg: var(--sc-text-grey);
  --sc-mermaid-error-title-fg: var(--sc-text-red);
  --sc-mermaid-error-detail-bg: var(--sc-inline-code-bg);
  /* ── Hover 悬浮工具栏（PC 端） ── */
  --sc-mermaid-toolbar-bg: var(--sc-bg-page, #fff);
  --sc-mermaid-toolbar-border: var(--sc-divider-light_grey_divider, #e8e8e8);
  --sc-mermaid-toolbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --sc-mermaid-toolbar-hover-bg: rgba(0, 0, 0, 0.03);
  --sc-mermaid-toolbar-divider: var(--sc-divider-light_grey_divider, #e8e8e8);
  --sc-mermaid-toolbar-check-color: var(--sc-text-blue, #0052d9);
  --sc-mermaid-toolbar-color: var(--sc-text-default, #1f1f1f);
}
/* ── 暗黑模式覆盖 ── */
:root[data-theme='dark'],
.dark {
  --sc-mermaid-toolbar-bg: var(--sc-bg-page, #2c2c2c);
  --sc-mermaid-toolbar-border: var(--sc-divider-light_grey_divider, #444);
  --sc-mermaid-toolbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --sc-mermaid-toolbar-hover-bg: rgba(255, 255, 255, 0.06);
  --sc-mermaid-toolbar-divider: var(--sc-divider-light_grey_divider, #444);
  --sc-mermaid-toolbar-color: var(--sc-text-default, #e0e0e0);
}
/* ── 编辑器内排版整体缩放（--sc-font-scale）──
 * 4 个字号 token 在编辑器 scope（[data-sc-theme] = 编辑器根，与
 * data-sc-editor-id 同元素）重声明为 calc 跟随缩放，宿主设置
 * --sc-font-scale（或 themeConfig.fontScale）即可联动缩放插件 UI 字号。
 *
 * 为什么不在上方 :root 直接包 calc：var() 替换发生在声明处，
 * :root 上取不到编辑器根的 --sc-font-scale（prop 通道挂编辑器根），
 * 缩放会静默失效；:root 绝对值保留作为跨 scope 兜底
 * （mermaidjs 渲染器经 documentElement 读取 + 宿主 :root 覆盖习惯）。
 *
 * 宿主在 :root 覆盖这些字号时，编辑器内将被本块 calc 声明覆盖
 * （近祖声明优先于 :root 继承），需改为在编辑器 scope 覆盖。
 * SVG 图内文字字号走 mermaid 库默认配置，不在此 token 体系内。 */
:where([data-sc-theme]) {
  --sc-mermaid-font-size-code: calc(13px * var(--sc-font-scale, 1));
  --sc-mermaid-font-size-ui: calc(12px * var(--sc-font-scale, 1));
  --sc-mermaid-font-size-preview: calc(13px * var(--sc-font-scale, 1));
  --sc-mermaid-font-size-detail: calc(12px * var(--sc-font-scale, 1));
}

/* ── Mermaid 样式 ─────────────────────────────────────────── */
/* 颜色变量（--sc-mermaid-*）的默认值统一声明在 themes/mermaid-tokens.less，
   由 mermaid-block.tsx 在本文件之前引入。外部覆盖可在任意祖先选择器上重定义。 */
.sc-block-mermaid {
  position: relative;
}
/* 关闭默认的块级选中蒙层（::after 蓝色半透明背景），
 * mermaid 选中态改由 .sc-mermaid-editor 的 border 描边表达（见上方 .is-selected & 规则）。
 * 选择器特异性：.sc-block-mermaid.is-selected::after > .sc-block.is-selected::after */
.sc-block-mermaid.is-selected::after {
  content: none;
}
.sc-mermaid-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--sc-block-radius, 8px);
  overflow: hidden;
  background: var(--sc-mermaid-card-bg);
  border: 1px solid var(--sc-mermaid-card-border);
  -webkit-user-select: text;
          user-select: text;
  transition: border-color 0.2s, box-shadow 0.2s;
  /* 聚焦态：光标落入本块时 BlockShell 给外壳（.sc-block）加 is-focused。
   * 不再变更外层卡片 border / box-shadow，保持与未聚焦一致的视觉。 */
  /* 块级选中态：点击 block menu / 框选命中时 BlockShell 给外壳（.sc-block）加 is-selected。
   * mermaid 作为 plainText block 会被 isOpaqueBlock 命中，默认走 .sc-block.is-selected::after
   * 蓝色半透明蒙层。此处覆盖默认蒙层，改为仅 border 描边高亮（不加阴影），
   * 避免蒙层压住预览图导致视觉浑浊。 */
}
@media (hover: hover) {
  .sc-mermaid-editor:hover {
    border-color: var(--sc-mermaid-card-hover-border);
    box-shadow: var(--sc-mermaid-card-hover-shadow);
  }
}
.is-selected .sc-mermaid-editor {
  border-color: var(--sc-mermaid-card-focused-border);
}
.sc-mermaid-editor__body {
  display: flex;
  min-height: 240px;
}
.sc-mermaid-editor--split .sc-mermaid-editor__body .sc-mermaid-code-pane,
.sc-mermaid-editor--split .sc-mermaid-editor__body .sc-mermaid-preview-pane {
  flex: 1 1 50%;
  min-width: 0;
}
.sc-mermaid-editor--source .sc-mermaid-editor__body .sc-mermaid-code-pane {
  flex: 1 1 100%;
}
.sc-mermaid-editor--source .sc-mermaid-editor__body .sc-mermaid-preview-pane {
  display: none;
}
.sc-mermaid-editor--preview .sc-mermaid-editor__body .sc-mermaid-code-pane {
  display: none;
}
.sc-mermaid-editor--preview .sc-mermaid-editor__body .sc-mermaid-preview-pane {
  flex: 1 1 100%;
}
.sc-mermaid-code-pane {
  /* 独立盒子：距外层卡片 12px（外层无内边距，直接用 margin 达成视觉 12px） */
  margin: 12px;
  /* 盒内留白：垂直 14 / 水平 16 */
  padding: 14px 16px;
  border-radius: var(--sc-block-radius, 8px);
  /* 默认灰底；用 1px 透明边框预留位置，激活时只换色不产生抖动 */
  background: var(--sc-mermaid-code-bg, #f6f7f9);
  border: 1px solid transparent;
  overflow: auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s;
}
/* 激活（聚焦编辑）态：光标落入本块时 BlockShell 会给外壳加 is-focused。
 * 编辑器采用嵌套 contentEditable，DOM 焦点恒在 Root CE 上，:focus-within 命中不到
 * 代码盒子内的元素，因此改用 is-focused 祖先类判定。
 * 聚焦时外层卡片 border 换编辑器主题蓝（--sc-text-blue）并叠加 inset 描边 + 外阴影，
 * 视觉提示当前块处于编辑焦点。 */
/* 共用排版变量：行号 + 编辑层必须严格一致才能行级对齐 */
.sc-mermaid-line-numbers,
.sc-mermaid-editable {
  font-family: var(--sc-mermaid-font-family-code);
  font-size: var(--sc-mermaid-font-size-code);
  line-height: var(--sc-mermaid-line-height-code);
  tab-size: 2;
}
/* 行号侧栏 */
.sc-mermaid-line-numbers {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  -webkit-user-select: none;
          user-select: none;
  text-align: right;
  color: var(--sc-text-grey);
  /* 至少容纳 2 位数字，避免 1→10 时整体抖动 */
  min-width: 2ch;
}
.sc-mermaid-line-numbers .sc-mermaid-line-number {
  display: block;
}
.sc-mermaid-preview-pane {
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
  background: transparent;
}
@media (pointer: coarse) {
  .sc-mermaid-preview-pane {
    -webkit-user-select: none;
            user-select: none;
  }
}
.sc-mermaid-preview-pane .sc-mermaid-preview,
.sc-mermaid-preview-pane .sc-mermaid-preview-empty,
.sc-mermaid-preview-pane .sc-mermaid-preview-loading,
.sc-mermaid-preview-pane .sc-mermaid-preview-error {
  flex: 1 1 100%;
  min-height: 100%;
  border-radius: 0;
  border: none;
  background: transparent;
}
/* 共用预览渲染容器 */
.sc-mermaid-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-x: auto;
}
.sc-mermaid-preview svg {
  max-width: 100%;
  height: auto;
}
.sc-mermaid-preview-empty,
.sc-mermaid-preview-loading,
.sc-mermaid-preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  color: var(--sc-mermaid-muted-fg);
  font-size: var(--sc-mermaid-font-size-preview);
  text-align: center;
}
.sc-mermaid-preview-empty__hint {
  color: var(--sc-mermaid-muted-fg);
}
/* 加载态：整个 pane 延迟 200ms 淡入——快速路径（渲染库 chunk 已缓存、渲染
 * <200ms 完成）下 loading 态完全不出现，避免一闪而过；慢路径下 200ms 后才出现
 * 加载反馈，属常规 spinner 延迟阈值，无感知损伤。
 * spinner 用纯 CSS border 环 + rotate 动画（不引入图片/图标资源），底环用
 * 卡片边框色、顶部弧用弱化前景色，视觉与 empty/error 占位的克制风格一致。 */
.sc-mermaid-preview-loading {
  animation: sc-mermaid-loading-fade-in 0.2s ease-out 0.2s both;
}
.sc-mermaid-preview-loading__hint {
  color: var(--sc-mermaid-muted-fg);
}
.sc-mermaid-preview-loading__spinner {
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 2px solid var(--sc-mermaid-card-border);
  border-top-color: var(--sc-mermaid-muted-fg);
  animation: sc-mermaid-loading-rotate 0.8s linear infinite;
}
@keyframes sc-mermaid-loading-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sc-mermaid-loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
/* 减少动态效果偏好：取消渐变与旋转，但保留 200ms 显示延迟（延迟出现是防快速
 * 路径闪现的逻辑而非动效；duration 归零 = 延迟结束后瞬间切换，无渐变运动）。
 * pane 透明度仍由动画 both 填充控制，reduced-motion 下同样可见。 */
@media (prefers-reduced-motion: reduce) {
  .sc-mermaid-preview-loading {
    animation-duration: 0s;
  }
  .sc-mermaid-preview-loading__spinner {
    animation: none;
  }
}
.sc-mermaid-preview-error__title {
  color: var(--sc-mermaid-error-title-fg);
  font-weight: 600;
  margin-bottom: 4px;
}
.sc-mermaid-preview-error__hint {
  color: var(--sc-mermaid-muted-fg);
  margin-bottom: 8px;
}
.sc-mermaid-preview-error__detail {
  width: 100%;
  max-width: 600px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--sc-mermaid-error-detail-bg);
  color: var(--sc-mermaid-muted-fg);
  font-family: var(--sc-mermaid-font-family-code);
  font-size: var(--sc-mermaid-font-size-detail);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}
/* 代码编辑层（BlockLeafEditable plainText）—— 字体 / 行高 / tab-size 已在
 * `.sc-mermaid-line-numbers, .sc-mermaid-editable` 共享块中声明，此处只声明
 * 编辑特有的样式（颜色 / 选区背景 / 自动换行）。 */
.sc-mermaid-editable {
  flex: 1;
  min-height: 200px;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--sc-text-default);
  caret-color: var(--sc-text-default);
  white-space: pre-wrap;
  word-break: break-word;
}
.sc-mermaid-editable::selection {
  background: var(--sc-color-selection);
}
/* ── Hover 悬浮工具栏：已迁移到统一 block-toolbar，样式由 BlockToolbarHost 提供 ── */
/* 拖拽预览：隐藏内部卡片边框 / 阴影 / 背景，由 .sc-drag-preview 统一提供外框，
 * 避免拖拽时出现双重边框（与 callout 等 block 行为一致）。
 * 需覆盖 is-focused / is-selected 态（clone 可能携带这些 class）。
 * background 也需置透明：drag preview 是半透明磨砂背景，mermaid 卡片白底会在
 * 内部形成可见边缘，视觉上仍像第二层边框。 */
.sc-drag-preview .sc-mermaid-editor,
.sc-drag-preview .is-focused .sc-mermaid-editor,
.sc-drag-preview .is-selected .sc-mermaid-editor {
  border-color: transparent;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
/* 移动端浮动工具栏中的下拉箭头 */
.sc-mermaid-mobile-chevron {
  color: var(--sc-text-grey);
}
/* ── Legacy Toolbar (kept for mobile floating toolbar) ───── */
.sc-mermaid-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  background: var(--sc-bg-grey_background);
  border: 1px solid var(--sc-divider-light_grey_divider);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-size: var(--sc-mermaid-font-size-code);
  color: var(--sc-text-default);
  -webkit-user-select: none;
          user-select: none;
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--sc-mermaid-font-size-code);
  line-height: 1;
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__btn[data-state='open'] {
  background: var(--sc-inline-code-bg);
}
@media (hover: hover) {
  .sc-mermaid-toolbar .sc-mermaid-toolbar__btn:hover {
    background: var(--sc-inline-code-bg);
  }
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__btn[disabled],
.sc-mermaid-toolbar .sc-mermaid-toolbar__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__icon-only {
  padding: 4px 6px;
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__icon-btn {
  padding: 4px 6px;
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__icon-btn.is-active {
  color: var(--sc-text-blue);
  background: var(--sc-inline-code-bg);
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--sc-divider-light_grey_divider);
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__suffix {
  margin-left: 8px;
  font-size: 12px;
  color: var(--sc-text-grey);
}
.sc-mermaid-toolbar .sc-mermaid-toolbar__check {
  margin-left: 8px;
  color: var(--sc-text-blue);
}