/* ════════════════════════════════════════════════
   Mind Map Button & Modal
   ════════════════════════════════════════════════ */

/* === MIND MAP BUTTON + MODAL === */
.mindmap-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 10px;
    border: 1px solid rgba(99,102,241,0.35);
    background: rgba(99,102,241,0.1); color: #a5b4fc;
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.mindmap-btn:hover { background: rgba(99,102,241,0.22); border-color: #6366f1; }
.mindmap-btn svg { width: 15px; height: 15px; }

.mm-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px); z-index: 9997;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; animation: fcOverlayIn 0.2s ease;
}
.mm-modal-overlay.hidden { display: none; }

.mm-modal {
    background: #0d0d1a;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px; width: 100%; max-width: 1100px;
    height: 85vh; display: flex; flex-direction: column;
    overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.7);
    animation: fcModalIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

.mm-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.mm-modal-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 600; color: #f1f1f1;
}
.mm-header-actions { display: flex; align-items: center; gap: 8px; }
.mm-ctrl-btn {
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #aaa; font-size: 12px; cursor: pointer; transition: all 0.15s;
}
.mm-ctrl-btn:hover { background: rgba(255,255,255,0.12); color: #f1f1f1; }
.mm-download-btn:hover { background: rgba(99,102,241,0.2); border-color: #6366f1; color: #a5b4fc; }
.mm-modal-close {
    background: rgba(255,255,255,0.07); border: none;
    color: #888; width: 28px; height: 28px;
    border-radius: 7px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: all 0.15s;
}
.mm-modal-close:hover { background: rgba(239,68,68,0.15); color: #f87171; }

.mm-canvas-area {
    flex: 1; position: relative; overflow: hidden;
    background: #080812;
    background-image:
        radial-gradient(ellipse at center, #0f1035 0%, #080812 60%),
        radial-gradient(circle, rgba(139,92,246,0.08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px;
}
.mm-canvas-area svg { cursor: grab; }
.mm-canvas-area svg:active { cursor: grabbing; }

.mm-tooltip {
    position: absolute; pointer-events: none;
    background: rgba(15,15,30,0.95);
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 8px; padding: 7px 11px;
    font-size: 12px; color: #e2e8f0; line-height: 1.5;
    max-width: 280px; white-space: pre-line;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 10;
}
.mm-tooltip.hidden { display: none; }

.mm-legend {
    display: flex; align-items: center; gap: 16px;
    padding: 8px 20px; border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0; flex-wrap: wrap;
}
.mm-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: #666;
}
.mm-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
}
.mm-legend-hint { margin-left: auto; font-size: 11px; color: #444; }

@media (max-width: 600px) {
    .mm-modal { height: 95vh; }
    .mm-legend-hint { display: none; }
}