/* ============================================================
   DAS OS — GLOBE THEME (redesign/globe-ui)
   Lớp phủ RESKIN kiểu "Sci-fi Globe": nền đen-lạnh, neon cam + cyan,
   panel kính mờ, chữ tinh tế. Nạp SAU style.css/console.css để đè.
   Giai đoạn 1: đổi design tokens + kính mờ (không đổi cấu trúc HTML).
   ============================================================ */

:root {
  /* nền đen-lạnh sâu hơn (thay tông tím-ấm cũ) */
  --bg:  #05070e;
  --bg2: #0a0e1a;
  --bg3: #101a2e;
  --border: rgba(140,180,235,0.14);
  --input-bg: rgba(8,14,28,0.62);
  /* bộ đôi neon Globe: cam hổ phách + cyan điện (thay violet) */
  --accent:  #ff9d3d;
  --accent2: #46d6ff;
  /* chữ tông lạnh, tinh tế */
  --text:  #e9f2ff;
  --text2: #b3c2da;
  --text3: #6f83a4;
  --green: #43e0a3;
  --red:   #ff6a86;
  --yellow:#ffce8f;
  /* glass tokens dùng lại nhiều nơi */
  --glass:   rgba(12,20,38,0.46);
  --glass-b: rgba(140,180,235,0.16);
}

/* nền tổng thể: gradient lạnh + hơi sáng ở tâm (cảm giác không gian) */
body {
  background:
    radial-gradient(70% 55% at 50% 34%, #0a1730 0%, var(--bg) 62%),
    var(--bg) !important;
}

/* ---- KÍNH MỜ chỉ cho THANH NAV + khối thống kê (những thứ nổi trên graph) ----
   KHÔNG áp cho .card/.cview (lớp phủ trang) vì làm trong suốt sẽ lộ nội dung sau -> chồng chữ. */
.rail,
.brain-stats {
  background: var(--glass) !important;
  border-color: var(--glass-b) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
/* Lớp phủ trang quản lý (.cview) PHẢI đặc để che home phía sau */
.cview { background: var(--bg) !important; }

/* nút/badge nhấn dùng gradient neon cam */
.send-btn, .mic-big {
  background: linear-gradient(135deg, var(--accent), #ffc98a) !important;
  box-shadow: 0 0 16px rgba(255,157,61,0.4);
}

/* viền active của nav → gạch neon cam */
.rail-item.active {
  color: var(--accent) !important;
  background: rgba(255,157,61,0.12) !important;
}

/* số liệu / tiêu đề: chữ sáng lạnh, giãn nhẹ cho tinh tế */
.panel-label, .cview-title, .ws-name { letter-spacing: 0.01em; }

/* trạng thái orb / "SẴN SÀNG" → cam neon */
.orb-state { color: var(--accent) !important; text-shadow: 0 0 12px rgba(255,157,61,0.4); }

/* thanh cuộn mảnh tông lạnh */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(140,180,235,0.22); border-radius: 3px; }

/* ============================================================
   GIAI ĐOẠN 2 — NAV RAIL → DOCK ĐÁY NGANG (nổi, kính mờ)
   Nội dung full-width (bỏ lề trái), thoáng vùng giữa cho Globe.
   ============================================================ */
:root { --rail-w: 0px; }
body.rail-collapsed { --rail-w: 0px; }

.rail {
  top: auto !important; right: auto; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  width: auto; max-width: calc(100vw - 40px); height: auto;
  flex-direction: row; align-items: center;
  padding: 7px 10px; gap: 3px;
  border-right: 0; border: 1px solid var(--glass-b);
  border-radius: 16px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.5);
  overflow-x: auto; overflow-y: hidden;
}
.rail-top, .rail-foot { display: none !important; }
.rail-nav { flex-direction: row !important; overflow-x: auto; overflow-y: hidden; gap: 3px; padding: 0; }
.rail-item {
  flex: 0 0 auto !important; width: 42px; height: 42px;
  flex-direction: column; justify-content: center; gap: 0; padding: 0; border-radius: 11px;
}
.rail-item .rail-lbl,
.rail-item .rail-caret { display: none !important; }
.rail-item.active::before {
  left: 22% !important; right: 22% !important; top: auto !important; bottom: 3px !important;
  width: auto !important; height: 2px !important; border-radius: 2px;
}
/* nội dung + trang quản lý → full-width, chừa đáy cho dock */
body.has-rail .hud { margin-left: 0 !important; width: 100% !important; }
.cview { left: 0 !important; bottom: 86px !important; }
/* khi đang ở HOME (không phải trang quản lý) → ẩn hẳn cview kẻo ghost mờ phía sau */
body:not(.in-console) .cview { display: none !important; }
/* trang quản lý (overview...) đang bật → nổi HẲN lên trên graph + nền đặc, hết ghost */
.cview { z-index: 50 !important; }

/* ============================================================
   GIAI ĐOẠN 3 — PANEL 2 BÊN NỔI (float, kính mờ) trên GRAPH full-bleed
   ============================================================ */
.hud-body { grid-template-columns: 1fr !important; }   /* graph chiếm toàn khung */
.hud-left, .hud-right {
  position: absolute; top: 14px; bottom: 78px; z-index: 6;
  background: var(--glass) !important;
  border: 1px solid var(--glass-b) !important;
  border-radius: 16px;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 18px 46px rgba(0,0,0,0.45);
}
.hud-left  { left: 14px;  width: 244px; border-right: 1px solid var(--glass-b) !important; }
.hud-right { right: 14px; width: 340px; border-left: 1px solid var(--glass-b) !important; }
/* hàng thống kê đáy (brain-stats) cũng thành thẻ nổi kính mờ */
.brain-stats {
  border-radius: 14px !important; margin: 0 auto;
}