/* ============================================================
   思维导图
   ============================================================ */

/* ===== 布局 ===== */
.mm-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* ===== 左侧边栏 ===== */
.mm-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mm-project-box {
  background: #fff;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  padding: 12px;
}

.mm-project-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.mm-project-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mm-project-empty {
  font-size: 13px;
  color: #999;
  text-align: center;
  padding: 12px 0;
}
/* 首次进入时的示例入口。刻意做成文字链样式，
   免得和下面那颗主按钮「新建」抢注意力。 */
.mm-sample-link {
  margin-top: 8px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--brand, #4a6cf7);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}
.mm-sample-link:hover { text-decoration: underline; color: #2f4fd0; }
.mm-sample-link:focus-visible { outline: 2px solid #4a6cf7; outline-offset: 2px; }

/* 示例选择弹框里的单选列表 */
.mm-sample-list { display: flex; flex-direction: column; gap: 4px; }
.mm-sample-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.mm-sample-item:hover { background: #f2f5ff; }
.mm-sample-item input[type="radio"] { margin: 0; flex: 0 0 auto; }
.mm-sample-item input[type="radio"]:focus-visible { outline: 2px solid #4a6cf7; outline-offset: 2px; }

/* ===== 列表项（标题 + 重命名 + 删除 + 节点数） ===== */
.mm-project-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mm-project-item:hover {
  background: #f5f7ff;
}
.mm-project-active {
  background: #eef1fe;
  border-color: #c7d2fb;
}
.mm-project-active:hover {
  background: #e6ebfd;
}

.mm-p-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: #2c3e50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-project-active .mm-p-title {
  color: #3a56d4;
  font-weight: 600;
}

/* 就地重命名输入框：占据标题原来的位置，宽度不能把右侧按钮挤出去 */
.mm-p-edit {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-family: inherit;
  padding: 2px 6px;
  border: 1px solid #4a6cf7;
  border-radius: 4px;
  outline: none;
  background: #fff;
}

/* 操作按钮不用 :hover 才出现：触屏上没有 hover，控件就等于不存在 */
.mm-p-rename,
.mm-p-del {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: #c2c9d6;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.mm-p-rename:hover,
.mm-p-rename:focus-visible {
  background: #e6efff;
  color: #4a6cf7;
}
.mm-p-del:hover,
.mm-p-del:focus-visible {
  background: #fdecea;
  color: #e74c3c;
}

.mm-p-count {
  flex-shrink: 0;
  font-size: 11px;
  color: #a4adbd;
  font-variant-numeric: tabular-nums;
}

.mm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== 按钮 ===== */
.mm-btn {
  display: block;
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-align: center;
  user-select: none;
}
.mm-btn:active {
  transform: scale(0.97);
}

.mm-btn-primary {
  background: #4a6cf7;
  color: #fff;
  font-weight: 600;
}
.mm-btn-primary:hover {
  background: #3b5ce4;
}

.mm-btn-success {
  background: #22a06b;
  color: #fff;
  font-weight: 600;
}
.mm-btn-success:hover {
  background: #1d8a5c;
}

.mm-btn-outline {
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
  font-weight: 500;
}
.mm-btn-outline:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

/* 破坏性动作放在同一列普通按钮里，静息态不能比主按钮更抢眼，
   只在悬停时变红，让用户在按下前意识到这一步不可撤销 */
.mm-btn-danger-soft {
  color: #c0392b;
  border-color: #f0cfca;
}
.mm-btn-danger-soft:hover {
  background: #fdecea;
  border-color: #e74c3c;
  color: #a93226;
}

/* ===== 缩放 ===== */
.mm-zoom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mm-zoom-label {
  font-size: 13px;
  color: #666;
}

.mm-zoom-select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
}

/* ===== 画布 ===== */
.mm-canvas-wrap {
  flex: 1;
  min-width: 0;
}

.mm-canvas {
  background: #fafbfc;
  border: 1px solid #e8ecf4;
  border-radius: 10px;
  /* 顶部留出工具按钮的高度：它们浮在画布左上角，
     不预留的话正好压在根节点上，还会抢走根节点的点击 */
  padding: 48px 20px 20px;
  overflow: auto;
  height: calc(100vh - 120px);
  min-height: 400px;
  position: relative;
  cursor: grab;
  /* 画布的平移和拖节点都走 pointer 事件；不设这个，浏览器会把触摸手势
     拿去自己滚动/缩放，并抛 pointercancel，手指在画布上就等于没反应 */
  touch-action: none;
}
.mm-canvas:active {
  cursor: grabbing;
}

/* 画布主题：底色与提示文字色在这里，节点/连线配色在 mindmap.js 的 THEMES 里 */
.mm-canvas.mm-theme-dark { background: #20242e; border-color: #313a4b; }
.mm-canvas.mm-theme-dark .mm-placeholder { color: #8b94a7; }
.mm-canvas.mm-theme-dark .mm-hint { color: #6b7488; }
.mm-canvas.mm-theme-paper { background: #faf6ec; border-color: #e6dcc3; }
.mm-canvas.mm-theme-paper .mm-placeholder { color: #a89a80; }
.mm-canvas.mm-theme-paper .mm-hint { color: #bcae93; }

/* 键盘焦点落在节点 <g> 上：UA 的 outline 在 SVG 上画不出样子，选中态本身就是焦点指示 */
.mm-node:focus { outline: none; }

.mm-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  color: #aaa;
  font-size: 14px;
  text-align: center;
  line-height: 1.8;
}

.mm-hint {
  font-size: 12px;
  color: #bbb;
  margin-top: 8px;
}

/* ===== 弹出菜单 ===== */
.mm-popup {
  display: none;
  position: fixed;
  z-index: 1000;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 6px;
  gap: 4px;
  align-items: center;
}

.mm-popup-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
  color: #fff;
}
.mm-popup-btn:hover {
  transform: scale(1.15);
}

.mm-popup-rename {
  background: #607d8b;
}
.mm-popup-add {
  background: #4a6cf7;
}
.mm-popup-del {
  background: #e74c3c;
}
.mm-popup-note {
  background: #f39c12;
}
.mm-popup-image {
  background: #16a2b8;
}
/* 多色渐变，一眼就知道是配色用的 */
.mm-popup-color {
  background: linear-gradient(135deg, #e74c3c, #f39c12, #22a06b, #16a2b8, #4a6cf7, #9b59b6);
}

/* ===== 内联输入框 ===== */
.mm-inline-input {
  position: absolute;
  z-index: 200;
  font-size: 13px;
  padding: 6px 10px;
  border: 2px solid #4a6cf7;
  border-radius: 6px;
  outline: none;
  background: #fff;
  box-shadow: 0 2px 12px rgba(74, 108, 247, 0.25);
  font-family: inherit;
}

/* ===== 批注悬停提示（支持多行） ===== */
.mm-note-tooltip {
  display: none;
  position: fixed;
  z-index: 5000;
  pointer-events: none;
  max-width: 360px;
  min-width: 120px;
  background: #2c3e50;
  color: #fff;
  font-size: 12px;
  line-height: 1.7;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  white-space: pre-line;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ===== 状态栏 ===== */
.mm-status {
  font-size: 12px;
  color: #888;
  padding: 8px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 保存状态常驻角标：放在底部状态条左侧，不被临时提示挤走 */
.mm-status-chip { flex: 0 0 auto; }

/* ===== 图片批注缩略图 ===== */
.mm-node-img {
  cursor: pointer;
}
.mm-node-img:hover .mm-img-thumb-bg {
  stroke: #16a2b8;
  stroke-width: 2;
}
.mm-node-img-remove {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.mm-node-img:hover .mm-node-img-remove {
  opacity: 1;
}
.mm-node-img-remove:hover circle {
  fill: #e74c3c;
}

/* ===== 图片预览遮罩 ===== */
.mm-img-preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* 元素用 hidden 属性控制显隐，但上面的 display:flex 会盖过 UA 样式表的
   [hidden]{display:none}，不加这条遮罩就会从页面加载起一直罩在编辑器上 */
.mm-img-preview[hidden] {
  display: none;
}

.mm-img-preview-inner {
  position: relative;
  max-width: 85vw;
  max-height: 80vh;
}

.mm-img-preview-inner img {
  max-width: 85vw;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  display: block;
}

.mm-img-preview-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mm-img-preview-close:hover {
  background: #e74c3c;
  color: #fff;
}

/* ===== 画廊（多图批注） ===== */
.mm-img-preview-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mm-img-preview-title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
  text-align: center;
}

.mm-img-preview-list {
  overflow: auto;
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px;
}

.mm-img-item {
  position: relative;
}

.mm-img-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(231, 76, 60, 0.9);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mm-img-del:hover {
  background: #c0392b;
}

/* 画廊内新增图片按钮 */
.mm-img-add {
  position: relative;
  width: min(460px, 80vw);
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: 0.15s;
}
.mm-img-add:hover {
  border-color: #16a2b8;
  background: rgba(22, 162, 184, 0.2);
}
.mm-img-add-plus {
  font-size: 30px;
  line-height: 1;
}
.mm-img-add-txt {
  font-size: 13px;
}

/* 画廊内图片后台加载中的占位块 */
.mm-img-pending {
  width: min(460px, 80vw);
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

/* ===== 折叠圆点：加大热区 + 悬停放大高亮 ===== */
.mm-node-hit {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}
.mm-node-vis {
  transition: r 0.12s ease, stroke-width 0.12s ease, filter 0.12s ease;
}
.mm-node-hit:hover ~ .mm-node-vis {
  r: 12;
  stroke-width: 3;
  filter: drop-shadow(0 0 4px rgba(74, 108, 247, 0.9));
}

/* ===== 节点状态：选中 / 搜索命中 =====
   class 打在 SVG 的 <g> 上，g 用不了 outline 和 box-shadow，只能染它的 rect */
.mm-node-active > rect {
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(44, 62, 80, 0.55));
}
.mm-node-match > rect {
  filter: drop-shadow(0 0 7px rgba(243, 156, 18, 0.95));
}
/* 两者同时成立时，单条规则的 filter 会把另一条覆盖掉，得显式叠加 */
.mm-node-active.mm-node-match > rect {
  stroke: #fff;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(44, 62, 80, 0.55))
          drop-shadow(0 0 8px rgba(243, 156, 18, 0.95));
}

/* ===== 节点配色选择器（弹框内） ===== */
.mm-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mm-swatch {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  position: relative;
  transition: transform 0.1s;
}
.mm-swatch:hover {
  transform: scale(1.12);
}
.mm-swatch:focus-visible {
  outline: 2px solid #4a6cf7;
  outline-offset: 2px;
}
/* 白圈 + 深色外环：在任何色块上都看得出选中了哪一个 */
.mm-swatch.on {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2c3e50;
}
/* data-color 为空 = 恢复按层级自动配色，按钮里没有文字，用斜杠表示「不上色」 */
.mm-swatch[data-color=""] {
  background: #fff;
  box-shadow: inset 0 0 0 1px #cfd6e2;
}
.mm-swatch[data-color=""].on {
  box-shadow: inset 0 0 0 1px #cfd6e2, 0 0 0 2px #fff, 0 0 0 4px #2c3e50;
}
.mm-swatch[data-color=""]::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: #b6bfcd;
  transform: rotate(-45deg);
}

/* ===== 拖动节点：改父子关系 / 改兄弟顺序 ===== */
body.mm-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}
.mm-drag-ghost {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  max-width: 220px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #4a6cf7;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(74, 108, 247, 0.28);
  font-size: 12px;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-node.mm-drag-src {
  opacity: 0.35;
}
/* 落点=成为子节点：目标节点描边高亮（只染节点方框，图片角标在子 g 里不受影响） */
.mm-node.mm-drop-into > rect {
  stroke: #16a2b8;
  stroke-width: 3;
  filter: drop-shadow(0 0 5px rgba(22, 162, 184, 0.55));
}
/* 落点=插入为兄弟：间隙里的指示条 */
.mm-drop-bar {
  fill: #16a2b8;
  pointer-events: none;
}

/* 图片批注悬浮大图预览 */
#mmImgHover {
  position: fixed;
  z-index: 6000;
  display: none;
  flex-direction: column;
  background: #2c3e50;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  max-width: 84vw;
}
.mm-img-hover-box {
  overflow: auto;
  max-width: 80vw;
  max-height: 70vh;
  cursor: grab;
  line-height: 0;
}
.mm-img-hover-box:active {
  cursor: grabbing;
}
.mm-img-hover-box img {
  display: block;
  border-radius: 6px;
  user-select: none;
  -webkit-user-drag: none;
}
.mm-img-hover-cap {
  margin-top: 6px;
  color: #bdc3c7;
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
}

/* 加载进度遮罩 */
#mmLoadOverlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(2px);
}
.mm-load-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 28px 36px;
  min-width: 320px;
  text-align: center;
}
.mm-load-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
}
.mm-load-bar {
  height: 8px;
  background: #e6ebf1;
  border-radius: 4px;
  overflow: hidden;
}
.mm-load-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #16a2b8, #4a6cf7);
  border-radius: 4px;
  transition: width 0.15s ease;
}
.mm-load-text {
  margin-top: 12px;
  font-size: 12px;
  color: #7f8c8d;
}


/* ---- 视图工具按钮（画布左上角，半透明） ---- */
.mm-canvas-wrap{position:relative}
.mm-view-tools{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:6}
.mm-tool-btn{width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(70,80,100,.25);background:rgba(255,255,255,.8);border-radius:6px;
  opacity:.55;cursor:pointer}
.mm-tool-btn:hover{opacity:1;background:#fff}
.mm-tool-btn svg{width:16px;height:16px;display:block}
.mm-tool-select{height:30px;padding:0 4px;border:1px solid rgba(70,80,100,.25);
  background:rgba(255,255,255,.8);border-radius:6px;opacity:.75;cursor:pointer;
  font-size:12px;color:#2c3e50}
.mm-tool-select:hover{opacity:1;background:#fff}
.mm-canvas-wrap.mm-theme-dark .mm-tool-btn{background:rgba(32,36,46,.8);border-color:#39435a}
.mm-canvas-wrap.mm-theme-dark .mm-tool-btn svg{filter:invert(.85)}
.mm-canvas-wrap.mm-theme-dark .mm-tool-select{background:rgba(32,36,46,.8);border-color:#39435a;color:#cbd3e1}
/* ---- 全屏：画布绝对定位铺满整屏（杜绝底部黑边），状态条做成贴底的一行细条浮在画布上 ---- */
.mm-canvas-wrap:fullscreen,.mm-canvas-wrap:-webkit-full-screen,
.mm-canvas-wrap:-moz-full-screen,.mm-canvas-wrap:-ms-fullscreen{
  position:relative;width:100vw;height:100vh;
  background:#fafbfc;padding:0;overflow:hidden}
.mm-canvas-wrap:fullscreen .mm-canvas,.mm-canvas-wrap:-webkit-full-screen .mm-canvas,
.mm-canvas-wrap:-moz-full-screen .mm-canvas,.mm-canvas-wrap:-ms-fullscreen .mm-canvas{
  position:absolute;inset:0;height:100vh;min-height:0;border:none;border-radius:0;
  /* 底部多留一点内边距，免得贴底状态条压住最下面一排节点 */
  padding-bottom:44px}
/* 状态条：全屏时脱离文档流，贴在底部，仅一行文字高，半透明底 */
.mm-canvas-wrap:fullscreen .mm-status,.mm-canvas-wrap:-webkit-full-screen .mm-status,
.mm-canvas-wrap:-moz-full-screen .mm-status,.mm-canvas-wrap:-ms-fullscreen .mm-status{
  position:absolute;left:0;right:0;bottom:0;z-index:7;
  padding:5px 12px;background:rgba(250,251,252,.86)}
.mm-canvas-wrap.mm-theme-dark:fullscreen,.mm-canvas-wrap.mm-theme-dark:-webkit-full-screen{background:#20242e}
.mm-canvas-wrap.mm-theme-dark:fullscreen .mm-status,.mm-canvas-wrap.mm-theme-dark:-webkit-full-screen .mm-status{background:rgba(32,36,46,.86)}