/* ==========================================================================
   BULBAL CONTACTS — Danh sách hội thoại (sidebar)
   ==========================================================================
   Sở hữu độc quyền của Phase 02 (plan bulbal-chat-ui-theme).
   Vùng được phép: .scrollable-panel (chỉ padding/scroll) + ul.contact-box và
   MỌI THỨ BÊN TRONG (li, .avatar-box, .lettertile, .online/.offline,
   .text-box, .contact-title, .contact-comment, .unread, .menuTrigger).
   KHÔNG viết selector trần .menuTrigger / .avatar-box (dùng chung với khung
   chat của Phase 03) — luôn có tiền tố ".contact-box ".

   Quy tắc: mọi màu qua var(--bb-*) khai báo ở bulbal-tokens.css (Phase 01).
   File này không hardcode màu, không ép mức ưu tiên CSS cao bất thường.

   GHI CHÚ QUAN TRỌNG — lệch mockup có chủ đích (xem report để rõ lý do):
   1) Đã LOẠI BỎ mọi CSS cho lớp giờ-tin-cuối (mockup gọi là "contact time"):
      phần tử này KHÔNG TỒN TẠI trong DOM thật (contact.jsx không render giờ
      tin cuối ở dòng hội thoại). Mockup vẽ có nhưng đó là hư cấu — CSS
      không bịa ra được nội dung, nên khoảng trống đó không được style ở đây.
   2) "span.unread" (badge số chưa đọc) nằm ở HÀNG TÊN (div:first-child của
      .text-box), KHÔNG phải hàng preview như mockup vẽ — bám đúng
      contact.jsx:137-142.
   ========================================================================== */

/* ── Vùng cuộn danh sách — chỉ padding, không đụng overflow/height (base lo) ── */
.scrollable-panel {
  padding-top: 6px;
  padding-bottom: 12px;
}

/* ── Khung ul, bỏ bullet, chừa lề ngang cho hàng bo góc "thở" ── */
ul.contact-box {
  list-style: none;
  margin: 0;
  padding: 0 8px;
}

/* ── Hàng hội thoại: khung + trạng thái ─────────────────────────────────── */
.contact-box > li {
  position: relative; /* làm mốc cho ::before (vạch chọn) và .menuTrigger absolute */
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: var(--bb-row-h);
  padding: 10px 10px 10px 12px;
  border-radius: var(--bb-r-row);
  cursor: pointer;
  /* Ghi đè gradient viền dưới của base (border giả bằng background-image) —
     kiểu Telegram/Zalo không kẻ đường phân cách giữa các hàng. */
  background: transparent;
  transition: background-color var(--bb-dur) var(--bb-ease), transform var(--bb-dur) var(--bb-ease);
}

.contact-box > li:hover {
  background-color: var(--bb-hover);
}

.contact-box > li:active {
  transform: scale(0.985);
}

.contact-box > li.selected,
.contact-box > li.selected:hover {
  background-color: var(--bb-sel);
}

/* Vạch thương hiệu bên trái cho hàng đang chọn — vẽ bằng ::before, không thêm DOM */
.contact-box > li.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 34px;
  border-radius: 0 4px 4px 0;
  background-color: var(--bb-brand-600);
}

/* Hội thoại đã ghim — phân biệt nhẹ, cùng tông với hover (không cần đổi khi hover) */
.contact-box > li.tpinned {
  background-color: var(--bb-hover);
}

/* ── Avatar + chấm trạng thái online/offline ────────────────────────────── */
.contact-box .avatar-box {
  width: var(--bb-avatar);
  height: var(--bb-avatar);
  min-width: var(--bb-avatar);
  min-height: var(--bb-avatar);
  margin-right: 0; /* khoảng cách đã do "gap" của li lo, khỏi cộng dồn với base */
}

.contact-box .avatar-box > .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-box .avatar-box > span.online,
.contact-box .avatar-box > span.offline {
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
  right: 1px;
  bottom: 1px;
  border: 2.5px solid var(--bb-bg-side);
}

/* Hàng đang chọn: đổi viền chấm sang màu nền đang chọn để không "nổi cộm" */
.contact-box > li.selected .avatar-box > span.online,
.contact-box > li.selected .avatar-box > span.offline {
  border-color: var(--bb-sel);
}

/* Icon "đã xoá" thay chỗ chấm online khi hội thoại bị xoá — chỉ đổi tông màu */
.contact-box .avatar-box > i.deleted.material-icons {
  background-color: var(--bb-bg-side);
  color: var(--bb-txt-3);
}

/* ── Khối chữ: cột [hàng tên] + [hàng preview] ──────────────────────────── */
.contact-box .text-box {
  flex: 1;
  min-width: 0; /* BẮT BUỘC — không có dòng này ellipsis của con sẽ không ăn */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* Hàng tên: title + i.as-badge (nhóm/kênh/verified/...) + span.unread */
.contact-box .text-box > div:first-child {
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.contact-box .contact-title {
  flex: 1;
  min-width: 0;
  font-size: var(--bb-fs-name);
  font-weight: 600;
  color: var(--bb-txt-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-box .text-box > div:first-child i.as-badge {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--bb-txt-3);
}

/* Badge số tin chưa đọc — luôn ở cuối hàng tên (đúng DOM thật), không đẩy vỡ title */
.contact-box .text-box > div:first-child span.unread {
  flex: 0 0 auto;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  margin: 0;
  border-radius: var(--bb-r-pill);
  background-color: var(--bb-brand-600);
  color: var(--bb-txt-on-brand);
  font-size: var(--bb-fs-meta);
  font-weight: 700;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Hàng preview: icon trạng thái gửi + nội dung tin cuối ──────────────── */
.contact-box .contact-comment {
  min-width: 0;
  font-size: var(--bb-fs-preview);
  font-weight: normal; /* base để "lighter", ghi đè cho đồng bộ độ đậm chữ phụ */
  color: var(--bb-txt-2);
}

.contact-box .contact-comment > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-box .contact-comment > i.material-icons {
  flex: 0 0 auto;
  margin-bottom: 0;
  color: var(--bb-txt-3);
}

/* Chữ phụ trên hàng đang chọn — nền --bb-sel làm giảm tương phản của --bb-txt-2,
   phải nâng lên --bb-txt-on-sel để không trượt AA (xem bảng token Phase 01). */
.contact-box > li.selected .contact-comment,
.contact-box > li.selected .contact-comment > span {
  color: var(--bb-txt-on-sel);
}

/* ── Nút menu 3 chấm — GIỮ position:absolute như base, chỉ chỉnh trình bày ── */
.contact-box .menuTrigger {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  line-height: normal;
  border-radius: 50%;
  background-color: transparent;
  display: grid;
  place-items: center;
  transition: background-color var(--bb-dur) var(--bb-ease), opacity var(--bb-dur) var(--bb-ease);
}

.contact-box > li:hover .menuTrigger {
  opacity: 1;
}

.contact-box .menuTrigger a > i.material-icons {
  color: var(--bb-txt-3);
  transition: color var(--bb-dur) var(--bb-ease);
}

.contact-box .menuTrigger:hover {
  background-color: var(--bb-hover);
}

.contact-box .menuTrigger:hover a > i.material-icons {
  color: var(--bb-txt-1);
}

/* ── Mobile ≤640px: hàng cao hơn, nhường menu cho vuốt ─────────────────── */
@media (max-width: 640px) {
  .contact-box > li {
    min-height: 76px;
  }

  .contact-box .menuTrigger {
    display: none;
  }
}