/* Mermaid diagram styles - 自定义尺寸版本 */
.mermaid {
    /* 基础样式 */
    margin: 1.5rem auto;
    padding: 1rem;
    border-radius: 8px;
    background: var(--mermaid-bg, #ffffff);
    border: 1px solid var(--mermaid-border, #e1e5e9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    overflow: auto;
    position: relative;

    /* 响应式基础设置 */
    width: 100%;
    max-width: 100%;
    min-height: 200px;

    /* 确保容器居中 */
    display: block;
}

/* 深色主题适配 */
[data-theme="dark"] .mermaid {
    --mermaid-bg: #2a2a2a;
    --mermaid-border: #444;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* SVG 基础样式 */
.mermaid svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.3s ease;
}

/* 自定义尺寸支持 - 确保居中显示 */
.mermaid[data-custom-size] {
    /* 重置默认样式并确保居中 */
    width: var(--custom-width) !important;
    max-width: var(--custom-width) !important;
    display: block !important;
    margin: 1.5rem auto !important;
    text-align: center !important;

    /* 确保不会超出父容器 */
    max-width: min(var(--custom-width), 100%) !important;
}

.mermaid[data-custom-size] svg {
    /* 直接设置SVG的宽度，确保居中 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    margin: 0 auto !important;
    display: block !important;
}

/* 响应式设计 - 基础样式 */
@media (max-width: 768px) {
    .mermaid {
        margin: 1rem auto;
        padding: 0.5rem;
    }

    .mermaid svg {
        min-width: unset !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 移动端自定义尺寸限制 */
    .mermaid[data-custom-size] {
        width: min(var(--custom-width), calc(100vw - 2rem)) !important;
        max-width: min(var(--custom-width), calc(100vw - 2rem)) !important;
        margin: 1rem auto !important;
    }
}

@media (max-width: 480px) {

    .mermaid[data-diagram-type="sequence"] svg,
    .mermaid[data-diagram-type="gantt"] svg {
        transform: scale(0.7);
    }

    /* 移动端进一步限制 */
    .mermaid[data-custom-size] {
        width: min(var(--custom-width), calc(100vw - 1rem)) !important;
        max-width: min(var(--custom-width), calc(100vw - 1rem)) !important;
        margin: 1rem auto !important;
    }
}

/* 悬停效果 */
.mermaid:hover {
    box-shadow: 0 4px 16px rgba(255, 120, 0, 0.2);
    border-color: var(--accent-color, #ff7800);
}

[data-theme="dark"] .mermaid:hover {
    box-shadow: 0 4px 16px rgba(255, 163, 72, 0.3);
}

/* 加载状态 */
.mermaid-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    color: var(--accent-color, #ff7800);
    font-weight: 500;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* 错误状态 */
.mermaid pre {
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* 图表标题样式优化 */
.mermaid svg .titleText {
    font-size: 18px !important;
    font-weight: 600 !important;
    fill: var(--text-color, #333333) !important;
}

[data-theme="dark"] .mermaid svg .titleText {
    fill: var(--text-color, #e0e0e0) !important;
}

/* 节点文字大小优化 */
.mermaid svg .nodeLabel {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 边标签文字大小 */
.mermaid svg .edgeLabel {
    font-size: 12px !important;
}

/* 序列图参与者标签 */
.mermaid svg .actor {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* 类图类名 */
.mermaid svg .classTitle {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* 甘特图任务标签 */
.mermaid svg .taskText {
    font-size: 12px !important;
}

/* 确保文字在深色主题下可见 */
[data-theme="dark"] .mermaid svg text {
    fill: #e0e0e0 !important;
}

[data-theme="dark"] .mermaid svg .nodeLabel,
[data-theme="dark"] .mermaid svg .edgeLabel,
[data-theme="dark"] .mermaid svg .actor,
[data-theme="dark"] .mermaid svg .classTitle,
[data-theme="dark"] .mermaid svg .taskText {
    fill: #e0e0e0 !important;
}

/* 针对不同类型图表的特殊样式 */
.mermaid svg .node rect,
.mermaid svg .node circle,
.mermaid svg .node polygon {
    fill: var(--bg-2, #ffffff) !important;
    stroke: var(--accent-color, #ff7800) !important;
    stroke-width: 2px !important;
}

/* 节点文本样式 */
.mermaid svg .node .label {
    color: var(--text-1, #333333) !important;
    font-weight: 500 !important;
}

/* 连接线样式 */
.mermaid svg .edgePath path {
    stroke: var(--accent-color, #ff7800) !important;
    stroke-width: 2px !important;
}

.mermaid svg .arrowheadPath {
    fill: var(--accent-color, #ff7800) !important;
    stroke: var(--accent-color, #ff7800) !important;
}

/* 序列图参与者样式 */
.mermaid svg .actor {
    fill: var(--bg-2, #ffffff) !important;
    stroke: var(--accent-color, #ff7800) !important;
    stroke-width: 2px !important;
}

/* 类图样式 */
.mermaid svg .classBox {
    fill: var(--bg-2, #ffffff) !important;
    stroke: var(--accent-color, #ff7800) !important;
    stroke-width: 2px !important;
}

/* 甘特图样式 */
.mermaid svg .section0,
.mermaid svg .section1,
.mermaid svg .section2,
.mermaid svg .section3 {
    fill: var(--accent-color, #ff7800) !important;
    opacity: 0.8 !important;
}

.mermaid svg .grid .tick line {
    stroke: var(--border-1, #e1e5e9) !important;
}

/* 暗色主题下的图表元素 */
[data-theme="dark"] .mermaid svg .node rect,
[data-theme="dark"] .mermaid svg .node circle,
[data-theme="dark"] .mermaid svg .node polygon,
[data-theme="dark"] .mermaid svg .actor,
[data-theme="dark"] .mermaid svg .classBox {
    fill: var(--bg-2, #2d2d2d) !important;
    stroke: var(--accent-color, #ffa348) !important;
}

[data-theme="dark"] .mermaid svg .node .label {
    color: var(--text-1, #e0e0e0) !important;
}

[data-theme="dark"] .mermaid svg .edgePath path,
[data-theme="dark"] .mermaid svg .arrowheadPath {
    stroke: var(--accent-color, #ffa348) !important;
    fill: var(--accent-color, #ffa348) !important;
}

[data-theme="dark"] .mermaid svg .grid .tick line {
    stroke: var(--border-1, #444) !important;
}

/* 错误显示样式优化 */
.mermaid pre[style*="color: red"] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 0.85em;
    line-height: 1.5;
    background: #ffeaea !important;
    border-color: #ff6b6b !important;
    border-radius: 8px;
}

[data-theme="dark"] .mermaid pre[style*="color: red"] {
    background: #2d1515 !important;
    border-color: #ff8a8a !important;
    color: #ffb3b3 !important;
}