/* ============================================
   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; }
/* 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; }
/* Nút phá huỷ (gỡ, xoá). Đã có `.mp-btn.danger` trong HTML từ lâu mà chưa bao giờ có luật CSS,
   nên nút Gỡ xưa nay hiện y hệt nút Huỷ đứng ngay cạnh - hai việc trái ngược, một hình dạng. */
.mp-btn.danger { border-color: var(--danger-ink, #b3261e); color: var(--danger-ink, #b3261e);
  font-weight: 600; }
.mp-btn.danger:hover { background: color-mix(in srgb, var(--danger-ink, #b3261e) 12%, transparent); }
@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-lang {                                           /* ô đổi ngôn ngữ giao diện, ngay trên hàng version */
  display: flex; align-items: center; gap: 6px; padding: 8px 6px 0;
  border-top: 1px solid var(--glass-brd); color: var(--text3);
}
.rail-lang svg { width: 14px; height: 14px; flex: 0 0 auto; }
.rail-lang-sel {
  flex: 1; min-width: 0; background: transparent; color: var(--text2);
  border: 1px solid var(--glass-brd); border-radius: 8px;
  font-family: var(--font-ui); font-size: 12px; padding: 4px 6px; cursor: pointer;
}
.rail-lang-sel:hover { color: var(--text); background: var(--surface-2); }
.rail-lang-sel option { background: var(--panel-solid); color: var(--text); }
.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-lang { display: none; }                 /* ô ngôn ngữ cũng không vừa bề ngang thu gọn */
  .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; }
/* Dải tab PHIÊN của terminal (mỗi tab một shell riêng) - không phải điều hướng chức năng,
   thứ đó nằm trên rail. Tràn ngang thì cuộn, không xuống dòng. */
.term-tabs {
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 8px 12px 0; overflow-x: auto; scrollbar-width: thin;
}
.term-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 5px 5px 5px 10px; border-radius: 8px 8px 0 0; cursor: pointer;
  border: 1px solid var(--glass-brd); border-bottom: none;
  background: var(--surface-1); color: var(--text2);
  font-size: 12px; font-weight: 600; white-space: nowrap; user-select: none;
}
.term-tab:hover { color: var(--text); border-color: var(--accent-line); }
.term-tab.act { background: var(--surface-2); color: var(--text); border-color: var(--accent-line); }
.term-tab svg { width: 13px; height: 13px; flex: 0 0 auto; }
.term-tab-x {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--text3); cursor: pointer;
  padding: 2px; border-radius: 5px;
}
.term-tab-x:hover { color: var(--red); background: var(--surface-1); }
.term-tab-x svg { width: 11px; height: 11px; }
.term-tab-add {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 1px dashed var(--glass-brd); background: none; color: var(--text2);
}
.term-tab-add:hover { color: var(--text); border-color: var(--accent-line); }
.term-tab-add:disabled { opacity: 0.45; cursor: not-allowed; }
.term-tab-add svg { width: 14px; height: 14px; }
.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; }
/* Nhiều tab: các khung xterm CHỒNG lên nhau, chỉ tab đang xem hiện ra. Ẩn bằng visibility
   chứ không display:none - khung ẩn vẫn phải CÓ KÍCH THƯỚC để xterm đo được số cột/dòng. */
.term-hosts { flex: 1; min-height: 0; min-width: 0; position: relative; }
.term-hosts .term-host { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.term-hosts .term-host:not(.act) { visibility: hidden; }

@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-tabs { padding: 6px 8px 0; }
  .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;
  }
  /* Cột hẹp: chip project CÓ nội dung thì xuống hàng riêng cho đủ bề ngang tên; rỗng thì
     không chiếm hàng nào (style.css :empty). Hai nút vẫn ở hàng nhãn, sát mép phải. */
  .hud-right .panel-label .proj-chip-host:not(:empty) { flex: 1 0 100%; order: 3; }
  /* 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 .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; }

/* Nút gỡ một dịch vụ khỏi kho. Mờ khi nghỉ, rõ khi trỏ vào thẻ: nó là việc HIẾM, không nên
   tranh chỗ với nút Kết nối vốn là việc thường làm. */
.cat-card { position: relative; }
.cat-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--ink-3, #8a8a8a); opacity: 0; transition: opacity .12s; }
.cat-card:hover .cat-x, .cat-x:focus-visible { opacity: 1; }
.cat-x:hover { background: var(--danger-bg, #f5dcdc); color: var(--danger-ink, #b3261e); }
.cat-x svg { width: 14px; height: 14px; }
.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; }

/* ===== Trang Models: thanh hai tab (Cloud / máy nhà) ===== */
.mtabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--glass-brd); }
.mtab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; cursor: pointer;
  border: 0; background: none; color: var(--text3); font-family: var(--font);
  font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mtab:hover { color: var(--text2); }
.mtab.act { color: var(--accent); border-bottom-color: var(--accent); }

/* ===== Tab model chạy trên máy ===== */
.ol-sect { margin-bottom: 26px; }
.ol-h { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text2); margin: 0 0 12px; font-weight: 700; }
.ol-h-sub { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text3);
  font-size: 12.5px; margin-left: auto; }
.ol-hint { font-size: 12px; color: var(--text3); margin-top: 8px; line-height: 1.55; }
.ol-empty-line { padding: 16px 4px; color: var(--text3); font-size: 13.5px; }

/* Khung chưa nối: ba bước đọc từ trên xuống, không có nút "tự cài" nào - Javis trong container
   không có quyền chạy lệnh trên máy vật lý của người dùng. */
.ol-empty { text-align: center; max-width: 620px; margin: 10px auto; padding: 34px 26px; }
.ol-empty-ico { color: var(--accent); margin-bottom: 12px; }
.ol-empty-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.ol-empty-desc { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin-bottom: 16px; }
.ol-step { text-align: left; font-size: 13px; font-weight: 600; color: var(--text2);
  margin: 16px 0 7px; }
.ol-cmd { display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.ol-cmd code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--text2); }
.ol-row { display: flex; gap: 8px; align-items: center; }
.ol-in { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--field-bg); color: var(--text);
  font-family: var(--font); font-size: 13.5px; outline: none; }
.ol-in:focus { border-color: var(--accent-line); }
.ol-note, .ol-err { display: flex; align-items: flex-start; gap: 8px; text-align: left;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; }
.ol-note { background: var(--info-wash); border: 1px solid var(--info-line); color: var(--text2); }
.ol-err { background: var(--warn-wash); border: 1px solid var(--warn-line);
  color: var(--warn-ink); margin-top: 12px; }
.ol-note .ic, .ol-err .ic { flex: none; margin-top: 2px; }

.ol-conn { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ol-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--text3); }
.ol-dot.on { background: var(--green); box-shadow: 0 0 0 3px var(--ok-wash); }
.ol-conn-name { font-weight: 700; font-size: 14.5px; }
.ol-conn-ep { font-size: 12.5px; color: var(--text3); margin-top: 2px;
  font-family: var(--mono, ui-monospace, monospace); }

.ol-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ol-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--glass-brd);
  font-size: 12.5px; color: var(--text2); }
.ol-chip .ic { color: var(--accent); }
.ol-specs-form { margin-top: 10px; }

.ol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ol-card { display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border-radius: 13px; background: var(--glass); border: 1px solid var(--glass-brd); }
.ol-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ol-card-name { font-weight: 700; font-size: 14px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ol-card-size { flex: none; font-size: 11.5px; color: var(--text3); }
.ol-card-desc { font-size: 12.5px; color: var(--text2); line-height: 1.5; flex: 1 1 auto; }
/* Vì sao model này được gợi ý. Danh sách không nói lý do thì người dùng không có cơ sở nào
   để tin nó - nhất là khi lý do đôi khi là "sẽ chạy chậm". */
.ol-card-note { font-size: 11.5px; color: var(--accent-ink); }
.ol-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.ol-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--glass-brd); color: var(--text3); }
.ol-card-act { display: flex; }
.ol-card-act .gcard-btn { flex: 1 1 auto; justify-content: center; }
.ol-done { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  color: var(--green); font-weight: 600; }

.ol-prog { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.ol-prog-track { height: 6px; border-radius: 20px; background: var(--surface-3); overflow: hidden; }
.ol-prog-fill { height: 100%; width: 0; background: var(--accent); border-radius: 20px;
  transition: width .2s; }
.ol-prog-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--text3); }

.ol-list { display: flex; flex-direction: column; gap: 7px; }
.ol-row-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--glass-brd); }
.ol-row-ico { flex: none; display: inline-flex; color: var(--text3); }
.ol-row-name { display: block; font-weight: 600; font-size: 13.5px; }
.ol-row-meta { display: block; font-size: 11.5px; color: var(--text3); margin-top: 2px; }
/* Lý do một model không có nút "đặt làm model chính". Nằm ĐÚNG chỗ cái nút lẽ ra đứng, để
   người đọc nối được hai thứ với nhau mà không phải suy luận. */
.ol-row-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--text3); max-width: 60%; text-align: left; line-height: 1.35; }
.ol-row-note svg { flex: none; }
.ol-badge { margin-left: 7px; font-size: 10.5px; padding: 1px 7px; border-radius: 20px;
  background: var(--ok-wash); border: 1px solid var(--ok-line); color: var(--green);
  font-weight: 600; }
.ol-badge-main { background: var(--accent, #6d5dfc); color: #fff; }
.ol-hint.ol-ok { color: var(--ok, #1a8f4a); }
.ol-fchip { padding: 6px 13px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text2);
  font-family: var(--font); font-size: 12.5px; }
.ol-fchip.on { border-color: var(--accent-line); color: var(--accent); background: var(--accent-wash); }

/* Hướng dẫn cài Ollama cho bản Docker: ba bước đánh số, mỗi bước một dòng thở được. Dồn tất
   vào một đoạn thì người đọc bỏ qua đúng bước 3 - bước mà thiếu nó là "không nối được". */
.ol-buoc { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin: 8px 0 4px; }
.ol-note.ol-warn { border: 1px solid var(--warn-line); background: var(--warn-wash);
  border-radius: 10px; padding: 9px 11px; margin: 10px 0; }
.ol-note.ol-warn .ic { color: var(--warn-ink); }

/* ============================================================
   KHO CÀI ĐẶT - lưới duyệt gói, dựng theo bản vẽ của chủ repo
   ============================================================ */
/* Hàng tab LOẠI: gạch chân, không phải viên thuốc. Đây là trục chính của kho (đang xem trợ lý
   hay kỹ năng), còn cột nhóm bên trái là trục phụ - hai kiểu khác nhau để mắt không lẫn. */
.kho-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  margin-bottom: 18px; overflow-x: auto; }
/* `font: inherit` là BẮT BUỘC trên mọi <button>: phần tử form không thừa kế phông của trang,
   trình duyệt áp phông hệ thống riêng. Thiếu nó thì giữa một trang Montserrat có vài nút hiện
   bằng phông mặc định của máy - trông như trang bị lỗi tải phông. */
.kho-tab { white-space: nowrap; padding: 11px 16px; font: inherit; font-size: 15px;
  font-weight: 500; color: var(--text2); background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  display: flex; align-items: center; gap: 6px; }
.kho-tab.on { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
.kho-dem { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text3); }
.kho-tab.on .kho-dem { background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); }

.kho-than { display: flex; gap: 26px; align-items: flex-start; }
.kho-cot { width: 190px; flex: none; display: flex; flex-direction: column; gap: 2px; }
.kho-cot-tieu { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--text3);
  padding: 4px 10px 8px; text-transform: uppercase; }
.kho-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 9px; font: inherit; font-size: 14px; text-align: left;
  color: var(--text2); background: none; border: 0; cursor: pointer; }
.kho-nav:hover { background: var(--surface-2); }
.kho-nav.on { color: var(--accent); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Vạch ngăn giữa hai lối gom khác nhau: "Tất cả / Đã cài" là trạng thái, phần dưới là lĩnh vực. */
.kho-nav.ngan { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.kho-navdem { font-size: 12px; color: var(--text3); }
.kho-chinh { flex: 1; min-width: 0; }

.kho-the { gap: 10px; }
.kho-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kho-nhom { font-size: 12px; color: var(--text3); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.kho-ten { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.kho-ava { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid;
  place-items: center; font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.02em; }
/* Logo thật thì KHÔNG tô nền: nền màu sau một logo có nền trắng trông như lỗi in. */
.kho-ava-img { background: none; }
.kho-ava-img svg, .kho-ava-img img { width: 34px; height: 34px; object-fit: contain; }
.kho-daicai { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--ok-ink, #2f855a); }
/* Có bản mới: đổi MÀU chứ không chỉ đổi chữ. Xanh lá đọc là "xong rồi, yên tâm", nên để
   nguyên xanh cho một dòng đang bảo người ta phải làm gì đó là tự triệt tiêu chính nó. */
.kho-daicai.moi { color: var(--accent); }
.kho-daicai.moi svg { width: 14px; height: 14px; }

/* Băng báo bản mới, trên cùng trang Kho. Nói chuyện của CẢ kho nên nó nằm ngoài tabs. */
.kho-bao-moi { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; font-size: 15px;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.kho-bao-moi svg { width: 18px; height: 18px; flex: none; }
.kho-bao-moi > span { margin-right: auto; }
.kho-chip { padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; color: var(--accent); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.kho-chip:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* Huy hiệu "N mới" trên tab: phải khác hẳn con số tổng bên cạnh, nếu không thì hai con số
   dính nhau đọc thành một số duy nhất vô nghĩa. */
.kho-dem.moi { color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important; }
.kho-nut { display: flex; gap: 8px; }
.kho-btn { flex: 1; padding: 11px; border-radius: 10px; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent; }
/* Bật/tắt tạm: việc HIẾM hơn hẳn cài và gỡ, nên nó nhỏ lại và không tranh chỗ. */
.kho-btn-phu { flex: none; padding: 11px 16px; background: var(--surface-2); color: var(--text2);
  border-color: var(--border); }
.kho-btn-chinh { background: var(--accent); color: #fff; }
.kho-btn-go { background: transparent; color: var(--danger-ink, #b3261e);
  border-color: var(--border); }
.kho-btn-go:hover { border-color: var(--danger-ink, #b3261e); }

.kho-trang { display: flex; align-items: center; gap: 6px; margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--border); flex-wrap: wrap; }
.kho-so { min-width: 36px; height: 36px; padding: 0 11px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1); color: inherit;
  font: inherit; font-size: 14px; cursor: pointer; }

/* Chữ trong thẻ của kho to hơn thẻ danh mục thường: đây là chỗ người ta ĐỌC để quyết định có
   cài hay không, không phải một dòng nhãn liếc qua. */
.kho-the .cat-desc { font-size: 13.5px; opacity: .82; }
.kho-the .prov-meta { font-size: 12.5px; }

/* Nút quay lại trang vừa đi ra. */
.kho-quaylai { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--accent); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; }
.kho-quaylai:hover { border-color: var(--accent); }
.kho-so.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }

.kho-tim { width: 100%; max-width: 320px; }

/* ---------- Điện thoại và máy tính bảng ----------
   Breakpoint 860px trùng với breakpoint chính của app, nên kho đổi bố cục CÙNG LÚC với thanh
   bên và khung chat - không có khoảng nào mà nửa trang ở chế độ này, nửa kia ở chế độ khác.

   Ba thứ đổi hình, và mỗi thứ đều vì một lý do cụ thể chứ không phải cho gọn:

   TAB LOẠI thành một dải phân đoạn, số đếm xuống DƯỚI nhãn. Trên màn hẹp, để số nằm cạnh chữ
   thì năm mục không đủ chỗ và chữ bị cắt; xếp dọc thì mỗi mục chỉ cần rộng bằng chữ dài nhất.

   CỘT NHÓM thành các viên thuốc XUỐNG DÒNG, không phải dải cuộn ngang. Dải cuộn giấu mất
   nhóm ở cuối, mà người dùng điện thoại thường không nghĩ tới việc vuốt ngang một hàng nút -
   họ chỉ thấy có bốn nhóm trong khi thật ra có mười.

   Ô TÌM chiếm trọn hàng, hai nút phụ xuống hàng dưới. */
@media (max-width: 860px) {
  .kho-than { flex-direction: column; gap: 16px; }

  .kho-tabs { border-bottom: 0; background: var(--surface-2); border-radius: 14px;
    padding: 4px; gap: 2px; overflow-x: auto; }
  /* `flex: 1 1 0` chứ không phải grid 5 cột: số loại nằm ở JS, và một ngày nó thêm loại thứ
     sáu thì bố cục tự chia lại thay vì vỡ. */
  .kho-tab { flex: 1 1 0; min-width: 62px; flex-direction: column; gap: 3px;
    padding: 9px 4px; border-bottom: 0; margin-bottom: 0; border-radius: 11px;
    font-size: 12.5px; justify-content: center; text-align: center; }
  .kho-tab.on { background: var(--surface-1); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
  .kho-dem { font-size: 11.5px; padding: 0 7px; }

  .kho-cot { width: 100%; flex-direction: row; flex-wrap: wrap; overflow: visible; gap: 8px; }
  .kho-cot-tieu { display: none; }
  /* Cao 40px là ngưỡng bấm được bằng ngón tay mà không cần ngắm. */
  .kho-nav { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--border);
    border-radius: 999px; padding: 9px 14px; gap: 7px; }
  .kho-nav.on { border-color: var(--accent); }
  /* Vạch ngăn trên chỉ có nghĩa khi các mục xếp DỌC. Xuống dòng ngang rồi thì nó thành một
     nét lạ giữa hàng, nên trả về viền viên thuốc bình thường. */
  .kho-nav.ngan { margin-top: 0; padding-top: 9px; border-top: 1px solid var(--border); }

  .kho-tim { max-width: none; flex: 1 1 100%; }

  /* Giấu tiêu đề khối: nó lặp gần nguyên văn tiêu đề trang ngay phía trên. Trên máy tính thì
     vô hại, còn trên điện thoại nó đẩy hàng tab xuống gần một phần tư màn hình - đúng thứ
     người ta cần thấy đầu tiên. Câu mô tả bên dưới thì GIỮ, vì nó nói một điều khác: bấm Cài
     là mở ra cho xem trước rồi mới hỏi. */
  .kho-khoi > h3 { display: none; }
  .kho-the { gap: 12px; }
  .kho-nut { flex-wrap: wrap; }
  .kho-btn { min-height: 44px; }
  .kho-so { min-width: 40px; height: 40px; }
  .kho-quaylai { min-height: 40px; }
}

/* Màn thật hẹp: lưới một cột, chữ trong tab co lại một nấc để năm mục vẫn vừa một hàng. */
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr; }
  .kho-tab { font-size: 11.5px; min-width: 56px; padding: 8px 2px; }
  .kho-dem { font-size: 11px; padding: 0 6px; }
  .kho-nav { padding: 9px 12px; font-size: 13.5px; }
}

/* Hàng tab dẫn sang Kho cài đặt, đặt trên đầu năm trang năng lực.
   LỚP RIÊNG chứ không dùng lại `.cat-chip`: trang Kết nối gán lại onclick cho mọi `.cat-chip`
   trong trang để lọc danh mục, nên dùng chung lớp là handler của tab bị đè mất. */
.tab-kho { border: 1px solid var(--border); background: transparent; color: inherit;
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
  opacity: .85; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tab-kho:hover { opacity: 1; }
.tab-kho.on { border-color: var(--accent); color: var(--accent); font-weight: 600; opacity: 1;
  background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* ============================================================
   Hộp thoại cài gói (.pkm) - dùng cho cả "cài từ tệp .zip" và "cài từ kho"

   Vì sao tách hẳn một lớp thay vì dùng tiếp `.mp-body`: `.mp-body` là lưới hai cột dựng cho
   bộ chọn model, còn màn hình này là một cột đọc từ trên xuống. Nhồi nội dung khác vào một
   lưới không dành cho nó chính là thứ làm hộp thoại cũ trông vụn.

   Nó cũng là màn hình DUY NHẤT trong app nơi người dùng đồng ý cho mã lạ chạy trong máy chủ
   của họ. Nên trật tự đọc được đặt cứng: đây là gói gì, đến từ tệp nào và vân tay ra sao, nó
   chạm vào đâu, cảnh báo, rồi mới tới hai cái nút. */
.mp-box.pkm { width: 560px; max-height: min(88vh, 760px); }
.pkm-dau { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 0; }
.pkm-dau .kho-ava { width: 46px; height: 46px; border-radius: 13px; font-size: 17px; }
.pkm-dau .kho-ava-img svg, .pkm-dau .kho-ava-img img { width: 40px; height: 40px; }
.pkm-chu { flex: 1; min-width: 0; }
.pkm-ten { font-size: 18px; font-weight: 700; line-height: 1.25; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap; }
.pkm-ver { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text2); }
.pkm-phu { margin-top: 4px; font-size: 13px; color: var(--text2); }
.pkm-phu code { font-size: 12px; }

.pkm-than { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 4px;
  display: flex; flex-direction: column; gap: 14px; }
.pkm-mota { margin: 0; font-size: 14px; line-height: 1.55; }

/* Bảng SỰ THẬT: mỗi ô một câu hỏi người cài thật sự hỏi. Nền là đường kẻ, các ô đè lên trên
   cách nhau 1px - cách này giữ đúng một nét kẻ giữa hai ô dù ô nào có xuống dòng. */
.pkm-bang { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pkm-o { background: var(--bg2); padding: 12px 14px; min-width: 0; }
.pkm-o.rong { grid-column: 1 / -1; }
.pkm-o-nhan { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text3);
  text-transform: uppercase; }
.pkm-o-gt { margin-top: 3px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.pkm-o-gt .nhe { color: var(--text3); font-weight: 500; }
.pkm-o-ma { margin-top: 3px; font-size: 12px; font-family: var(--font); overflow-wrap: anywhere; }
.pkm-o-phu { margin-top: 3px; font-size: 11.5px; color: var(--text3); line-height: 1.45; }

/* Ba mức cảnh báo, ba màu, và KHÔNG cái nào gập lại được. Một cảnh báo phải bấm mới đọc được
   là một cảnh báo không ai đọc. */
.pkm-canh { border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column;
  gap: 7px; font-size: 13px; line-height: 1.55; }
.pkm-canh-tieu { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pkm-canh-tieu svg { width: 16px; height: 16px; flex: none; }
.pkm-canh.tin { background: color-mix(in srgb, var(--ok-ink, #2f855a) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok-ink, #2f855a) 26%, transparent); }
.pkm-canh.tin .pkm-canh-tieu { color: var(--ok-ink, #2f855a); }
.pkm-canh.vang { background: color-mix(in srgb, var(--warn-ink, #b7791f) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn-ink, #b7791f) 30%, transparent); }
.pkm-canh.vang .pkm-canh-tieu { color: var(--warn-ink, #b7791f); }
.pkm-canh.do { background: color-mix(in srgb, var(--danger-ink, #b3261e) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-ink, #b3261e) 32%, transparent); }
.pkm-canh.do .pkm-canh-tieu { color: var(--danger-ink, #b3261e); }
.pkm-canh code { font-size: 12px; overflow-wrap: anywhere; }
.pkm-canh .mp-input { width: 100%; margin-top: 4px; background: var(--sunken);
  border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 10px 12px;
  font: inherit; font-size: 14px; }
.pkm-canh .mp-input:focus { outline: none; border-color: var(--danger-ink, #b3261e); }

/* Hàng gạt "bật ngay sau khi cài": bấm được cả dải, không phải một ô tích 13px. */
.pkm-gat { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pkm-gat:hover { border-color: var(--accent); }
.pkm-gat-t { display: block; font-size: 14px; font-weight: 600; }
.pkm-gat-s { display: block; font-size: 12px; color: var(--text3); margin-top: 2px; }
.pkm-cong { flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--border);
  padding: 3px; transition: background .18s ease; }
.pkm-cong span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform .18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.pkm-gat[aria-pressed="true"] .pkm-cong { background: var(--accent); }
.pkm-gat[aria-pressed="true"] .pkm-cong span { transform: translateX(18px); }

/* Vùng thả tệp. Kéo-thả là cách người ta thật sự đưa một tệp vừa tải về vào app; trước đây màn
   này chỉ có một nút mở hộp chọn tệp, nên thao tác quen tay nhất lại là thao tác duy nhất
   không làm được. */
.pkm-tha { display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 30px 20px; border: 1.5px dashed var(--border); border-radius: 14px;
  background: var(--surface-1); cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease; }
.pkm-tha:hover, .pkm-tha.dang-keo { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent); }
.pkm-tha-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pkm-tha-ico svg { width: 26px; height: 26px; }
.pkm-tha-t { font-size: 15px; font-weight: 700; }
.pkm-tha-s { font-size: 13px; color: var(--text2); }
.pkm-tha-s u { color: var(--accent); font-weight: 600; }
.pkm-tha-n { font-size: 12px; color: var(--text3); }

.pkm-luuy { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: 12px; background: var(--surface-1); font-size: 12.5px; color: var(--text2);
  line-height: 1.5; }
.pkm-luuy svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.pkm-chan { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--glass-brd); }
.pkm-chan .mp-note { margin-right: auto; }
.pkm-danh { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 34px 20px; text-align: center; color: var(--text2); font-size: 14px; }
.pkm-quay { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--border);
  border-top-color: var(--accent); animation: pkmQuay .7s linear infinite; }
@keyframes pkmQuay { to { transform: rotate(360deg); } }

/* Danh sách "sẽ mất gì" khi gỡ. Dấu đầu dòng tự vẽ để canh thẳng với chữ ở mọi cỡ phông. */
.pkm-mat { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pkm-mat li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.55; }
.pkm-mat li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--text3); }

.pkm-nam { display: none; }

/* ---------- Điện thoại: hộp thoại thành TỜ TRƯỢT TỪ ĐÁY ----------
   Không phải cho đẹp. Hộp thoại giữa màn hình trên điện thoại luôn thua ba thứ: bàn phím đẩy
   nó lệch, nút rơi vào giữa màn nơi ngón cái không với tới, và nội dung dài thì cuộn trong một
   khung nổi rất khó nắm. Tờ trượt từ đáy gỡ cả ba: nút nằm trong tầm ngón cái, chiều cao bám
   mép dưới, và thanh nắm nói cho người dùng biết cái này kéo xuống là đóng. */
@media (max-width: 860px) {
  .mp-overlay.pkm-lop { align-items: flex-end; }
  .mp-box.pkm { width: 100%; max-width: none; max-height: 94vh;
    border-radius: 20px 20px 0 0; animation: pkmLen .26s ease; }
  .pkm-nam { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border);
    margin: 10px auto 0; }
  .pkm-dau { padding-top: 14px; }
  .pkm-bang { grid-template-columns: 1fr; }
  .pkm-chan { flex-direction: column-reverse; align-items: stretch;
    padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .pkm-chan .mp-btn { margin-left: 0; min-height: 46px; }
  .pkm-chan .mp-note { margin-right: 0; text-align: center; }
  .pkm-tha { padding: 24px 16px; }
}
@keyframes pkmLen { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }