/* ==========================================================================
   Trợ lý AI — /d/#dai_ly?tab=hoi_ai   (CEO chốt 13/08/2026 tối)
   ==========================================================================
   BỐ CỤC HAI CỘT, KHUNG CHAT NẰM BÊN PHẢI. Vỏ desktop đã có sidebar bám mép
   trái; đặt luồng chat sát mép trái nữa là hai vùng cuộn nằm cạnh nhau và mắt
   không biết bám vào đâu. Cột trái giữ thứ TĨNH (ngữ cảnh · gợi ý · nguyên
   tắc), cột phải giữ thứ ĐỘNG (hội thoại + ô nhập).

   Dưới 1100px thì xếp dọc — cột trái xuống DƯỚI, vì trên màn hẹp người ta vào
   đây để hỏi chứ không phải để đọc nguyên tắc.

   MỌI MÀU LẤY TỪ tokens.css. Không hex rời trong file này (luật L3 + 11_DESIGN).
   ========================================================================== */

.ai-lo { display: flex; gap: var(--sp-4); align-items: flex-start; }
.ai-trai { flex: 0 0 300px; width: 300px; }
.ai-phai { flex: 1 1 auto; min-width: 0; }   /* min-width:0 = cho phép co, nếu
              không một dòng dài trong <pre> sẽ đẩy cả cột phình ra ngoài */

@media (max-width: 1100px) {
  .ai-lo { flex-direction: column-reverse; }
  .ai-trai { flex: none; width: 100%; }
}

/* ---- luồng hội thoại ---------------------------------------------------- */
/* Chiều cao chốt bằng vh chứ không để trôi tự do: ô nhập phải luôn nhìn thấy
   được mà không phải cuộn xuống đáy trang. `min()` để trên màn 4K khung không
   cao ngoác. */
.ai-luong {
  max-height: min(58vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* cuộn hết luồng thì DỪNG, không kéo cả trang */
  padding-right: var(--sp-2);
}

.ai-tin { margin-bottom: var(--sp-4); }
.ai-tin:last-child { margin-bottom: 0; }

/* Câu hỏi của người dùng — pill lệch phải, hẹp. Tín hiệu "đây là lời tôi nói",
   không phải nội dung để đọc kỹ. */
.ai-hoi {
  display: flex; justify-content: flex-end;
}
.ai-hoi > div {
  max-width: 78%;
  background: var(--accent-weak);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-card) var(--radius-card) var(--sp-1) var(--radius-card);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Câu trả lời — chiếm trọn bề ngang, KHÔNG bọc bong bóng. Đây là văn bản để
   đọc và trích vào biên bản; bong bóng làm hẹp dòng và khó đọc bảng số. */
.ai-dap { font-size: var(--fs-body); line-height: 1.62; color: var(--ink); }
.ai-dap > *:first-child { margin-top: 0; }
.ai-dap > *:last-child { margin-bottom: 0; }
.ai-dap p { margin: 0 0 var(--sp-3); }
.ai-dap ul, .ai-dap ol { margin: 0 0 var(--sp-3); padding-left: 1.35em; }
.ai-dap li { margin-bottom: var(--sp-1); }
.ai-dap b, .ai-dap strong { font-weight: 650; }
.ai-dap code {
  font-family: var(--font-mono); font-size: .92em;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--sp-1); padding: 1px 4px;
}
.ai-dap pre {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-ctl); padding: var(--sp-3);
  overflow-x: auto; margin: 0 0 var(--sp-3);
}
.ai-dap pre code { background: none; border: 0; padding: 0; }
.ai-dap .ai-h {
  display: block; font-weight: 650; font-size: var(--fs-h2);
  margin: var(--sp-4) 0 var(--sp-2);
}
.ai-dap table { border-collapse: collapse; width: 100%; margin: 0 0 var(--sp-3); }
.ai-dap th, .ai-dap td {
  border: 1px solid var(--line); padding: var(--tbl-py) var(--sp-2);
  text-align: left; font-size: var(--fs-sm);
}
.ai-dap th { background: var(--panel-2); font-weight: 600; }
/* Bảng dài hơn cột thì cuộn TRONG nó, không đẩy cả trang trượt ngang */
.ai-bang-wrap { overflow-x: auto; }

/* Nhãn nhỏ trên mỗi lượt: ai nói · mất bao lâu · số lấy từ đâu */
.ai-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); color: var(--faint); margin-bottom: var(--sp-2);
}
.ai-chan {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* Chip dấu vết — BẤM ĐƯỢC, nhảy sang đúng tab với đúng bộ lọc. Con số không
   bấm xuống được thì đừng dùng để giao việc (luật của hai trang phân tích). */
.ai-vet {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border: 1px solid var(--line); background: var(--panel-2);
  border-radius: var(--radius-pill); padding: 2px var(--sp-2);
  font-size: var(--fs-xs); color: var(--muted);
  cursor: pointer; transition: border-color var(--mo-fast) var(--ease-std);
}
.ai-vet:hover { border-color: var(--accent); color: var(--accent-text); }
.ai-vet[disabled], .ai-vet.tinh { cursor: default; }
.ai-vet.tinh:hover { border-color: var(--line); color: var(--muted); }
.ai-vet.loi { border-color: var(--bad); color: var(--bad); }

/* ---- ô nhập ------------------------------------------------------------- */
.ai-soan {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--panel); padding: var(--sp-2);
  transition: border-color var(--mo-fast) var(--ease-std);
}
.ai-soan:focus-within { border-color: var(--accent); }
.ai-soan textarea {
  width: 100%; border: 0; outline: none; resize: none;
  background: transparent; color: var(--ink);
  font: inherit; font-size: var(--fs-body); line-height: 1.55;
  padding: var(--sp-2); max-height: 200px;
}
.ai-soan textarea::placeholder { color: var(--faint); }
.ai-soan-day {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); flex-wrap: wrap; padding: 0 var(--sp-1);
}

/* Công tắc hai chế độ — segmented, không phải dropdown: chỉ có hai lựa chọn và
   người dùng cần thấy mình đang ở đâu mà không phải bấm ra xem. */
.ai-che-do { display: inline-flex; background: var(--panel-2);
             border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 2px; }
.ai-che-do button {
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-pill); padding: 3px var(--sp-3);
  font-size: var(--fs-xs); color: var(--muted); font-family: inherit;
  transition: background var(--mo-fast) var(--ease-std);
}
.ai-che-do button.on { background: var(--panel); color: var(--ink);
                       font-weight: 600; box-shadow: var(--e1); }
.ai-che-do button:disabled { opacity: .5; cursor: not-allowed; }

/* ---- đang chờ ----------------------------------------------------------- */
.ai-cho { display: flex; align-items: center; gap: var(--sp-2);
          color: var(--muted); font-size: var(--fs-sm); }
.ai-cham { display: inline-flex; gap: 3px; }
.ai-cham i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: ai-nhay 1.05s infinite ease-in-out;
}
.ai-cham i:nth-child(2) { animation-delay: .16s; }
.ai-cham i:nth-child(3) { animation-delay: .32s; }
@keyframes ai-nhay { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }

/* Người dùng tắt hiệu ứng ở hệ điều hành thì tôn trọng — chấm đứng yên vẫn đủ
   nói "đang chờ" khi có kèm chữ và đồng hồ đếm giây. */
@media (prefers-reduced-motion: reduce) {
  .ai-cham i { animation: none; opacity: .6; }
}

/* ---- gợi ý câu hỏi ------------------------------------------------------ */
.ai-goi-y {
  display: block; width: 100%; text-align: left;
  border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--radius-ctl); padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2); cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--ink); line-height: 1.45;
  transition: border-color var(--mo-fast) var(--ease-std);
}
.ai-goi-y:hover { border-color: var(--accent); }
.ai-goi-y:last-child { margin-bottom: 0; }