/* 基础样式 */
body {
    transition-property: color, background-color;
    transition-duration: 200ms;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 深色模式滚动条 */
.dark ::-webkit-scrollbar-track {
    background: #2d3748;
}
.dark ::-webkit-scrollbar-thumb {
    background: #4a5568;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #718096;
}

/* 节点圆角样式 */
.rounded-node {
    transition: border-radius 0.3s ease;
}
.rounded-shape {
    transition: all 0.3s ease;
}

/* 确保SVG内部元素能够应用样式 */
svg * {
    transition: rx 0.3s ease, ry 0.3s ease;
}

/* 通知提示样式 */
.notification {
    position: fixed;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 50;
}

.notification-success {
    background-color: #10b981;
    color: white;
}

.notification-error {
    background-color: #ef4444;
    color: white;
}

.notification-info {
    background-color: #3b82f6;
    color: white;
}

/* 导出选项下拉菜单 */
.export-options {
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    width: 12rem;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

/* 缩放控制样式 */
.zoom-controls {
    display: flex;
    align-items: center;
}

.zoom-btn {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

/* 键盘快捷键样式 */
kbd {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: monospace;
}

/* 全屏模式过渡效果 */
#fullscreenPreview {
    transition: opacity 0.3s ease;
    opacity: 0;
}

#fullscreenPreview.active {
    opacity: 1;
}

/* 动态高度调整 */
@media (min-height: 768px) {
    #mermaidInput, #mermaidOutput {
        min-height: calc(100vh - 250px);
    }
}

/* 响应式布局调整 */
@media (max-width: 1024px) {
    main .grid {
        grid-template-columns: 1fr;
    }
    
    #mermaidInput, #mermaidOutput {
        min-height: 400px;
    }
}

/* 确保SVG在预览区域内居中且可缩放 */
#mermaidOutput svg, #fsMermaidOutput svg {
    max-width: 100%;
    margin: 0 auto;
    transform-origin: center;
    transition: transform 0.2s ease;
}

/* 全屏模式下的SVG样式 */
#fsMermaidOutput {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 输入区域样式优化 */
#mermaidInput {
    line-height: 1.5;
    tab-size: 4;
}

/* 添加过渡效果 */
.transition-all {
    transition: all 0.3s ease;
}

/* 颜色选择按钮高亮效果 */
.node-color-btn.active,
.line-color-btn.active,
.text-color-btn.active {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    position: relative;
}

.node-color-btn.active::after,
.line-color-btn.active::after,
.text-color-btn.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 0, 0, 0.5);
}

/* 确保白色按钮上的图标可见 */
.node-color-btn[data-node-color="#ffffff"].active::after {
    color: rgba(0, 0, 0, 0.7);
}

/* 确保深色按钮上的图标可见 */
.line-color-btn.active::after,
.text-color-btn.active::after {
    color: rgba(255, 255, 255, 0.9);
}

/* 样式编辑区滚动条 */
.overflow-auto {
    scrollbar-width: thin;
}

/* 浅色模式 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --border-color: #e5e7eb;
    --input-bg: #f9fafb;
    --hover-color: #f3f4f6;
}

/* 深色模式 */
html.dark {
    --bg-color: #1f2937;
    --text-color: #f9fafb;
    --border-color: #4b5563;
    --input-bg: #374151;
    --hover-color: #4b5563;
}

/* 应用主题变量 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

textarea, select, button {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}