@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-ai-mermaid {
  --yh-ai-mermaid-bg-color: var(--yh-bg-color, #fff);
  --yh-ai-mermaid-border-color: var(--yh-border-color, #dcdfe6);
  --yh-ai-mermaid-text-color: var(--yh-text-color, #303133);
  --yh-ai-mermaid-text-secondary-color: var(--yh-text-color-secondary, #909399);
  --yh-ai-mermaid-primary-color: var(--yh-color-primary, #409eff);
  --yh-ai-mermaid-bg-title: rgba(0, 0, 0, 0.06);
  --yh-ai-mermaid-border-code: #f0f0f0;
  --yh-ai-mermaid-border-graph: #f0f0f0;
  --yh-ai-mermaid-text-title: rgba(0, 0, 0, 0.88);
  --yh-ai-mermaid-node-text-color: #333333;
  display: flex;
}
.yh-ai-mermaid.has-custom-text-color .nodeLabel,
.yh-ai-mermaid.has-custom-text-color .edgeLabel,
.yh-ai-mermaid.has-custom-text-color .label,
.yh-ai-mermaid.has-custom-text-color .label span,
.yh-ai-mermaid.has-custom-text-color span.nodeLabel,
.yh-ai-mermaid.has-custom-text-color .markdown-embed-content,
.yh-ai-mermaid.has-custom-text-color p {
  color: var(--yh-ai-mermaid-node-text-color) !important;
}
.yh-ai-mermaid.has-custom-text-color text,
.yh-ai-mermaid.has-custom-text-color .node text,
.yh-ai-mermaid.has-custom-text-color .edgeLabel text,
.yh-ai-mermaid.has-custom-text-color tspan {
  fill: var(--yh-ai-mermaid-node-text-color) !important;
}
.yh-ai-mermaid {
  flex-direction: column;
  background: var(--yh-ai-mermaid-bg-color);
  border: 1px solid var(--yh-ai-mermaid-border-color);
  border-radius: 8px;
  overflow: visible;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: ai-mermaid;
}
.yh-ai-mermaid__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--yh-ai-mermaid-bg-title);
  border-bottom: 1px solid var(--yh-ai-mermaid-border-color);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.yh-ai-mermaid__header-content {
  font-size: 14px;
  font-weight: 500;
  color: var(--yh-ai-mermaid-text-title);
}
.yh-ai-mermaid__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--yh-ai-mermaid-border-color);
}
.yh-ai-mermaid__actions:first-child {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.yh-ai-mermaid__render-tabs {
  display: flex;
  gap: 4px;
}
.yh-ai-mermaid__render-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--yh-ai-mermaid-text-secondary-color);
  background: transparent;
  border: 1px solid var(--yh-ai-mermaid-border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.yh-ai-mermaid__render-tab:hover {
  color: var(--yh-ai-mermaid-primary-color);
  border-color: var(--yh-ai-mermaid-primary-color);
}
.yh-ai-mermaid__render-tab.is-active {
  color: var(--yh-ai-mermaid-primary-color);
  border-color: var(--yh-ai-mermaid-primary-color);
  background: color-mix(in srgb, var(--yh-ai-mermaid-primary-color) 10%, transparent);
}
.yh-ai-mermaid__action-buttons {
  display: flex;
  gap: 8px;
}
.yh-ai-mermaid__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #595959;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.yh-ai-mermaid__action-btn:hover {
  color: var(--yh-ai-mermaid-primary-color);
  background: rgba(0, 0, 0, 0.05);
}
.yh-ai-mermaid__action-btn .yh-icon {
  font-size: 20px;
}
.yh-ai-mermaid__content {
  position: relative;
  padding: 16px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  width: 100%;
}
.yh-ai-mermaid__graph {
  width: 100%;
  overflow: auto;
  text-align: center;
  display: block;
  padding: 16px;
  box-sizing: border-box;
}
.yh-ai-mermaid__graph svg {
  max-width: none;
  height: auto;
  display: inline-block;
  overflow: visible !important;
}
.yh-ai-mermaid__graph .nodeLabel,
.yh-ai-mermaid__graph .edgeLabel,
.yh-ai-mermaid__graph .label,
.yh-ai-mermaid__graph .label span,
.yh-ai-mermaid__graph span.nodeLabel,
.yh-ai-mermaid__graph .markdown-embed-content,
.yh-ai-mermaid__graph p {
  color: var(--yh-ai-mermaid-node-text-color, inherit);
}
.yh-ai-mermaid .node,
.yh-ai-mermaid .edgePath,
.yh-ai-mermaid .edgeLabel,
.yh-ai-mermaid .label,
.yh-ai-mermaid .nodeLabel,
.yh-ai-mermaid .label-container,
.yh-ai-mermaid .arrowheadPath {
  overflow: visible !important;
}
.yh-ai-mermaid__code {
  width: 100%;
  padding: 16px;
  margin: 0;
  background: #282c34;
  border-radius: 4px;
  overflow-x: auto;
  font-family: "Fira Code", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #abb2bf;
}
.yh-ai-mermaid__code code {
  font-family: inherit;
}
.yh-ai-mermaid__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--yh-ai-mermaid-text-secondary-color);
  font-size: 14px;
}
.yh-ai-mermaid__loading .yh-icon {
  animation: rotate 1s linear infinite;
}
.yh-ai-mermaid__error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(245, 108, 108, 0.1);
  border-radius: 4px;
  color: #f56c6c;
  font-size: 14px;
}
@container ai-mermaid (max-width: 640px) {
  .yh-ai-mermaid__header, .yh-ai-mermaid__actions {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }
  .yh-ai-mermaid__actions {
    padding: 10px 12px;
  }
  .yh-ai-mermaid__render-tabs, .yh-ai-mermaid__action-buttons {
    width: 100%;
    flex-wrap: wrap;
  }
  .yh-ai-mermaid__content {
    padding: 12px;
  }
  .yh-ai-mermaid__code {
    padding: 12px;
  }
}
@container ai-mermaid (max-width: 420px) {
  .yh-ai-mermaid__render-tab {
    flex: 1 1 0;
    justify-content: center;
  }
  .yh-ai-mermaid__action-buttons {
    justify-content: flex-end;
  }
  .yh-ai-mermaid__graph {
    text-align: left;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
html.dark .yh-ai-mermaid,
.yh-ai-mermaid.is-dark {
  --yh-ai-mermaid-node-text-color: var(--yh-text-color, #e2e8f0);
  --yh-ai-mermaid-bg-title: rgba(255, 255, 255, 0.06);
  --yh-ai-mermaid-text-title: var(--yh-text-color, #e2e8f0);
  --yh-ai-mermaid-border-color: rgba(255, 255, 255, 0.15);
}
html.dark .yh-ai-mermaid g.edgePath path.path,
html.dark .yh-ai-mermaid g.edgePath path,
html.dark .yh-ai-mermaid .edgePaths .edgePath path,
html.dark .yh-ai-mermaid .edge-paths .edgePath path,
html.dark .yh-ai-mermaid g.edgePath .path,
html.dark .yh-ai-mermaid svg g.edgePath path,
html.dark .yh-ai-mermaid path.path,
html.dark .yh-ai-mermaid path.edge-path,
.yh-ai-mermaid.is-dark g.edgePath path.path,
.yh-ai-mermaid.is-dark g.edgePath path,
.yh-ai-mermaid.is-dark .edgePaths .edgePath path,
.yh-ai-mermaid.is-dark .edge-paths .edgePath path,
.yh-ai-mermaid.is-dark g.edgePath .path,
.yh-ai-mermaid.is-dark svg g.edgePath path,
.yh-ai-mermaid.is-dark path.path,
.yh-ai-mermaid.is-dark path.edge-path {
  stroke: #e2e8f0 !important;
}
html.dark .yh-ai-mermaid .edgeLabel rect,
html.dark .yh-ai-mermaid .edgeLabel .label-container,
.yh-ai-mermaid.is-dark .edgeLabel rect,
.yh-ai-mermaid.is-dark .edgeLabel .label-container {
  fill: var(--yh-ai-mermaid-bg-color, #1a1a1a) !important;
}
html.dark .yh-ai-mermaid .edgeLabel span,
html.dark .yh-ai-mermaid .edgeLabel text,
html.dark .yh-ai-mermaid .edgeLabel tspan,
.yh-ai-mermaid.is-dark .edgeLabel span,
.yh-ai-mermaid.is-dark .edgeLabel text,
.yh-ai-mermaid.is-dark .edgeLabel tspan {
  fill: var(--yh-text-color, #e2e8f0) !important;
  color: var(--yh-text-color, #e2e8f0) !important;
}
html.dark .yh-ai-mermaid g.edgePath path.arrowheadPath,
html.dark .yh-ai-mermaid .arrowheadPath,
html.dark .yh-ai-mermaid svg [id^=arrowhead] path,
html.dark .yh-ai-mermaid svg marker path,
html.dark .yh-ai-mermaid .marker,
html.dark .yh-ai-mermaid marker path,
.yh-ai-mermaid.is-dark g.edgePath path.arrowheadPath,
.yh-ai-mermaid.is-dark .arrowheadPath,
.yh-ai-mermaid.is-dark svg [id^=arrowhead] path,
.yh-ai-mermaid.is-dark svg marker path,
.yh-ai-mermaid.is-dark .marker,
.yh-ai-mermaid.is-dark marker path {
  fill: #e2e8f0 !important;
  stroke: #e2e8f0 !important;
}