/* ===================== 💭 Χάρτης εννοιών ===================== */
/* Χρησιμοποιεί το πλαίσιο της Ζωγραφικής (.pt-wrap, .pt-tools, .pt-opts, .pt-colors) */

.mm-canvas-box {
  flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden; border-radius: 16px;
  background: #fff radial-gradient(circle, #cfd8dc 1.4px, transparent 1.6px) 0 0 / 26px 26px;
  box-shadow: 0 0 0 4px #fff, 0 8px 24px rgba(0,0,0,.18);
}
.mm-svg { width: 100%; height: 100%; display: block; touch-action: none; font-family: var(--font); cursor: grab; }
.mm-svg:active { cursor: grabbing; }
.mm-canvas-box[data-tool=add] .mm-svg { cursor: copy; }
.mm-canvas-box[data-tool=link] .mm-svg { cursor: crosshair; }
.mm-canvas-box[data-tool=erase] .mm-svg { cursor: not-allowed; }
.mm-canvas-box[data-tool=erase] .mm-node, .mm-canvas-box[data-tool=erase] .mm-edge { cursor: pointer; }
.mm-svg text { user-select: none; -webkit-user-select: none; pointer-events: none; }
.mm-node { cursor: move; }
.mm-node:hover > path:first-child { filter: brightness(1.04); }
.mm-edge { cursor: pointer; }
.mm-edge:hover .mm-hit + path { stroke-width: 5.5; }
.mm-label rect { cursor: text; }
.mm-handle { cursor: crosshair; }
.mm-handle:hover circle { fill: #0288d1; r: 19; }
.mm-selring { animation: mm-march 1.2s linear infinite; }
@keyframes mm-march { to { stroke-dashoffset: -34; } }
.mm-pending { animation: mm-pulse .8s ease-in-out infinite alternate; }
@keyframes mm-pulse { from { stroke-opacity: .35; } to { stroke-opacity: 1; } }

.mm-zoom-badge {
  position: absolute; right: 10px; bottom: 8px; background: rgba(255,255,255,.85); border-radius: 12px;
  padding: 3px 10px; font-weight: 700; font-size: 13px; color: #607d8b; pointer-events: none;
}


/* Πάνελ επιλογών */
.mm-shapes { grid-template-columns: repeat(5, 1fr); }
.mm-shapes .pt-opt { font-size: 20px; min-width: 0; padding: 0; }
.mm-label-input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 17px; font-weight: 700; color: #37474f;
  border: 2px solid #cfd8dc; border-radius: 10px; padding: 0 10px; height: 44px; outline: none; user-select: text; -webkit-user-select: text;
}
.mm-label-input:focus { border-color: #ff9800; box-shadow: 0 0 0 3px rgba(255,152,0,.25); }
.mm-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.mm-chip {
  font-family: inherit; font-size: 13px; font-weight: 700; color: #00695c; background: #e0f2f1; border: 2px solid #80cbc4;
  border-radius: 14px; padding: 3px 9px; cursor: pointer; transition: transform .1s;
}
.mm-chip:hover { transform: scale(1.06); background: #b2dfdb; }
.mm-chips.static .mm-chip { cursor: default; }
.mm-chips.static .mm-chip:hover { transform: none; background: #e0f2f1; }

/* Τα κουμπιά εργαλείων χωρούν πάντα σε 2 στήλες (τα μεγάλα ονόματα αναδιπλώνονται) */
.mm-wrap .pt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-wrap .pt-tool { min-width: 0; }
.mm-wrap .pt-tool .n { white-space: normal; text-align: center; font-size: 11px; }

/* Χρωματικές παλέτες μέσα στο πάνελ (8 στήλες, χωρίς κύλιση) */
.mm-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.mm-swatch { aspect-ratio: 1; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px #b0bec5; cursor: pointer; padding: 0; min-width: 0; }
.mm-swatch:hover { transform: scale(1.12); }
.mm-swatch.sel { box-shadow: 0 0 0 3px #ff9800; }
/* Πιο συμπαγές πάνελ, ώστε να χωρά χωρίς κύλιση */
.mm-wrap .pt-label { margin: 6px 0 3px; font-size: 12px; }
.mm-wrap .pt-opt { height: 38px; }
.mm-wrap .pt-opt.size i { max-width: 18px; max-height: 18px; }
.mm-wrap .mm-chips { margin: 4px 0 0; gap: 4px; }
.mm-wrap .mm-chip { font-size: 12px; padding: 2px 8px; }
.mm-wrap .pt-help { font-size: 13px; margin: 4px 0; }
/* Η εικόνα της ιδέας */
.mm-img { cursor: move; }
/* Παράθυρο επιλογής εικόνας */
.mm-pick-tabs { justify-content: center; margin-bottom: 8px; }
.mm-pick-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; max-width: 520px; margin: 0 auto; }
.mm-pick { font-size: 30px; line-height: 1; background: #fff; border: 2px solid #cfd8dc; border-radius: 10px; height: 50px; cursor: pointer; padding: 0; }
.mm-pick:hover { border-color: #ffb74d; transform: scale(1.08); }
.mm-pick.sel { border-color: #ff9800; background: #ffe082; }
.mm-pick-file { cursor: pointer; display: inline-block; }
.mm-row5 .pt-opt { flex: 1; min-width: 0; padding: 0; }