/**
 * 思维导图功能样式
 * - 编辑器弹窗（.mindmap-modal）：与 .question-modal 视觉规范一致
 * - 前台渲染容器（.mindmap-container）：SVG 自适应 + 横向滚动 + 暗色适配
 */

/* ============ 编辑器弹窗 ============ */
.mindmap-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.mindmap-modal.show {
    display: block;
}

.mindmap-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.mindmap-modal-content {
    position: relative;
    width: 92%;
    max-width: 960px;
    margin: 40px auto 0;
    background: var(--bg-color, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mindmap-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color, #e8e8e8);
}

.mindmap-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color, #333);
}

.mindmap-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-light, #999);
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s;
}

.mindmap-modal-close:hover {
    color: var(--text-color, #333);
}

.mindmap-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.mindmap-editor-layout {
    display: flex;
    gap: 16px;
    min-height: 360px;
}

.mindmap-editor-input,
.mindmap-editor-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mindmap-editor-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color, #333);
    margin-bottom: 6px;
}

.mindmap-editor-hint {
    font-size: 12px;
    color: var(--text-light, #999);
    margin-bottom: 8px;
    line-height: 1.6;
}

.mindmap-textarea {
    width: 100%;
    flex: 1;
    min-height: 320px;
    padding: 12px;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: 6px;
    font-family: "阿里巴巴普惠体", "Alibaba Sans",Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
    background: var(--bg-color, #fff);
    color: var(--text-color, #333);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}

.mindmap-textarea:focus {
    border-color: var(--primary-color, #1677ff);
}

.mindmap-preview-wrap {
    flex: 1;
    min-height: 320px;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: 6px;
    background: var(--bg-gray, #fafafa);
    overflow: auto;
    position: relative;
}

/* SVG 自适应：JS 会在渲染后设置 viewBox 与内联 aspect-ratio，
   此处 width:100% + height:auto 配合 aspect-ratio 让 SVG 按内容比例自动撑开高度 */
.mindmap-preview-wrap svg {
    width: 100%;
    min-width: 400px;
    height: auto;
    display: block;
}

.mindmap-preview-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-light, #999);
    font-size: 13px;
}

.mindmap-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color, #e8e8e8);
}

/* ============ 前台渲染容器 ============ */
.mindmap-container {
    width: 100%;
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--border-color, #e8e8e8);
    border-radius: 8px;
    background: var(--bg-color, #fff);
    overflow: auto;
    box-sizing: border-box;
    position: relative;
}

/* SVG 自适应：JS 会在渲染后设置 viewBox 与内联 aspect-ratio，
   此处 width:100% + height:auto 配合 aspect-ratio 让 SVG 按内容比例自动撑开高度。
   markmap 写入的固定 width/height 属性会被 JS 移除，由 CSS 接管尺寸；
   不设 min-height，高度完全由包围盒比例决定，避免与 aspect-ratio 冲突 */
.mindmap-container > svg {
    width: 100%;
    min-width: 320px;
    height: auto;
    display: block;
}

/* 全屏按钮（右上角，hover 显示；全屏时常显） */
.mindmap-fullscreen-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-light, #999);
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.mindmap-container:hover .mindmap-fullscreen-btn,
.mindmap-container.mindmap-fullscreen .mindmap-fullscreen-btn {
    opacity: 1;
}
.mindmap-fullscreen-btn:hover {
    color: var(--text-color, rgb(28, 189, 201));
}
.mindmap-fullscreen-btn:focus-visible {
    outline: 2px solid var(--primary-color, #160dbd);
    outline-offset: 2px;
}

/* 样式切换按钮（上方中间，hover 显示；点击在"经典/彩虹"间全局切换）
   与全屏按钮风格一致：默认半透明，容器 hover 或全屏时完全显示 */
.mindmap-style-btn {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 4px 14px;
    border: 1px solid var(--border-color, #e8e8e8);
    border-radius: 14px;
    background: var(--bg-color, #fff);
    color: var(--text-color, #333);
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
    opacity: 0.65;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mindmap-container:hover .mindmap-style-btn,
.mindmap-container.mindmap-fullscreen .mindmap-style-btn {
    opacity: 1;
}
.mindmap-style-btn:hover {
    border-color: var(--primary-color, #1677ff);
    color: var(--primary-color, #1677ff);
}
.mindmap-style-btn:focus-visible {
    outline: 2px solid var(--primary-color, #1677ff);
    outline-offset: 2px;
}

/* 彩虹样式容器：多色微渐变背景 + 彩色边框，与经典样式（纯白背景）形成明显视觉差异。
   背景色调极淡以保证节点文字可读性，仅作氛围烘托。 */
.mindmap-container.mindmap-rainbow {
    background: linear-gradient(135deg, #fff5f5 0%, #f5faff 35%, #f5fff9 70%, #faf5ff 100%);
    border-color: #d4adf7;
}
[data-theme="dark"] .mindmap-container.mindmap-rainbow {
    background: linear-gradient(135deg, #211a26 0%, #1a2126 35%, #1a2620 70%, #241a26 100%);
    border-color: #3d2a5c;
}
/* 全屏时彩虹背景跟随 */
.mindmap-container.mindmap-rainbow.mindmap-fullscreen {
    background: linear-gradient(135deg, #fff5f5 0%, #f5faff 35%, #f5fff9 70%, #faf5ff 100%);
}
[data-theme="dark"] .mindmap-container.mindmap-rainbow.mindmap-fullscreen {
    background: linear-gradient(135deg, #211a26 0%, #1a2126 35%, #1a2620 70%, #241a26 100%);
}

/* 全屏状态：CSS 模拟全屏，覆盖整个视口 */
.mindmap-container.mindmap-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    margin: 0;
    border-radius: 0;
    border: none;
    padding: 24px;
    background: var(--bg-color, #fff);
    overflow: auto;
}
.mindmap-container.mindmap-fullscreen > svg {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    min-width: 0;
}

.mindmap-container .mindmap-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--text-light, #999);
    font-size: 14px;
}

.mindmap-container .mindmap-error {
    text-align: center;
    padding: 24px;
    color: var(--text-color, #333);
    font-size: 14px;
}

.mindmap-container .mindmap-error .mindmap-error-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.mindmap-error-retry {
    margin-top: 10px;
    color: var(--primary-color, #1677ff);
    cursor: pointer;
    background: none;
    border: none;
    font-size: 13px;
    text-decoration: underline;
}

/* 暗色模式适配 */
[data-theme="dark"] .mindmap-modal-content,
[data-theme="dark"] .mindmap-container {
    background: var(--bg-color, #1a1a1a);
    border-color: var(--border-color, #2a2a2a);
}

/* 暗色模式：思维导图节点文字颜色（仅文字，不影响圆点 circle 与分支线 markmap-link）
   markmap-view 0.18 文字在 foreignObject 内作为 HTML 渲染，颜色用 CSS color（非 fill），
   继承自 .markmap 的 --markmap-text-color 变量（默认 #333）。
   color() 函数返回色仅用于 circle/line/link 的 stroke/fill，覆盖变量不影响圆点与分支。
   覆盖变量 + 直接设 foreignObject color 双保险，确保暗色背景下文字可读。 */
[data-theme="dark"] .mindmap-container .markmap {
    --markmap-text-color: #e8e8e8;
}
[data-theme="dark"] .mindmap-container .markmap-foreign,
[data-theme="dark"] .mindmap-container .markmap-foreign div {
    color: #e8e8e8;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .mindmap-modal-content {
        width: 96%;
        margin-top: 20px;
        max-height: calc(100vh - 40px);
    }

    .mindmap-editor-layout {
        flex-direction: column;
        min-height: auto;
    }

    .mindmap-textarea,
    .mindmap-preview-wrap {
        min-height: 220px;
    }
}

/* ============================================================
   扩展样式：手绘文艺 / 复古纸质 / 赛博科技
   除颜色与线宽（JS color/lineWidth 控制）外，这些样式通过 CSS 修改：
   - 连线样式（虚线/点线/发光）→ .markmap-link / .markmap-node > line
   - 圆点样式 → .markmap-node > circle
   - 文字背景与边框 → .markmap-foreign > div > div（紧贴文字的内层 inline-block div）
   - 容器背景与边框 → .mindmap-container
   注：放在文件末尾以确保暗色模式覆盖之后，样式规则优先级正确。
   ============================================================ */

/* foreignObject 默认 overflow:hidden（SVG 规范），会裁剪内层 div 向外扩展的 box-shadow 与 padding，
   导致手绘/复古/科技样式的文字背景边框显示不全。统一设为 visible 让装饰完整显示。 */
.mindmap-container .markmap-foreign {
    overflow: visible;
}

/* 文字字体：markmap-view 内嵌 CSS 在 .markmap 上设了 `font: 300 16px/20px sans-serif`
   （embedGlobalCSS 默认 true，运行时注入到 SVG 内 <style>），font 简写把 font-family
   强制为 sans-serif，覆盖了从 body 继承的站字体 var(--font-family)（阿里巴巴普惠体优先）。
   此处给文字元素补回站字体，使经典/彩虹风格也显示阿里巴巴普惠体。
   手绘/复古/科技风格的专属规则（.mindmap-handdrawn/.mindmap-vintage/.mindmap-cyber
   .markmap-foreign > div > div）选择器特异性相同但位于其后，仍覆盖此基础规则，保留各自字体栈。 */
.mindmap-container .markmap-foreign > div > div {
    font-family: var(--font-family);
}

/* 移除折叠圆点与节点基线，改由文字承担折叠交互（见 mindmap-renderer.js _onNodeClick）。
   paddingX:0 后文字右端即原圆点位置（分支起点），圆点不再需要；line 是连到圆点的基线，一并移除。 */
.mindmap-container .markmap-node > circle,
.mindmap-container .markmap-node > line {
    display: none;
}
/* 折叠指示：圆点移除后，用文字末尾的 ▸ 标记已折叠（可展开）的节点，替代原圆点的折叠状态视觉。
   用 data-folded 属性（JS 设置）而非 markmap-fold class —— markmap 重渲染会覆盖 class，但不覆盖 data-* */
.mindmap-container .markmap-node[data-folded] .markmap-foreign > div > div::after {
    content: " \25B8";
    opacity: 0.55;
    font-size: 0.9em;
    font-weight: 700;
}

/* ============ 手绘文艺样式 ============ */
.mindmap-container.mindmap-handdrawn {
    background: linear-gradient(135deg, #fdf6e3 0%, #f5ecd9 100%);
    border-color: #c9b896;
}
[data-theme="dark"] .mindmap-container.mindmap-handdrawn {
    background: linear-gradient(135deg, #fdf6e3 0%, #f5ecd9 100%);
    border-color: #c9b896;
}
/* 连线：虚线 + 圆角线帽，模拟手绘笔触 */
.mindmap-handdrawn .markmap-link,
.mindmap-handdrawn .markmap-node > line {
    stroke-dasharray: 7 4;
    stroke-linecap: round;
}
/* 圆点：短虚线描边 */
.mindmap-handdrawn .markmap-node > circle {
    stroke-dasharray: 2 2;
}
/* 文字：米色卡片 + 棕色细边框 + 衬线字体
   作用于第二层 inline-block div（紧贴文字），而非第一层 width:maxWidth 的宽容器——
   后者宽度恒为 maxWidth(320px) 的长条，会被 foreignObject 裁剪到文字宽度，边框丢失 */
.mindmap-handdrawn .markmap-foreign > div > div {
    background: rgba(255, 252, 242, 0.92);
    border-radius: 6px;
    box-shadow: 0 0 0 1px #c9b896, 0 1px 3px rgba(139, 115, 85, 0.12);
    padding: 1px 7px;
    font-family: "阿里巴巴普惠体", "Alibaba Sans", Georgia, "Times New Roman", "KaiTi", "STKaiti", serif;
}
/* 文字颜色：暗棕色（明暗模式统一，保持纸质质感） */
.mindmap-container.mindmap-handdrawn .markmap {
    --markmap-text-color: #5c3a1e;
}
[data-theme="dark"] .mindmap-container.mindmap-handdrawn .markmap {
    --markmap-text-color: #5c3a1e;
}
[data-theme="dark"] .mindmap-container.mindmap-handdrawn .markmap-foreign > div > div {
    color: #5c3a1e;
}

/* ============ 复古纸质样式 ============ */
.mindmap-container.mindmap-vintage {
    background: linear-gradient(135deg, #f0e6d0 0%, #e8dcc0 50%, #f0e6d0 100%);
    border-color: #c4a96a;
    border-width: 3px;
    border-style: double;
}
[data-theme="dark"] .mindmap-container.mindmap-vintage {
    background: linear-gradient(135deg, #f0e6d0 0%, #e8dcc0 50%, #f0e6d0 100%);
    border-color: #c4a96a;
}
/* 连线：点线，模拟老旧印刷 */
.mindmap-vintage .markmap-link,
.mindmap-vintage .markmap-node > line {
    stroke-dasharray: 1 3;
    stroke-linecap: butt;
}
/* 文字：泛黄纸张 + 双线边框 + 古典衬线（作用于紧贴文字的第二层 div，原因同手绘样式） */
.mindmap-vintage .markmap-foreign > div > div {
    background: rgba(240, 230, 208, 0.85);
    border-radius: 2px;
    box-shadow: 0 0 0 1px #8b7355, 0 0 0 3px #c4a96a, 0 0 0 4px #8b7355;
    padding: 1px 5px;
    font-family: "阿里巴巴普惠体", "Alibaba Sans","Times New Roman", Georgia, "SimSun", "STSong", serif;
}
.mindmap-container.mindmap-vintage .markmap {
    --markmap-text-color: #4a3728;
}
[data-theme="dark"] .mindmap-container.mindmap-vintage .markmap {
    --markmap-text-color: #4a3728;
}
[data-theme="dark"] .mindmap-container.mindmap-vintage .markmap-foreign > div > div {
    color: #4a3728;
}

/* ============ 赛博科技样式 ============ */
.mindmap-container.mindmap-cyber {
    background: linear-gradient(135deg, #0a0e1a 0%, #0d1525 50%, #0a0e1a 100%);
    border-color: #00f0ff;
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.08);
}
[data-theme="dark"] .mindmap-container.mindmap-cyber {
    background: linear-gradient(135deg, #0a0e1a 0%, #0d1525 50%, #0a0e1a 100%);
    border-color: #00f0ff;
}
/* 连线/圆点：霓虹发光（drop-shadow 用固定青色，统一赛博氛围） */
.mindmap-cyber .markmap-link,
.mindmap-cyber .markmap-node > line {
    filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.5));
    stroke-linecap: round;
}
.mindmap-cyber .markmap-node > circle {
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.5));
}
/* 文字：深色背景 + 霓虹边框 + 发光等宽字体（作用于紧贴文字的第二层 div，原因同手绘样式） */
.mindmap-cyber .markmap-foreign > div > div {
    background: rgba(10, 18, 35, 0.85);
    border-radius: 2px;
    box-shadow: 0 0 0 1px #00f0ff, 0 0 8px rgba(0, 240, 255, 0.25);
    padding: 1px 5px;
    font-family: "阿里巴巴普惠体", "Alibaba Sans",Consolas, "Courier New", monospace;
    color: #00f0ff;
    text-shadow: 0 0 4px rgba(0, 240, 255, 0.5);
}
.mindmap-container.mindmap-cyber .markmap {
    --markmap-text-color: #00f0ff;
}
[data-theme="dark"] .mindmap-container.mindmap-cyber .markmap {
    --markmap-text-color: #00f0ff;
}
[data-theme="dark"] .mindmap-container.mindmap-cyber .markmap-foreign > div > div {
    color: #00f0ff;
}

/* 全屏状态：各样式背景保持一致 */
.mindmap-container.mindmap-handdrawn.mindmap-fullscreen {
    background: linear-gradient(135deg, #fdf6e3 0%, #f5ecd9 100%);
}
.mindmap-container.mindmap-vintage.mindmap-fullscreen {
    background: linear-gradient(135deg, #f0e6d0 0%, #e8dcc0 50%, #f0e6d0 100%);
}
.mindmap-container.mindmap-cyber.mindmap-fullscreen {
    background: linear-gradient(135deg, #0a0e1a 0%, #0d1525 50%, #0a0e1a 100%);
    box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.08);
}
[data-theme="dark"] .mindmap-container.mindmap-cyber.mindmap-fullscreen {
    background: linear-gradient(135deg, #0a0e1a 0%, #0d1525 50%, #0a0e1a 100%);
}