/**
 * MOKO 统一 Mermaid 出图皮肤 — 与 js/core/mermaid-presets.js（默认 cursor）配套。
 * 任意页面只要：mermaid.min.js + mermaid-presets.js + 本文件 + MokoMermaid.render(el, code)
 */

.moko-mermaid-surface {
  --moko-mmd-bg: #202122;
  --moko-mmd-node-fill: #262728;
  --moko-mmd-cluster-fill: rgba(255, 255, 255, 0.018);
  --moko-mmd-cluster-stroke: #4c5056;
  --moko-mmd-cluster-label: #9ca0a2;
  --moko-mmd-node-stroke: #a8abad;
  --moko-mmd-line: #8b8f91;
  --moko-mmd-arrow: #ffffff;
  --moko-mmd-text: #c9cbcc;
  --moko-mmd-font-family: "SimHei", "Heiti SC", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  background: var(--moko-mmd-bg);
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: auto;
  box-sizing: border-box;
}

.moko-mermaid-surface svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.moko-mermaid-surface .cluster rect {
  fill: var(--moko-mmd-cluster-fill) !important;
  stroke: var(--moko-mmd-cluster-stroke) !important;
  stroke-width: var(--moko-mmd-cluster-stroke-width, 1.1px) !important;
  rx: 0 !important;
  ry: 0 !important;
}

.moko-mermaid-surface .cluster .cluster-label,
.moko-mermaid-surface .cluster-label {
  fill: var(--moko-mmd-cluster-label) !important;
  font-weight: var(--moko-mmd-cluster-label-weight, 600);
  font-family: var(--moko-mmd-font-family) !important;
}

.moko-mermaid-surface .node rect,
.moko-mermaid-surface .node polygon {
  fill: var(--moko-mmd-node-fill) !important;
  stroke: var(--moko-mmd-node-stroke) !important;
  stroke-width: var(--moko-mmd-node-stroke-width, 1.15px) !important;
  rx: 0 !important;
  ry: 0 !important;
  filter: none !important;
}

.moko-mermaid-surface .node .label-container {
  rx: 0 !important;
  ry: 0 !important;
}

.moko-mermaid-surface .nodeLabel,
.moko-mermaid-surface .label,
.moko-mermaid-surface .nodeLabel p,
.moko-mermaid-surface .nodeLabel span {
  color: var(--moko-mmd-text) !important;
  fill: var(--moko-mmd-text) !important;
  font-family: var(--moko-mmd-font-family) !important;
  font-size: var(--moko-mmd-node-font-size, inherit) !important;
  font-weight: var(--moko-mmd-node-font-weight, 500) !important;
  letter-spacing: var(--moko-mmd-node-letter-spacing, normal) !important;
  line-height: var(--moko-mmd-node-line-height, inherit) !important;
}

.moko-mermaid-surface .edgeLabel {
  background-color: var(--moko-mmd-bg) !important;
}

.moko-mermaid-surface .edgeLabel .edgeLabel,
.moko-mermaid-surface .edgeLabel span,
.moko-mermaid-surface .edgeLabel p {
  color: var(--moko-mmd-text) !important;
  fill: var(--moko-mmd-text) !important;
  font-family: var(--moko-mmd-font-family) !important;
  font-size: var(--moko-mmd-edge-label-font-size, inherit) !important;
  line-height: var(--moko-mmd-edge-label-line-height, inherit) !important;
}

.moko-mermaid-surface .flowchart-link,
.moko-mermaid-surface .edgePath .path,
.moko-mermaid-surface path.flowchart-link {
  stroke: var(--moko-mmd-line) !important;
  stroke-width: var(--moko-mmd-line-width, 1.15px) !important;
  fill: none !important;
}

.moko-mermaid-surface marker path,
.moko-mermaid-surface .arrowheadPath {
  fill: var(--moko-mmd-arrow) !important;
  stroke: var(--moko-mmd-arrow) !important;
  transform: scale(0.46);
  transform-box: fill-box;
  transform-origin: center;
}

.moko-mermaid-surface .labelBkg,
.moko-mermaid-surface .edgeLabel rect {
  background: var(--moko-mmd-bg) !important;
  fill: var(--moko-mmd-bg) !important;
  opacity: var(--moko-mmd-edge-label-bg-opacity, 0.92) !important;
}

.moko-mermaid-surface--onyx {
  --moko-mmd-bg: #0d0d0f;
  --moko-mmd-cluster-fill: rgba(124, 108, 245, 0.06);
  --moko-mmd-cluster-stroke: rgba(124, 108, 245, 0.22);
  --moko-mmd-cluster-label: rgba(255, 255, 255, 0.55);
}

.moko-mermaid-surface--paper {
  --moko-mmd-bg: #f6f3ee;
  --moko-mmd-cluster-fill: rgba(0, 0, 0, 0.03);
  --moko-mmd-cluster-stroke: #d8cfc4;
  --moko-mmd-cluster-label: #5c5348;
  --moko-mmd-node-stroke: #c9bfb0;
}

.moko-mermaid-error {
  color: #f87171;
  font-size: 12px;
  padding: 12px;
  margin: 0;
}

/* Mermaid → 2D 画布：与 cursor 预设同底色 */
#graph2DContainer.moko-canvas-mermaid-cursor .x6-graph-background {
  fill: var(--moko-mermaid-canvas-bg, #202122) !important;
}

/* S03.M 结构主视图 */
.moko-structure-diagram-host {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #141416;
}

/* 叠在 2D 画布（#graph2DContainer）内，高于 X6 图元 */
#graph2DContainer .moko-structure-diagram-host.moko-structure-in-canvas {
  z-index: 24;
}

/* 画布内 + 仅工具栏模式：必须透明背景，避免遮挡画布 */
#graph2DContainer .moko-structure-diagram-host.moko-structure-in-canvas.moko-toolbar-only {
  background: transparent;
}

/* 画布内 + 仅工具栏模式：隐藏结构图工具栏，避免遮挡画布顶部 */
#graph2DContainer .moko-structure-diagram-host.moko-structure-in-canvas.moko-toolbar-only .moko-structure-diagram-toolbar {
  display: none !important;
}

/* 非编辑源码时：壳层不挡滚轮/点击，只留顶栏工具条可点 */
#graph2DContainer .moko-structure-diagram-host.moko-structure-in-canvas:not(.is-editing-source) {
  pointer-events: none;
}

#graph2DContainer .moko-structure-diagram-host.moko-structure-in-canvas:not(.is-editing-source) .moko-structure-diagram-toolbar {
  pointer-events: auto;
}

#graph2DContainer .moko-structure-diagram-host.moko-structure-in-canvas:not(.is-editing-source) .moko-structure-diagram-stage,
#graph2DContainer .moko-structure-diagram-host.moko-structure-in-canvas:not(.is-editing-source) .moko-structure-diagram-editor {
  pointer-events: none !important;
}

/* 仅保留工具栏：Mermaid 由 X6 画布渲染 */
.moko-structure-diagram-host.moko-toolbar-only {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  min-height: 0;
  background: transparent;
  z-index: 30;
  pointer-events: none;
}

.moko-structure-diagram-host.moko-toolbar-only .moko-structure-diagram-toolbar {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}

.moko-structure-diagram-host.moko-toolbar-only .moko-structure-diagram-stage {
  display: none !important;
}

.moko-structure-diagram-host.moko-toolbar-only:not(.is-editing-source) .moko-structure-diagram-editor {
  display: none !important;
}

.moko-structure-diagram-host.moko-toolbar-only.is-editing-source {
  pointer-events: auto;
  background: rgba(20, 20, 22, 0.92);
  bottom: 0;
  height: auto;
  max-height: 45%;
}

.moko-structure-diagram-host.moko-toolbar-only.is-editing-source .moko-structure-diagram-editor {
  display: block;
  min-height: 120px;
}

.moko-structure-diagram-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
}

.moko-structure-diagram-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin-right: 8px;
}

.moko-structure-diagram-toolbar .moko-btn {
  font-size: 11px;
  padding: 4px 10px;
}

.moko-structure-diagram-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 0;
}

.moko-structure-diagram-status,
.moko-structure-diagram-empty {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  padding: 24px;
  text-align: center;
}

.moko-structure-diagram-editor {
  flex: 1;
  min-height: 120px;
  margin: 0;
  padding: 12px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.88);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  display: none;
}

.moko-structure-diagram-host.is-editing-source .moko-structure-diagram-stage {
  display: none;
}

.moko-structure-diagram-host.is-editing-source .moko-structure-diagram-editor {
  display: block;
}

.moko-structure-diagram-stage g.node.moko-structure-node-flash rect,
.moko-structure-diagram-stage g.node.moko-structure-node-flash polygon {
  stroke: rgba(168, 156, 248, 0.95) !important;
  filter: drop-shadow(0 0 8px rgba(168, 156, 248, 0.55));
}

.moko-structure-diagram-stage g.node.moko-structure-node-draft rect,
.moko-structure-diagram-stage g.node.moko-structure-node-draft polygon {
  stroke-dasharray: 5 4;
  stroke: rgba(251, 191, 36, 0.85) !important;
}

.moko-structure-diagram-stage g.node.moko-structure-node-draft-selected rect,
.moko-structure-diagram-stage g.node.moko-structure-node-draft-selected polygon {
  stroke: rgba(251, 191, 36, 1) !important;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}

.moko-structure-diagram-stage g.node.moko-structure-node-dragging {
  cursor: grabbing !important;
  opacity: 0.92;
}

.moko-object-axis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.moko-object-axis-chip {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}

.moko-object-axis-chip.active {
  border-color: rgba(168, 156, 248, 0.65);
  background: rgba(168, 156, 248, 0.16);
  color: #fff;
}

.nav-item--axis {
  font-size: 12px;
}

.moko-structure-bind-popover {
  position: fixed;
  z-index: 12050;
  width: min(360px, calc(100vw - 24px));
  max-height: min(420px, 70vh);
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 12px;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
}

.moko-structure-bind-popover[hidden] {
  display: none !important;
}

.moko-structure-bind-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.85);
}

.moko-structure-bind-close {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.moko-structure-bind-results {
  overflow: auto;
  margin-top: 8px;
  max-height: 280px;
}

.moko-structure-bind-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  text-align: left;
}

.moko-structure-bind-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.moko-structure-bind-row-type {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}