/* ══ TAB "AI AGENT" (agent-tab.js) ══════════════════════════════════════════
 * Dùng lại khung chat của tab "Tạo bằng AI" (ai-tao.css: .ait-doc-chat,
 * .ait-console, .ait-tin-*, .ait-buoc, .ait-thanh). Tệp này chỉ thêm phần RIÊNG
 * của tab agent: dải báo, thẻ xin quyền, khung soạn tin hai tầng, menu agent. Chỉ token.
 */

/* Màn hội thoại: pane flex dọc, bảng tin ăn hết chỗ — cùng chuỗi lý do với
   `.rl-pane[data-pane="ai"].rl-pane-chat` ở ai-tao.css. `:not([hidden])` để
   thuộc tính hidden (moTab) vẫn ẩn được pane. */
.rl-pane[data-pane="agent"]:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agt-dau {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}
.agt-tt {
  flex: 1;
  min-width: 0;
  color: var(--text-faint);
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agt-nut {
  flex: none;
  padding: var(--sp-4) var(--sp-10);
  background: var(--surface);
  color: var(--text-soft);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.agt-nut:hover { background: var(--surface-strong); color: var(--text); }
.agt-nut:disabled { cursor: default; color: var(--text-faint); }
.agt-nut-chinh { background: var(--primary-bg); color: var(--primary-text); border-color: transparent; }
.agt-nut-chinh:hover { background: var(--primary-bg); color: var(--primary-text); }
/* Hai nút cạnh nhau trong khung báo ("Dùng tài khoản này" · "Tài khoản khác") — 09/10/2026 */
.agt-hang-nut { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-8); }

/* Vòng tròn quay cạnh trạng thái — đăng nhập ngầm / khởi động agent / đang làm. */
.agt-tt { display: flex; align-items: center; gap: var(--sp-6); }
.agt-quay {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--control-line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: agt-quay 0.8s linear infinite;
}
@keyframes agt-quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .agt-quay { animation-duration: 2.4s; } }

.agt-bao {
  flex: none;
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.agt-bao[hidden] { display: none; }
.agt-bao-info { background: var(--info-bg); border: 1px solid var(--info-line); color: var(--text); }
.agt-bao-loi { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger-text); }

.agt-quyen {
  display: grid;
  gap: var(--sp-8);
  padding: var(--sp-10);
  background: var(--panel);
  border: 1px solid var(--info-line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.agt-quyen-tieude { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.agt-quyen-nut { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

.agt-kehoach {
  margin: 0;
  padding-left: var(--sp-20);
  color: var(--text-soft);
  font-size: var(--text-sm);
}
.agt-kehoach li[data-tt="completed"] { color: var(--text-faint); text-decoration: line-through; }

/* ── KHÔNG CUỘN NGANG ──────────────────────────────────────────────────────
   Một chuỗi không có dấu cách (câu lệnh shell, đường dẫn, URL trong tin của AI) làm phần tử con rộng hơn cột ⇒
   cả bảng tin hiện thanh cuộn ngang (chụp 24/10/2026). Ngắt chữ ở BẤT KỲ đâu khi cần, con của grid/flex được
   co dưới bề rộng nội dung (`min-width: 0`), và chặn hẳn cuộn ngang ở bảng tin làm lưới an toàn. */
.rl-pane[data-pane="agent"] .ait-console { overflow-x: hidden; }
.rl-pane[data-pane="agent"] .ait-console > * { min-width: 0; max-width: 100%; }
.rl-pane[data-pane="agent"] .ait-tin { max-width: 86%; overflow-wrap: anywhere; }
.rl-pane[data-pane="agent"] .ait-md-ma,
.rl-pane[data-pane="agent"] .ait-dong { overflow-wrap: anywhere; }
.rl-pane[data-pane="agent"] .ait-md-ma { overflow-x: hidden; }

/* ── KHỐI VIỆC GỘP (agent-tab.js#nhomMoi) ──────────────────────────────────
   Hàng đầu là MỘT nút: icon (tia sét = công cụ, bộ não = đang nghĩ) + việc đang chạy + chấm nhịp + mũi tên.
   Gập: chỉ hàng đầu. Mở: danh sách từng bước bên dưới, thụt theo vạch trái như Claude. */
.agt-nhom { display: grid; min-width: 0; }
.agt-nhom-dau {
  display: flex; align-items: center; gap: var(--sp-6);
  width: 100%; min-width: 0;
  padding: var(--sp-4) var(--sp-6); margin-left: calc(-1 * var(--sp-6));
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-soft);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
}
.agt-nhom-dau:hover { background: var(--surface); color: var(--text); }
.agt-nhom-dau:focus-visible { background: var(--surface); color: var(--text); outline: none; }
.agt-nhom-icon, .agt-nhom-mui { flex: none; display: grid; place-items: center; color: var(--text-faint); }
.agt-nhom-icon svg { width: 14px; height: 14px; }
.agt-nhom-mui svg { width: 13px; height: 13px; }
/* Tên việc một dòng, dài thì "…" — rê chuột xem đủ (title). */
.agt-nhom-tom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); }
.agt-nhom-tt { flex: none; }
.agt-nhom-loi .agt-nhom-tom { color: var(--delete-text); }

.agt-nhom-ds {
  display: grid; gap: var(--sp-6);
  margin: var(--sp-4) 0 var(--sp-2) var(--sp-6);
  padding-left: var(--sp-10);
  border-left: 1px solid var(--line);
  min-width: 0;
}
.agt-nhom-ds[hidden] { display: none; }
.agt-viec { display: grid; gap: var(--sp-2); min-width: 0; }
.agt-viec-dau { display: flex; align-items: center; gap: var(--sp-6); min-width: 0; font-size: var(--text-sm); color: var(--text); }
.agt-viec-icon { flex: none; display: grid; place-items: center; color: var(--text-faint); }
.agt-viec-icon svg { width: 13px; height: 13px; }
.agt-viec-ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-semibold); }
.agt-viec-tt { flex: none; display: grid; place-items: center; }
.agt-viec-tt svg { width: 13px; height: 13px; }
/* Nhãn "đã cho phép" / "đã từ chối" thay cho thẻ xin quyền đã trả lời. */
.agt-viec-quyen { flex: none; color: var(--text-faint); font-size: var(--text-xs); }
.agt-viec-quyen-tu { color: var(--delete-text); }
.agt-viec-tich { color: var(--ok); }
.agt-viec-x { color: var(--danger); }
/* Chi tiết (câu lệnh, đường dẫn, câu lỗi): chữ máy, nhạt, tối đa 2 dòng rồi "…". */
.agt-viec-ct {
  margin-left: calc(13px + var(--sp-6));
  color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-xs);
  line-height: var(--leading-normal); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.agt-quyen-ct { margin-left: 0; }
.agt-viec-loi { color: var(--delete-text); }
.agt-viec-loi[hidden] { display: none; }
/* Lời nghĩ của model: nhạt, giữ xuống dòng, dài thì cuộn DỌC trong ô — không đẩy cả hội thoại xuống. */
.agt-viec-nghi {
  margin-left: calc(13px + var(--sp-6));
  max-height: 160px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  color: var(--text-faint); font-size: var(--text-xs); line-height: var(--leading-normal);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Chấm nhịp "đang chạy" — dùng chung keyframe `ait-tho` của ai-tao.css. */
.agt-chay {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-dam); animation: ait-tho 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .agt-chay { animation: none; } }

/* Vạch ngăn "Đã chuyển sang Claude" / "Model: …": chữ nhỏ giữa hai nét mảnh. */
.agt-chia {
  display: flex; align-items: center; gap: var(--sp-8);
  color: var(--text-faint); font-size: var(--text-xs);
}
.agt-chia::before, .agt-chia::after { content: ''; flex: 1 1 0; height: 1px; background: var(--line); }
.agt-chia span { flex: none; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.agt-ghichu { flex: none; color: var(--text-faint); font-size: var(--text-xs); }

/* ── KHUNG SOẠN TIN hai tầng: ô gõ ở trên; hàng dưới trái = ghim ảnh + quyền,
   phải = model + gửi. Viền ở CẢ KHUNG (cùng nếp `.ait-thanh` ở ai-tao.css) nên
   cả khối đọc ra một ô. Nút ghim / gửi dùng lại `.ait-thanh-gim` / `.ait-thanh-gui`. */
.agt-soan {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-lg);
}
.agt-soan:focus-within { border-color: var(--brand); }
/* Cùng lý do với `.ait-thanh textarea`: tự cao theo chữ, tối đa ~6 dòng;
   `overflow-wrap: anywhere` để chuỗi dài không dấu cách không kéo ô phình ngang. */
.agt-soan textarea {
  min-width: 0;
  min-height: 42px;
  max-height: 140px;
  padding: var(--sp-2) var(--sp-4);
  field-sizing: content;
  overflow-wrap: anywhere;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  resize: none;
}
.agt-soan textarea:focus { outline: none; }
.agt-soan textarea:disabled { cursor: default; }
.agt-soan-duoi { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.agt-gian { flex: 1; }
.agt-soan .ait-thanh-gim:disabled { opacity: 0.5; cursor: default; background: none; }

/* Nút mở MENU AGENT (cạnh nút ghim): biểu tượng agent + tên + "model · mức suy nghĩ".
   Không viền như các nút trong thanh; chữ dài thì cắt "…". */
.agt-mo-menu {
  min-width: 0;
  max-width: 70%;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-8);
  background: none;
  color: var(--text-soft);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.agt-mo-menu:hover,
.agt-mo-menu[aria-expanded="true"] { background: var(--surface); color: var(--text); }
.agt-mo-menu svg { width: 15px; height: 15px; }
.agt-mo-menu-icon { flex: none; display: grid; place-items: center; }
.agt-mo-menu-ten { flex: none; color: var(--text); font-weight: var(--weight-semibold); }
.agt-mo-menu-phu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agt-mo-menu-xuong { flex: none; display: grid; place-items: center; opacity: 0.7; }
.agt-mo-menu-xuong svg { width: 12px; height: 12px; }

/* ── HỘP MENU (gắn vào <body>, position: fixed — xem datViTri ở agent-tab.js) ── */
.agt-menu {
  position: fixed;
  z-index: var(--z-pop);
  min-width: 260px;
  max-width: min(360px, calc(100vw - var(--sp-16)));
  max-height: calc(100vh - var(--sp-16));
  overflow-y: auto;
  display: grid;
  padding: var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}
.agt-menu-con { min-width: 180px; }
.agt-menu-nhom {
  padding: var(--sp-6) var(--sp-8) var(--sp-4);
  color: var(--text-faint);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.agt-menu-ke { height: 1px; margin: var(--sp-6) var(--sp-4); background: var(--line); }
.agt-menu-dong {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 34px;
  padding: var(--sp-4) var(--sp-8);
  background: none;
  color: var(--text);
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.agt-menu-dong:hover:not(:disabled),
.agt-menu-dong:focus-visible,
.agt-menu-dong.dang-mo { background: var(--surface); outline: none; }
.agt-menu-dong:disabled { color: var(--text-faint); cursor: default; }
.agt-menu-icon { flex: none; display: grid; place-items: center; }
.agt-menu-icon svg { width: 18px; height: 18px; }
.agt-menu-ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agt-menu-the {
  flex: none;
  padding: 0 var(--sp-6);
  background: var(--surface);
  color: var(--text-faint);
  border-radius: var(--radius-xs);
  font-size: var(--text-2xs);
  line-height: var(--leading-normal);
  white-space: nowrap;
}
.agt-menu-gt { flex: none; color: var(--text-faint); font-size: var(--text-xs); white-space: nowrap; }
.agt-menu-nhan {
  flex: none;
  padding: var(--sp-2) var(--sp-10);
  background: var(--surface-strong);
  color: var(--text);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.agt-menu-cham { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
/* Chấm SẴN SÀNG (đã đăng nhập / đã có khoá) — xanh lá, khác chấm "đang chọn" ở hộp con. */
.agt-menu-cham-ok { background: var(--ok); }
/* Hàng agent: nút chọn rộng hết + nút icon (đăng xuất / khoá) bên phải. */
.agt-menu-hang { display: flex; align-items: center; gap: var(--sp-2); border-radius: var(--radius-sm); }
.agt-menu-hang > .agt-menu-dong { flex: 1 1 auto; min-width: 0; }
.agt-menu-hang.dang-chon { background: var(--surface-mo); }
.agt-menu-hang.dang-chon .agt-menu-ten { font-weight: var(--weight-semibold); }
.agt-menu-nut-icon {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  color: var(--text-faint);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.agt-menu-nut-icon:hover,
.agt-menu-nut-icon:focus-visible { background: var(--surface); color: var(--text); outline: none; }
.agt-menu-nut-icon .btn-icon { display: grid; place-items: center; }
/* ⚠ `.btn-icon` (app.css) TỰ ĐẶT MÀU, đè màu của nút cha — thiếu dòng này thì icon
   đăng xuất vẫn xám dù nút đã đỏ (đúng lỗi chủ dự án chụp 03/10/2026). */
.agt-menu-nut-icon .btn-icon { color: inherit; background: none; box-shadow: none; }
/* Nút ĐĂNG XUẤT màu đỏ — việc gỡ đăng nhập, phải nhìn ra khác nút đổi khoá. */
/* `--danger` (đỏ tươi), không phải `--danger-text` (đỏ sẫm ở nền sáng) — đủ nổi mà
   không chói: không nền đặc, chỉ nét icon. */
.agt-menu-nut-icon.agt-nut-do { color: var(--danger); }
.agt-menu-nut-icon.agt-nut-do:hover,
.agt-menu-nut-icon.agt-nut-do:focus-visible { background: var(--danger-bg); color: var(--danger); }
.agt-menu-nut-icon svg { width: 15px; height: 15px; }
.agt-menu-mui { flex: none; display: grid; place-items: center; color: var(--text-faint); }
.agt-menu-mui svg { width: 14px; height: 14px; }
.agt-menu-phu-dong { color: var(--text-soft); font-size: var(--text-xs); }

/* Ảnh đính kèm chờ gửi: ô vuông nhỏ, nút × ở góc. */
.agt-anh { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.agt-anh[hidden] { display: none; }
.agt-anh-o { position: relative; width: 52px; height: 52px; }
.agt-anh-o img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.agt-anh-bo {
  position: absolute;
  top: calc(var(--sp-6) * -1);
  right: calc(var(--sp-6) * -1);
  width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--surface-strong);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: var(--text-xs);
  line-height: var(--leading-none);
  cursor: pointer;
}
.agt-anh-bo:hover { color: var(--danger-text); }

/* Ảnh trong bong bóng tin của người dùng. */
.agt-tin-anh { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-6); }
.agt-tin-anh:first-child { margin-top: 0; }
.agt-tin-anh img { max-width: 120px; max-height: 120px; border-radius: var(--radius-sm); object-fit: cover; }

/* Khung soạn tin không dính sát đáy cột — chừa một khoảng như lề trên của tab. */
.agt .ait-chat { padding-bottom: var(--sp-12); }