/* LỊCH SỬ KHÁCH — kiểu dáng của thẻ ở public/history.js.
 *
 * MỌI màu lấy từ tokens.css, không còn giá trị dự phòng nào.
 *
 * Bản đầu hardcode bảng màu sáng kèm fallback trong từng `var()`, vì lúc đó màn cuộc gọi
 * không nạp `style.css`. Nay hệ có một tầng token với BA chế độ nền (theo hệ thống / sáng
 * / tối) và mọi trang nhúng thẻ này đều nạp `tokens.css`. Giữ màu cứng ở đây là để nguyên
 * bảng màu sáng trên nền tối — chữ trên nền sai hẳn, đúng điều CLAUDE.md cấm.
 *
 * TỆP RIÊNG, không nằm trong style.css, vì thẻ này nhúng ở HAI trang có hai bảng màu
 * khác nhau: bàn chat (/app/, nạp style.css) và màn hình cuộc gọi (/app/call-screen/,
 * có bộ kiểu inline riêng và KHÔNG nạp style.css). Để trong style.css thì thẻ mất sạch
 * định dạng ở màn cuộc gọi; nhân đôi khối CSS thì hai bản lệch nhau ngay lần sửa đầu.
 *
 * MỌI `var()` ĐỀU CÓ GIÁ TRỊ DỰ PHÒNG. Đây không phải phòng xa: màn cuộc gọi không khai
 * `--muted`/`--line`/`--brand` nào cả, nên thiếu dự phòng là chữ xám thành chữ trong suốt
 * và viền biến mất — thẻ vẫn "chạy" nhưng không đọc được.
 */
/* `h3.hh-head`, KHÔNG phải `.hh-head`: bàn chat có sẵn `.panel-sec h3` (độ đặc hiệu
   0,1,1) đặt cỡ chữ, chữ hoa và lề dưới. Selector chỉ một lớp (0,1,0) sẽ THUA nó ở
   những thuộc tính trùng, còn ở màn cuộc gọi thì không có quy tắc nào nên h3 nhảy về cỡ
   mặc định của trình duyệt — thẻ trông khác nhau hẳn ở hai trang. Gắn thêm tên thẻ để
   bằng độ đặc hiệu, rồi thắng nhờ nạp sau; và khai ĐỦ chữ nghĩa ở đây thay vì thừa
   hưởng, để trang nào cũng vẽ giống trang nào. */
h3.hh-head { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
             font-size: var(--fs-2); font-weight: 600; text-transform: none; letter-spacing: normal;
             color: var(--ink); margin: 0 0 10px; }
.hh-head:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
/* Mũi tên gập/mở: MỘT icon `chevron` xoay, thay hai ký tự ▸/▾. Trạng thái gập là
   `rotate(-90deg)`, mở là 0 — một hình xoay đọc ra "cùng một thứ đang đổi trạng thái",
   trong khi hai ký tự khác nhau đọc ra hai thứ. Thời lượng/đường cong lấy token, có
   sẵn dự phòng theo luật ghi ở đầu tệp này. */
.hh-caret { display: flex; align-items: center; flex: none; color: var(--muted, #526676);
            transform: rotate(-90deg);
            transition: transform var(--dur-1, 120ms) var(--ease-out, cubic-bezier(.22, .8, .3, 1)); }
h3.hh-head.open .hh-caret { transform: none; }
@media (prefers-reduced-motion: reduce) { .hh-caret { transition: none; } }
.hh-ico { display: flex; align-items: center; flex: none; opacity: .75; }
/* Con số tổng đẩy sang phải: nó là thứ đọc được khi thẻ đang GẬP, nên phải nằm trên
   cùng hàng với tiêu đề chứ không rơi xuống thân thẻ. */
.hh-count { margin-left: auto; font-size: var(--fs-1); font-weight: 600; color: var(--brand); text-transform: none; letter-spacing: 0; }
.hh-body { display: grid; gap: 2px; }
.hh-empty { font-size: var(--fs-1); color: var(--muted); padding: 6px 0; }
.hh-warn { font-size: var(--fs-1); color: var(--warn); background: var(--warn-soft); border-left: 3px solid var(--warn-line); border-radius: 0 6px 6px 0; padding: 7px 10px; margin: 4px 0 8px; line-height: 1.45; }

/* DÒNG THỜI GIAN (CRM-362): mỗi lần liên hệ là một nấc trên MỘT trục dọc bên trái, đốm màu
   theo loại nằm ngay trên trục — thay cho vạch ngang ngăn từng dòng. Danh sách vốn đã xếp mới
   nhất trước; trục làm cho điều ấy đọc được bằng mắt, và bỏ được mười mấy vạch ngang trong một
   cột phải hẹp. Trục là `::after` của TỪNG dòng (không phải của khung) nên dòng mở khay chi tiết
   (`.hh-detail`) tự kéo dài trục theo, và dòng đầu/cuối cắt trục đúng ở đốm. */
.hh-row { position: relative; padding: 8px 6px 8px 20px; border-radius: 6px; cursor: pointer; }
/* `bottom: -2px` nối trục qua khe `gap: 2px` của `.hh-body` — thiếu thì trục đứt quãng giữa mọi dòng. */
.hh-row::after { content: ""; position: absolute; left: 6px; top: 0; bottom: -2px; width: 1px; background: var(--line-2); }
.hh-body > .hh-row:first-child::after { top: 15px; }
.hh-row:last-of-type::after { bottom: auto; height: 15px; }
.hh-body > .hh-row:first-child:last-of-type::after { display: none; }
.hh-row .hh-chip::before { position: absolute; left: 3px; top: 12px; z-index: 1; }
.hh-row:hover { background: var(--surface-2); }
.hh-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Dòng ĐANG XEM: nền riêng, để mắt đọc nó như "đây là chỗ tôi đang đứng" chứ không như một lần
   liên hệ trước. Cùng lề với mọi dòng — đốm của nó vẫn nằm đúng trên trục. */
.hh-row.now { background: var(--brand-soft); }
.hh-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hh-when { font-size: var(--fs-1); color: var(--muted); }
.hh-rec { display: inline-flex; align-items: center; font-size: var(--fs-1); margin-left: auto; color: var(--muted); }
.hh-title { font-size: var(--fs-1); line-height: 1.4; margin-top: 2px; }
.hh-ch { color: var(--muted); }
.hh-sub { font-size: var(--fs-1); color: var(--muted); line-height: 1.45; }
.hh-sum { font-size: var(--fs-1); color: var(--ink-2); line-height: 1.45; margin-top: 4px; padding-left: 8px; border-left: 2px solid var(--line); }

/* Chip loại: viền + đốm cùng màu chữ. Bảy màu KHÁC NHAU vì bảy loại là bảy thứ khác
   nhau, và mắt phải phân biệt được chúng khi cuộn nhanh. */
/* CRM-364: bỏ viền quanh chip — đốm màu + chữ là đủ phân biệt bảy loại; viền cùng màu chữ là
   mã hoá lần thứ ba cho cùng một ý, và bảy khung màu dọc dòng thời gian là bảy điểm sáng. */
.hh-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-1); font-weight: 500; white-space: nowrap; }
.hh-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hh-chip.chat { color: var(--brand); }
.hh-chip.call { color: var(--info); }
.hh-chip.ticket { color: var(--warn); }
/* KHONG dung var(--mya) cho viec: quy tac he thiet ke ghi "tim = CHI danh cho Mya —
   thay tim la biet may dang noi, khong phai nguoi". Mot tac vu do NGUOI tao ra, nen lay
   tim la noi doi mot cach im lang. Bay sac ket thuc o nam sac co nghia (teal/xanh/vang/
   do/luc) da phan het cho chat/goi/su vu/hen goi lai/chuyen giao, nen viec lay mot sac
   TRUNG TINH dam — dung la no khong phai mot trang thai. */
.hh-chip.task { color: var(--ink-2); }
.hh-chip.note { color: var(--muted); }
.hh-chip.callback { color: var(--bad); }
.hh-chip.handover { color: var(--ok); }

/* Ô trạng thái: ba sắc thái, mỗi sắc thái một nghĩa dứt khoát — chữ màu, không tô nền (CRM-364). */
.hh-tag { font-size: var(--fs-1); font-weight: 500; white-space: nowrap; }
.hh-tag.ok { color: var(--ok); }
.hh-tag.warn { color: var(--warn); }
.hh-tag.plain { color: var(--muted); }

.hh-more, .hh-open { display: block; margin-top: 8px; font-size: var(--fs-1); font-weight: 600; color: var(--brand); text-decoration: none; }
.hh-more:hover, .hh-open:hover { text-decoration: underline; }

.hh-detail { margin-top: 7px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; }
.hh-dsec { font-size: var(--fs-1); display: grid; gap: 4px; }
.hh-dsec > b { font-size: var(--fs-1); font-weight: 600; color: var(--muted); }
.hh-drow { display: flex; align-items: center; gap: 8px; }
.hh-drow > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-dsec audio { width: 100%; height: 32px; }