:root,
/* iOS: bấm NHANH hai lần vào bất cứ đâu là Safari hiểu thành double-tap → phóng to cả trang,
   người dùng phải chụm tay thu lại. Cả app này là giao diện thao tác chứ không phải trang đọc,
   nên tắt hẳn double-tap zoom (vẫn chụm-2-ngón để zoom được nếu thật sự cần). */
html, body { touch-action: manipulation; }

html[data-theme="dark"] {
  --bg: #0b1020; --surface: #0a0e1c; --surface-2: #141a2e; --border: rgba(255,255,255,.12);
  --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.55); --accent: #57e3ff; --accent-dim: rgba(87,227,255,.12);
  --ok: #4ade80; --ok-bg: #1a3d2a; --warn: #e3b341; --danger: #ff6b8b;
  --term-bg: #0b1020; --sidebar-w: 300px; --rightbar-w: 480px; --top-h: 46px;
  /* Lớp phủ khi bảng trái/phải bung: xanh mực (không đen tuyền) — dịu mắt hơn và ăn tông
     với nền terminal, dùng CHUNG cho cả hai bên để hai bảng cảm giác cùng một hệ. */
  --scrim-bg: rgb(10 22 48 / 62%);
  --key-bg: rgba(87, 227, 255, 0.08); --key-border: rgba(87, 227, 255, 0.28);
  --key-accent-bg: linear-gradient(135deg, #3d8bfd, #57e3ff);
  --sb-thumb: rgba(255,255,255,.15); --sb-thumb-hover: rgba(255,255,255,.28);
  --conv-list-bg: rgba(0,0,0,.22); --conv-list-border: rgba(255,255,255,.10);
  --conv-item-divider: rgba(255,255,255,.08); --conv-item-hover: rgba(255,255,255,.05);
  --conv-item-active: rgb(61 141 46 / 22%);
  --conv-gear-bg: rgba(0,0,0,.18); --conv-gear-border: rgba(255,255,255,.12);
  --conv-pty-idle-bg: rgba(87,227,255,.10); --conv-pty-idle-fg: rgba(87,227,255,.95);
  --conv-pty-run-bg: rgba(255,107,139,.10); --conv-pty-run-fg: rgba(255,107,139,.95);
  --conv-pty-border-idle: rgba(87,227,255,.35); --conv-pty-border-run: rgba(255,107,139,.35);
  /* CỠ 2 thanh nút (util bar #ags-qk-row2 + quick button #ags-quick-keys) — 1 bộ token DÙNG
     CHUNG nên 2 thanh LUÔN cùng chiều cao ở mọi mức. Đổi mức = đặt data-qk-size trên <html>
     (Settings → Giao diện), KHÔNG sửa từng nút. Mốc lấy từ 2 cỡ vốn đang chạy:
       sm "rất nhỏ" = cỡ nút #ags-quick-keys CŨ (34px)  ·  md "vừa" = cỡ ô util bar CŨ (44px).
     Mặc định = md để giữ nguyên hiện trạng util bar. */
  --qk-tap: 44px; --qk-icon: 20px; --qk-font: .78rem;
  /* Đệm dọc CHUNG của cụm toolbar. 3 thanh (util bar / quick button / composer) dính nhau
     (gap thật = 0) nên khoảng TRẮNG THẤY ĐƯỢC giữa 2 thanh = padding-bottom thanh trên +
     padding-top thanh dưới. Cùng xài 1 token ⇒ util bar↔quick = quick↔ô nhập = 2×token,
     bằng nhau BẤT KỂ mức cỡ (đệm không co theo --qk-tap). */
  --qk-gap-y: 4px;
}
/* sm = ĐÚNG cỡ nút quick button đang chạy trước đợt này (34px, icon 20, font .78rem).
   Ghi chú: 34px < mốc chạm 44px ở RULES mục D — đây là cỡ Admin đang dùng, chỉ áp khi user tự chọn. */
:root[data-qk-size="sm"] { --qk-tap: 34px; --qk-icon: 20px; --qk-font: .78rem; }
:root[data-qk-size="md"] { --qk-tap: 44px; --qk-icon: 20px; --qk-font: .78rem; }
:root[data-qk-size="lg"] { --qk-tap: 56px; --qk-icon: 24px; --qk-font: .9rem; }
html[data-theme="light"] {
  --bg: #f0f2f7; --surface: #fff; --surface-2: #f5f6fa; --border: #dde1eb;
  --text: #1c2230; --muted: #6b7280; --accent: #4f5bd5; --accent-dim: #e8eafd;
  --ok: #2a9d54; --ok-bg: #e7f6ec; --term-bg: #0b1020;
  --sb-thumb: rgba(0,0,0,.22); --sb-thumb-hover: rgba(0,0,0,.36);
  --conv-list-bg: rgba(0,0,0,.04); --conv-list-border: var(--border);
  --conv-item-divider: var(--border); --conv-item-hover: var(--accent-dim);
  --conv-item-active: rgb(61 141 46 / 22%);
  --conv-gear-bg: var(--surface-2); --conv-gear-border: var(--border);
  --conv-pty-idle-bg: var(--accent-dim); --conv-pty-idle-fg: var(--accent);
  --conv-pty-run-bg: rgba(255,107,139,.12); --conv-pty-run-fg: #c73e5e;
  --conv-pty-border-idle: rgba(79,91,213,.35); --conv-pty-border-run: rgba(255,107,139,.4);
}

/* Scrollbar đẹp giống Web CLI: thumb translucent dạng viên thuốc, track trong
   suốt, hover sáng hơn — thay native xấu. Áp toàn app + theme-aware. */
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--sb-thumb); border-radius: 9px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover); background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* Slot banner trên cùng — module update-banner mount vào đây. */
.slot-top-banner { flex: none; width: 100%; }

/* Chấm đỏ báo có bản cập nhật (mục khác nếu cần) */
.update-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.update-dot:not([hidden]) { display: inline-block; animation: update-dot-pulse 2s ease-in-out infinite; }
.update-dot.inline { margin-left: 6px; vertical-align: middle; }
@keyframes update-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,139,.55); }
  50% { box-shadow: 0 0 0 4px rgba(255,107,139,0); }
}

.brand-upd { width: 1.6em; height: 1.6em; padding: 0; margin-left: -2px; border-radius: 50%;
  border: 1px solid var(--line, #30363d); background: transparent; color: inherit;
  font-size: .82rem; line-height: 1; cursor: pointer; }
.brand-upd:hover { border-color: var(--muted, #8b949e); }
.brand-upd.is-busy { opacity: .5; pointer-events: none; }
/* ĐẬP ĐỎ GÂY CHÚ Ý — hai lớp DÙNG CHUNG cho mọi mô-đun, đừng chép công thức đi nơi khác nữa.
   Trước đây ba chỗ tự chép y hệt đoạn animation + gradient này (icon truy cập từ xa, nút truy
   cập từ xa của mô-đun, cụm nút não agsmem); sửa nhịp một chỗ là ba chỗ lệch nhau
   (Admin bắt 13/09/2026).

   .ags-dap      — nhịp phóng to thu nhỏ. Đặt ở phần tử NGOÀI CÙNG muốn nhún.
   .ags-dap-do   — nền đỏ chảy + chữ trắng. Đặt ở chính phần tử có nền; lồng nhau thì đặt ở lớp
                   trong, không thì nền của nó che mất màu đỏ của lớp ngoài.
   Dùng riêng hay chồng cả hai lên một phần tử đều được. */
.ags-dap { animation: relayBeat 1.15s ease-in-out infinite; transform-origin: center; }
.ags-dap-do { animation: relayGrad 4s ease infinite; color: #ffffff; border-color: transparent;
  background: linear-gradient(135deg, #14100a, #ff0000, #14100a); background-size: 300% 300%; }
.ags-dap.ags-dap-do { animation: relayBeat 1.15s ease-in-out infinite, relayGrad 4s ease infinite; }
@keyframes relayBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes relayGrad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .ags-dap, .ags-dap-do, .ags-dap.ags-dap-do { animation: none; }
}
/* Module có bản mới: thanh nhấn đỏ bên trái */
.module-card.has-update { box-shadow: inset 3px 0 0 var(--danger); }

* { box-sizing: border-box; }
/* overflow-x:clip + max-width:100%: chặn trang cuộn ngang (iPhone Safari sau Gửi/đóng phím).
   Giữ overflow:hidden (dọc) rồi ghi đè overflow-x — clip không tạo scroll container ngang. */
html, body {
  height: 100%; margin: 0; overflow: hidden; overflow-x: clip; max-width: 100%;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; }
html { font-size: 17px; } /* root lớn hơn → mọi rem (chữ/icon) to lên chút */
body { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 15px; background: var(--bg); color: var(--text); }
/* Ô nhập liệu TỐI THIỂU 16px để iOS không tự zoom khi focus */
input, select, textarea { font-size: 16px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); font-size: .78rem; }
.err { color: var(--danger); font-size: .82rem; }
.spacer { flex: 1; }
.btn {
  font: inherit; font-size: .84rem; font-weight: 600; border: 0; border-radius: 8px;
  padding: .5rem .9rem; cursor: pointer; color: #0b1020; background: var(--accent);
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sm { font-size: .78rem; padding: .35rem .65rem; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.icon-btn {
  appearance: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border);
  border-radius: 8px; background: rgba(0,0,0,.22); color: var(--text); cursor: pointer;
  display: grid; place-items: center; font-size: 18px;
}

.login-screen { flex: 1; min-height: 0; display: grid; place-items: center; background: var(--bg); }
.login-card { text-align: center; padding: 2rem; max-width: 320px; }
.login-card h1 { margin: 0 0 .5rem; font-family: system-ui, sans-serif; }
/* Sandbox — link đăng nhập giả dưới nút (chỉ hiện khi cụm sandbox bật fake-login). */
.sandbox-login { margin-top: 1.25rem; padding-top: .75rem; border-top: 1px dashed var(--border, #333); display: flex; flex-direction: column; gap: .4rem; }
.sandbox-login-title { margin: 0 0 .2rem; font-size: .78rem; }
.sandbox-login-link { font-size: .85rem; color: var(--accent, #4da3ff); text-decoration: none; }
.sandbox-login-link:hover { text-decoration: underline; }

/* Màn CHẶN quyền — khác hẳn login: viền/tiêu đề đỏ, icon cấm, nói rõ không có quyền. */
.gate-card {
  max-width: 400px; padding: 2rem 1.8rem;
  border: 1px solid var(--danger); border-radius: 14px;
  background: rgba(255,107,139,.08); box-shadow: 0 0 44px rgba(255,107,139,.14);
}
.gate-icon { font-size: 2.6rem; line-height: 1; margin-bottom: .35rem; }
.gate-user { color: var(--danger); margin: 0 0 1rem; line-height: 1.45; font-size: 1.05rem; font-weight: 600; word-break: break-all; }
.gate-conditions-title { color: var(--text); margin: 0 0 .45rem; line-height: 1.4; font-size: .92rem; font-weight: 600; }
.gate-conditions-list { color: var(--muted); margin: 0 0 1.1rem; padding-left: 1.15rem; line-height: 1.6; font-size: .88rem; }
.gate-conditions-list li { margin: .2rem 0; }

/* ── CORE: app = top + (sidebar | main) ── */
.app { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.app-top {
  position: relative; /* mốc cho chấm đo RAM (ram-manager) đặt trên gạch ngang dưới header */
  flex-shrink: 0; height: var(--top-h); display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; background: rgba(0,0,0,.35); border-bottom: 1px solid var(--border); z-index: 400;
}
/* Khu PHẢI header: 5 slot module (host.setHeaderSlot), đẩy sát phải. agsmem 💾 = slot 5. */
/* order:99 → luôn nằm CUỐI dù DOM append trước agent-tab (giữ ☰ + nút dsách chat ở TRÁI). */
.app-top-right { order: 99; margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.app-top-right .hdr-slot { display: inline-flex; align-items: center; min-height: 34px; }
.app-top-right .hdr-slot.hdr-empty { display: none; } /* slot trống không chiếm chỗ */

/* Agent tab + menu chevron — split button (giống Web CLI) */
.pageTabAgentWrap {
  position: relative; display: flex; flex: 0 0 auto; overflow: visible;
}
.pageTabAgentGroup {
  display: flex; align-items: stretch; min-height: 34px; height: 34px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.pageTabAgentGroup.agentActive {
  border-color: rgba(87,227,255,.35); background: rgba(87,227,255,.12);
  box-shadow: 0 0 0 1px rgba(87,227,255,.08);
}
.pageTabAgentMain.pageTab {
  border: none; border-radius: 0; font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; padding: 0 10px; background: transparent;
}
.pageTabAgentMain {
  appearance: none; border: none; background: transparent; color: rgba(255,255,255,.55);
  min-width: 34px; height: 100%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.pageTabAgentMain:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.pageTabAgentGroup.agentActive .pageTabAgentMain { color: rgba(87,227,255,.95); }
.pageTabAgentGear {
  appearance: none; border: none;
  border-left: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18); color: rgba(255,255,255,.72);
  width: var(--tap-min, 44px); min-width: var(--tap-min, 44px); height: 100%;
  padding: 0; cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.pageTabAgentGroup.agentActive .pageTabAgentGear { border-left-color: rgba(87,227,255,.22); }
.pageTabAgentGear:hover, .pageTabAgentGear.open {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.95);
}
.pageTabAgentGear .pageTabMoreChevron { transition: transform .15s ease; }
.pageTabAgentGear.open .pageTabMoreChevron { transform: rotate(180deg); }
.agentTabLogo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; line-height: 0;
}
.agentTabLogo svg { width: 16px; height: 16px; display: block; }

.pageTabMoreBackdrop {
  /* Bắt đầu DƯỚI header (không phủ chevron) → bấm chevron khi menu mở trúng ĐÚNG nút →
     toggle đóng được; click ngoài (vùng body) vẫn đóng. */
  position: fixed; top: var(--top-h, 44px); left: 0; right: 0; bottom: 0;
  z-index: 1998; background: rgba(0,0,0,.35);
}
.pageTabMoreBackdrop.hidden { display: none; }
.pageTabMoreMenu {
  /* Bề ngang tối đa 70% màn (Admin chốt 13/09/2026). Trước để 98% từ thời menu còn HAI cột;
     nay chỉ còn một cột danh sách chat nên kéo hết bề ngang màn là thừa mà lại che mất phần
     đang xem phía sau. */
  position: fixed; left: 1%; width: 70%;
  top: calc(var(--top-h) + 2px); z-index: 1999;
  background: rgba(20,20,30,.98); border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.55);
  overflow: hidden; max-height: calc(100vh - var(--top-h) - 10px);
}
.pageTabMoreMenu.hidden { display: none; }
.pageTabMorePanel {
  display: grid; grid-template-columns: 2fr 1fr;
  min-height: 220px; max-height: calc(100vh - var(--top-h) - 18px);
}
.pageTabMoreCol {
  min-width: 0; display: flex; flex-direction: column;
  max-height: calc(100vh - var(--top-h) - 18px);
}
.pageTabMoreColAgents { border-right: 1px solid rgba(255,255,255,.1); }
.pageTabMoreColTitle {
  flex-shrink: 0; padding: 10px 16px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; color: var(--accent);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pageTabMoreAgents, .pageTabMoreNav {
  flex: 1; min-height: 0; overflow-y: auto; padding: 6px 0 10px;
}
.pageTabMenuItem {
  appearance: none; border: none; background: transparent;
  color: rgba(255,255,255,.7); display: block; width: 100%; text-align: left;
  padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .1s, color .1s; box-sizing: border-box;
}
.pageTabMenuItem:hover { background: rgba(255,255,255,.08); color: #fff; }
.pageTabMenuItemDemo {
  cursor: default; opacity: .55;
}
.pageTabMenuItemDemo:hover { background: transparent; color: rgba(255,255,255,.7); }
.pageTabMenuItemHint {
  display: block; font-size: 11px; opacity: .65; margin-top: 2px; font-weight: 400;
}
.robotDropdownEmpty {
  padding: 16px 14px; color: rgba(255,255,255,.35); font-size: 13px; text-align: center;
}
.robotDropdownGroup + .robotDropdownGroup { border-top: 1px solid rgba(255,255,255,.08); }
.robotDropdownGroupTitle {
  padding: 6px 14px 2px; font-size: 12px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .3px;
}
.robotDropdownItem {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  cursor: pointer; transition: background .1s;
}
.robotDropdownItem:hover { background: rgba(255,255,255,.08); }
.robotDropdownConv {
  flex: 1; min-width: 0; font-size: 12px; color: rgba(255,255,255,.7);
}
.robotDropdownDesc {
  display: block; font-size: 11px; opacity: .5; margin-top: 2px; line-height: 1.2;
}
.robotDropdownItemAgent {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}
.robotDropdownItemAgent svg { width: 16px; height: 16px; }
.robotDropdownItemAgent.agentIconActive { filter: drop-shadow(0 0 4px rgba(87,227,255,.45)); }
.robotDropdownCurrent { background: rgba(87,227,255,.13); }
.top-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-moon {
  width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  color: var(--text); flex-shrink: 0;
}
.cfg-foot { display: flex; justify-content: center; padding: 20px 0 8px; opacity: .85; }
.top-brand-text { min-width: 0; }
.top-title { font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.top-tagline { font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell {
  flex: 1; min-height: 0; display: grid; grid-template-columns: var(--sidebar-w) 1fr;
  position: relative;
  /* rightbar translateX(105%) làm scrollWidth > clientWidth; overflow:hidden VẪN cho
     scrollLeft (focus/scrollIntoView iOS) → cả trang lệch trái. clip = không còn cuộn ngang. */
  overflow: hidden;
  overflow: clip;
}
.sidebar-overlay { display: none; position: absolute; inset: 0; background: var(--scrim-bg); z-index: 200; }
.sidebar {
  min-width: 0; height: 100%; display: grid; grid-template-rows: 1fr auto auto auto;
  background: var(--surface); border-right: 1px solid var(--border); z-index: 300; overflow: hidden;
}
.ags-float { position: fixed; z-index: 99999; width: 280px; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; background: rgba(15,17,28,.92); border: 2px solid var(--accent, #57e3ff); border-radius: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 10px 40px rgba(0,0,0,.6); font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted, #9aa); overflow: hidden; }
/* Halo blur nhỏ quanh viền: che mờ layer phía dưới sát mép cửa sổ */
.ags-float::before { content: ""; position: absolute; inset: -7px; border-radius: 18px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: -1; pointer-events: none; }
.ags-float[hidden] { display: none; }
.ags-float .adf-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: rgba(0,0,0,.4); cursor: move; touch-action: none; user-select: none; min-height: 40px; }
.ags-float .adf-title { font-weight: 700; color: var(--text); font-size: 16px; }
/* Nút kéo đổi size góc phải-dưới */
/* Mặc định = núm góc PHẢI-dưới (giữ y hệt bản cũ để shell/ags-suite bản trước — vốn render
   1 núm class .adf-resize trơn — vẫn hiển thị đúng khi host đã lên bản mới). */
.ags-float .adf-resize { position: absolute; right: 1px; bottom: 1px; width: 18px; height: 18px; cursor: nwse-resize; z-index: 2; touch-action: none; background: linear-gradient(135deg, transparent 50%, var(--accent, #57e3ff) 50%); border-bottom-right-radius: 10px; opacity: .7; }
/* Núm góc TRÁI-dưới: lật vị trí + hướng con trỏ + hướng tam giác. */
.ags-float .adf-resize-sw { right: auto; left: 1px; cursor: nesw-resize; background: linear-gradient(225deg, transparent 50%, var(--accent, #57e3ff) 50%); border-bottom-right-radius: 0; border-bottom-left-radius: 10px; }
.ags-float .adf-resize:hover { opacity: 1; }
.ags-float.min .adf-resize { display: none; }
.ags-float .adf-btns { display: flex; gap: 6px; }
.ags-float .adf-btns button { appearance: none; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.ags-float .adf-btns button:hover { background: rgba(255,255,255,.1); color: var(--text); }
/* Nút toàn màn hình (giữa – và ×): icon SVG nên bỏ cỡ chữ 20px của hai nút kia. */
.ags-float .adf-btns .adf-full { font-size: 0; }
/* Toàn màn hình = phủ kín VIEWPORT (không dùng F11 của trình duyệt: vào F11 rồi đóng form là
   người ta mất thanh tab, phiền hơn cái lợi — Admin chốt 04/10/2026). Dùng !important vì AGSFloat
   đặt rect INLINE lúc kéo, và một số module còn ghim height qua CSS riêng (#agsview-float). */
.ags-float.full { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important;
  max-width: none !important; max-height: none !important; border-radius: 0 !important; }
.ags-float .adf-chart { position: relative; padding: 4px 6px 2px; border-bottom: 1px solid var(--border); }
.ags-float .adf-chart canvas { display: block; width: 100%; height: 56px; }
.ags-float .adf-ram { position: absolute; top: 4px; right: 8px; font-size: 11px; color: #57e3ff; font-weight: 600; }
.ags-float .adf-body { flex: 1 1 auto; min-height: 0; padding: 6px 8px; overflow-y: auto; }
.ags-float.min .adf-chart, .ags-float.min .adf-body { display: none; }
.ags-float .adf-row { padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.ags-float .adf-row.adf-new { color: #6ee7a8; font-weight: 600; } /* log mới nhất tô xanh */
.side-body { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.slot-fill { flex: 1; min-height: 0; overflow-y: auto; padding: 0; }

/* ===== Thanh ticker Zalo — chồng đáy #ags-term-wrap khi zalo-bot đang bật đọc tin ===== */
.zbticker {
  position: absolute; left: 0; right: 0; bottom: 0; height: 28px;
  background: #157a3a; color: #fff; z-index: 40;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .28);
  font-size: 12.5px; line-height: 1.35;
}
.zbticker[hidden] { display: none; }
.zbticker-grip {
  height: 6px; flex: 0 0 6px; cursor: row-resize;
  background: rgba(0, 0, 0, .18); position: relative;
}
.zbticker-grip::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .55);
}
.zbticker-grip:hover { background: rgba(0, 0, 0, .3); }
.zbticker-body {
  flex: 1; min-height: 0; display: flex; align-items: center; gap: 8px;
  padding: 0 6px 0 8px; position: relative;
}
.zbticker--full .zbticker-body { align-items: stretch; flex-direction: column; padding: 6px 8px; overflow: hidden; }
.zbticker-head { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.zbticker--full .zbticker-head { align-self: flex-start; margin-bottom: 4px; }
.zbticker-badge {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px;
  object-fit: cover; display: block;
}
.zbticker-gear {
  flex: 0 0 auto; appearance: none; border: none; cursor: pointer;
  width: 24px; height: 22px; border-radius: 5px; line-height: 1;
  background: rgba(255, 255, 255, .18); color: #fff;
  display: grid; place-items: center;
}
.zbticker-gear:hover { background: rgba(255, 255, 255, .34); }
.zbticker-line {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zbticker-list {
  flex: 1; min-height: 0; overflow-y: auto; width: 100%;
  display: flex; flex-direction: column; gap: 2px;
}
.zbticker-row {
  flex: 0 0 auto; line-height: 1.6; padding: 3px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.zbticker-t { color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.zbticker-who { font-weight: 700; }
.zbticker-msg { color: #fff; }
.zbticker-idle { color: rgba(255, 255, 255, .75); font-style: italic; }
.zbticker-n { color: rgba(255, 255, 255, .6); font-size: 11px; }
.zbticker-st { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 7px; text-transform: uppercase; background: rgba(255, 255, 255, .2); color: #fff; }
.zbst-pending { background: #e3b341; color: #241a00; }
.zbst-injected { background: #57e3ff; color: #04222b; }
.zbst-sent { background: #4ade80; color: #052e13; }
.zbst-skipped { background: rgba(255, 255, 255, .22); color: #fff; }
.zbst-timeout { background: #ff6b8b; color: #2b0410; }
/* Card lô (full-mode): full tin + nút can thiệp */
.zbtc-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.zbtc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.zbtc-msgs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.zbtc-msg { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.4; }
.zbtc-ava { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
.zbtc-mtx { flex: 1; min-width: 0; color: #fff; word-break: break-word; }
.zbtc-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.zbtc-btn { appearance: none; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14); color: #fff; border-radius: 7px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.zbtc-btn:hover { background: rgba(255,255,255,.28); }
.zbtc-reply { background: #fff; color: #0b1020; border-color: #fff; }
.zbtc-send { background: #4ade80; color: #052e13; border-color: #4ade80; }
.zbtc-replybox { margin-top: 8px; }
.zbtc-replybox[hidden] { display: none; }
.zbtc-ta { width: 100%; box-sizing: border-box; min-height: 56px; font-size: 16px; padding: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.2); color: #fff; margin-bottom: 6px; resize: vertical; }
.zbticker-full {
  flex: 0 0 auto; appearance: none; border: none;
  cursor: ns-resize; touch-action: none; -webkit-user-select: none; user-select: none;
  width: 30px; height: 24px; border-radius: 5px; font-size: 16px; line-height: 1;
  background: rgba(255, 255, 255, .18); color: #fff;
  display: grid; place-items: center;
}
.zbticker-full:hover { background: rgba(255, 255, 255, .32); }
.zbticker--full .zbticker-full { position: absolute; top: 6px; right: 8px; }
body.zb-ns-resize { cursor: row-resize !important; user-select: none; }
.side-divider { height: 1px; background: var(--border); }
.side-modules { flex-shrink: 0; padding: 8px 10px 0; display: flex; flex-direction: column; gap: 6px; }
.side-user {
  position: relative; display: flex; align-items: center; padding: 10px 12px;
  background: rgba(0,0,0,.18); min-width: 0;
}
.user-area { position: relative; flex: 1; min-width: 0; }
.user-btn {
  appearance: none; width: 100%; border: 1px solid var(--border); background: rgba(0,0,0,.22);
  color: var(--text); padding: 10px 12px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 10px; min-height: 46px; font: inherit;
}
.user-btn:hover { background: rgba(0,0,0,.28); }
/* Avatar cao đúng bằng khối tên + dòng AGS v (align-self:stretch), rộng ≈ cao khối tên+ver (34px), ảnh object-fit:cover không méo. */
.user-avatar { position: relative; align-self: stretch; width: 34px; min-width: 22px; height: auto; border-radius: 6px; overflow: hidden; display: grid; place-items: center; opacity: .9; flex: none; font-size: 1.1rem; }
.user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } /* absolute: ảnh KHÔNG góp chiều cao hàng — avatar chỉ cao bằng khối tên+ver */
.user-name { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
.user-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.user-meta .user-name { flex: none; max-width: 100%; }
.user-ver { display: flex; align-items: center; gap: 4px; font-size: .5rem; color: var(--muted, #8b949e); max-width: 100%; }
.user-ver[hidden] { display: none; }
.user-ver img { width: 15px; height: 15px; flex: none; }
.user-ver .brand-upd { display: inline-grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; font-size: .56rem; }
.user-caret { opacity: .7; display: grid; place-items: center; }
/* Khối Cấu hình trong user-menu: header (gear) + 4 mục con dạng TREE — đường dọc chấm chạy
   từ dưới gear xuống, mỗi mục 1 nhánh ngang chấm (kiểu tree-view; mục cuối kết nhánh └). */
.um-settings { display: flex; align-items: center; gap: 8px; }
.um-settings svg { width: 15px; height: 15px; opacity: .85; flex: none; }
/* Phải thắng specificity của ".user-menu button" (nếu thua là mất thụt lề, đường chấm đè chữ). */
.user-menu button.um-sub { position: relative; padding: 6px 10px 6px 34px; font-size: .8rem; color: var(--muted); }
.user-menu button.um-sub:hover { color: var(--text); }
.um-sub::before { content: ""; position: absolute; left: 17px; top: -2px; bottom: -2px; border-left: 1px dotted var(--muted); opacity: .55; }
.um-sub::after { content: ""; position: absolute; left: 18px; top: 50%; width: 11px; border-top: 1px dotted var(--muted); opacity: .55; }
.um-sub-last::before { bottom: auto; height: calc(50% + 2px); }
.user-menu-empty { padding: 12px 8px; font-size: .76rem; color: var(--muted); text-align: center; }
.user-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 450;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 2px;
}
.user-menu button {
  text-align: left; border: 0; background: transparent; color: var(--text);
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: .82rem;
}
.user-menu button:hover { background: rgba(255,255,255,.06); }
.user-menu button.danger { color: var(--danger); }
/* Divider full-bleed: âm đúng padding menu (6px) để gạch chạm mép 2 thành dọc. */
.user-menu-divider { height: 1px; background: var(--border); margin: 4px -6px; }
/* Số ngày dùng AGS (badge gói đã ẩn). Âm → cảnh báo; gần −15 → đỏ. */
.user-menu-pkg { display: flex; align-items: center; gap: 8px; padding: 2px 10px 6px; }
.um-pkg-badge { font-size: .66rem; font-weight: 800; letter-spacing: .02em; color: #0b1020; flex: none;
  background: linear-gradient(180deg, rgb(169,225,39), rgba(255,255,255,.05)); border-radius: 6px; padding: 2px 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.um-pkg-time { font-size: .74rem; color: var(--muted); cursor: pointer; text-decoration: underline dotted transparent; }
.um-pkg-time:hover { color: var(--text); text-decoration-color: var(--muted); }
.um-pkg-time.is-neg { color: #d4a017; font-weight: 600; }
.um-pkg-time.is-lock-near { color: #e85d5d; font-weight: 700; }
.gate-days-msg { margin: 8px 0 16px; font-size: .92rem; line-height: 1.45; color: var(--text); text-align: center; }
/* Overlay lịch sử cộng/trừ ngày (bấm #um-pkg-time). */
.days-ledger-dlg { width: min(92vw, 420px); }
.days-ledger-list { list-style: none; margin: 0; padding: 0; }
.days-ledger-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: .82rem; line-height: 1.4; }
.days-ledger-list li:last-child { border-bottom: none; }
.days-ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.days-ledger-delta { font-weight: 700; flex: none; }
.days-ledger-delta.is-plus { color: #3dba6e; }
.days-ledger-delta.is-minus { color: #e85d5d; }
.days-ledger-lydo { color: var(--text); min-width: 0; }
.days-ledger-meta { font-size: .72rem; color: var(--muted); }
.days-ledger-loading, .days-ledger-empty { margin: 8px 0; font-size: .82rem; color: var(--muted); }
/* Header account: họ tên (đậm) + email (mờ, đầy đủ) — đặt trên lưới nút. */
.user-menu-acct { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 8px; min-width: 0; }
.um-acct-ava { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 18px; background: var(--surface-2, #141a2e); }
.um-acct-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.um-acct-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.um-acct-name { font-size: .86rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-acct-email { font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dàn nút lưới trong menu account: Setting | Reload | Re-Install */
.user-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 2px; }
.user-menu-grid button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 11px 6px; min-height: 64px; border: 1px solid var(--border);
  background: var(--surface); border-radius: 10px; font-size: .72rem; line-height: 1.15; font-weight: 600;
}
.user-menu-grid button:hover { border-color: var(--accent); background: rgba(255,255,255,.06); }
.user-menu-grid button svg { width: 19px; height: 19px; opacity: .92; }
.menu-badge-dot {
  display: inline-block; width: 7px; height: 7px; background: var(--danger);
  border-radius: 50%; margin-left: 6px; vertical-align: middle;
}

.main { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; background: var(--term-bg); overflow: hidden; }
.main-slot { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* agent-run list */
.agent-row { display: flex; align-items: stretch; gap: 4px; margin-bottom: 6px; }
.agent-row.running .agent-card-body { border-left: 3px solid var(--ok); }
.agent-row.active .agent-card-body { border-color: var(--accent); background: var(--accent-dim); }
.agent-card-body {
  flex: 1; min-width: 0; text-align: left; border: 1px solid var(--border);
  background: rgba(255,255,255,.04); border-radius: 10px; padding: 8px 10px;
  cursor: pointer; font: inherit; color: inherit;
}
.agent-row-actions { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; justify-content: center; }
.agent-act {
  appearance: none; font: inherit; font-size: .86rem; font-weight: 700;
  padding: 5px 9px; min-width: 36px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(0,0,0,.22); color: var(--text);
}
.agent-act:disabled { opacity: .35; cursor: not-allowed; }
.agent-act.start { color: var(--ok); }
.agent-act.stop { color: var(--danger); }
.agent-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.agent-name { font-weight: 700; font-size: .86rem; }
.agent-meta { margin-top: 4px; font-size: .68rem; color: var(--muted); word-break: break-all; }
.badge { font-size: .64rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; white-space: nowrap; }
.badge-ok { color: var(--ok); background: var(--ok-bg); }
.badge-warn { color: var(--warn); background: rgba(227,179,65,.15); }
.badge-muted { color: var(--muted); background: rgba(255,255,255,.06); }
.module-hint { padding: 10px 8px; text-align: center; font-size: .74rem; line-height: 1.35; margin: 0; }
.module-empty { flex: 1; min-height: 0; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 1.5rem; }

.pty-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-height: 40px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.pty-title { font-size: .84rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.status-pill { flex-shrink: 0; font-size: .68rem; padding: .15rem .45rem; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); }
.status-pill.on { color: var(--ok); background: var(--ok-bg); }
.main-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.empty-run { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 1.5rem; }
.conv-loading { gap: 10px; align-content: center; }
.conv-loading p { margin: 0; }
.ldr-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.14); border-top-color: var(--accent, #57e3ff); animation: ld-spin .8s linear infinite; }
/* Thông báo "đang tạo cuộc chat" ở sidebar (giữa ds dự án & ds cuộc chat) */
.conv-notices { padding: 0 8px; }
.conv-notice { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px 0; border-radius: 8px;
  background: var(--accent-dim, rgba(87,227,255,.1)); color: var(--text); font-size: 13px; }
.ld-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent, #57e3ff); animation: ld-spin .8s linear infinite; flex: none; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
/* Chừa đúng bề ngang cụm núm bám mép phải (nó là thanh cuộn của khung chat) — không thì núm
   nằm đè lên chữ, dòng dài bị che mất mấy ký tự cuối. */
.term-wrap {
  flex: 1; min-height: 0; padding: 0; overflow: hidden; color-scheme: dark; background: var(--term-bg);
  width: calc(100% - var(--rbh-sz, 44px) * .62);
}
#terminal { width: 100%; height: 100%; }
#terminal .xterm { height: 100% !important; padding: 2px 4px; }
/* Dải banner tên chat (.ags-conv-banner): CSS do ags-terminal.js tự chèn (#ags-conv-banner-css). */
/* Trạng thái Bé Mầm là overlay con của #terminal: đứng cố định TRONG xterm khi nội dung cuộn. */
.bemam-term-host { position: relative; }
.bemam-term-footer { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; gap: 4px; padding: 5px 9px 6px; background: #2a2f3a; border-top: 1px solid #8b93a7; font: 12px/16px ui-monospace, Menlo, Monaco, Consolas, monospace; box-shadow: 0 -8px 16px rgba(11,16,32,.72); }
.bemam-term-footer[hidden] { display: none; }
.bemam-term-status { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); }
.bemam-term-status[hidden] { display: none; }
.bemam-term-status-icon { flex: none; color: #a7f3d0; font-size: 15px; line-height: 16px; }
.bemam-term-status-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bemam-tool-inline { position:relative; display:inline-block; }
/* Diện mạo nút "Xem thêm" do ags-terminal.js đặt (#bemam-tool-css) — sửa ở đó, KHÔNG thêm lại ở đây:
   style nằm trong JS của ags-suite nên đổi được qua Chợ, khỏi bump host vì shell.css là go:embed. */
.bemam-tool-window { display:flex; flex-direction:column; gap:10px; height:100%; min-height:0; padding:10px; }
.bemam-tool-window-command { flex:none; max-height:64px; padding:8px; overflow:auto; border:1px solid var(--border,#2a2f3a); border-radius:6px; background:rgba(0,0,0,.2); color:var(--muted,#8b93a7); font:12px/16px ui-monospace,Menlo,Monaco,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.bemam-tool-window-output { flex:1; min-height:0; margin:0; padding:10px; overflow:auto; border:1px solid var(--border,#2a2f3a); border-radius:7px; background:#101720; color:#e4edf2; font:12px/17px ui-monospace,Menlo,Monaco,Consolas,monospace; white-space:pre-wrap; word-break:break-word; }
.bemam-auth-card { position: absolute; z-index: 5; right: 12px; bottom: 42px; left: 12px; display: flex; align-items: center; gap: 14px; max-width: 620px; margin: auto; padding: 13px 14px; border: 1px solid rgba(248,113,113,.72); border-radius: 12px; background: rgba(35,26,34,.97); box-shadow: 0 12px 30px rgba(0,0,0,.45); font-size: 14px; line-height: 1.35; }
.bemam-auth-card[hidden] { display: none; }
.bemam-auth-copy { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bemam-auth-copy strong { color: #fca5a5; font-size: 15px; }
.bemam-auth-copy span { color: var(--text); }
.bemam-auth-btn { flex: none; min-width: 108px; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--accent, #57e3ff); color: #0b1020; font: inherit; font-weight: 800; cursor: pointer; }
.bemam-auth-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 540px) { .bemam-auth-card { bottom: 38px; align-items: stretch; flex-direction: column; gap: 10px; } .bemam-auth-btn { width: 100%; } }
/* KHÔNG viền ngăn: các nút trong 2 thanh toolbar đã có viền riêng, thêm gạch ngang nữa nhìn rối
   (Admin chốt). Vạch phân cách duy nhất còn lại = border-top của util bar #ags-qk-row2 (core CSS),
   tách cả cụm toolbar khỏi vùng terminal. */
.composer {
  /* padding-top = --qk-gap-y để khoảng cách quick button ↔ ô nhập BẰNG util bar ↔ quick button. */
  flex-shrink: 0; display: flex; gap: 6px; padding: var(--qk-gap-y) 8px 6px;
  background: var(--surface); border: none; align-items: center;
}
.composer textarea {
  flex: 1; resize: none; min-height: 2rem; max-height: 4rem; font: inherit; font-size: 16px;
  padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(0,0,0,.22); color: var(--text);
}
/* Placeholder mờ — gợi ý "Promp… Enter = gửi" không đè lên nội dung. */
.composer textarea::placeholder { color: var(--text); opacity: .38; font-weight: 400; }
.quick-keys {
  flex-shrink: 0; display: flex; align-items: center; padding: var(--qk-gap-y) 6px; gap: 4px;
  background: var(--surface); border: none; overflow: hidden;
}
/* Chỉ hàng quick button cuộn ngang; khu phải (.qk-fixed) đứng im. */
.qk-scroll {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.qk-scroll::-webkit-scrollbar { display: none; }
.qk-fixed { flex: none; display: flex; align-items: center; }
.key-group { display: flex; flex-shrink: 0; }
.key-group + .key-group { margin-left: 3px; }
/* Cỡ nút = token --qk-* (xem :root) ⇒ util bar và quick button LUÔN cùng cỡ/chiều cao,
   đổi mức chỉ cần đổi data-qk-size trên <html>. */
.key-btn {
  appearance: none; padding: 6px 9px; min-width: var(--qk-tap); min-height: var(--qk-tap);
  border: 1px solid var(--key-border); background: var(--key-bg); color: var(--text);
  font-size: var(--qk-font); font-weight: 700; cursor: pointer; border-left-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* NẨY khi nhả: về scale(1) qua easing vọt-lố (overshoot) → cảm giác nút nảy lại. */
  transition: transform .26s cubic-bezier(.34, 1.56, .64, 1);
}
.key-group .key-btn:first-child { border-radius: 6px 0 0 6px; border-left-width: 1px; }
.key-group .key-btn:last-child { border-radius: 0 6px 6px 0; }
.key-group .key-btn:only-child { border-radius: 6px; }
.key-btn.accent { background: var(--key-accent-bg); border-color: transparent; color: #0b1020; }
/* Phím icon (enter/hướng/backspace): SVG to rõ giống Web CLI thay ký tự unicode bé. */
/* Phím icon (mũi tên) ĐỒNG CỠ với phím số: padding 6×6 + SVG 20 → tổng ≈ 34px như .key-btn số. */
.key-btn.key-icon { padding: 6px 6px; }
.key-btn.key-icon svg { width: var(--qk-icon); height: var(--qk-icon); display: block; }
/* Bảng phím tổ hợp — nổi trên phím ⌘ ở cuối dàn phím. Mấy phím này bàn phím điện thoại không
   có, mà đọc màn hình dài hay dán chữ thì lại cần luôn (Admin chốt 05/09/2026). */
.ags-combo-pop {
  position: fixed; z-index: 3000; display: grid; gap: 2px; padding: 6px;
  min-width: 220px; max-width: min(300px, calc(100vw - 16px));
  max-height: 60vh; overflow: auto;
  border: 1px solid var(--key-border); border-radius: 12px;
  background: var(--panel, #11162a); box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}
.ags-combo-btn {
  appearance: none; display: flex; align-items: baseline; gap: 8px;
  padding: 9px 10px; min-height: 40px; width: 100%;
  border: 0; border-radius: 8px; background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.ags-combo-btn:hover, .ags-combo-btn:focus-visible { background: var(--key-border); outline: none; }
.ags-combo-lb { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.ags-combo-ht { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); text-align: right; }
/* Bảng dán tay — bung khi trình duyệt không cho đọc bộ nhớ tạm. */
.ags-paste-nen {
  position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .55);
}
.ags-paste-box {
  width: min(520px, 100%); display: grid; gap: 10px; padding: 16px;
  border: 1px solid var(--key-border); border-radius: 14px;
  background: var(--panel, #11162a); box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}
.ags-paste-tt { font-size: 15px; font-weight: 700; color: var(--text); }
.ags-paste-mo { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ags-paste-ta {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px;
  padding: 10px 12px; border: 1px solid var(--key-border); border-radius: 10px;
  background: var(--key-bg); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5;
}
.ags-paste-ta:focus { outline: none; border-color: var(--accent); }
.ags-paste-bar { display: flex; align-items: center; gap: 8px; }
.ags-paste-sp { flex: 1; }
.ags-paste-btn {
  appearance: none; padding: 9px 16px; min-height: 40px;
  border: 1px solid var(--key-border); border-radius: 9px;
  background: var(--key-bg); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.ags-paste-btn:hover { background: var(--key-border); }
.ags-paste-btn.ok { background: var(--key-accent-bg); border-color: transparent; color: #0b1020; }
.ags-zbticker-toggle { padding: 6px; }
.ags-zbticker-toggle img { width: var(--qk-icon); height: var(--qk-icon); border-radius: 4px; display: block; }
/* NHÚN khi nhấn: co nhanh; nhả → dùng transition nẩy ở .key-btn trên. Áp cả util bar & quick bar. */
.key-btn:active { transform: scale(0.88); transition: transform .07s ease-out; }
@media (prefers-reduced-motion: reduce) { .key-btn, .key-btn:active { transition: none; } }
/* Slot trống hàng-nút-trên (#ags-qk-row2): ẨN HẲN — chỉ hiện các nút THẬT, dính liền nhau
   (Admin chốt). Phần tử vẫn còn trong DOM để setQuickSlot(N) với N bất kỳ vẫn nạp được;
   đầu mút dải segmented do .qk2-first-filled/.qk2-last-filled (core) bám theo nút thật. */
.qk2-empty { display: none; }
/* Gạch ngăn + nhóm 2 nút phải (core tạo sẵn key-group; module set label + onclick). */
.key-sep { flex: none; width: 1px; height: 22px; background: var(--border); margin: 0 8px; }
.key-group.key-right .key-btn:not([hidden]) { border-radius: 6px; border-left-width: 1px; }
.key-group.key-right .key-btn:not([hidden]):has(+ .key-btn:not([hidden])) { border-radius: 6px 0 0 6px; }
.key-group.key-right .key-btn:not([hidden]) + .key-btn:not([hidden]) { border-radius: 0 6px 6px 0; border-left-width: 0; }

.dlg { border: 1px solid var(--border); border-radius: 12px; padding: 0; max-width: 92vw; width: 400px; background: var(--surface-2); color: var(--text); }
/* Nền sau hộp thoại: tối đậm + mờ hẳn nội dung phía dưới. Trước đây chỉ .5 nên chữ và nút bên
   dưới vẫn đọc được, nhìn rối và không rõ đâu là thứ đang cần thao tác. */
.dlg::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dlg header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.dlg header h3 { margin: 0; font-size: 1rem; }
.dlg-body { padding: 12px 14px; max-height: 60vh; overflow-y: auto; }
.dlg-err { padding: 0 14px 12px; }
.module-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.module-row:last-child { border-bottom: 0; }
.module-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.module-card:last-child { border-bottom: 0; }
/* Avatar module trong Chợ: khung vuông bo góc. CHƯA có hình → background 404 → khung rỗng
   (không icon ảnh vỡ). Thêm avatar.png vào plugin ui/ là tự hiện (background-size cover). */
.mod-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--border); background-color: var(--surface-2, rgba(255,255,255,.04));
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.modules-body.grid .mod-avatar { width: 56px; height: 56px; }
/* 2 cột: cụm trái (avatar + info) gộp 1 khối; cụm phải = actions. */
.module-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; }
.module-info { flex: 1; min-width: 0; }
.module-title { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.module-ver { font-weight: 600; color: var(--muted); font-size: .82rem; }
.module-desc { margin-top: 4px; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.module-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-top: 2px; }
.module-toggle input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.module-toggle input:disabled { opacity: .55; cursor: not-allowed; }
.module-note { margin-top: 10px; font-size: .75rem; }
/* Popup tạo cuộc chat mới — agent gọn: icon trái + tên phải */
.ncv-dlg { width: min(94vw, 440px); }
@media (min-width: 760px) { .ncv-dlg { width: min(94vw, 560px); } }
.ncv-title { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: rgba(0,0,0,.22); color: var(--text); font-family: inherit; font-size: 16px; }
.ncv-hint { margin: 8px 0 6px; font-size: 13px; }
/* Lưới chọn agent: nhiều cột co giãn → gọn diện tích. Icon trái + tên ngắn phải,
   tên nhỏ + xuống hàng nếu dài để cân bằng chiều cao với icon. */
/* 3 cột mặc định (màn nhỏ), 4 cột khi màn rộng (≥760px). */
/* padding 4px: thở ra mép + không cắt viền outline của agent đang chọn (overflow-y:auto). */
.ncv-agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 48vh; overflow-y: auto; padding: 4px; }
@media (min-width: 760px) { .ncv-agents { grid-template-columns: repeat(4, 1fr); } }
.ncv-agent {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px;
  min-height: var(--tap-min, 44px); padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.03); color: var(--text); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ncv-agent:hover { border-color: var(--accent); background: var(--accent-dim); }
.ncv-agent:active { opacity: .9; }
.ncv-agent .ncv-logo { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.ncv-agent .ncv-logo svg { width: 16px; height: 16px; }
.ncv-agent .ncv-name { flex: 1 1 auto; min-width: 0; font-size: 12px; text-align: left; line-height: 1.15; white-space: normal; word-break: break-word; }
.ncv-agent .ncv-badge { flex: none; font-size: 10px; color: var(--muted); }
.ncv-agent.off { opacity: .5; }
.ncv-agent.off:hover { border-color: var(--border); background: rgba(255,255,255,.03); }
/* Popup cài đặt cuộc chat — nút Xoá to + canh giữa */
.cs-footer { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--border); }
.cs-del-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 60%; padding: 12px 20px; font-size: 15px; font-weight: 700; min-height: var(--tap-min, 44px); }
.dlg-modules { min-width: min(92vw, 520px); }
/* Settings TỔNG = toàn màn hình (y chang trang agsmem), không còn popup nhỏ.
   position:fixed inset:0 + z-index CAO (trên header 400 + magic-bubble 1500) + nền đặc
   → che KÍN, không để header/cụm nút lòi qua. */
.dlg-settings:not([open]) { display: none; } /* dialog đóng → ẩn hẳn (không thì display:flex đè giữ hiện) */
.dlg-settings[open] { position: fixed; inset: 0; margin: 0; z-index: 9000; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; min-width: 0; border: none; border-radius: 0; background: var(--bg); display: flex; flex-direction: column; }
.dlg-settings .dlg-body, .dlg-settings .settings-tabs, .dlg-settings > header { background: var(--bg); }
.dlg-settings .dlg-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
/* Config: tab ngang theo từng module (cfg-mod-tabs là dải nút) — VUỐT NGANG khi màn nhỏ,
   không xếp chồng: nowrap + overflow-x, nút không co (flex:none), ẩn thanh cuộn cho gọn. */
/* cfg-mod-tabs = hàng NGANG: [vùng cuộn nút module | nút Theme NEO CỨNG phải].
   Nút module vuốt trong .cfg-mod-scroll; nút 🎨 flex:none sát mép phải. */
.cfg-mod-tabs { display: flex; flex-wrap: nowrap; align-items: stretch; min-width: 0; gap: 0; margin: 6px 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.cfg-mod-scroll { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cfg-mod-scroll::-webkit-scrollbar { display: none; }
/* Nút module = TAB KHÔNG NỀN (viền radius); active = nền accent NHẠT. Specificity .cfg-mod-tabs .cfg-mod-btn
   để đè nền accent đầy của .btn (cùng nút mang class btn). */
.cfg-mod-tabs .cfg-mod-btn { flex: 0 0 auto; white-space: nowrap; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 8px; padding: 6px 12px; }
.cfg-mod-tabs .cfg-mod-btn:hover { color: var(--text); border-color: var(--border); }
.cfg-mod-tabs .cfg-mod-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
/* Nút 🎨 Theme neo phải: viền radius, KHÔNG nền; active = nền accent nhạt như tab. */
.cfg-mod-theme { flex: 0 0 auto; display: grid; place-items: center; min-width: var(--tap-min, 44px); padding: 6px 10px; margin-left: 6px; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; }
.cfg-mod-theme svg { display: block; width: 20px; height: 20px; }
.cfg-mod-theme:hover { color: var(--text); border-color: var(--accent); }
.cfg-mod-theme.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.dlg-module-settings { min-width: min(92vw, 480px); }
/* flex-shrink:0: hàng tab là flex-item trong dialog cột (100vh). Khi cửa sổ THẤP (remote/Windows),
   nếu để co (mặc định shrink:1) → cao <42px, mà overflow-x:auto kéo theo overflow-y:auto → CẮT chữ
   tab (Modules/Config/Memory/System dính top-bottom). Pin cứng để không bao giờ clip. */
.settings-tabs { flex: 0 0 auto; display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding: 0 14px; border-bottom: 1px solid var(--border); }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  flex: 0 0 auto; white-space: nowrap;
  padding: 10px 16px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: .85rem; line-height: 20px; font-weight: 700; cursor: pointer;
  /* line-height CỐ ĐỊNH (px) → chiều cao tab = 10+20+10+2 = 42px NGUYÊN, ĐỒNG NHẤT mọi tab.
     Trước dùng line-height:normal → cao phân số (37.9 vs 38.0) → underline ở Y lẻ → antialias
     lệch (chữ→gạch lúc sát lúc xa, rõ trên Retina). box-sizing đảm bảo border không đội height. */
  box-sizing: border-box;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.modules-tabs { display: flex; gap: 0; padding: 0 0 0; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.modules-tab {
  padding: 10px 16px; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.modules-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.icon-settings { min-width: 36px; padding: 4px 10px; }
.settings-section { margin-bottom: 16px; }
.settings-section h4 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.settings-kv { font-size: .82rem; line-height: 1.5; }
.settings-kv > div { margin-bottom: 4px; }
.settings-kv code { font-size: .75rem; word-break: break-all; }
.settings-kv .ok { color: var(--ok); }
.settings-kv .warn { color: var(--warn); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.settings-toggle { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: .85rem; }

/* Tab Config */
.cfg-section { margin-bottom: 18px; }
/* Config → khối "Cấu hình Module": nút từng module (master) + bảng settings riêng (detail).
   Style nút module (.cfg-mod-btn) + neo 🎨 định nghĩa 1 CHỖ ở trên (cfg-mod-tabs/scroll). */
.cfg-mod-detail { border-top: 1px solid var(--border); padding-top: 12px; }
.cfg-mod-detail:empty { border-top: 0; padding-top: 0; }
.cfg-section h4 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.cfg-row + .cfg-row, .cfg-perm + .cfg-perm { border-top: 1px solid var(--border); }
.theme-opt input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.cfg-fda { border-top: 1px solid var(--border); margin-top: 4px; align-items: flex-start; }
.cfg-select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 16px; }
.cfg-toggle { width: 38px; height: 22px; -webkit-appearance: none; appearance: none; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; position: relative; cursor: pointer; transition: background .15s; flex: none; }
.cfg-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.cfg-toggle:checked { background: var(--accent); border-color: var(--accent); }
.cfg-toggle:checked::after { transform: translateX(16px); background: #fff; }
.cfg-state { font-size: .72rem; }
.cfg-hint, .cfg-note { font-size: .74rem; line-height: 1.45; margin: 4px 0; }
.cfg-uninstall-cli { margin-top: 10px; }
.cfg-uninstall-cli-ta { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px; line-height: 1.5;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); white-space: pre-wrap; }
.cfg-uninstall-cli #cfg-uninstall-cli-copy { margin-top: 8px; }
.cfg-debug-out { max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: .72rem; white-space: pre-wrap; word-break: break-all; margin-top: 10px; }
.cfg-msg { font-size: .78rem; margin: 8px 0 0; color: var(--ok); }
.cfg-msg.err { color: var(--err, #e5534b); }

/* Progress self-update */
.su-progress { margin-top: 12px; }
.su-bar { height: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 99px; overflow: hidden; }
.su-bar-fill { height: 100%; width: 0; background: var(--accent); border-radius: 99px; transition: width .25s ease; }
.su-msg { font-size: .78rem; margin-top: 6px; }
.su-msg.err { color: var(--err, #e5534b); }
.su-msg.ok { color: var(--ok); }
.upd-section { margin: 0 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.latest-tag { font-size: .78rem; white-space: nowrap; }
.upd-note { margin-top: 10px; font-size: .78rem; }
.settings-pre { font-size: .72rem; overflow: auto; max-height: 50vh; white-space: pre-wrap; word-break: break-all; }
.ka-desc { margin: 0 0 10px; line-height: 1.4; }
.ka-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .84rem; }
.ka-row select { font: inherit; font-size: 16px; padding: .35rem .5rem; border-radius: 6px; border: 1px solid var(--border); background: rgba(0,0,0,.22); color: var(--text); }

.shell.collapsed {
  grid-template-columns: 1fr;
}
.shell.collapsed .sidebar {
  display: none;
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    display: grid;
    position: absolute; top: 0; left: 0; bottom: 0; width: min(var(--sidebar-w), 88vw);
    box-shadow: 4px 0 24px rgba(0,0,0,.35); transition: transform 250ms ease;
  }
  .shell.collapsed .sidebar {
    display: grid;
    transform: translateX(-105%);
  }
  .shell:not(.collapsed) .sidebar-overlay { display: block; }
}

/* Toggle bật/tắt module ngay tại list */
.mod-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.mod-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mod-switch { width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.18); transition: background .15s; display: inline-block; position: relative; flex: none; }
.mod-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mod-toggle input:checked + .mod-switch { background: #34c759; }
.mod-toggle input:checked + .mod-switch::after { transform: translateX(16px); }

/* Bar "Update tất cả" trên đầu list module (tab Đã cài) */
.mod-updall {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--danger);
  background: rgba(255,107,139,.12); border-radius: 10px;
}
.mod-updall > span { font-size: .82rem; font-weight: 700; color: var(--danger); }

/* Modules list 1-cột: card core "AGS App" nổi bật, module chưa cài mờ nhẹ */
/* Mục "Hệ thống": 3 module (AGS Core + builtin) trong 1 KHUNG (box) — mỗi cái 1 hàng gọn
   (tên + version + update + gear), ngăn nhau bằng divider, KHÔNG phải 3 box riêng. */
.module-sys-group { border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.module-card.module-sys { align-items: center; padding: 8px 0; }
.module-card.module-sys.has-update .module-title { color: var(--accent); }
.badge-core { color: #0b1020; background: var(--accent); }
/* Module chưa cài: hiển thị RÕ như bình thường (không làm mờ — tránh cảm giác không khả dụng). */
.module-card.module-uninstalled { opacity: 1; }
.module-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* ── Modules dialog: toolbar + grid + category + icon Cài/Gỡ ── */
.modules-toolbar { display: flex; align-items: center; gap: 10px; padding: 4px 2px 10px; margin-bottom: 6px; }
.mtb-field { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.mtb-field select { font: inherit; font-size: .8rem; padding: 4px 6px; border-radius: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.mtb-view { display: flex; }
.mtb-vbtn { appearance: none; width: 32px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border); background: rgba(0,0,0,.18); color: var(--muted); cursor: pointer; }
.mtb-vbtn:first-child { border-radius: 7px 0 0 7px; }
.mtb-vbtn:last-child { border-radius: 0 7px 7px 0; border-left: 0; }
.mtb-vbtn.active { color: var(--accent); background: var(--accent-dim); }
.btn.icon-only { padding: .35rem .5rem; display: inline-grid; place-items: center; }
.btn.icon-only.mod-trash { background: transparent; color: var(--danger); border: 1px solid rgba(255,107,139,.4); }
.btn.icon-only.mod-trash:hover { background: rgba(255,107,139,.14); }
/* Inline-confirm gỡ module: bấm trash lần 1 → nút "Xoá?" đỏ; bấm lần 2 mới gỡ. */
.btn.mod-trash-confirm { background: var(--danger, #ff6b8b); color: #fff; border: 1px solid var(--danger, #ff6b8b); font-weight: 700; }
.btn.mod-trash-confirm:hover { filter: brightness(1.08); }
/* Tag category ở ĐẦU card, màu nền riêng theo category để phân biệt nhóm. */
.mod-cat { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 0 0 5px; font-size: .66rem; font-weight: 600; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; text-transform: uppercase; letter-spacing: .03em; }
.mod-cat[data-cat="agent"] { color: #ffc46b; background: rgba(255,176,72,.14); border-color: rgba(255,176,72,.34); }
.mod-cat[data-cat="system"] { color: #8fe6ff; background: rgba(87,227,255,.13); border-color: rgba(87,227,255,.32); }
.mod-cat[data-cat="other"] { color: #c7ea73; background: rgba(169,225,39,.14); border-color: rgba(169,225,39,.34); }
.mod-cat-head { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--accent); padding: 10px 2px 4px; text-transform: uppercase; letter-spacing: .04em; }
/* 2 nhóm: Đã cài / Chưa cài — gạch ngang phân tách rõ. */
.mod-section-head { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 12px 2px 6px; margin-bottom: 2px; }
.mod-section-head.mod-section-uninstalled { margin-top: 14px; }
/* Header "Hệ thống" có nút Wizard bên phải. */
.mod-section-head.mod-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mod-head-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--accent);
  font: inherit; font-size: .7rem; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.mod-head-act:hover { border-color: var(--accent); background: var(--accent-dim); }
.mod-head-act svg { width: 15px; height: 15px; }
.modules-body.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.modules-body.grid .module-card { flex-direction: column; align-items: stretch; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.modules-body.grid .module-card.has-update { box-shadow: none; border-color: var(--danger); }
.modules-body.grid .module-actions { justify-content: flex-end; }
.modules-body.grid .mod-cat-head, .modules-body.grid .mod-section-head { grid-column: 1 / -1; }
/* Card CORE luôn list ngang (full width) kể cả ở chế độ lưới. */
/* Grid: khung span full width; hàng bên trong KHÔNG thành box riêng (bỏ border/radius card). */
.modules-body.grid .module-sys-group { grid-column: 1 / -1; }
.modules-body.grid .module-card.module-sys { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; flex-direction: row; align-items: center; padding: 8px 0; }
.modules-body.grid .module-card.module-sys:last-child { border-bottom: 0; }
/* Nút on/off + trash của core: disabled (chỉ gear enable). */
/* 3 nút action (on/off, gear, trash) cao BẰNG NHAU (=24px). */
.module-actions .mod-toggle, .module-actions .mod-switch, .module-actions .btn.btn-sm { height: 24px; }
.module-actions .btn.btn-sm { min-height: 24px; padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; box-sizing: border-box; }
.mod-toggle input:disabled + .mod-switch { opacity: .4; cursor: not-allowed; }
.btn.icon-only.mod-trash[disabled] { opacity: .4; cursor: not-allowed; color: var(--muted); border-color: var(--border); }
.btn.icon-only.mod-trash[disabled]:hover { background: transparent; }


/* ── Cột phải (trong lưới .shell) + thanh kéo ────────────────────────────────────────
   Nằm cạnh vùng chat, dưới thanh đầu trang — giữ nguyên dáng giao diện cũ. Khung RỖNG:
   module cắm nội dung vào #slot-right qua host.setRightPanel(). Không có gì thì cả cột lẫn
   thanh kéo đều hidden → lưới về 2 cột, không chừa khoảng trống. */

/* Vùng CHẠM rộng 18px (ngón tay), nhưng chỉ VẼ vệt mảnh 2px ở giữa → nhìn vẫn thanh mảnh. */
/* CHỒNG LÊN shell, không bóp lưới: đổi grid-template-columns làm vùng terminal hẹp lại và
   xterm phải vẽ lại toàn bộ — chữ nhảy loạn, rất rối mắt. Trượt bằng transform (chỉ chạy trên
   compositor) nên vùng chat bên dưới đứng yên hoàn toàn. Trượt giống sidebar trái: 250ms ease. */
.rightbar {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 306;
  width: min(var(--rightbar-w), 92vw); min-width: 0;
  display: grid; grid-template-rows: 1fr;
  background: var(--surface); border-left: 1px solid var(--border); overflow: hidden;
  /* Bo góc mép trái để bảng nổi như một tấm riêng, không dính bệt vào khung shell. */
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 24px rgba(0,0,0,.35);
  transition: transform 250ms ease, visibility 250ms;
}
/* KHÔNG dùng thuộc tính [hidden] cho bảng: shell.css có "[hidden] { display: none !important }"
   nên nó biến mất tức thì, chẳng còn gì để trượt. Trạng thái đóng/mở đi qua class .rb-on. */
.rightbar { transform: translateX(105%); pointer-events: none; visibility: hidden; }
.rightbar.rb-on { transform: translateX(0); pointer-events: auto; visibility: visible; }
/* .rightbar-head / .rightbar-title ĐÃ BỎ cùng thanh đầu (Admin chốt 26/09/2026). Bảng nay chỉ
   còn một hàng: nội dung. Nhãn của mục đang mở đóng vai thanh đầu, do ags-sidebar.js tô. */
/* --rb-pad: dải mục ở đáy bảng phải kéo âm đúng bằng số này để tràn sát ba mép, không thì nó
   lơ lửng giữa khung hở một viền (Admin bắt 26/09/2026). */
.rightbar-body { --rb-pad: 10px; min-height: 0; overflow: auto; padding: var(--rb-pad); }
.rb-empty { color: var(--muted); font-size: .82rem; line-height: 1.7; }

/* Núm bám gờ tường — hai bên: phải mở bảng phải, trái ẩn/hiện sidebar trái.
   Hẹp thôi, chỉ ló ra một mẩu để không cướp chỗ nội dung. Kéo dọc được (JS lưu vị trí). */
/* Cỡ + màu lấy TỪ cấu hình Magic Bubble (JS đặt --rbh-*): size = chiều cao MỖI ô, bề ngang
   bằng ~62% cho ra dáng tay nắm dọc. idle = lúc nghỉ, active = khi chạm/kéo. */
.rb-handle {
  position: absolute; top: 26%; z-index: 310;
  /* Cao GẤP 1.5 so với 2 ô cỡ chuẩn (= 3 lần size): vùng bấm ▲/▼ rộng rãi hẳn, mà dải mép phải
     này vốn chẳng vướng gì. */
  width: calc(var(--rbh-sz, 44px) * .62); height: calc(var(--rbh-sz, 44px) * 3); padding: 0;
  /* KHÔNG overflow:hidden — nút "mở bảng phải" neo phía trên cụm nằm ngoài khung núm, cắt là
     mất tăm. Bo góc của chính núm vẫn cắt được nền/gradient của nó. */
  display: grid; grid-template-rows: 1fr 1fr;
  border: 1px solid var(--border);
  /* PHỒNG: mép trái nhạt (ánh sáng hắt vào) rồi chuyển dần về đúng màu cấu hình ở mép phải —
     mặt núm cong lên chứ không phẳng lì. Áp cho CẢ chế độ 2 nút ▲▼ lẫn chế độ tay nắm. */
  background-color: var(--rbh-ibg, rgba(120, 130, 145, .28));
  background-image: var(--rbh-bulge);
  color: var(--rbh-ifg, var(--text));
  opacity: var(--rbh-io, 1);
  /* Dừng hẳn ở TRONG SUỐT trước mép phải: thêm bóng tối ở cuối là mép phải núm sậm hơn màu
     cấu hình ⇒ lệch tông với viền trái 2px của bảng, nhìn ra hai mảnh. */
  --rbh-bulge: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 22%,
    rgba(255,255,255,.12) 52%, rgba(255,255,255,0) 82%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(3px); touch-action: none;
  transition: background .15s, color .15s, opacity .15s;
}
/* Chấm đỏ báo bảng phải vừa có nội dung mới. Nhấp nháy nhẹ cho lọt mắt mà không chói;
   người dùng đã tắt hiệu ứng chuyển động thì đứng yên. */
/* KHÔNG đặt position cho #rightbar-open: nó vốn absolute để bám vào núm, đè thành relative là
   nút rơi khỏi chỗ neo, tách hẳn ra xa (dẫm 30/08/2026). absolute cũng đã là gốc toạ độ rồi. */
/* Có nội dung mới: núm và nút mở sáng hẳn, không mờ theo --rbh-io nữa. */
.rb-handle.rb-co-moi { opacity: 1 !important; }
.rb-handle.rb-co-moi .rb-h-btn { opacity: 1 !important; }
.rb-handle.rb-co-moi #rightbar-open { opacity: 1 !important; }

#rightbar-open .rb-dot {
  position: absolute; top: -3px; left: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: #ff4d4f; box-shadow: 0 0 0 2px var(--bg, #12121e); pointer-events: none;
  opacity: 1; animation: rb-dot-pulse 1.4s ease-in-out infinite;
}
/* Chỉ phồng lên xẹp xuống, KHÔNG mờ đi — chấm phải luôn rõ (Admin chốt 30/08/2026). */
@keyframes rb-dot-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) { #rightbar-open .rb-dot { animation: none; } }

.rb-handle:hover, .rb-handle.dragging {
  background-color: var(--rbh-abg, rgba(120, 130, 145, .45)); color: var(--rbh-afg, var(--text));
  opacity: var(--rbh-ao, 1);
}
/* Hai ô cuộn chia đôi theo chiều NGANG, hairline ở giữa để mắt thấy ngay là 2 nút chứ không
   phải một mảng liền. Nút thừa hưởng nền cụm, chỉ sáng lên phần mình khi chạm. */
.rb-handle .rb-h-btn {
  /* touch-action KHÔNG kế thừa: nút con để mặc định là Safari nuốt cú chạm thành cuộn trang,
     nên chạm trúng ▲/▼ rồi kéo ngang thì không kéo được gì. Phải tắt riêng trên nút. */
  touch-action: none;
  appearance: none; border: 0; background: transparent; color: inherit; padding: 0;
  font-size: calc(var(--rbh-sz, 44px) * .26); line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .13s, color .13s;
}
.rb-handle .rb-h-down { border-top: 1px solid rgba(255, 255, 255, .18); }
.rb-handle .rb-h-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.rb-handle .rb-h-btn:active { background: rgba(255, 255, 255, .24); }
/* BẢNG PHẢI ĐANG MỞ (.rz): núm đổi vai — không còn là 2 nút cuộn mà là TAY NẮM kéo bề rộng,
   nên mặt núm chuyển sang lưới chấm (grip) như tay nắm chia cột quen thuộc. */
/* Đang là tay nắm ⇒ LUÔN sáng 100%, không mờ theo cấu hình idle: lúc này nó là thứ đang được
   cầm, mờ đi thì nhìn như hỏng. */
.rb-handle.rz { display: block; position: absolute; opacity: 1;
  background-color: var(--rbh-abg, rgba(120, 130, 145, .45)); color: var(--rbh-afg, var(--text)); }
.rb-handle.rz .rb-h-btn { display: none; }
/* Icon "kéo giãn ngang" (vạch dọc + 2 mũi tên) — mask nên ăn theo màu chữ hiện tại. */
.rb-handle.rz::before {
  content: ""; position: absolute; left: 50%; top: 15%; width: 16px; height: 16px;
  transform: translate(-50%, -50%); pointer-events: none; background: currentColor; opacity: .92;
  -webkit-mask: var(--rbh-grip) center/contain no-repeat;
  mask: var(--rbh-grip) center/contain no-repeat;
}
/* Chữ "KÉO" dựng ĐỨNG theo chiều dọc núm (xoay 90°) — núm hẹp nên chữ nằm ngang không đủ chỗ. */
.rb-handle.rz::after {
  content: "KÉO TRÁI PHẢI"; position: absolute; left: 50%; top: 58%;
  /* -90° = đọc từ DƯỚI LÊN (chân chữ quay sang phải), đúng chiều đọc quen của nhãn dọc. */
  transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center;
  pointer-events: none; white-space: nowrap;
  font-size: calc(var(--rbh-sz, 44px) * .19); font-weight: 800; letter-spacing: .1em;
  color: currentColor; opacity: .78;
}
.rb-handle.rz {
  --rbh-grip: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 0h2v16h-2z'/%3E%3Cpath d='M3 5l-3 3 3 3v-2h3v-2h-3z'/%3E%3Cpath d='M16 8l-3-3v2h-3v2h3v2z'/%3E%3C/svg%3E");
}
.rb-handle:active, .rb-handle.rz:active { filter: brightness(.94);
  --rbh-bulge: linear-gradient(90deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.06) 60%, rgba(0,0,0,.16) 100%); }
.rb-handle.dragging .rb-h-btn { pointer-events: none; }
/* Núm phải: bám mép phải, bo góc trái. Magic Bubble cũng bám mép phải ở 50% nên mặc định
   đặt 26% cho khỏi chồng nhau; người dùng kéo đi đâu thì tuỳ. */
/* Nút MỞ bảng phải — cùng ngôn ngữ hình với núm (bám mép, bo góc trái, màu theo cấu hình),
   nhưng vuông vức và nhỏ hơn: một cú bấm, không phải chỗ để kéo. */
.rb-open-btn {
  /* Neo vào chính núm: núm dời đi đâu nó theo đó, khỏi tính toạ độ bằng JS (tính là lệch). */
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 310;
  width: calc(var(--rbh-sz, 44px) * .62); height: calc(var(--rbh-sz, 44px) * .62);
  padding: 0; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--border); border-right: 0; border-radius: 10px 0 0 10px;
  /* LUÔN ĐẶC: nút này phải đọc được ngay cả khi chữ chạy phía dưới. Không dùng --rbh-io/ao
     (độ mờ của núm) — nút mờ là lẫn vào nền, bấm hụt. */
  background-color: var(--rbh-solid, var(--surface));
  /* Cùng vệt phồng như núm: trái nhạt → phải đúng màu cấu hình, để hai thứ ăn một khối. */
  background-image: var(--rbh-bulge, linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.42) 22%, rgba(255,255,255,.12) 52%, rgba(255,255,255,0) 82%));
  color: var(--rbh-solid-fg, var(--text));
  opacity: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
  touch-action: none;
  transition: background-color .15s, color .15s, opacity .15s;
}
.rb-open-btn::after { transition: transform .2s ease; }
/* CHỈ máy có chuột thật mới đổi màu khi rê. Trên cảm ứng, :hover biến cú chạm đầu thành
   "rê chuột" (chỉ sáng lên, không kích hoạt) — phải chạm lần hai mới ăn, đúng lỗi đang gặp. */
@media (hover: hover) and (pointer: fine) {
  .rb-open-btn:hover { filter: brightness(1.12); }
}
.rb-open-btn:active { filter: brightness(.93); }
.rb-open-btn::after {
  content: ""; width: 62%; height: 62%; background: currentColor;
  /* mũi tên tròn của nút sidebar, XOAY 90° cho thành chiều ngang */
  -webkit-mask: var(--rb-open-ic) center/contain no-repeat;
  mask: var(--rb-open-ic) center/contain no-repeat;
}
.rb-open-btn {
  --rb-open-ic: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cpath d='M600 1200c331.359 0 600-268.641 600-600S931.359 0 600 0S0 268.641 0 600s268.641 600 600 600zm66.656-297.141L212.32 600l454.336-302.859v163.184H987.68v279.352H666.656v163.182z'/%3E%3C/svg%3E");
}
/* Bảng đang mở thì cùng nút này ĐÓNG lại — mũi tên quay ngược sang phải cho khớp việc nó làm. */
body.rb-open .rb-open-btn::after { transform: rotate(180deg); }

.rb-handle--right { right: 0; border-right: 0; border-radius: 10px 0 0 10px; }
/* Bảng phải đang mở: núm KHÔNG biến mất mà trượt sang bám mép TRÁI của bảng — nó chính là tay
   nắm đổi bề rộng (kéo ngang) kiêm nút đóng (bấm). Một núm lo cả hai, khỏi thanh kéo riêng. */
/* Bảng mở: viền trái bảng lấy ĐÚNG màu nền núm (cấu hình Magic Bubble) và dày 2px, để núm và
   bảng đọc ra như MỘT khối liền chứ không phải hai mảnh dán cạnh nhau. */
body.rb-open .rightbar { border-left: 2px solid var(--rbh-abg, var(--border)); }
body.rb-open .rb-handle--right { right: min(var(--rightbar-w), 92vw); transition: right .25s ease, background .15s, width .15s; }
/* ĐANG KÉO: tắt transition — bề rộng bảng đổi tức thì còn núm bò theo 250ms ⇒ núm rớt lại
   sau mép bảng, nhìn như hai vật rời nhau. Chỉ lúc bung/đóng mới cần trượt mượt. */
body.rb-open .rb-handle--right.dragging { transition: none; }
.rb-handle--right.rz { cursor: col-resize; }




/* Bảng phải đang mở → phủ mờ vùng bên trái, y như sidebar trái lúc bung: nhấn ra ngoài là
   đóng, và mắt biết ngay chỗ nào đang làm việc. */
.rightbar-scrim { display: none; position: absolute; inset: 0; background: var(--scrim-bg); z-index: 305; }
.shell.has-right .rightbar-scrim { display: block; }

/* Magic Bubble bám mép phải — bảng phải mở thì dịch sang MÉP TRÁI của bảng, đừng đè lên nội
   dung trong đó. Bám vào class trên <body> chứ KHÔNG phải trong .shell: cụm nút này nổi ở
   ngoài cây .shell (mb-floating dùng position:fixed) nên selector con của .shell không với tới. */
body.rb-open .mb-group { right: calc(var(--rightbar-w) + 14px) !important; }

/* Bảng "Vừa ghi vào bộ nhớ" ở cột phải — mỗi dòng: tên nhánh nhỏ, bản chắt lọc bên dưới. */
.agsmem-rsb { display: flex; flex-direction: column; gap: 10px; }
/* Ngăn cách bằng gạch đứt nhạt dưới đáy, không tô vạch trái (Admin chốt 30/08/2026). */
.agsmem-rsb-i { border-bottom: 1px dashed var(--border, rgba(255,255,255,.14)); padding: 0 0 9px; }
.agsmem-rsb-i:last-child { border-bottom: 0; padding-bottom: 0; }
.agsmem-rsb-n { font-size: 11px; color: var(--muted, #8a8aa3); margin-bottom: 3px; }
.agsmem-rsb-s { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }