/* weike.enetedu.com/static/css/mindmap.css - COMBINING Negative Margin + preserveAspectRatio */

/* --- 桌面端样式 (保持不变) --- */
.breadcrumb-bar { display: flex; align-items: center; width: 100%; height: 48px; padding: 0 20px; background-color: #eeeeee; color: #555555; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-sizing: border-box; }
.breadcrumb-icon { margin-right: 5px; display: inline-block; vertical-align: middle; }
.breadcrumb-text { margin-right: 5px; vertical-align: middle; }
.breadcrumb-text .breadcrumb-ai-badge { display: inline-block; background: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%); color: white; font-size: 0.7em; font-weight: bold; padding: 0.15em 0.5em; border-radius: 3px; margin-left: 5px; line-height: 1; vertical-align: middle; position: relative; top: -0.05em; text-transform: uppercase; }
.breadcrumb-text .breadcrumb-ai-badge:hover { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); color:white; }
.breadcrumb-separator { margin: 0 8px; color: #999999; vertical-align: middle; }
.breadcrumb-bar a { color: #015dc0; text-decoration: none; margin: 0 3px; vertical-align: middle; }
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-spacer { width: 100%; height: 10px; background-color: #f8f9fa; }
.breadcrumb-pc-mobile { display: flex; }
.mindmap-layout-container { display: flex; width: 100%; margin: 0; height: calc(100vh - 48px - 48px - 10px - 95px); min-height: calc(100vh - 48px - 48px - 10px - 95px); overflow: hidden; border: none; box-shadow: none; }
.editor { flex: 0 0 30%; max-width: 30%; height: 100%; overflow-y: auto; padding: 15px; box-sizing: border-box; background-color: #f8f9fa; border-right: 1px solid #dee2e6; }
.editor-content { white-space: pre-wrap; word-wrap: break-word; height: 100%; margin: 0; padding: 0; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 14px; line-height: 1.5; color: #333; }
.preview { flex: 1 1 70%; height: 100%; overflow: hidden; /* **保持 overflow: hidden** */ padding: 10px; box-sizing: border-box; position: relative; /* **需要 relative 定位** */ }
.markmap-container { width: 100%; height: 100%; position: relative; /* **保持 relative 定位** */ touch-action: none; }
.markmap-container svg#markmap-svg { width: 100% !important; height: 100% !important; display: block; position: relative; /* **设为 relative 以应用 margin** */ }
.markmap-container .error-message { color: #d8000c; background-color: #ffbaba; border: 1px solid; margin: 10px; padding: 15px; border-radius: 5px; font-family: sans-serif; }

.foot { width: 100% !important; margin: 0 !important; max-width: none !important; background-color: #f1f1f1; padding-top: 10px; padding-bottom: 10px; }
.foot_nav { width: 100% !important; height: auto !important; border-radius: 0 !important; background: #0d7aa1 !important; }
.foot_nav ul { width: auto !important; display: flex; justify-content: center; padding: 0 10px; height: auto; line-height: 40px; margin: 0 auto !important; color:#fff }
.foot_nav ul li { float: none !important; margin: 0 8px !important; font-size: 14px; }
.foot_main { width: 100% !important; padding: 15px 10px !important; box-sizing: border-box !important; text-align: center !important; }
.foot_main p { margin-top: 4px; font-size: 13px; }


/* --- 响应式调整：小屏幕 (手机端) - 负外边距 + preserveAspectRatio --- */
@media screen and (max-width: 767px) {
    /* --- 面包屑和间隔条手机端样式 (保持不变) --- */
    .breadcrumb-bar { height: 32px; padding: 0 10px; font-size: 0.8rem; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
    .breadcrumb-icon { margin-right: 3px; font-size: 0.9em; }
    .breadcrumb-text { margin-right: 3px; }
    .breadcrumb-text .breadcrumb-ai-badge { margin-left: 3px; font-size: 0.75em; }
    .breadcrumb-separator { margin: 0 5px; }
    .breadcrumb-bar a { margin: 0 2px; }
    .breadcrumb-spacer { height: 10px; }
    .breadcrumb-pc-mobile { display: none; }

    /* --- 主体布局容器手机端 (保持 Flex 列布局和固定高度) --- */
    .mindmap-layout-container { display: flex; flex-direction: column; width: 100%; height: calc(100vh - 32px - 10px); min-height: 0; margin: 0; overflow: hidden; border: none; box-shadow: none; }

    /* --- 编辑器手机端 (固定高度 230px 和内部滚动) --- */
    .editor { flex: 0 0 230px; /* **使用你调整后的 230px** */ width: 100%; max-width: none; overflow-y: auto; border-right: none; border-bottom: 1px solid #e0e0e0; margin-bottom: 0; padding: 8px; box-sizing: border-box; }

    /* --- 预览区手机端 (填充剩余空间) --- */
    /* 恢复简单填充 */
    .preview { flex: 1; width: 100%; min-height: 0; padding: 0; margin-bottom: 0; overflow: hidden; /* **必须保留，裁剪被上移的部分** */ background-color: #ffffff; position: relative; /* **需要 relative** */ }

    /* --- Markmap SVG 容器手机端 --- */
    /* 它仍然填充 .preview */
    .markmap-container { width: 100%; height: 100%; position: relative; touch-action: none; -webkit-touch-callout: none; user-select: none; }

    /* --- SVG 元素手机端 (核心调整 - 重新添加负外边距) --- */
    /* SVG 仍然尝试填满容器，但其位置被 margin-top 向上拉 */
    .markmap-container svg#markmap-svg { width: 100% !important; height: 100% !important; display: block; position: relative; margin-top: -100px; }

    /* --- 编辑器文本和页脚手机端样式 --- */
    .editor-content { font-size: 13px; line-height: 1.4; }
    .foot { display: none; /* 保持隐藏页脚 */ width: 100% !important; margin: 0 !important; padding: 10px 0 !important; }
    .foot_nav { /* ... */ }
    .foot_main { /* ... */ }
    .foot_main p { /* ... */ }
}