/* ================= CodeMirror 主题深度适配 ================= */
.CodeMirror {
    flex: 1;
    height: 100%;
    min-height: 450px;
    border-radius: 0 0 8px 8px;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 14px;
    line-height: 1.6;
    background-color: var(--card) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border);
    z-index: 0;
}

[data-theme="dark"] .CodeMirror {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid var(--border);
    z-index: 0;
}

/* 确保点击时是标准的文本光标，且不会触发意外的选中视觉 */
.CodeMirror-line {
    user-select: text !important;
}

/* 确保光标（Caret）是细线，点击时不会选中字符 */
.CodeMirror-cursor {
    border-left: 1px solid var(--text) !important;
    width: 0 !important;
}

/* 移除 CodeMirror 默认可能存在的“全选焦点”外框 */
.CodeMirror-focused .CodeMirror-selected {
    background: transparent !important;
}

/* 1. 设置点击内容时的光标样式：细线，不遮挡字符 */
.CodeMirror-cursor {
    border-left: 1px solid var(--text) !important;
    width: 0 !important;
}

/* 2. 关键：设置选中后的背景色 (确保选中时能看见蓝色背景) */
/* 只有设置了背景色，你才能通过鼠标拖拽或 Ctrl+A 看到选中的范围 */
.CodeMirror-selected {
    background-color: rgba(0, 123, 255, 0.3) !important;
}

/* 3. 确保获得焦点时的选中区域也可见 */
.CodeMirror-focused .CodeMirror-selected {
    background-color: rgba(0, 123, 255, 0.4) !important;
}

/* 4. 允许原生文本选择行为 */
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
    background: rgba(0, 123, 255, 0.4);
}


.CodeMirror-foldgutter {
    width: 15px;
    cursor: pointer;
}

/* --- 折叠图标颜色修改 --- */
/* 1. 展开状态下的箭头颜色 (默认向下) */
.CodeMirror-foldgutter-open::after {
    content: "▾";
    color: #007bff; /* 这里修改为你喜欢的颜色，例如蓝色 */
    opacity: 0.8;
}

/* 2. 折叠状态下的箭头颜色 (默认向右) */
.CodeMirror-foldgutter-folded::after {
    content: "▸";
    color: #ffc107; /* 这里修改为醒目的颜色，例如黄色 */
    font-weight: bold;
}

/* 3. 悬停在行号区域时图标的反馈 */
.CodeMirror-foldgutter-open:hover::after,
.CodeMirror-foldgutter-folded:hover::after {
    color: #dc3545; /* 悬停时变为红色 */
    opacity: 1;
}
/* 如果在暗黑模式下需要不同的颜色，可以加前缀 */
[data-theme="dark"] .CodeMirror-foldgutter-open::after {
    color: #66d9ef; /* 暗黑模式下的浅蓝色 */
}

[data-theme="dark"] .CodeMirror-foldgutter-folded::after {
    color: #f92672; /* 暗黑模式下的粉色 */
}

/* placeholder样式 */
.CodeMirror-placeholder {
    color: #a9a9a9 !important;
    font-style: italic;
}

[data-theme="dark"] .CodeMirror-placeholder {
    color: #666 !important;
}

/* 行号区域背景 */
.CodeMirror-gutters {
    background-color: var(--card-bg) !important;
    border-right: 1px solid var(--border) !important;
}

/* 光标颜色 */
.CodeMirror-cursor {
    border-left: 1px solid var(--text) !important;
}

/* 行号文字颜色 */
.CodeMirror-linenumber {
    color: var(--muted) !important;
}

/* CodeMirror Merge 容器样式 */
.CodeMirror-merge {
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    background: var(--bg);
}

.CodeMirror-merge, .CodeMirror-merge .CodeMirror {
    height: 70vh;
    min-height: 450px;
}
/* 中间连接间隙的背景颜色自适应 */
.CodeMirror-merge-gap {
    background-color: var(--toolbar-bg);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

/* ================= JSONEditor 深色模式适配 ================= */
/* JSONEditor 默认样式比较老旧，需要强制覆盖以适应主题 */
.jsoneditor {
    border: none !important;
    background: var(--card);
}

.jsoneditor-menu {
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.jsoneditor-contextmenu .jsoneditor-menu-item:hover {
    background-color: var(--card-hover) !important;
    color: var(--text) !important;
}

/* 修复深色模式下的字体和背景 */
[data-theme="dark"] .jsoneditor,
[data-theme="dark"] .jsoneditor-tree {
    background-color: var(--card) !important;
    color: var(--text) !important;
}

[data-theme="dark"] .jsoneditor-field,
[data-theme="dark"] .jsoneditor-value {
    color: var(--text) !important;
}

/* 树形结构的网格线微调 */
.jsoneditor-tree table.jsoneditor-tree {
    border-collapse: collapse;
    border-spacing: 0;
}