/* ============================================
   JAVIS OS - Console layer (sidebar + pages)
   Tông màu kế thừa style.css (:root). Glassmorphism + glow.
   Cockpit (.hud) giữ nguyên; layer này bọc thêm bên ngoài.
   ============================================ */
:root {
  --rail-w: 160px;
  --rail-w-collapsed: 60px;
  --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --rail-bg: rgba(14, 14, 22, 0.72);
  --glass: rgba(22, 22, 31, 0.55);
  --glass-brd: var(--hairline);
  --glow: 0 0 0 1px var(--glass-brd), var(--shadow-2);
  --rail-anim: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --topbar-h: 52px;          /* chiều cao header .hud-top - cview chừa ra để header hiện mọi trang */
}
/* Tông sáng: mặt kính đổi từ "tối mờ chồng lên nền đen" thành "trắng mờ chồng lên
   giấy ngà". Vẫn giữ backdrop-filter nên vẫn có chiều sâu, chỉ đổi chất liệu. */
:root[data-theme="light"] {
  --rail-bg: rgba(255, 255, 255, 0.82);
  --glass: rgba(255, 255, 255, 0.72);
}

/* Header (.hud-top) thành thanh top TOÀN CỤC: luôn nằm trên cùng, cview quản lý bắt đầu dưới nó.
   .hud render sẵn phía sau → header (row 52px đầu) lộ ra; z-index để chắc chắn nổi trên cview. */
.hud-top { position: relative; z-index: 45; }
/* Nút điều khiển trợ lý (cài đặt, giọng nói, làm mới) chỉ thuộc cockpit Javis → ẩn khi đang ở trang quản lý */
body.in-console .hud-actions { display: none; }

/* ===== Rail (sidebar dọc, kính mờ) ===== */
.rail {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 8px; gap: 0;
  background: var(--rail-bg);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-right: 1px solid var(--glass-brd);
}
.rail-top { flex: 0 0 auto; }                         /* đỉnh cố định */
.rail-nav {                                           /* giữa: cuộn dọc */
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 4px; padding: 6px 0;
}
.rail-nav::-webkit-scrollbar { width: 0; }            /* ẩn thanh cuộn cho gọn */
.rail-nav { scrollbar-width: none; }
/* Rail 2 tầng: tầng 1 = nhãn nhóm bấm gập/mở; tầng 2 = mục con xổ ra dưới. Nhóm .foot ghim đáy. */
.rail-group { display: flex; flex-direction: column; }
.rail-group.foot { margin-top: auto; }                /* đẩy Hệ thống xuống đáy rail */
.rail-grp-lbl {                                        /* tầng 1: nút nhãn nhóm, bấm để gập/mở */
  display: flex; align-items: center; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--text2); text-align: left; white-space: nowrap;
  padding: 8px 8px 8px 5px; border-radius: 9px; user-select: none;
  transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-grp-lbl::before {                                /* mũi tên ▸, xoay xuống ▾ khi mở */
  content: ""; flex: 0 0 auto; margin-right: 6px;
  width: 0; height: 0; border-left: 4px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  opacity: 0.55; transition: transform var(--rail-anim);
}
.rail-grp-ico { flex: 0 0 auto; display: flex; align-items: center; margin-right: 9px; opacity: 0.8; }
.rail-grp-ico svg { width: 17px; height: 17px; }
.rail-group.open > .rail-grp-lbl::before { transform: rotate(90deg); }
.rail-grp-lbl:hover { color: var(--text); background: var(--surface-2); }
.rail-group.has-active:not(.open) > .rail-grp-lbl { color: var(--accent); }   /* nhóm gập nhưng đang chứa trang hiện tại → hé màu cam */
.rail-group.foot .rail-grp-lbl { border-top: 1px solid var(--glass-brd); border-radius: 0; margin-top: 6px; padding-top: 12px; }
/* tầng 2: khối mục con, trượt mở/đóng bằng max-height */
.rail-grp-items {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--rail-anim), opacity var(--rail-anim);
}
.rail-group.open > .rail-grp-items { max-height: 340px; opacity: 1; padding: 2px 0 4px; }
.rail-brand {
  height: 42px; display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(255, 107, 43, 0.55));
}
.rail-item {
  position: relative; background: transparent; border: 0; cursor: pointer;
  color: var(--text3); border-radius: 9px; padding: 7px 8px 7px 16px;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-item .rail-ico { flex: 0 0 auto; line-height: 0; display: flex; align-items: center; justify-content: center; }
.rail-item .rail-ico svg { width: 19px; height: 19px; }
.rail-item .rail-lbl {
  font-family: var(--font-ui); font-size: 13.5px; letter-spacing: 0.1px; opacity: 0.95;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-item:hover { color: var(--text); background: var(--surface-2); }
.rail-item.active { color: var(--accent); background: var(--accent-wash-2); }
.rail-item.active::before {
  content: ""; position: absolute; left: -8px; top: 18%; bottom: 18%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
/* Select Brain - dời lên navbar (header trái), dùng dropdown sẵn có (.orb-graph-ctl) */
.hud-top .navbar-brain { position: static; z-index: auto; gap: 8px; }
.hud-top .navbar-brain .graph-select { max-width: 200px; }
/* Icon bộ não đứng trước dropdown chọn brain - đi theo khối .navbar-brain kể cả
   khi mobile-chat.js dời cả khối vào rail, nên không cần rule riêng cho mobile. */
.navbar-brain .brain-select-ico { color: var(--accent); font-size: 17px; }
@media (max-width: 860px) {
  .hud-top .navbar-brain .graph-stats { display: none; }   /* mobile: ẩn stats cho gọn */
}

/* Form trong card (Channels / Account / provider key) */
.js-lbl { display: block; font-size: 13px; color: var(--text2); margin: 12px 0 5px; font-family: var(--font); }
.js-lbl .dim { color: var(--green); }
.js-input {
  width: 100%; background: var(--sunken); border: 1px solid var(--glass-brd);
  color: var(--text); border-radius: 9px; padding: 9px 11px; font-size: 15px; margin-bottom: 4px;
}
.js-input:focus { outline: none; border-color: var(--accent); }
.js-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 15px; }
.js-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* Nút phụ (Ngắt / Kiểm tra lại / Qua trình duyệt...). Dùng class này thay vì gõ
   style="background:transparent" ngay trên thẻ: style inline thắng cả rule :hover,
   nên nền giữ nguyên trong suốt còn chữ đổi sang var(--on-accent) - chữ tàng hình ở
   cả tông tối lẫn tông sáng. */
.gcard-btn.ghost { background: transparent; border-color: var(--glass-brd); color: var(--text2); }
.gcard-btn.ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--text2); }
.gcard-btn { width: auto; padding: 9px 16px; }
.gcard .gcard-btn { width: 100%; }   /* nút trong card model vẫn full-width */
.js-actions .gcard-btn { width: auto; }

/* Providers - card OAuth (đăng nhập/kết nối) */
.prov-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.prov-card {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 14px;
  padding: 14px 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.18s;
}
.prov-card.main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.prov-head { display: flex; align-items: center; gap: 12px; }
.prov-shield { color: var(--text3); flex: 0 0 auto; display: flex; }
.prov-shield svg { width: 22px; height: 22px; }
.prov-shield.on { color: var(--green); filter: drop-shadow(0 0 6px rgba(34,197,94,0.45)); }
.prov-info { flex: 1; min-width: 0; }
.prov-name { font-family: var(--font); font-weight: 700; font-size: 16px; }
.prov-kind { font-size: 11px; padding: 2px 6px; border-radius: 5px; background: var(--accent2-wash-2); color: var(--accent2-ink); text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; vertical-align: middle; }
.prov-status { font-family: var(--font); font-size: 13px; color: var(--text3); margin-top: 3px; }
.prov-status.on { color: var(--green); }
.prov-badge { font-family: var(--font); font-size: 11px; letter-spacing: 1px; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 6px; }
.prov-action { display: flex; gap: 8px; margin-top: 12px; }
.prov-action .js-input { margin-bottom: 0; flex: 1; }
.prov-action .gcard-btn { width: auto; flex: 0 0 auto; }
.prov-note { font-size: 13px; color: var(--text3); margin-top: 8px; opacity: 0.7; }
/* Cảnh báo trên thẻ provider (vd Google đã ngắt Gemini CLI với tài khoản cá nhân). Bỏ luôn
   opacity 0.7 của .prov-note: đây là thứ người dùng PHẢI đọc, làm mờ đi là phản tác dụng. */
.prov-note.warn { color: var(--yellow); opacity: 1; }
.prov-note.warn code { background: var(--bg3); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
/* Ba bước cài + đăng nhập Gemini CLI. Có <code> nên cần dễ đọc hơn .prov-note một chút. */
.prov-steps { font-size: 13px; color: var(--text2); margin-top: 8px; line-height: 1.75; }
.prov-steps code { background: var(--bg3); padding: 1px 6px; border-radius: 5px;
  font-size: 12.5px; word-break: break-all; }
/* Hàng dán mã đăng nhập Google (#gcliLogin). Cần luật riêng vì khối này nằm NGOÀI
   .prov-action, nên không hưởng hai dòng width:auto/flex ở trên - mà luật gốc .gcard-btn cuối
   file đặt `width:100%` + `margin-top:14px`. Kết quả trước khi có rule này: nút "Xong" giãn ra
   nuốt cả hàng flex, ô nhập mã teo còn vài chục pixel và người dùng KHÔNG gõ nổi mã vào.
   - min-width:0 để ô nhập co được thật (input có kích thước nội tại chặn co lại trong flex).
   - flex-wrap + basis 180px: màn hẹp thì nút rơi xuống dòng dưới thay vì bóp ô nhập. */
.gcli-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: 520px; margin-top: 6px; }
.gcli-code-row .js-input { flex: 1 1 180px; min-width: 0; margin-bottom: 0; }
.gcli-code-row .gcard-btn { flex: 0 0 auto; width: auto; margin-top: 0; }

/* Nguồn xác thực của gói Claude Code (subscription / API key) */
.prov-auth { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--glass-brd); }
.prov-auth-title { font-family: var(--font); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
/* Một dòng nói TRƯỚC cái mà hai lựa chọn bên dưới KHÔNG đổi. Thiếu nó thì người đọc thấy
   "API key Anthropic" ở đây và thẻ "Anthropic (API)" bên dưới, tưởng trùng nhau rồi hỏi làm
   thêm nút này chi (chủ repo hỏi đúng câu đó 2026-08-13). */
.prov-auth-note { font-size: 12.5px; line-height: 1.6; color: var(--text2); margin-bottom: 10px; }
.prov-auth-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 6px; cursor: pointer; }
.prov-auth-opt input { margin-top: 3px; flex: 0 0 auto; }
.prov-auth-opt b { color: var(--text); font-weight: 600; }
.prov-auth-opt i { color: var(--text3); }
.prov-auth-warn { font-size: 13px; line-height: 1.55; color: var(--warn-ink); background: var(--warn-wash); border: 1px solid var(--warn-line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }

/* Auxiliary model chips */
.aux-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aux-chip {
  background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text2);
  border-radius: 9px; padding: 8px 14px; font-family: var(--font); font-size: 14px; cursor: pointer; transition: all 0.15s;
}
.aux-chip:hover { color: var(--text); border-color: var(--text2); }
.aux-chip.sel { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }

/* Model việc nền: chỉ hiện LỰA CHỌN HIỆN TẠI + nút mở picker. Phơi hết model thành chip thì
   tràn trang (riêng OpenRouter đã vài trăm dòng) và không có đường tìm kiếm. */
.aux-card { max-width: 660px; }
/* Card này KHÔNG nhấc lên khi rê chuột: nó là bảng cài đặt đứng yên, không phải thẻ bấm được.
   Để nguyên hiệu ứng của .gcard thì rê ngang là cả khối nhún nhảy, trông lỏng lẻo.
   Phải viết .gcard.aux-card: chỉ .aux-card:hover thì NGANG ĐIỂM với .gcard:hover, mà rule kia
   nằm sau trong file nên nó thắng - đúng lỗi đo được trong trình duyệt. */
.gcard.aux-card:hover { transform: none; border-color: var(--glass-brd); }
.aux-now {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px;
  background: var(--surface-1); border: 1px solid var(--glass-brd); border-radius: 10px;
}
.aux-now-txt { min-width: 0; }
.aux-now-model { font-family: var(--font); font-size: 16px; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aux-now-prov { font-size: 13px; color: var(--text3); margin-top: 3px; }
.aux-now-act { display: flex; gap: 8px; flex-shrink: 0; }
.aux-card .aux-now-act .gcard-btn { width: auto; }   /* thắng luật full-width của .gcard .gcard-btn */
.aux-warn { color: var(--yellow); }
/* Ghi chú phụ: chữ nhỏ, mờ, một dòng ý - phần dài dòng đã cắt bớt ở console.js. */
.aux-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text3); }
.aux-note.warn { color: var(--yellow); }

/* Thanh phân đoạn chọn độ sâu suy nghĩ. Sáu nấc mà để rời thành chip thì hàng nút trôi lung
   tung; gộp vào một thanh liền thì nhìn ra ngay đây là MỘT thang từ nhẹ tới nặng. */
.seg { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 12px; padding: 3px;
  background: var(--surface-1); border: 1px solid var(--glass-brd); border-radius: 12px; }
.seg-btn { flex: 1 1 90px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--text2); font-family: inherit; transition: all 0.15s; }
.seg-btn:hover { background: var(--surface-2); color: var(--text); }
.seg-btn.sel { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }
.seg-lb { font-size: 14px; font-weight: 600; }
.seg-d { font-size: 11px; opacity: 0.7; white-space: nowrap; }
@media (max-width: 640px) {
  .seg-btn { flex-basis: 70px; padding: 7px 6px; }
  .seg-d { display: none; }        /* màn hẹp: giữ nhãn, bỏ dòng phụ cho khỏi vỡ hàng */
}

/* Picker model (SET MAIN MODEL) */
.mp-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--scrim); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.mp-overlay.open { display: flex; animation: fadeIn 0.15s ease; }
.mp-box {
  width: 760px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--glass-brd); border-radius: 16px; box-shadow: var(--glow);
}
.mp-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 12px; }
.mp-title { font-family: var(--font); font-weight: 700; font-size: 16px; letter-spacing: 1px; }
.mp-sub { font-size: 14px; color: var(--text2); margin-top: 3px; }
.mp-x { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.mp-filter { margin: 0 20px 12px; background: var(--sunken); border: 1px solid var(--glass-brd); color: var(--text); padding: 10px 12px; border-radius: 9px; font-size: 15px; }
.mp-filter:focus { outline: none; border-color: var(--accent); }
.mp-body { display: grid; grid-template-columns: 260px 1fr; gap: 0; flex: 1; overflow: hidden; border-top: 1px solid var(--glass-brd); }
.mp-provs { border-right: 1px solid var(--glass-brd); overflow-y: auto; padding: 8px; }
.mp-prov { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text2); border-radius: 10px; padding: 9px 11px; cursor: pointer; margin-bottom: 2px; }
.mp-prov:hover { background: var(--surface-2); color: var(--text); }
.mp-prov.active { background: var(--accent2-wash); border-color: var(--accent2-line); color: var(--text); }
.mp-prov-l { font-size: 15px; font-weight: 600; }
.mp-prov-c { font-family: var(--font); font-size: 12px; color: var(--text3); margin-top: 2px; }
.mp-models { overflow-y: auto; padding: 8px 12px; }
.mp-model { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text); border-radius: 9px; padding: 11px 12px; cursor: pointer; font-family: var(--font); font-size: 15px; }
.mp-model:hover { background: var(--surface-2); }
.mp-model.sel { background: var(--accent-wash-2); border-color: var(--accent); }
.mp-cur { float: right; font-size: 11px; color: var(--accent2); letter-spacing: 1px; }
.mp-empty { color: var(--text3); font-size: 14px; padding: 16px; }
.mp-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--glass-brd); }
.mp-foot .mp-note { max-height: 84px; overflow-y: auto; }   /* lỗi dài không làm footer phình đẩy nút ra ngoài */
.mp-note { font-size: 13px; color: var(--text3); }
.mp-btn { background: var(--bg3); border: 1px solid var(--border); color: var(--text); padding: 9px 18px; border-radius: 9px; cursor: pointer; font-size: 15px; margin-left: 8px; }
.mp-btn.primary { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); font-weight: 600; }
.mp-btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }
@media (max-width: 860px) {
  .mp-body { grid-template-columns: 1fr; }
  .mp-provs { border-right: 0; border-bottom: 1px solid var(--glass-brd); max-height: 140px; }
}

/* Skills chia nhóm (trang Skills) */
.sk-group { margin-bottom: 22px; }
.sk-group-head { font-family: var(--font); font-size: 15px; color: var(--accent2); margin-bottom: 10px; font-weight: 700; }
.sk-group-head .dim { color: var(--text3); font-weight: 400; margin-left: 6px; }

.rail-spacer { flex: 1; }
.rail-foot {                                           /* version/tác giả bên TRÁI, nút thu/mở bên PHẢI */
  font-family: var(--font); line-height: 1.35; padding: 8px 6px 0;
  border-top: 1px solid var(--glass-brd);
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
}
.rail-collapse-btn {                                   /* nút thu/mở sidebar, ghim bên phải; icon căn cỡ với icon nav */
  order: 2; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 28px; padding: 0; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--glass-brd); border-radius: 8px;
  color: var(--text3); cursor: pointer;
  transition: color var(--rail-anim), background var(--rail-anim);
}
.rail-collapse-btn:hover { color: var(--text); background: var(--surface-2); }
.rail-collapse-btn svg { width: 18px; height: 18px; }
.rail-foot .rf-meta { order: 1; text-align: left; min-width: 0; }
.rail-foot .rf-ver { font-size: 11px; color: var(--text2); }
.rail-foot .rf-author { display: block; margin-top: 2px; font-size: 8.5px; color: var(--accent); text-decoration: none; }
.rail-foot .rf-author:hover { text-decoration: underline; }

/* Tooltip nhanh cho rail thu gọn (JS đặt vị trí; body-level nên không bị overflow rail cắt) */
.rail-tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--panel-solid); color: var(--text);
  border: 1px solid var(--glass-brd); border-radius: 8px;
  padding: 5px 10px; font-size: 12.5px; font-family: var(--font-ui); white-space: nowrap;
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-50%) translateX(-4px);
  transition: opacity 0.1s, transform 0.1s;
}
.rail-tip.show { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ===== Chế độ THU GỌN sidebar (chỉ desktop): còn mỗi icon, tên hiện qua tooltip ===== */
@media (min-width: 861px) {
  body.rail-collapsed { --rail-w: var(--rail-w-collapsed); }
  .rail.collapsed .rail-grp-lbl { display: none; }              /* ẩn header nhóm */
  .rail.collapsed .rail-grp-items {                             /* hiện HẾT mục (bỏ accordion), icon xếp dọc */
    max-height: none; opacity: 1; overflow: visible; padding: 0;
  }
  .rail.collapsed .rail-group + .rail-group > .rail-grp-items { /* vạch ngăn mờ giữa các nhóm */
    border-top: 1px solid var(--glass-brd); margin-top: 5px; padding-top: 5px;
  }
  .rail.collapsed .rail-item { justify-content: center; padding: 9px 0; gap: 0; }
  .rail.collapsed .rail-item .rail-lbl { display: none; }       /* giấu chữ, chỉ còn icon */
  .rail.collapsed .rf-meta { display: none; }                   /* giấu version/tác giả cho vừa bề ngang hẹp, chỉ còn nút */
  .rail.collapsed .rail-foot { justify-content: center; }       /* thu: chỉ còn nút, căn giữa */
}

/* ===== Đẩy cockpit sang phải để chừa rail ===== */
body.has-rail .hud { margin-left: var(--rail-w); width: calc(100% - var(--rail-w)); }

/* ===== Console view (vùng trang quản lý) - bắt đầu DƯỚI header toàn cục ===== */
.cview {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0; left: var(--rail-w); z-index: 40;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--accent2-wash), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--accent-wash), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.cview-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 26px; border-bottom: 1px solid var(--glass-brd);
}
.cview-title { font-family: var(--font); font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.cview-title .ico { color: var(--accent); margin-right: 8px; }
.cview-sub { font-size: 14px; color: var(--text2); }
.cview-body { flex: 1; overflow-y: auto; padding: 24px 26px; }

/* ===== Cards chung ===== */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gcard {
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 16px;
  padding: 18px; box-shadow: var(--glow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 0.18s, border-color 0.18s;
}
.gcard:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.gcard.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 30px rgba(255, 107, 43, 0.18); }
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gcard-name { font-family: var(--font); font-weight: 700; font-size: 16px; }
.gcard-tag {
  font-family: var(--font); font-size: 11px; padding: 3px 7px; border-radius: 6px;
  background: var(--accent2-wash-2); color: var(--accent2-ink); text-transform: uppercase; letter-spacing: 0.5px;
}
.gcard-meta { margin-top: 8px; font-size: 14px; color: var(--text2); }

/* Token API (CLI). Bản thô chỉ hiện đúng một lần nên khối .tk-new phải NỔI BẬT - lướt qua nó
   là mất token và phải tạo lại cái khác. */
.tk-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--glass-brd);
}
.tk-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-meta { font-size: 12px; color: var(--text2); }
.tk-row .gcard-btn { margin-top: 0; width: auto; padding: 6px 12px; font-size: 13px; flex: none; }
.tk-new {
  margin-top: 14px; padding: 12px; border-radius: 10px;
  background: var(--accent2-wash-2); border: 1px solid var(--accent-solid);
}
.tk-new-hd { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.tk-code {
  display: block; padding: 10px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--glass-brd); font-size: 13px; word-break: break-all;
  user-select: all;
}
/* Token mà không có tài liệu thì người dùng cầm chuỗi jvs_ trong tay mà không biết dán vào đâu.
   Link đặt ngay dưới thẻ, và lặp lại lúc token vừa hiện ra - đúng lúc cần bước kế tiếp nhất. */
.tk-docs {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--surface-3);
}
.tk-docs a, .tk-doclink { font-size: 12.5px; color: var(--link-ink); text-decoration: none; }
.tk-docs a:hover, .tk-doclink:hover { text-decoration: underline; }
.gcard-btn {
  margin-top: 14px; width: 100%; padding: 9px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text);
  font-family: var(--font); font-size: 14px; transition: all 0.18s;
}
.gcard-btn:hover { background: var(--accent-solid); border-color: var(--accent-solid); color: var(--on-accent); }
/* Nút đang bận/khoá: giữ nguyên bộ mặt thường, không tô cam khi rê chuột (tô cam
   xong chữ đổi sang var(--on-accent) trong khi opacity hạ xuống là đọc không ra). */
.gcard-btn:disabled { cursor: not-allowed; }
.gcard-btn:disabled:hover { background: var(--surface-2); border-color: var(--glass-brd); color: var(--text); }
.gcard-btn.ghost:disabled:hover { background: transparent; color: var(--text2); }
.gcard.current .gcard-btn { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent); }

.cview-section { margin-bottom: 28px; }
.cview-section h3 {
  font-family: var(--font); font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

/* Cài đặt: một cột đọc tập trung, nhóm ít dùng có thể gập lại thay vì trải kín màn hình. */
.settings-page { width: min(100%, 960px); margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.settings-group {
  border: 1px solid var(--glass-brd); border-radius: 16px; overflow: hidden;
  background: var(--glass); box-shadow: var(--shadow-1);
}
.settings-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; cursor: pointer; list-style: none; user-select: none;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.settings-group > summary b { font-family: var(--font); font-size: 15px; color: var(--text); }
.settings-group > summary small { font-size: 12.5px; color: var(--text3); font-weight: 400; }
.settings-caret { color: var(--text3); font-size: 18px; transition: transform .18s ease; }
.settings-group:not([open]) .settings-caret { transform: rotate(-90deg); }
.settings-group-body { padding: 0 18px 18px; border-top: 1px solid var(--hairline); }
.settings-status-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px;
  margin: 0 -18px 16px; background: var(--surface-2);
}
.settings-status-grid > div { min-width: 0; padding: 13px 16px; background: var(--bg2); }
.settings-status-grid span { display: block; color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.settings-status-grid b { display: block; margin-top: 5px; color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-links { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.settings-links button {
  display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto; column-gap: 7px;
  padding: 11px; text-align: left; color: var(--text); background: var(--surface-1);
  border: 1px solid var(--glass-brd); border-radius: 10px; cursor: pointer;
}
.settings-links button:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.settings-links button > span { grid-row: 1 / 3; align-self: center; color: var(--accent); }
.settings-links button b { font-size: 13px; }
.settings-links button small { color: var(--text3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-two-col { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding-top: 16px; }
.settings-card { min-width: 0; padding: 14px; border: 1px solid var(--glass-brd); border-radius: 12px; background: var(--surface-1); }
.settings-card.compact { max-width: 520px; margin-top: 16px; }
.settings-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-card p { margin: 8px 0 0; color: var(--text2); font-size: 13px; line-height: 1.5; }
.settings-card .gcard-btn { width: auto; }
.cview-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 10px; color: var(--text3); text-align: center;
}
.cview-placeholder .ph-ico { font-size: 44px; opacity: 0.5; }

/* ===== View transition (mượt khi đổi trang) ===== */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.26s; }
}
.cview[hidden] { display: none !important; }
[x-cloak] { display: none !important; }

/* Editor + run-drawer giờ top-level (không còn trong overlay Studio) → nổi trên rail/cview */
.run-drawer { z-index: 430; }

/* Dọn header cockpit: bỏ logo lặp (đã có ở rail) + nút Studio/Cài đặt (đã có ở rail).
   #settingsBtn cũ chỉ còn là fallback tương thích; mọi lối vào hiển thị dùng trang Cài đặt trên rail. */
.hud-top .brand,
.hud-top .studio-open-btn,
.hud-top #settingsBtn { display: none; }
/* Studio panels render trong cview: bỏ căn giữa cứng cho hợp khung trang */
.cview-body .stab-panel { max-width: 1100px; margin: 0; }

/* ============================================
   NHÓM CODE trên rail (hôm nay có Terminal)
   ============================================ */
/* Trang duy nhất chiếm TRỌN khung: terminal đo chiều cao thật để tính ra số dòng, nên khung
   phải cao cố định và tự cuộn bên trong chứ không để cả trang trôi. console.js gắn/gỡ lớp này. */
.cview-body.cview-flush { padding: 0; overflow: hidden; }
.code-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.code-panel { flex: 1; min-height: 0; display: flex; }
.code-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; color: var(--text2); padding: 24px;
}
.code-empty svg { color: var(--text3); }
.code-dim { font-size: 13px; color: var(--text3); max-width: 460px; line-height: 1.6; }
.code-dim code, .term-note code {
  background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-family: var(--mono);
}

/* ---- Terminal ---- */
.term-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.term-bar {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 8px 16px; border-bottom: 1px solid var(--glass-brd);
  font-size: 12.5px; color: var(--text2);
}
.term-sp { flex: 1; }
.term-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex: 0 0 auto; }
.term-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.term-dot.err { background: var(--red); }
.term-dot.off { background: var(--text3); }
.term-st { font-weight: 600; color: var(--text); }
/* Đường dẫn dài thì cắt ở GIỮA dải chứ không đẩy hai cái nút ra khỏi màn hình. */
.term-cwd {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 12px; color: var(--text3);
}
.term-cwd svg { width: 13px; height: 13px; flex: 0 0 auto; }
.term-btn {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--glass-brd); background: var(--surface-1);
  color: var(--text2); font-family: var(--font-ui); font-size: 12px; font-weight: 600;
}
.term-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-line); }
.term-btn svg { width: 13px; height: 13px; }
.term-note {
  flex: 0 0 auto; padding: 8px 16px; font-size: 12.5px; line-height: 1.55;
  color: var(--text2); background: var(--accent-wash); border-bottom: 1px solid var(--glass-brd);
}
.term-note svg { width: 14px; height: 14px; vertical-align: -2px; }
/* Khung xterm: nền riêng (bảng màu do JS truyền vào canvas) nên không ăn nền kính của cview. */
.term-host { flex: 1; min-height: 0; min-width: 0; padding: 8px 4px 8px 12px; overflow: hidden; }
.term-host .xterm { height: 100%; }
.term-host .xterm-viewport { scrollbar-width: thin; }

@media (max-width: 860px) {
  .term-bar { padding: 7px 10px; gap: 8px; flex-wrap: wrap; }
  .term-cwd { display: none; }          /* màn hẹp: nhường chỗ cho hai cái nút */
  .term-host { padding: 6px 2px 6px 8px; }
}

/* ============================================
   RESPONSIVE - điện thoại: rail → thanh đáy
   ============================================ */
/* Hai nút chỉ hiện ở mobile (desktop ẩn) */
.nav-toggle-btn, .new-chat-btn { display: none; }

@media (max-width: 860px) {
  :root {
    --rail-w: 0px;
    --topbar-h: calc(46px + env(safe-area-inset-top, 0px));
  }   /* header thấp hơn trên mobile nhưng vẫn chừa tai thỏ khi chạy full-screen */

  /* Header mobile: chỉ nút menu, chip model, nút thêm. Ẩn phần rườm rà. */
  .nav-toggle-btn, .new-chat-btn { display: inline-flex; }
  /* Header CỐ ĐỊNH trên cùng: luôn thấy nút menu, chip model, nút thêm ở mọi trang, không bị cuộn trôi mất. */
  .hud-top { position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 55;
    background: var(--bg2); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px; padding: 0 8px; }
  .hud-top-left, .hud-top-right { display: none; }    /* rỗng ở mobile: nút menu, chip model, nút thêm là con trực tiếp header */
  .hud-top .brand, .hud-top .navbar-brain,
  .hud-top #themeToggle, .hud-top #studioOpenBtn,
  .hud-top #settingsBtn, .hud-top #ttsToggle, .hud-top #resetBtn { display: none; }
  .hud-center-title { display: none; }                /* mobile: ẩn tên workspace + ngày; chip model làm giữa header */
  .hud-top #mbOpen { display: inline-flex; margin-left: auto; margin-right: auto; }  /* chip model căn giữa, đẩy ＋ sang phải */
  .hud-top .notification-trigger {
    flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; padding: 0;
  }
  .hud-top .notification-trigger-label { display: none; }
  .hud-top .notification-badge {
    position: absolute; top: -4px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  }
  .notification-panel {
    top: calc(52px + env(safe-area-inset-top, 0px)); right: 8px;
    width: calc(100vw - 16px);
    max-height: min(72dvh, calc(100dvh - 76px - env(safe-area-inset-bottom, 0px)));
    border-radius: 14px;
  }
  .notification-shade { background: var(--scrim); backdrop-filter: blur(2px); }
  .noti-head { padding: 14px 13px 12px; }
  .noti-list { padding: 7px; }
  .hud-top #mbPop { position: fixed; top: calc(50px + env(safe-area-inset-top, 0px)); bottom: auto; left: 50%; transform: translateX(-50%);
    width: min(340px, 92vw); z-index: 200; max-height: 70vh; }
  .model-bar { display: none; }                       /* hàng model gốc ẩn; chip + sysBar bên trong dời đi (JS) */
  #jv-sess-btn { display: none; }                     /* nút Lịch sử: ẩn ở mobile để header cockpit khỏi chồng/lệch */

  /* Rail: từ thanh đáy → ngăn kéo trượt từ trái */
  .rail {
    top: 0; left: 0; bottom: 0; right: auto; width: min(280px, 82vw); height: 100vh;
    height: 100dvh;
    flex-direction: column;
    padding: max(10px, env(safe-area-inset-top, 0px)) 8px max(10px, env(safe-area-inset-bottom, 0px));
    gap: 4px;
    border-top: 0; border-right: 1px solid var(--glass-brd);
    transform: translateX(-100%); transition: transform .22s ease; z-index: 60; overflow-y: auto;
  }
  body.nav-open .rail { transform: translateX(0); box-shadow: 8px 0 40px var(--shadow-veil); }
  .rail-top, .rail-foot { display: flex; }            /* hiện lại brand + version trong ngăn kéo */
  .rail-nav { flex-direction: column; overflow-x: hidden; overflow-y: auto; gap: 2px; padding: 0; }
  .rail-group, .rail-grp-items { display: block; }
  .rail-grp-lbl { display: flex; }
  .rail-item { flex: none; flex-direction: row; gap: 10px; padding: 9px 10px; border-radius: 9px; }
  .rail-item .rail-lbl { font-size: 13px; }
  .rail-item.active::before { left: 0; right: auto; top: 15%; bottom: 15%; width: 3px; height: auto; }

  /* Mục "Hệ thống" ở đáy ngăn kéo: chọn brain, đổi tông, loa và trạng thái; Cài đặt dùng mục rail duy nhất. */
  .rail-sys { margin-top: 8px; padding: 10px 6px 4px; border-top: 1px solid var(--glass-brd);
    display: flex; flex-direction: column; gap: 10px; }
  .rail-sys-lbl { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); }
  .rail-sys .navbar-brain { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .rail-sys .graph-select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .rail-sys-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .rail-sys-btns .hud-icon-btn { display: inline-flex; }
  .rail-sys .sysbar {
    display: flex; flex: none; width: 100%; min-width: 0; max-width: 100%;
    flex-direction: column; align-items: flex-start; gap: 6px; overflow: visible;
  }
  .rail-sys .sys-status, .rail-sys .mcp-list {
    width: 100%; min-width: 0; flex-direction: column; align-items: flex-start;
    gap: 3px; overflow: hidden;
  }

  /* Nền mờ khi mở ngăn kéo */
  .nav-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 55; }
  .nav-backdrop[hidden] { display: none; }
  body.nav-open .nav-backdrop { display: block; }

  /* Không còn chừa 56px đáy cho rail; chat chiếm hết */
  body.has-rail .hud {
    margin-left: 0; width: 100%;
    height: 100vh; height: 100dvh;
  }
  .cview { left: 0; bottom: 0; }
  .cview-body { padding: 16px 14px; }
  .cgrid { grid-template-columns: 1fr; }
  .settings-page { width: 100%; gap: 10px; }
  .settings-group > summary { padding: 14px; }
  .settings-group-body { padding: 0 14px 14px; }
  .settings-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 -14px 14px; }
  .settings-links { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-two-col { grid-template-columns: 1fr; padding-top: 14px; }

  /* Mobile: KHÔNG cho cả trang trôi lên xuống - cả màn là 1 khung cố định; mỗi khung tự cuộn bên trong. */
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body.in-console .hud-body { visibility: hidden; }   /* trang quản lý: giấu quả cầu cockpit phía sau */
  .hud {
    height: 100vh; height: 100dvh;
    grid-template-rows: minmax(0, 1fr) auto auto;
    padding-top: calc(46px + env(safe-area-inset-top, 0px));
  }  /* header fixed; ba hàng còn lại = body + đính kèm + ô nhập */
  .hud-top {
    height: calc(46px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }
  .hud-body { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }  /* cockpit: quả cầu trên, chat dưới, không trôi */
  .hud-left { display: none; }              /* số liệu KD ẩn trên mobile (xem ở Console) */
  .hud-center {
    flex: 0 0 auto;
    height: 30vh;
    height: clamp(210px, 31dvh, 300px);
    min-height: 0;
  }
  /* BUNG NÃO: khoang não chiếm trọn phần thân, khung chat nhường chỗ. Đây là câu trả lời
     thật cho "trên điện thoại não bé quá không thấy gì" - chỉnh lề với co chữ chỉ giúp
     khung 228px bớt tệ, chứ 228px thì không bao giờ là chỗ xem đồ thị tử tế. */
  body.brain-max .hud-center { flex: 1 1 auto; height: auto; min-height: 0; }
  body.brain-max .hud-right { display: none; }
  /* Dải việc nền là thông tin trạng thái, thu não lại là thấy ngay - giấu đi để lấy chỗ.
     Chip ĐÍNH KÈM thì KHÔNG giấu: giấu là người dùng vừa gắn file xong không thấy nó đâu,
     tưởng gắn hụt. */
  body.brain-max .bg-strip { display: none; }
  .hud-right {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    padding: 8px 10px 4px;
    border-top: 1px solid var(--border);
  }
  .hud-right .panel-label {
    flex: 0 0 auto;
    min-height: 22px;
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 1.2px;
    /* Dồn tên model + nút phóng to về SÁT TRÁI, ngay cạnh chữ HỘI THOẠI. Mặc định là
       space-between: trên màn rộng thì đẹp, nhưng trên điện thoại nó ném hai thứ đó ra tận mép
       phải, cách chữ HỘI THOẠI một khoảng trống to - mắt phải quét ngang cả màn mới đọc được
       đang chạy model nào (chủ repo báo 2026-08-12). */
    justify-content: flex-start;
    gap: 8px;
  }
  /* max-width: 60% mặc định tính theo khối bọc, mà khối đó lại co theo nội dung nên tên model
     dài là nó đẩy nút phóng to đi. Trên màn hẹp neo theo BỀ NGANG MÀN HÌNH mới chặn được. */
  .hud-right .panel-label .engine-badge { max-width: 58vw; }
  .hud-right .transcript {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding-right: 2px;
  }

  /* Neuron chỉ là bối cảnh trên mobile: nhãn và lớp trạng thái nhỏ hơn để chat là nội dung chính. */
  .concept-label .cl-name { font-size: 10px; letter-spacing: 1.2px; }
  .concept-label .cl-meta { font-size: 8px; letter-spacing: .5px; margin-top: 0; }
  /* Tên thư mục dài ("BRAIN DEFAULT") vốn nowrap + translate(-50%) nên tràn hẳn ra ngoài mép
     phải và bị cắt cụt. Kẹp bề ngang rồi cắt bằng dấu ba chấm: nhãn nào cũng nằm gọn trong
     khoang, kể cả nhãn ngoài rìa nhất. */
  .concept-label { max-width: 32vw; }
  .concept-label .cl-name, .concept-label .cl-meta {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .orb-overlay { bottom: 40px; }
  .orb-state { font-size: 11px; letter-spacing: 2px; }
  .orb-interim {
    max-width: calc(100vw - 28px);
    margin-top: 3px;
    min-height: 14px;
    font-size: 13px;
  }
  .brain-overlay-toggle {
    top: 7px; right: 7px;
    width: 32px; height: 32px; padding: 7px; border-radius: 9px;
  }
  .brain-overlay-toggle svg { width: 17px; height: 17px; }
  /* CẢ BA nút cùng mang class .brain-overlay-toggle, nên dòng `top: 7px` ngay trên đè luôn
     `.graph-timelapse-btn { top: 58px }` của style.css (cùng độ ưu tiên, console.css nạp
     sau). Hệ quả suốt từ trước: trên điện thoại nút mắt và nút timelapse CHỒNG KHÍT lên
     nhau ở góc phải, nút vẽ sau ăn hết cú chạm, và nút ẩn nhãn không cách nào bấm được.
     Xếp lại tường minh, mỗi nút một hàng. */
  .graph-timelapse-btn { top: 46px; }
  .brain-max-btn { top: 85px; }

  /* Agents / Skills / Workflows thành một thanh mỏng thay vì một card lớn che neuron.
     Số và nhãn nằm CÙNG MỘT DÒNG: xếp chồng như desktop thì dải cao ~56px, tức một phần tư
     khoang não mobile, chỉ để nói ba con số. Một dòng còn ~28px. */
  .brain-stats {
    bottom: 6px;
    width: min(420px, calc(100% - 20px));
    padding: 2px;
    border-radius: 10px;
  }
  .bstat { flex: 1 1 0; flex-direction: row; align-items: baseline; justify-content: center;
    gap: 4px; padding: 4px 5px; border-radius: 8px; }
  .bstat-num { font-size: 14px; }
  .bstat-lbl { margin-top: 0; font-size: 8px; letter-spacing: .8px; }
  .bstat-sep { margin: 4px 0; }

  /* Nút BUNG/THU khoang não - chỉ có trên mobile, xếp dưới nút mắt và nút timelapse. */
  .brain-max-btn { display: grid; }
  .brain-max-btn .bmx-out { display: none; }
  body.brain-max .brain-max-btn .bmx-in { display: none; }
  body.brain-max .brain-max-btn .bmx-out { display: block; }
  body.brain-max .brain-max-btn { color: var(--accent-ink); border-color: var(--accent-line); }

  /* Ô nhập luôn nằm trong visual viewport của Safari/Chrome iOS và chừa safe area. */
  .hud-voice {
    min-width: 0;
    margin: 5px 8px max(7px, env(safe-area-inset-bottom, 0px));
  }
  .hud-voice .voice-input { min-width: 0; }
  .cview-head { padding: 14px 16px; }
  .cview-title { font-size: 16px; }
}

@media (max-width: 860px) and (max-height: 620px) {
  .hud-center { height: clamp(160px, 27dvh, 210px); }
  .concept-label .cl-meta { display: none; }
  /* Màn thấp: ba nút xếp dọc đã chạm mép dưới khoang, kéo khoảng cách lại. */
  .graph-timelapse-btn { top: 42px; }
  .brain-max-btn { top: 77px; }
}

/* ==== Trang Kết nối (kho connector + đa tài khoản) ==== */
.conn-card .conn-ico { font-size: 26px; width: 40px; text-align: center; flex-shrink: 0; }
.conn-accounts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; }
.conn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface-2); color: inherit;
  font-size: 13px; cursor: pointer; }
.conn-chip:hover { background: var(--surface-3); }
.conn-chip.off { opacity: .45; }
.conn-chip.add { border-style: dashed; opacity: .75; }
.conn-chip .cdot { color: var(--text3); font-size: 10px; }
.conn-chip .cdot.on { color: var(--green); }
/* Sức khoẻ kết nối (vòng check nền): sống / lỗi / chưa rõ - đè lên màu on/off cơ bản */
.conn-chip .cdot.hok { color: var(--green); }
.conn-chip .cdot.herr { color: var(--red); }
.conn-chip .cdot.hunk { color: var(--warn-ink); }
.conn-chip.conn-fix { border-color: var(--danger-line); color: var(--red); background: var(--danger-wash); }
.conn-chip.conn-fix:hover { background: var(--danger-wash); }
.conn-chip .cstar { color: var(--warn-ink); }
/* Khối B: nhóm Google một cửa + wizard từng bước + kéo thả JSON + dùng lại key */
.gico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 9px; background: #fff; color: #4285f4; font-weight: 800; font-size: 21px;
  font-family: Arial, sans-serif; }
.conn-steps { margin: 4px 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px;
  font-size: 13.5px; line-height: 1.5; }
.conn-steps li::marker { color: var(--accent); font-weight: 700; }
.conn-steps .step-link { margin-left: 6px; padding: 2px 9px; font-size: 12px; vertical-align: 1px; }
.conn-steps .wiz-copy { margin-top: 6px; }
.gp-row { display: flex; align-items: center; gap: 10px; text-align: left; }
.gp-ico { flex: 0 0 auto; width: 30px; display: inline-flex; justify-content: center; font-size: 20px; }
.gp-ico .ico-img { width: 24px; height: 24px; object-fit: contain; }
.gp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gp-name { font-weight: 600; }
.json-drop { border: 1.5px dashed var(--border); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; opacity: .85; cursor: pointer; margin: 2px 0 6px; transition: border-color .15s, background .15s; }
.json-drop:hover, .json-drop.over { border-color: var(--accent); background: var(--info-wash); opacity: 1; }
.json-drop.ok { border-color: var(--green); color: var(--green); opacity: 1; }
.json-drop.bad { border-color: var(--red); color: var(--red); opacity: 1; }
.reuse-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px;
  padding: 9px 12px; border: 1px solid var(--ok-line); border-radius: 10px; background: var(--ok-wash); }
.reuse-row select { max-width: 200px; }
/* Đèn báo não: bộ não mất đăng nhập - dải đỏ mỏng giữa thanh trạng thái */
/* Ngắn gọn và BẤM ĐƯỢC. Trước đây chuỗi dài hơn cả thanh trạng thái nên bị cắt cụt giữa
   chừng, và phần bị cắt lại đúng là phần nói phải làm gì. Nay chữ đủ ngắn để không cần cắt;
   max-width chỉ còn là lưới an toàn cho màn hẹp. */
.engine-banner { display: inline-flex; align-items: center; gap: 5px; max-width: 46vw;
  padding: 3px 12px; cursor: pointer;
  border: 1px solid var(--danger-line); border-radius: 14px; background: var(--danger-wash);
  color: var(--red); font-size: 12.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: background 0.15s, border-color 0.15s; }
.engine-banner:hover { background: var(--danger-wash); border-color: var(--red); }
/* display của class đè mất [hidden] mặc định của trình duyệt → phải tự ẩn lại, không thì
   đèn lộ vỏ rỗng thường trực trên thanh trạng thái (bug 0.9.195). */
.engine-banner[hidden] { display: none; }
@media (max-width: 700px) { .engine-banner { max-width: 70vw; font-size: 11.5px; } }
/* Khối D: khu "kết nối sẵn của CLI" gập mặc định + mobile 1 cột */
.amb-details summary { cursor: pointer; list-style: none; }
.amb-details summary::-webkit-details-marker { display: none; }
.amb-details summary h3::before { content: "▸ "; opacity: .6; }
.amb-details[open] summary h3::before { content: "▾ "; }
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr; }
  .conn-accounts { flex-wrap: wrap; }
  .conn-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .reuse-row select { max-width: 100%; }
}
.perm-chip { font-size: 11px; border: 1px solid; border-radius: 10px; padding: 1px 7px; opacity: .9; }
.cat-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 4px; }
.cat-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { border: 1px solid var(--border); background: transparent; color: inherit;
  border-radius: 14px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; opacity: .8; }
.cat-chip.on { border-color: var(--accent); color: var(--accent); opacity: 1; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin-top: 12px; max-width: 980px; }
.cat-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  background: var(--surface-1); display: flex; flex-direction: column; gap: 8px; }
.cat-card.soon { opacity: .55; }
.cat-ico { font-size: 30px; height: 34px; display: flex; align-items: center; }
.ico-img { width: 32px; height: 32px; object-fit: contain; border-radius: 7px; vertical-align: middle; }
.conn-card .conn-ico .ico-img { display: block; margin: 0 auto; }
.cat-name { font-weight: 600; font-size: 14.5px; }
.cat-desc { font-size: 12.5px; opacity: .7; flex: 1; line-height: 1.45; }
.cat-doc { font-size: 12px; opacity: .7; }
.conn-form { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.conn-form::-webkit-scrollbar { width: 10px; }
.conn-form::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.conn-form::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }
.conn-form .mcp-lb { display: flex; flex-direction: column; gap: 4px; font-size: 14px; opacity: .85; }
/* white-space: pre-line -> xuống dòng viết trong mcp-catalog.json hiện ĐÚNG thành xuống dòng
   (guide là chuỗi thuần đi qua esc(), không phải HTML). overflow-wrap: anywhere -> chuỗi dài
   không khoảng trắng (lệnh shell, URL callback) bẻ dòng thay vì đẩy tràn ngang cả modal. */
.conn-guide { font-size: 13px; opacity: .8; background: var(--info-wash);
  border: 1px solid var(--info-line); border-radius: 8px; padding: 9px 12px; line-height: 1.6;
  white-space: pre-line; overflow-wrap: anywhere; }
.conn-risk { font-size: 13px; background: var(--warn-wash); border: 1px solid var(--warn-line);
  border-radius: 8px; padding: 10px 12px; line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere; }
.conn-wizard { display: flex; flex-direction: column; gap: 10px; }
.wiz-links { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz-links .wiz-open { margin-left: 0; font-size: 13px; padding: 7px 12px; }
.wiz-copy { display: flex; gap: 8px; align-items: stretch; }
.wiz-copy input { flex: 1 1 auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.wiz-copy .wiz-copy-btn { margin-left: 0; white-space: nowrap; }
.conn-ok { font-size: 14.5px; padding: 8px 2px; color: var(--green); }
.conn-hint { margin-top: 8px; font-size: 13px; color: var(--warn-ink); }
.qr-img { width: 240px; height: 240px; border-radius: 10px; background: #fff; padding: 8px;
  display: block; margin: 10px auto 4px; }
.conn-menu { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.conn-menu-btn { text-align: left; border: 1px solid var(--border); background: var(--surface-1);
  color: inherit; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; cursor: pointer;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.conn-menu-btn:hover:not(:disabled) { background: var(--surface-3); }
.conn-menu-btn:disabled { opacity: .4; cursor: default; }
.conn-menu-btn.danger { color: var(--red); }
.conn-audit { max-height: 380px; overflow-y: auto; padding: 10px 16px; font-size: 13px; }
.aud-row { padding: 6px 0; border-bottom: 1px solid var(--surface-2); }
.aud-row.bad { color: var(--red); }
.aud-ts { opacity: .55; font-size: 12px; margin-right: 6px; }
.aud-err { font-size: 12px; opacity: .8; margin-top: 2px; }


/* Xác thực 2 lớp (trang Tài khoản) */
.tfa-card .tfa-warn { color: var(--warn-ink); font-weight: 600; }
.tfa-steps { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tfa-step { font-size: 13px; line-height: 1.55; color: var(--text2); }
.tfa-step b { color: var(--text); }
.tfa-qr { align-self: flex-start; background: #fff; padding: 10px; border-radius: 10px; border: 1px solid var(--glass-brd); }
/* KHÔNG ép kích thước: để SVG ra đúng cỡ tự nhiên mà server đã tính (8px mỗi ô).
   Ép xuống 200px là nén 49 ô vào 200px = 3,7px mỗi ô, và camera điện thoại soi màn hình
   ở cỡ đó thì quét không ra - đúng lỗi ở 0.26.20. max-width giữ cho nó không tràn thẻ
   trên màn hình hẹp; height:auto để tỉ lệ vuông không bị méo khi bị thu. */
.tfa-qr svg { display: block; width: auto; max-width: 100%; height: auto; }
.tfa-secret { display: inline-block; font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: 1px; background: var(--surface-2); border: 1px solid var(--glass-brd); border-radius: 6px; padding: 3px 8px; margin-left: 4px; user-select: all; word-break: break-all; }
.tfa-rec { margin-top: 10px; }
.tfa-rec-note { font-size: 13px; line-height: 1.55; color: var(--warn-ink); background: var(--warn-wash); border: 1px solid var(--warn-line); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.tfa-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 7px; margin-bottom: 12px; }
.tfa-rec-grid code { font-family: var(--font-mono, monospace); font-size: 13px; letter-spacing: 1px; text-align: center; background: var(--surface-2); border: 1px solid var(--glass-brd); border-radius: 6px; padding: 6px 4px; user-select: all; }

/* Dòng trạng thái 2FA trong khối "Tài khoản đăng nhập" cũ (#quickSet nhúng ở trang Cài đặt) */
.set-tfa { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; line-height: 1.55; color: var(--text2); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-brd); }
.set-tfa .tfa-on { color: var(--green); }
.set-tfa .tfa-off { color: var(--text); }
.set-tfa .tfa-low { color: var(--warn-ink); }
.set-tfa button { margin-left: auto; flex: 0 0 auto; }