/* ── MINDMAP VIEW ── */
#view-map { height: 100%; position: relative; }
#mm-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: var(--bg); }

/* Dotted grid */
#mm-container::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: var(--mm-gx, 0px) var(--mm-gy, 0px);
}

#mm-viewport-wrap { position: absolute; inset: 0; cursor: grab; overflow: hidden; z-index: 1; }
#mm-viewport-wrap.panning { cursor: grabbing; }
#mm-viewport { position: absolute; inset: 0; transform-origin: 0 0; }
#mm-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
#mm-nodes { position: absolute; inset: 0; pointer-events: none; }

/* Mindmap nodes */
.mm-node {
  position: absolute;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 9px 15px;
  min-width: 90px; max-width: 260px;
  transform: translate(-50%, -50%);
  cursor: grab; pointer-events: auto;
  box-shadow: var(--shadow);
  user-select: none;
  transition: border-color .15s, box-shadow .15s;
  font-size: 13px; word-break: break-word;
}
.mm-node:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.mm-node:active { cursor: grabbing; }
.mm-node.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg), var(--shadow-md); }
.mm-node.editing { cursor: text; border-color: var(--accent); }
.mm-node-text { min-width: 40px; outline: none; line-height: 1.45; white-space: pre-wrap; }

/* Depth colors - light */
.mm-node[data-depth="0"] { background: #ffffff; }
.mm-node[data-depth="1"] { background: #eff6ff; border-color: #bfdbfe; }
.mm-node[data-depth="2"] { background: #fefce8; border-color: #fde68a; }
.mm-node[data-depth="3"] { background: #f5f3ff; border-color: #ddd6fe; }
.mm-node[data-depth="4"] { background: #fff7ed; border-color: #fed7aa; }

.mm-node .mm-collapse {
  position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--muted); font-size: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; pointer-events: auto; transition: all .12s;
}
.mm-node .mm-collapse:hover { border-color: var(--accent); color: var(--accent); }
.mm-node img, .mm-node video {
  display: block; max-width: 220px; max-height: 140px;
  border-radius: 6px; margin-top: 6px; object-fit: contain; pointer-events: none;
}

/* Connection handles - hidden */
.mm-handle { display: none !important; }

.mm-edge-path {
  fill: none; stroke: var(--border); stroke-width: 2; stroke-linecap: round;
  cursor: pointer; transition: stroke .15s; pointer-events: stroke;
}
[data-theme="light"] .mm-edge-path { stroke: #94a3b8; }
.mm-edge-path:hover, .mm-edge-path.selected { stroke: #ef4444; stroke-width: 3.5; }
.mm-edge-path.preview { stroke: var(--accent); stroke-dasharray: 6 4; }
.mm-ep { fill: var(--surface); stroke: var(--accent); stroke-width: 2; cursor: grab; pointer-events: auto; }
.mm-ep:hover { fill: var(--accent-bg); }

#mm-help {
  position: absolute; bottom: 14px; right: 14px; z-index: 20;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 13px; font-size: 11px; line-height: 1.8; color: var(--muted);
  box-shadow: var(--shadow-md);
}
#mm-help strong { color: var(--text); }