/* =============================================================================
 * bulbal-interactions.css — Phase 05 (đợt 3): 4 việc tương tác cần sửa JSX —
 * giờ tin cuối (B1), nút "Trả lời" nhanh (B2), khung xám lúc tải (B3), vạch
 * "Tin chưa đọc" (B4). Nạp SAU css/bulbal-contacts.css + css/bulbal-messages.css.
 * Mọi màu PHẢI qua var(--bb-*) khai báo ở bulbal-tokens.css — cấm hardcode
 * hex/rgba, cấm !important (không có ngoại lệ nào cần dùng ở file này).
 * ============================================================================= */

/* ── B1. Giờ tin cuối trên dòng hội thoại ─────────────────────────────────
 * contact.jsx render <span class="contact-ts"> NGAY SAU UnreadBadge, trong
 * div:first-child của .text-box (hàng tên) — đúng chỗ mockup vẽ. Root
 * `.contact-box .text-box > div:first-child` thuộc bulbal-contacts.css
 * (đợt 1, đã cho align-items:center;gap:8px + .contact-title{flex:1}); ở
 * đây CHỈ thêm rule cho con MỚI span.contact-ts, không sửa lại rule cha. */
.contact-box .text-box > div:first-child span.contact-ts {
  flex: 0 0 auto;
  font-size: var(--bb-fs-meta);
  color: var(--bb-txt-2);
  white-space: nowrap;
}

/* Hàng đang chọn: nền đổi sang --bb-sel làm --bb-txt-2 trượt AA ở chế độ
 * sáng (4.18:1, đo trong report) — đúng tiền lệ bulbal-contacts.css đã xử
 * lý y hệt cho .contact-comment, nâng lên --bb-txt-on-sel (6.66:1 sáng /
 * 9.85:1 tối, ĐẠT AA cả 2). */
.contact-box > li.selected .contact-ts {
  color: var(--bb-txt-on-sel);
}

/* ── B2. Nút "Trả lời" — smart ẩn/hiện khi hover bubble ───────────────────
 * Mặc định ẨN hẳn (opacity 0 + pointer-events none) → không đè chữ/timestamp.
 * Chỉ hiện khi hover/focus-within trên li tin nhắn, và CHỈ trên thiết bị có
 * hover thật (chuột). Cảm ứng (hover:none) giữ ẩn — tránh stuck :hover /
 * đè UI mobile (bug user báo 260803).
 * Vị trí: góc top-right bubble (slot menuTrigger đã bỏ). Chip nổi ngoài
 * chữ một chút (right/top âm nhẹ) để khi hiện cũng ít che nội dung. */
#scroller .bb-quick {
  position: absolute;
  top: -0.35rem;
  right: -0.2rem;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--bb-dur) var(--bb-ease),
    visibility var(--bb-dur) var(--bb-ease),
    transform var(--bb-dur) var(--bb-ease);
  transform: scale(0.92);
}
#scroller .bb-quick a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--bb-chip);
  border: 1px solid var(--bb-line);
  box-shadow: var(--bb-sh-2);
  color: var(--bb-txt-2);
  transition: background var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}
#scroller .bb-quick a i.material-icons {
  font-size: 15px;
}
/* Hit-box ≥44px, vòng tròn visual giữ nhỏ. */
#scroller .bb-quick a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--bb-touch);
  height: var(--bb-touch);
  transform: translate(-50%, -50%);
}
#scroller .bb-quick a:hover,
#scroller .bb-quick a:focus-visible {
  background: var(--bb-hover);
  color: var(--bb-brand-600);
}
#scroller .bb-quick a:focus-visible {
  outline: 2px solid var(--bb-brand);
  outline-offset: 2px;
}

/* Desktop / chuột: hiện khi rê vào cả dòng tin (li), không chỉ bubble. */
@media (hover: hover) and (pointer: fine) {
  #scroller > li:hover .bb-quick,
  #scroller > li:focus-within .bb-quick {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
  }
}

/* Cảm ứng: ẩn hẳn — không đè bubble (đã từng báo lỗi mobile). */
@media (hover: none), (pointer: coarse) {
  #scroller .bb-quick {
    display: none;
  }
}

/* ── B3. Khung xám lúc tải (skeleton) — CSS thuần, không sửa JSX ──────────
 * ĐÃ ĐỌC THẬT DOM trước khi viết (không đoán), phát hiện lệch key insight #4
 * của phase file — xem report mục B3 để biết chi tiết:
 *
 * 1) `ul.contact-box` KHÔNG BAO GIỜ render với 0 con — contact-list.jsx dòng
 *    ~169 chỉ render `<ul className="contact-box">` khi `contactNodes.length
 *    > 0`, ngược lại render `<div className="center-medium-text">` (khác
 *    phần tử). ⇒ `ul.contact-box:empty` KHÔNG BAO GIỜ khớp — bỏ hẳn theo
 *    đúng cho phép của Key Insight #4 ("nếu :empty không khớp thực tế, ghi
 *    lý do và bỏ B3"). `.center-medium-text` đã có chủ (Phase 03,
 *    bulbal-people.css) — không style thêm ở đây để tránh trùng phạm vi.
 * 2) `#scroller` CÓ render rỗng khi topic có 0 tin nhắn, NHƯNG
 *    messages-view.jsx dòng ~1706/1821: biến `chatBoxClass` (giá trị class
 *    "chat-box"/"chat-box group") chỉ được gán TRONG callback của
 *    `topic.messages()` — callback này KHÔNG chạy lần nào nếu 0 tin nhắn,
 *    nên `chatBoxClass` giữ nguyên `null` ban đầu ⇒ `<ul id="scroller">`
 *    render KHÔNG có class "chat-box" ⇒ selector `#scroller.chat-box:empty`
 *    (viết theo đúng bảng Architecture) SẼ KHÔNG BAO GIỜ khớp. Đã sửa thành
 *    `#scroller:empty` (bỏ yêu cầu `.chat-box`) — vẫn AN TOÀN vì toàn bộ
 *    style `#scroller.chat-box` của bulbal-messages.css cũng không áp dụng
 *    trong đúng trạng thái này (thiếu class), nên không có gì để đè/xung
 *    đột. Ghi nhận cho phase 06: đây là phát hiện ngoài phạm vi CSS-only
 *    của phase 05 (thuộc `messages-view.jsx`, đã sửa ở phase này rồi nhưng
 *    KHÔNG đụng biến chatBoxClass vì ngoài yêu cầu B4 — xem report).
 *
 * 🔴 SỬA 260730 — TRƯỚC ĐÂY Ở ĐÂY LÀ SKELETON NHẤP NHÁY ("đang tải"). SAI:
 * `#scroller` rỗng KHÔNG có nghĩa là đang tải — hội thoại thật sự chưa ai nhắn
 * câu nào cũng rỗng, và ở trạng thái đó skeleton nhấp nháy VĨNH VIỄN (đo thật:
 * còn nhấp sau 10 giây), người dùng tưởng app treo. CSS không phân biệt được
 * "đang tải" với "rỗng thật", nên chọn thông điệp đúng cho cả hai: một dòng chữ
 * mời nhắn, HIỆN SAU 600ms (animation-delay) để không loé lên khi mở hội thoại
 * đã có tin — tin về là `:empty` hết khớp, chữ biến mất trước khi kịp hiện. */
#scroller:empty {
  position: relative;
  display: block;
  /* Chiếm hết chiều cao panel để canh giữa được; đè margin-top:auto của
   * bulbal-messages.css (không còn ý nghĩa khi đã flex-grow).
   * ⚠️ margin PHẢI là 0, KHÔNG được `0 auto`: #messages-panel là flex CỘT nên
   * trục ngang là trục phụ — margin auto ngang huỷ `align-items:stretch`, phần
   * tử co về fit-content (~30px) và dòng chữ rớt mỗi từ một hàng. */
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  min-height: 160px;
}
#scroller:empty::before {
  content: 'Chưa có tin nhắn nào — gửi lời chào đầu tiên nhé';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  color: var(--bb-txt-2);
  font-size: var(--bb-fs-base);
  opacity: 0;
  animation: bb-empty-in 0.25s var(--bb-ease) 0.6s forwards;
}

@keyframes bb-empty-in {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Giữ nguyên độ trễ 0.6s (đó là logic chống loé, không phải hiệu ứng),
   * chỉ bỏ phần chuyển động mờ dần. */
  #scroller:empty::before {
    animation-duration: 0s;
  }
}

/* ── B4. Vạch "Tin chưa đọc" ───────────────────────────────────────────────
 * messages-view.jsx chèn <li class="meta bb-unread"/> RỖNG (không có
 * .bubble con, khác nhãn ngày li.meta thường). #scroller > li.meta
 * (bulbal-messages.css mục 8) đã cho position:sticky + margin — ĐỦ làm
 * containing block cho pseudo-element absolute ở đây, KHÔNG đặt lại
 * position để tránh đè rule cũ (đúng Key Insight #5 của phase file). Chữ
 * "Tin chưa đọc" đặt bằng content: (không thêm id i18n mới — tránh nở
 * phạm vi sang en.json/vi.json). */
#scroller > li.meta.bb-unread {
  /* li.meta thường (nhãn ngày) dùng align-self:center (mục 3,
   * bulbal-messages.css) và co theo nội dung — .bb-unread KHÔNG có nội
   * dung con (chỉ pseudo-element) nên width auto sẽ co về ~0, làm đường kẻ
   * left:0;right:0 bên dưới mất tác dụng. Ghi đè align-self CHỈ cho biến
   * thể này (không đụng rule chung của li.meta) để có bề ngang làm mốc. */
  align-self: stretch;
  height: 26px;
}
#scroller > li.meta.bb-unread::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bb-brand);
  transform: translateY(-50%);
}
#scroller > li.meta.bb-unread::after {
  content: 'Tin chưa đọc';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
  background: var(--bb-bg-chat);
  color: light-dark(var(--bb-brand-700), var(--bb-brand));
  font-size: var(--bb-fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── B5. Vùng chạm ≥44px cho các nút icon còn sót (audit 360px, 31/07/2026) ──
 * Quét thật ở 360×780 (Playwright) phát hiện: layout KHÔNG tràn ở màn nào, nhưng
 * một loạt nút icon vẫn ở kích thước desktop, dưới chuẩn chạm 44px:
 *   - menu ba chấm trên header hội thoại: 24×19  ← nặng nhất, đây là LỐI VÀO DUY
 *     NHẤT tới thông tin nhóm/thành viên trên điện thoại, mà nút "quay lại" ngay
 *     cạnh nó đã đúng 44×44 ⇒ lệch rõ khi ngón tay to.
 *   - nút đóng (X) panel thông tin: 38×38
 *   - HỦY / OK trong hộp thoại: 67×29
 *   - nút "trả lời"/"mở rộng" trên bong bóng tin: 19×19 và 24×19
 * Chỉ nới VÙNG CHẠM (padding/min-size), KHÔNG phóng to icon — giữ nguyên nét
 * thị giác. Đặt trong @media ≤640px để desktop giữ mật độ dày như cũ. */
@media (max-width: 640px) {
  /* Menu ba chấm + mọi nút trên thanh tiêu đề. Dùng selector THƯỜNG (không :has)
   * vì đây là nút quan trọng nhất và Android rẻ có thể chạy Chrome < 105 chưa hỗ
   * trợ :has; mọi <a> trong header đều nên đủ vùng chạm nên không cần lọc icon. */
  .caption-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--bb-touch);
    min-height: var(--bb-touch);
  }

  /* nút đóng panel (thông tin/thành viên/bảo mật) */
  #info-view .panel-title a,
  #info-view a:has(> i.material-icons.close) {
    min-width: var(--bb-touch);
    min-height: var(--bb-touch);
  }

  /* nút chữ trong hộp thoại (HỦY / OK / Xóa …) */
  .dialog-buttons .flat-button,
  .panel-form-row .flat-button,
  a.flat-button {
    min-height: var(--bb-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* CHƯA làm: nút "trả lời nhanh" (.bb-quick > a, 19×19) và "mở rộng"
   * (.menuTrigger > a, 24×19) trên bong bóng tin nhắn vẫn dưới chuẩn chạm.
   * Cố tình KHÔNG nới ở đây: đo thực tế cho thấy hai nút này đang nằm ĐÈ lên
   * chữ trong bong bóng (lỗi có sẵn, không phải do đợt này), phóng vùng chạm
   * lên 44px chỉ làm chỗ đè rộng thêm. Cần bố trí lại vị trí trước (đưa ra
   * ngoài mép bong bóng như Zalo) rồi mới nới vùng chạm — việc riêng. */

  /* Thanh tiêu đề 360px chỉ vừa: nút quay lại 44 + avatar 42 + tìm kiếm 44 +
   * menu 44 đã ăn gần hết bề ngang, nên cụm avatar "ai đang online"
   * (#topic-users) bóp tên nhóm xuống còn 12px — mất hẳn tên. Trạng thái online
   * đã có chấm xanh trên avatar chính, cụm này là trang trí ⇒ ẩn trên mobile,
   * trả bề ngang lại cho TÊN NHÓM, thứ người dùng thật sự cần đọc. */
  #topic-users {
    display: none;
  }

  /* Đo ở 360px: gap 13px × 6 khe ≈ 78px + padding 2×18px = 114px bay vào khoảng
   * trống, tên nhóm chỉ còn 80px. Siết gap/padding (CHỈ header hội thoại, không
   * đụng .caption-panel của sidepanel) để trả thêm ~50px cho tên. */
  #topic-caption-panel {
    gap: 6px;
    padding: 0 10px;
  }

  #topic-title-group {
    min-width: 0;
  }

  #topic-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}