/* ===== Mindmap Layout ===== */
.mindmap-layout { display: flex; height: calc(100vh - 64px); overflow: hidden; }
.mindmap-main { flex: 1; display: flex; overflow: hidden; position: relative; }

/* ===== Canvas ===== */
.mindmap-canvas-wrap { flex: 1; position: relative; overflow: hidden; background: var(--bg); cursor: grab; }
.mindmap-canvas-wrap:active { cursor: grabbing; }
.mindmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mindmap-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===== Nodes ===== */
.mm-node { position: absolute; transform: translate(-50%, -50%); cursor: pointer; user-select: none; transition: box-shadow 0.15s; }
.mm-node-inner { padding: 10px 18px; border-radius: 100px; font-size: 0.875rem; font-weight: 600; border: 2px solid; white-space: nowrap; transition: var(--transition); box-shadow: var(--shadow-sm); }
.mm-node.root .mm-node-inner { padding: 14px 28px; font-size: 1rem; font-weight: 800; border-radius: var(--radius-lg); }
.mm-node:hover .mm-node-inner { box-shadow: var(--shadow-md); transform: scale(1.04); }
.mm-node.selected .mm-node-inner { outline: 2.5px solid var(--primary); outline-offset: 3px; }

/* Node Colors */
.mm-node.color-blue .mm-node-inner { background: #EEF1FF; border-color: #4F6EF7; color: #3A56D4; }
.mm-node.color-purple .mm-node-inner { background: #F5F3FF; border-color: #7C3AED; color: #6D28D9; }
.mm-node.color-cyan .mm-node-inner { background: #ECFEFF; border-color: #06B6D4; color: #0891B2; }
.mm-node.color-green .mm-node-inner { background: #ECFDF5; border-color: #10B981; color: #059669; }
.mm-node.color-yellow .mm-node-inner { background: #FFFBEB; border-color: #F59E0B; color: #B45309; }
.mm-node.color-pink .mm-node-inner { background: #FDF2F8; border-color: #EC4899; color: #BE185D; }

/* SVG edges */
.mm-edge { fill: none; stroke: var(--border); stroke-width: 2; }
.mm-edge.level-1 { stroke: #4F6EF7; stroke-width: 2.5; }
.mm-edge.level-2 { stroke: #7C3AED; }
.mm-edge.level-3 { stroke: #06B6D4; }

/* ===== Node Edit Panel ===== */
.node-edit-panel { width: 240px; background: var(--bg-card); border-left: 1px solid var(--border); flex-shrink: 0; display: flex; flex-direction: column; overflow-y: auto; box-shadow: var(--shadow-md); }
.node-edit-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.color-options { display: flex; gap: 8px; flex-wrap: wrap; }
.color-dot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2.5px solid transparent; transition: var(--transition); }
.color-dot:hover, .color-dot.selected { border-color: var(--text-primary); transform: scale(1.15); }
.color-dot.blue { background: #4F6EF7; }
.color-dot.purple { background: #7C3AED; }
.color-dot.cyan { background: #06B6D4; }
.color-dot.green { background: #10B981; }
.color-dot.yellow { background: #F59E0B; }
.color-dot.pink { background: #EC4899; }

/* ===== Mini Map (optional) ===== */
.mm-minimap { position: absolute; bottom: 16px; right: 16px; width: 140px; height: 90px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden; opacity: 0.8; }