/* ═══════════════════════════════════════════════════════════════
   Mind maps in the notes (js/mindmap.js)
═══════════════════════════════════════════════════════════════ */

/* ── Block in the note ── */
.mm-block {
  position: relative;
  display: block;
  margin: 18px 0;
  padding: 18px 14px;
  border-radius: 20px;
  border: 1px solid rgba(240, 246, 252, .10);
  background:
    radial-gradient(circle at 50% 50%, rgba(125, 211, 252, .10), transparent 55%),
    radial-gradient(circle at 15% 15%, rgba(196, 181, 253, .08), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(134, 239, 172, .07), transparent 40%),
    radial-gradient(rgba(240, 246, 252, .07) 1px, transparent 1.4px) 0 0 / 22px 22px,
    #0f141b;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  user-select: none;
  overflow: hidden;
  cursor: default;
}
.mm-view { position: relative; width: 100%; min-height: 60px; }

.mm-stage {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
.mm-links { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.mm-links path { fill: none; stroke-linecap: round; }
.mm-links .mm-l1 { stroke-width: 3.2; opacity: .85; filter: drop-shadow(0 0 6px currentColor); }
.mm-links .mm-l2 { stroke-width: 1.6; opacity: .55; }

/* Central word */
.mm-center {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 150px; max-width: 260px;
  padding: 18px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7dd3fc 0%, #a5b4fc 50%, #f9a8d4 100%);
  color: #0d1117;
  text-align: center;
  box-shadow: 0 0 0 6px rgba(165, 180, 252, .14), 0 0 40px rgba(165, 180, 252, .45), 0 10px 30px rgba(0, 0, 0, .45);
}
.mm-word { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.3px; word-break: break-word; }
.mm-note { margin-top: 4px; font-size: 13px; font-weight: 600; opacity: .8; }

/* Branch hubs */
.mm-hub {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 240px;
  padding: 8px 15px;
  border-radius: 14px;
  background: var(--c);
  color: #0d1117;
  font-size: 14px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
  box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent), 0 6px 16px rgba(0, 0, 0, .4);
}
.mm-hub-ic { font-size: 15px; line-height: 1; }

/* Words */
.mm-chip {
  position: absolute; z-index: 2;
  max-width: 230px;
  padding: 7px 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--c) 9%, #161b22);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  color: #e6edf3;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  white-space: normal; word-break: break-word;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mm-right .mm-chip { border-left: 3px solid var(--c); }
.mm-left .mm-chip { border-right: 3px solid var(--c); text-align: right; }
.mm-chip:hover { transform: translateY(-2px); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent), 0 6px 16px rgba(0, 0, 0, .35); }
.mm-branch:hover .mm-chip { border-color: var(--c); }
.mm-branch:hover .mm-hub { box-shadow: 0 0 30px color-mix(in srgb, var(--c) 70%, transparent), 0 6px 16px rgba(0, 0, 0, .4); }

/* Entrance animation */
.mm-anim .mm-center { animation: mmPop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.mm-anim .mm-hub { animation: mmPop .45s .15s cubic-bezier(.2, 1.4, .4, 1) both; }
.mm-anim .mm-chip { animation: mmFade .4s calc(.3s + var(--d, 0ms)) ease-out both; }
.mm-anim .mm-links path { stroke-dasharray: 800; stroke-dashoffset: 800; animation: mmDraw 1s .1s ease-out forwards; }
@keyframes mmPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes mmFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mmDraw { to { stroke-dashoffset: 0; } }

/* Practice mode: words hidden until clicked */
.mm-practice .mm-chip { cursor: pointer; }
.mm-practice .mm-chip:not(.mm-shown) .mm-chip-tx { color: transparent; text-shadow: 0 0 12px rgba(230, 237, 243, .35); }
.mm-practice .mm-chip:not(.mm-shown)::after {
  content: '?'; position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; color: var(--c); font-size: 16px;
}
.mm-badge {
  position: absolute; top: 10px; left: 14px; z-index: 3;
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  color: #fcd34d; background: rgba(252, 211, 77, .1); border: 1px solid rgba(252, 211, 77, .35);
}

/* Teacher tools (on hover) */
.mm-tools {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  display: flex; gap: 6px; opacity: 0; transition: opacity .15s;
}
.mm-block:hover .mm-tools { opacity: 1; }
.mm-tool {
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  background: rgba(22, 27, 34, .9); border: 1px solid rgba(240, 246, 252, .18);
  color: #e6edf3; font-size: 14px; line-height: 1;
}
.mm-tool:hover { border-color: #7dd3fc; color: #7dd3fc; }
.mm-tool.mm-del:hover { border-color: #ffa198; color: #ffa198; }

/* ── Builder modal ── */
.mm-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(1, 4, 9, .75); backdrop-filter: blur(4px);
}
.mm-overlay.open { display: flex; }
.mm-modal {
  width: min(1180px, 100%); max-height: 94vh;
  display: flex; flex-direction: column;
  background: #161b22; color: #e6edf3;
  border: 1px solid rgba(240, 246, 252, .12); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
.mm-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid rgba(240, 246, 252, .1); }
.mm-head h3 { margin: 0; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.mm-x { background: none; border: none; color: #9da7b3; font-size: 18px; cursor: pointer; }
.mm-x:hover { color: #e6edf3; }
.mm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px 1fr; overflow: hidden; }
.mm-form { padding: 18px 20px; overflow-y: auto; border-right: 1px solid rgba(240, 246, 252, .1); display: flex; flex-direction: column; gap: 12px; }
.mm-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #9da7b3; }
.mm-input {
  font: inherit; font-size: 15px; color: #e6edf3;
  background: #0d1117; border: 1px solid rgba(240, 246, 252, .16); border-radius: 10px;
  padding: 9px 12px; outline: none; width: 100%; box-sizing: border-box;
}
.mm-input:focus { border-color: #7dd3fc; }
.mm-input-big { font-size: 20px; font-weight: 700; }
.mm-branches-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9da7b3; margin-top: 4px; }
.mm-branches { display: flex; flex-direction: column; gap: 10px; }
.mm-b { padding: 10px; border-radius: 12px; background: #0d1117; border: 1px solid rgba(240, 246, 252, .1); border-left: 4px solid var(--c); }
.mm-b-top { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; }
.mm-b-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.mm-b-type, .mm-b-color {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--c);
  background: #161b22; border: 1px solid rgba(240, 246, 252, .16); border-radius: 8px; padding: 5px 8px;
}
.mm-b-color { color: var(--c); width: 52px; }
.mm-b-label { flex: 1; min-width: 100px; padding: 5px 9px; font-size: 14px; }
.mm-b-tools { margin-left: auto; display: flex; gap: 4px; }
.mm-b-tools button {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: #161b22; border: 1px solid rgba(240, 246, 252, .14); color: #c9d1d9; font-size: 13px;
}
.mm-b-tools button:disabled { opacity: .35; cursor: default; }
.mm-b-tools .mm-b-del:hover { border-color: #ffa198; color: #ffa198; }
.mm-b-words { resize: vertical; min-height: 54px; font-size: 14px; line-height: 1.45; }
.mm-empty { color: #9da7b3; font-size: 14px; padding: 8px 2px; }
.mm-add-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mm-add-label { font-size: 13px; font-weight: 700; color: #9da7b3; margin-right: 2px; }
.mm-add {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 10%, #0d1117); color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.mm-add:hover { background: color-mix(in srgb, var(--c) 20%, #0d1117); }
.mm-check { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #c9d1d9; cursor: pointer; margin-top: 4px; }
.mm-check input { width: 17px; height: 17px; accent-color: #fcd34d; }
.mm-preview-wrap { padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.mm-preview-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9da7b3; }
.mm-preview { margin: 0; }
.mm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid rgba(240, 246, 252, .1); }
.mm-err { margin-right: auto; color: #ffa198; font-size: 14px; }
.mm-btn { font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; padding: 9px 18px; border-radius: 10px; border: 1px solid rgba(240, 246, 252, .18); }
.mm-ghost { background: transparent; color: #c9d1d9; }
.mm-ghost:hover { border-color: #9da7b3; }
.mm-primary { background: linear-gradient(135deg, #7dd3fc, #a5b4fc); color: #0d1117; border-color: transparent; }
.mm-primary:hover { filter: brightness(1.08); }

@media (max-width: 860px) {
  .mm-body { grid-template-columns: 1fr; overflow-y: auto; }
  .mm-form { border-right: none; border-bottom: 1px solid rgba(240, 246, 252, .1); overflow: visible; }
}

/* Phones: the branches are listed under the word (no lines) */
.mm-compact { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 6px 2px; font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
.mm-compact .mm-center { position: static; align-self: center; }
.mm-compact .mm-branch { padding: 10px 12px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 5%, #0f141b); }
.mm-compact .mm-hub { position: static; margin-bottom: 9px; }
.mm-compact .mm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mm-compact .mm-chip { position: relative; }
.mm-add-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px dashed rgba(240, 246, 252, .12); }

/* ✨ Fill with AI */
.mm-ai-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: -2px 0 4px; }
.mm-ai-btn { background: linear-gradient(135deg, #c4b5fd, #f9a8d4); color: #0d1117; border-color: transparent; padding: 7px 14px; font-size: 14px; }
.mm-ai-btn:hover { filter: brightness(1.08); }
.mm-ai-btn:disabled { opacity: .6; cursor: default; }
.mm-ai-per { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #c9d1d9; }
.mm-ai-per input { width: 54px; padding: 5px 6px; border-radius: 8px; border: 1px solid rgba(240, 246, 252, .18); background: #0d1117; color: #e6edf3; font: inherit; }
.mm-ai-status { font-size: 13px; color: #c9d1d9; }

/* 🔍 Show it big */
.mm-zoom { position: fixed; inset: 0; z-index: 9500; background: rgba(1, 4, 9, .9); display: flex; align-items: center; justify-content: center; padding: 56px 24px 24px; }
.mm-zoom-box { position: relative; width: 100%; height: 100%; border: 1px solid #30363d; border-radius: 18px; overflow: auto; user-select: none;
  background: radial-gradient(circle at 50% 50%, rgba(125, 211, 252, .10), transparent 55%), radial-gradient(rgba(240, 246, 252, .07) 1px, transparent 1.4px) 0 0 / 22px 22px, #0f141b; }
.mm-zoom-box .mm-view { position: relative; width: 100%; }
.mm-zoom-x { position: absolute; top: 12px; right: 18px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(240, 246, 252, .25); background: #161b22; color: #e6edf3; font-size: 18px; cursor: pointer; }
.mm-zoom-x:hover { border-color: #7dd3fc; color: #7dd3fc; }