/* ==========================================================================
   MinMin OS - Thiên hà thần kinh (khoang não) + Bảng điều hành (cột trái).
   Nạp SAU style.css / console.css. Khoang não và bảng theo tông của app: tông tối là nền
   vũ trụ, tông sáng (data-theme="light") là nền giấy ấm - khối cuối file.
   ========================================================================== */

/* ---------- Khoang não: nền vũ trụ ---------- */
html.mm-galaxy .hud-center {
  background:
    radial-gradient(ellipse 48% 52% at 50% 50%, rgba(120, 90, 220, 0.22) 0%, rgba(40, 24, 90, 0.10) 38%, transparent 62%),
    radial-gradient(ellipse 90% 80% at 50% 50%, #0b0916 0%, #05040b 60%, #020206 100%);
}
html.mm-galaxy .hud-center::after {
  background: radial-gradient(ellipse 72% 72% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
}
html.mm-galaxy #starfield { opacity: 0.55; }
html.mm-galaxy #graph2d { cursor: crosshair; }

/* Nhãn thư mục quanh não: chữ sáng trên nền tối, bất kể tông */
html.mm-galaxy .concept-label .cl-name {
  color: #ece8ff; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 3px; font-weight: 500;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.95), 0 0 2px #000;
}
html.mm-galaxy .concept-label .cl-meta { color: #8f86b8; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; }
html.mm-galaxy .concept-label.show { opacity: 0.85; }

/* Nút nổi + số liệu Agents/Skills trên nền tối */
html.mm-galaxy .hud-center .brain-overlay-toggle {
  color: #ddd6ff; background: rgba(14, 12, 26, 0.6);
  border-color: rgba(185, 160, 255, 0.28); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}
html.mm-galaxy .hud-center .brain-stats {
  background: rgba(12, 10, 24, 0.55); border-color: rgba(185, 160, 255, 0.22);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px);
}
html.mm-galaxy .hud-center .bstat-num { color: #f4f1ff; }
html.mm-galaxy .hud-center .bstat-lbl { color: #8f86b8; }
html.mm-galaxy .hud-center .bstat-sep { background: rgba(185, 160, 255, 0.2); }
html.mm-galaxy .orb-state { color: #b9b0e6; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 6px; }
html.mm-galaxy .orb-interim { color: #ece8ff; }

.mm-galaxy-off { top: 14px !important; right: 58px !important; font-size: 15px; line-height: 1; }

/* HUD chữ kiểu ODIN */
html:not(.mm-galaxy) .mm-hud, html:not(.mm-galaxy) .mm-hud-foot { display: none; }
.mm-hud {
  position: absolute; top: 18px; left: 22px; z-index: 4; pointer-events: none;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  text-transform: uppercase; line-height: 1.9;
}
.mm-hud-l1 { font-size: 10.5px; letter-spacing: 2.6px; color: #9b95b8; }
.mm-hud-l2 { font-size: 12px; letter-spacing: 3px; color: #cfc9ea; margin-top: 4px; }
.mm-hud-l2 b { font-weight: 500; color: #fff; margin-left: 10px; }
.mm-hud-l3 { font-size: 10.5px; letter-spacing: 2.4px; color: #34e0b0; text-shadow: 0 0 8px rgba(52, 224, 176, 0.5); }
.mm-hud-foot {
  position: absolute; left: 22px; bottom: 16px; z-index: 4; pointer-events: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px;
  letter-spacing: 2px; color: #6f6a8e; text-transform: uppercase;
}
@media (max-width: 860px) { .mm-hud { display: none; } .mm-hud-foot { display: none; } }

/* ---------- Cột trái: tab Điều hành / Vault ---------- */
.mm-tabs {
  display: flex; gap: 4px; padding: 3px; margin-bottom: 12px; flex: none;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg2, transparent);
}
.mm-tabs button {
  flex: 1; border: 0; background: none; cursor: pointer; padding: 6px 0; border-radius: 7px;
  font: 600 12px var(--font); letter-spacing: 1px; color: var(--text2);
}
.mm-tabs button.active { background: var(--accent, #ff6a1a); color: #fff; }

/* Ẩn vault khi đang ở tab Điều hành - CHỈ ở màn chính (con trực tiếp của .hud-body);
   node này còn bị mượn sang tab "Thư mục" của trang Trò chuyện, ở đó luôn là vault. */
.hud-body > .hud-left.mm-dash-on > :not(.mm-tabs):not(.mm-dash):not(.vault-expand) { display: none !important; }
.hud-body > .hud-left:not(.mm-dash-on) > .mm-dash { display: none; }
.cside-pane .mm-tabs, .cside-pane .mm-dash { display: none !important; }

/* ---------- Bảng điều hành (kính tối) ---------- */
.mm-dash {
  --mm-surface: #15141c; --mm-card: rgba(255, 255, 255, 0.035); --mm-brd: rgba(185, 160, 255, 0.14);
  --mm-t1: #f3f1fa; --mm-t2: #c3c2b7; --mm-t3: #8a87a0;
  display: flex; flex-direction: column; gap: 14px; flex: none;
  color: var(--mm-t1); font-family: var(--font);
  margin: 0 -8px; padding: 12px 10px 14px; border-radius: 14px;
  background: linear-gradient(180deg, #121019 0%, #0b0a11 100%);
  border: 1px solid var(--mm-brd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.mm-head { display: flex; align-items: center; justify-content: space-between; }
.mm-title { font: 600 11px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 3px; color: #cfc9ea; }
.mm-dash .mini-btn { color: var(--mm-t2); border-color: var(--mm-brd); }
.mm-upd { font-size: 11px; color: var(--mm-t3); margin-top: -8px; }
.mm-sec-t {
  font: 600 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mm-t3); margin: 12px 0 8px;
}
.mm-dash section > .mm-sec-t:first-child { margin-top: 0; }
.mm-empty { font-size: 12px; line-height: 1.55; color: var(--mm-t2); padding: 10px; border: 1px dashed var(--mm-brd); border-radius: 10px; }
.mm-empty code { font-size: 11px; color: #d9d2ff; word-break: break-all; }
.mm-demo {
  font: 700 10.5px var(--font); letter-spacing: 1px; color: #1a1a19;
  background: #fab219; border-radius: 6px; padding: 4px 8px; margin-bottom: 8px; text-align: center;
}

.mm-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mm-kpi { background: var(--mm-card); border: 1px solid var(--mm-brd); border-radius: 10px; padding: 8px 9px; min-width: 0; }
.mm-kpi-l { font-size: 10.5px; color: var(--mm-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-kpi-v { font-size: 17px; font-weight: 700; color: var(--mm-t1); margin-top: 2px; font-variant-numeric: tabular-nums; }
.mm-kpi-d { font-size: 10.5px; margin-top: 1px; color: var(--mm-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-kpi-d.up { color: #3fd13f; }
.mm-kpi-d.down { color: #ff7a7a; }
.mm-kpi-d span { color: var(--mm-t3); }

.mm-chart-box { position: relative; }
.mm-chart { width: 100%; height: auto; display: block; overflow: visible; }
.mm-axis { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.mm-tick { fill: var(--mm-t3); font-size: 8.5px; font-family: var(--font); }
.mm-cross { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.mm-dot { stroke: #15141c; stroke-width: 2; }
.mm-tip {
  position: absolute; top: -6px; width: 120px; pointer-events: none; z-index: 2;
  font-size: 11px; color: var(--mm-t1); background: #26242f; border: 1px solid var(--mm-brd);
  border-radius: 7px; padding: 4px 7px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); text-align: center;
}
.mm-tip em { color: var(--mm-t3); font-style: normal; }
.mm-legend { display: flex; gap: 12px; font-size: 10.5px; color: var(--mm-t2); margin-top: 4px; }
.mm-sw { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.mm-sw-dash { height: 0; border-top: 2px dashed; background: none !important; }

.mm-fc { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--mm-card); border: 1px solid var(--mm-brd); }
.mm-fc-l { font-size: 10.5px; color: var(--mm-t3); }
.mm-fc-v { font-size: 22px; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.mm-fc-s { font-size: 11px; color: var(--mm-t2); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.mm-fc-n { font-size: 10px; color: var(--mm-t3); margin-top: 6px; font-style: italic; }

.mm-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 6px; }
.mm-bar i { display: block; height: 100%; border-radius: 4px; background: #9085e9; }

.mm-st {
  display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%;
  font: 700 10px var(--font); color: #111;
}
.mm-st-good { background: #0ca30c; color: #fff; }
.mm-st-warning { background: #fab219; }
.mm-st-serious { background: #ec835a; }
.mm-st-critical { background: #d03b3b; color: #fff; }
.mm-st-info { background: #5b5870; color: #fff; }

.mm-alerts, .mm-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mm-alerts li, .mm-tasks li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--mm-t2); }
.mm-tasks .mm-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.mm-proj { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mm-proj:last-child { border-bottom: 0; }
.mm-proj-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mm-proj-n { font-size: 12.5px; font-weight: 600; color: var(--mm-t1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-pill { flex: none; font-size: 10px; padding: 1px 7px; border-radius: 20px; border: 1px solid; }
.mm-pill-good { color: #3fd13f; border-color: rgba(12, 163, 12, 0.5); }
.mm-pill-warning { color: #fab219; border-color: rgba(250, 178, 25, 0.5); }
.mm-pill-serious { color: #ec835a; border-color: rgba(236, 131, 90, 0.5); }
.mm-pill-critical { color: #ff7a7a; border-color: rgba(208, 59, 59, 0.6); }
.mm-pill-info { color: var(--mm-t2); border-color: var(--mm-brd); }
.mm-proj-m { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--mm-t3); margin-top: 4px; }
.mm-proj-x { font-size: 11px; color: var(--mm-t2); margin-top: 3px; }

.mm-ops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mm-ops div { text-align: center; background: var(--mm-card); border: 1px solid var(--mm-brd); border-radius: 8px; padding: 6px 2px; }
.mm-ops b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.mm-ops span { font-size: 9.5px; color: var(--mm-t3); }
.mm-note { display: flex; gap: 8px; font-size: 11px; color: var(--mm-t2); margin: 8px 0; line-height: 1.45; }
.mm-tasks { margin-top: 8px; }
.mm-loops { font-size: 11px; color: var(--mm-t3); margin-top: 8px; }
.mm-loops b { color: var(--mm-t1); }
.mm-bad { color: #ff7a7a; }

.mm-foot { display: flex; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 10px; }
.mm-link { background: none; border: 0; padding: 0; cursor: pointer; font-size: 11px; color: #a99bff; }
.mm-link:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .mm-tabs button { transition: none; } }

/* ---------- Bản 3D: thẻ ghi chú khi chỉ chuột vào một chấm sáng ---------- */
.mm-galaxy-off svg { width: 16px; height: 16px; }
.mm-3d #graph2d { cursor: grab; }
.mm-3d .float-tooltip-kap, .mm-3d .scene-tooltip {
  background: transparent !important; padding: 0 !important; border: 0 !important;
  box-shadow: none !important; z-index: 20;
}
.mm-ntip {
  width: 280px; padding: 12px 14px 10px; border-radius: 12px;
  background: rgba(10, 8, 24, 0.92); border: 1px solid rgba(190, 170, 255, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 24px rgba(140, 110, 255, 0.18);
  color: #ece9ff; font: 13px/1.45 var(--font, 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif);
  backdrop-filter: blur(6px); white-space: normal; text-align: left;
}
.mm-ntip-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #fff; }
.mm-ntip-h i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
.mm-ntip-m { margin-top: 3px; font-size: 11.5px; color: #a9a3c8; }
.mm-ntip-m span { font-weight: 600; }
.mm-ntip-tx { margin-top: 8px; color: #d8d4ef; font-size: 12.5px; }
.mm-ntip-tx.cho { color: #7f79a3; font-style: italic; }
.mm-ntip-f { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(190, 170, 255, 0.14);
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #7f79a3; }

/* ==========================================================================
   TÔNG SÁNG - khớp giao diện sáng của app (nền --bg ấm, nhấn cam --accent).
   ========================================================================== */
html[data-theme="light"].mm-galaxy .hud-center {
  background:
    radial-gradient(ellipse 46% 50% at 50% 50%, rgba(255, 170, 120, 0.20) 0%, rgba(170, 140, 240, 0.08) 42%, transparent 66%),
    radial-gradient(ellipse 95% 85% at 50% 50%, #ffffff 0%, #fbf9f7 55%, #f3eee8 100%);
}
html[data-theme="light"].mm-galaxy .hud-center::after {
  background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgba(120, 90, 60, 0.07) 100%);
}
html[data-theme="light"].mm-galaxy #starfield { opacity: 0.25; }
html[data-theme="light"].mm-galaxy .concept-label .cl-name {
  color: #3a3544; text-shadow: 0 0 8px rgba(255, 255, 255, 0.95), 0 0 2px #fff;
}
html[data-theme="light"].mm-galaxy .concept-label .cl-meta { color: #8a8398; }
html[data-theme="light"].mm-galaxy .hud-center .brain-overlay-toggle {
  color: #55505f; background: rgba(255, 255, 255, 0.85);
  border-color: var(--border, #e7e1da); box-shadow: 0 4px 14px rgba(60, 42, 24, 0.08);
}
html[data-theme="light"].mm-galaxy .hud-center .brain-stats {
  background: rgba(255, 255, 255, 0.82); border-color: var(--border, #e7e1da);
  box-shadow: 0 6px 20px rgba(60, 42, 24, 0.08);
}
html[data-theme="light"].mm-galaxy .hud-center .bstat-num { color: #1c1a24; }
html[data-theme="light"].mm-galaxy .hud-center .bstat-lbl { color: #8a8398; }
html[data-theme="light"].mm-galaxy .hud-center .bstat-sep { background: var(--border, #e7e1da); }
html[data-theme="light"].mm-galaxy .orb-state { color: #8a8398; }
html[data-theme="light"].mm-galaxy .orb-interim { color: #1c1a24; }
html[data-theme="light"] .mm-hud-l1 { color: #9a93a8; }
html[data-theme="light"] .mm-hud-l2 { color: #55505f; }
html[data-theme="light"] .mm-hud-l2 b { color: #1c1a24; }
html[data-theme="light"] .mm-hud-l3 { color: #0f9e80; text-shadow: none; }
html[data-theme="light"] .mm-hud-foot { color: #a39cb0; }

/* Bảng điều hành: thẻ trắng như các khung khác của app */
html[data-theme="light"] .mm-dash {
  --mm-surface: #ffffff; --mm-card: var(--surface-1, rgba(60, 42, 24, 0.035));
  --mm-brd: var(--border, #e7e1da);
  --mm-t1: var(--text, #1c1a24); --mm-t2: var(--text2, #55505f); --mm-t3: #8a8398;
  background: var(--bg2, #ffffff); border-color: var(--border, #e7e1da);
  box-shadow: 0 1px 2px rgba(60, 42, 24, 0.04);
}
html[data-theme="light"] .mm-title { color: #55505f; }
html[data-theme="light"] .mm-empty code { color: #6e57d8; }
html[data-theme="light"] .mm-axis { stroke: rgba(60, 42, 24, 0.14); }
html[data-theme="light"] .mm-cross { stroke: rgba(60, 42, 24, 0.35); }
html[data-theme="light"] .mm-dot { stroke: #ffffff; }
html[data-theme="light"] .mm-tip { background: #ffffff; box-shadow: 0 6px 18px rgba(60, 42, 24, 0.14); }
html[data-theme="light"] .mm-bar { background: rgba(60, 42, 24, 0.08); }
html[data-theme="light"] .mm-bar i { background: var(--accent, #e85d1f); }
html[data-theme="light"] .mm-kpi-d.up, html[data-theme="light"] .mm-pill-good { color: #0a8f0a; }
html[data-theme="light"] .mm-kpi-d.down, html[data-theme="light"] .mm-pill-critical,
html[data-theme="light"] .mm-bad { color: #c62f2f; }
html[data-theme="light"] .mm-pill-warning { color: #b27a00; }
html[data-theme="light"] .mm-pill-serious { color: #c7582c; }
html[data-theme="light"] .mm-proj { border-bottom-color: var(--border, #e7e1da); }
html[data-theme="light"] .mm-foot { border-top-color: var(--border, #e7e1da); }
html[data-theme="light"] .mm-link { color: var(--accent, #e85d1f); }

/* Thẻ ghi chú 3D */
html[data-theme="light"] .mm-ntip {
  background: rgba(255, 255, 255, 0.97); border-color: var(--border, #e7e1da);
  box-shadow: 0 10px 30px rgba(60, 42, 24, 0.16); color: #1c1a24;
}
html[data-theme="light"] .mm-ntip-h { color: #1c1a24; }
html[data-theme="light"] .mm-ntip-m { color: #8a8398; }
html[data-theme="light"] .mm-ntip-tx { color: #55505f; }
html[data-theme="light"] .mm-ntip-tx.cho, html[data-theme="light"] .mm-ntip-f { color: #a39cb0; }
html[data-theme="light"] .mm-ntip-f { border-top-color: var(--border, #e7e1da); }