/* 
 * Mermaid.js Dracula Theme for Typecho
 * 与 Prism.js Dracula 主题兼容的 Mermaid 图表样式
 * 为 Typecho 网站提供美观的图表展示
 */

/* 基础 Mermaid 容器样式 */
.mermaid {
    /* background: #282a36 !important; */
    color: #f8f8f2 !important;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow: auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.7;
}

/* 确保 Mermaid 图表在暗色模式下也有良好表现 */
@media (prefers-color-scheme: dark) {
    .mermaid {
        background: #1a1b26 !important;
    }
}

/* ====== 流程图 (Flowchart) ====== */

/* 节点样式 */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
    fill: #44475a !important;
    stroke: #6272a4 !important;
    stroke-width: 2px !important;
}

/* 节点文字 */
.mermaid .nodeLabel {
    color: #f8f8f2 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 18px;
    font-weight: 600;
}

/* 连接线 */
.mermaid .edgePath .path {
    stroke: #bd93f9 !important;
    stroke-width: 2px !important;
}

/* 箭头 */
.mermaid .arrowheadPath {
    fill: #bd93f9 !important;
    stroke: #bd93f9 !important;
}

/* 连接线标签 */
.mermaid .edgeLabel {
    background: #44475a !important;
    color: #f8f8f2 !important;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 16px;
    font-weight: 600;
}

/* 特殊节点样式 */
.mermaid .node.clickable {
    cursor: pointer;
}

.mermaid .node.clickable:hover rect,
.mermaid .node.clickable:hover circle,
.mermaid .node.clickable:hover ellipse,
.mermaid .node.clickable:hover polygon,
.mermaid .node.clickable:hover path {
    fill: #6272a4 !important;
    stroke: #8be9fd !important;
}

/* ====== 序列图 (Sequence Diagram) ====== */

/* 参与者 - 改为黄色背景 */
.mermaid .actor {
    stroke: #f59e0b !important;
    stroke-width: 2px !important;
    fill: #fef3c7 !important;
}

.mermaid text.actor {
    fill: #92400e !important;
    font-weight: 600 !important;
    font-size: 17px !important;
}

/* 参与者悬停效果 */
.mermaid .actor:hover {
    stroke: #d97706 !important;
    fill: #fde68a !important;
    filter: drop-shadow(0 4px 6px rgba(245, 158, 11, 0.3));
}

.mermaid .actor:hover + text.actor {
    fill: #78350f !important;
}

/* 生命线 */
.mermaid .actor-line {
    stroke: #6272a4 !important;
}

/* 消息 */
.mermaid .messageLine0,
.mermaid .messageLine1 {
    stroke: #ff79c6 !important;
    stroke-width: 2px !important;
}

.mermaid .messageText {
    fill: #ff79c6 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

/* 激活框 */
.mermaid .activation0,
.mermaid .activation1 {
    fill: #6272a4 !important;
    stroke: #8be9fd !important;
}

/* 注释 */
.mermaid .note {
    fill: #f1fa8c !important;
    stroke: #bd93f9 !important;
}

.mermaid .noteText {
    fill: #282a36 !important;
    font-weight: bold;
}

/* ====== 类图 (Class Diagram) ====== */

/* 类框 */
.mermaid .classGroup rect {
    fill: #44475a !important;
    stroke: #6272a4 !important;
}

.mermaid .classGroup line {
    stroke: #6272a4 !important;
}

/* 类标题 */
.mermaid .classTitle {
    fill: #8be9fd !important;
    font-weight: bold;
    font-size: 19px !important;
}

/* 类成员 */
.mermaid .classLabel {
    fill: #f8f8f2 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

/* 关系线 */
.mermaid .relation {
    stroke: #ff79c6 !important;
}

/* ====== 状态图 (State Diagram) ====== */

/* 状态框 - 改为黄色背景 */
.mermaid .stateGroup rect {
    fill: #fef3c7 !important;
    stroke: #f59e0b !important;
    stroke-width: 2px !important;
    rx: 10px;
    ry: 10px;
}

.mermaid .stateGroup text {
    fill: #92400e !important;
    font-weight: 600 !important;
    font-size: 17px !important;
}

/* 状态框悬停效果 */
.mermaid .stateGroup:hover rect {
    fill: #fde68a !important;
    stroke: #d97706 !important;
    filter: drop-shadow(0 4px 6px rgba(245, 158, 11, 0.3));
}

.mermaid .stateGroup:hover text {
    fill: #78350f !important;
}

/* 开始/结束状态 */
.mermaid .stateGroup .startEnd {
    fill: #ff79c6 !important;
    stroke: #ff79c6 !important;
}

/* 转换线 */
.mermaid .transition {
    stroke: #bd93f9 !important;
}

/* ====== 甘特图 (Gantt) ====== */

/* 标题 */
.mermaid .gantt-title {
    fill: #8be9fd !important;
    font-weight: bold;
    font-size: 20px !important;
}

/* 任务 */
.mermaid .task {
    stroke: #6272a4 !important;
    stroke-width: 2px !important;
}

.mermaid .taskText {
    fill: #f8f8f2 !important;
}

/* 任务颜色 - 改为黄色背景 */
.mermaid .task-0 {
    fill: #ff79c6 !important;
}

.mermaid .task-1 {
    fill: #fef3c7 !important;
    stroke: #f59e0b !important;
    stroke-width: 2px !important;
}

.mermaid .task-1 + .taskText {
    fill: #92400e !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.mermaid .task-2 {
    fill: #bd93f9 !important;
}

.mermaid .task-3 {
    fill: #f1fa8c !important;
}

.mermaid .task-4 {
    fill: #8be9fd !important;
}

/* 黄色任务悬停效果 */
.mermaid .task-1:hover {
    fill: #fde68a !important;
    stroke: #d97706 !important;
    filter: drop-shadow(0 4px 6px rgba(245, 158, 11, 0.3));
}

.mermaid .task-1:hover + .taskText {
    fill: #78350f !important;
}

/* 里程碑 */
.mermaid .milestone {
    fill: #ffb86c !important;
    stroke: #ffb86c !important;
}

/* 网格线 */
.mermaid .grid .tick line {
    stroke: #6272a4 !important;
}

.mermaid .grid .tick text {
    fill: #6272a4 !important;
}

/* ====== 饼图 (Pie Chart) ====== */

/* 扇形 */
.mermaid .pieCircle {
    stroke: #6272a4 !important;
    stroke-width: 2px !important;
}

.mermaid .pieTitle {
    fill: #8be9fd !important;
    font-weight: bold;
}

/* 扇形颜色 - 改为黄色背景 */
.mermaid .slice-0 {
    fill: #ff79c6 !important;
}

.mermaid .slice-1 {
    fill: #fef3c7 !important;
    stroke: #f59e0b !important;
    stroke-width: 2px !important;
}

.mermaid .slice-1 + .pieLabel {
    fill: #92400e !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.mermaid .slice-2 {
    fill: #bd93f9 !important;
}

.mermaid .slice-3 {
    fill: #f1fa8c !important;
}

.mermaid .slice-4 {
    fill: #8be9fd !important;
}

/* 黄色扇形悬停效果 */
.mermaid .slice-1:hover {
    fill: #fde68a !important;
    stroke: #d97706 !important;
    filter: drop-shadow(0 4px 6px rgba(245, 158, 11, 0.3));
}

.mermaid .slice-1:hover + .pieLabel {
    fill: #78350f !important;
}

/* 标签 */
.mermaid .pieLabel {
    fill: #f8f8f2 !important;
}

/* ====== 用户旅程图 (User Journey) ====== */

/* 阶段 */
.mermaid .journey-section {
    fill: #44475a !important;
    stroke: #6272a4 !important;
}

.mermaid .journey-section text {
    fill: #8be9fd !important;
}

/* 任务 */
.mermaid .task {
    rx: 4px;
    ry: 4px;
}

/* 任务颜色 */
.mermaid .task-0 {
    fill: #ff79c6 !important;
    stroke: #ff79c6 !important;
}

.mermaid .task-1 {
    fill: #50fa7b !important;
    stroke: #50fa7b !important;
}

.mermaid .task-2 {
    fill: #bd93f9 !important;
    stroke: #bd93f9 !important;
}

/* ====== 需求图 (Requirement Diagram) ====== */

/* 需求框 */
.mermaid .requirement {
    fill: #44475a !important;
    stroke: #6272a4 !important;
}

.mermaid .requirement text {
    fill: #f8f8f2 !important;
}

/* 关系 */
.mermaid .relationship {
    stroke: #ff79c6 !important;
}

/* ====== Git 图 (Git Graph) ====== */

/* 提交点 */
.mermaid .commit {
    fill: #50fa7b !important;
    stroke: #50fa7b !important;
}

/* 分支 */
.mermaid .branchLabel {
    fill: #8be9fd !important;
}

/* 标签 */
.mermaid .tagLabel {
    fill: #ffb86c !important;
}

/* ====== 时间线图 (Timeline) ====== */

/* 时间线 */
.mermaid .timeline line {
    stroke: #6272a4 !important;
}

/* 事件 */
.mermaid .event {
    fill: #ff79c6 !important;
    stroke: #ff79c6 !important;
}

.mermaid .event text {
    fill: #282a36 !important;
    font-weight: bold;
}

/* ====== 四象限图 (Quadrant Chart) ====== */

/* 象限 */
.mermaid .quadrant {
    fill: #44475a !important;
    stroke: #6272a4 !important;
}

/* 点 */
.mermaid .point {
    fill: #50fa7b !important;
    stroke: #50fa7b !important;
}

/* ====== 通用样式 ====== */

/* 标题 */
.mermaid .title {
    fill: #8be9fd !important;
    font-weight: bold;
    font-size: 16px;
}

/* 图例 */
.mermaid .legend {
    fill: #6272a4 !important;
}

.mermaid .legend text {
    fill: #f8f8f2 !important;
}

/* 工具提示 */
.mermaid .tooltip {
    background: #44475a !important;
    color: #f8f8f2 !important;
    border: 1px solid #6272a4 !important;
    border-radius: 4px;
    padding: 8px;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* 错误状态 */
.mermaid .error-icon {
    fill: #ff5555 !important;
}

.mermaid .error-text {
    fill: #ff5555 !important;
    font-weight: bold;
}

/* 加载状态 */
.mermaid .loading {
    fill: #bd93f9 !important;
}

/* ====== 响应式设计 ====== */

/* 小屏幕优化 */
@media (max-width: 768px) {
    .mermaid {
        font-size: 12px;
        padding: 1rem;
    }
    
    .mermaid .nodeLabel,
    .mermaid .edgeLabel,
    .mermaid .messageText {
        font-size: 11px;
    }
}

/* 打印优化 */
@media print {
    .mermaid {
        background: white !important;
        color: black !important;
        border: 1px solid #ddd;
    }
    
    .mermaid .node rect,
    .mermaid .node circle,
    .mermaid .node ellipse,
    .mermaid .node polygon,
    .mermaid .node path {
        fill: #f8f8f8 !important;
        stroke: #333 !important;
    }
    
    .mermaid .nodeLabel {
        color: #333 !important;
    }
}

/* ====== 动画效果 ====== */

/* 悬停效果 */
.mermaid .node:hover rect,
.mermaid .node:hover circle,
.mermaid .node:hover ellipse,
.mermaid .node:hover polygon,
.mermaid .node:hover path {
    fill: #6272a4 !important;
    stroke: #8be9fd !important;
    transition: all 0.3s ease;
}

.mermaid .edgePath:hover .path {
    stroke: #ff79c6 !important;
    stroke-width: 3px !important;
    transition: all 0.3s ease;
}

/* 点击效果 */
.mermaid .node.clicked rect,
.mermaid .node.clicked circle,
.mermaid .node.clicked ellipse,
.mermaid .node.clicked polygon,
.mermaid .node.clicked path {
    fill: #8be9fd !important;
    stroke: #50fa7b !important;
    animation: pulse 0.5s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ====== 辅助类 ====== */

/* 隐藏元素 */
.mermaid .hidden {
    display: none !important;
}

/* 高亮元素 */
.mermaid .highlight {
    fill: #f1fa8c !important;
    stroke: #ffb86c !important;
    stroke-width: 3px !important;
}

/* 禁用状态 */
.mermaid .disabled {
    opacity: 0.5;
    filter: grayscale(50%);
}

/* ====== Typecho 集成优化 ====== */

/* 确保在 Typecho 文章中的正确显示 */
.post-content .mermaid,
.comment-content .mermaid {
    max-width: 100%;
    margin: 1.5rem auto;
}

/* 防止与 Prism.js 冲突 */
pre.language-mermaid {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

pre.language-mermaid code {
    background: transparent !important;
    color: inherit !important;
}

/* 确保在代码块中正确显示 */
pre[class*="language-"] .mermaid {
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* ====== 暗色模式优化 ====== */

@media (prefers-color-scheme: dark) {
    .mermaid {
        background: #1a1b26 !important;
    }
    
    .mermaid .node rect,
    .mermaid .node circle,
    .mermaid .node ellipse,
    .mermaid .node polygon,
    .mermaid .node path {
        fill: #363a4f !important;
        stroke: #7aa2f7 !important;
    }
    
    .mermaid .nodeLabel {
        color: #c0caf5 !important;
    }
    
    .mermaid .edgePath .path {
        stroke: #bb9af7 !important;
    }
    
    .mermaid .arrowheadPath {
        fill: #bb9af7 !important;
        stroke: #bb9af7 !important;
    }
    
    .mermaid .edgeLabel {
        background: #363a4f !important;
        color: #c0caf5 !important;
    }
}

/* ====== 兼容性修复 ====== */

/* 确保 SVG 元素正确显示 */
.mermaid svg {
    max-width: 100%;
    height: auto;
}

/* 修复字体继承问题 */
.mermaid text {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 修复边框半径 */
.mermaid rect,
.mermaid circle,
.mermaid ellipse {
    rx: 4px;
    ry: 4px;
}

/* 修复文本对齐 */
.mermaid text {
    text-anchor: middle;
    dominant-baseline: middle;
}

/* ====== 调试模式 ====== */

/* 调试边框 */
.mermaid.debug rect,
.mermaid.debug circle,
.mermaid.debug ellipse,
.mermaid.debug polygon,
.mermaid.debug path {
    stroke-dasharray: 5,5;
    stroke: #ff5555 !important;
}

/* 调试文本 */
.mermaid.debug text {
    fill: #ff5555 !important;
    font-weight: bold;
}

/* ====== 性能优化 ====== */

/* 减少重绘 */
.mermaid {
    will-change: transform;
    contain: layout style paint;
}

/* 优化动画性能 */
.mermaid .node,
.mermaid .edgePath,
.mermaid .messageLine0,
.mermaid .messageLine1 {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ====== 可访问性 ====== */

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .mermaid {
        background: #000 !important;
        color: #fff !important;
    }
    
    .mermaid .node rect,
    .mermaid .node circle,
    .mermaid .node ellipse,
    .mermaid .node polygon,
    .mermaid .node path {
        fill: #222 !important;
        stroke: #fff !important;
        stroke-width: 3px !important;
    }
    
    .mermaid .nodeLabel {
        color: #fff !important;
        font-weight: bold;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
    .mermaid .node,
    .mermaid .edgePath,
    .mermaid .messageLine0,
    .mermaid .messageLine1 {
        transition: none !important;
        animation: none !important;
    }
}