/* ══════════════════════════════════════════════════════════════════
   BULBAL CHAT — BẢNG GỢI Ý @MENTION (phase-02, 260730)
   Sở hữu độc quyền: css/bulbal-mention.css (Phase 02)
   Vùng: .bulbal-mention-panel (con của #send-message-wrapper) — neo Y HỆT
   .bulbal-emoji-panel (đọc css/bulbal-emoji.css, KHÔNG sửa) để 2 bảng luôn
   nằm đúng 1 chỗ. send-message.jsx đảm bảo 2 bảng LOẠI TRỪ NHAU (mở cái này
   tự đóng cái kia) — xem báo cáo phase-02, không cần z-index khác nhau vì
   không bao giờ cả 2 cùng render.
   Nạp SAU css/bulbal-emoji.css (P05 thêm <link>, xem báo cáo phase-02).
   Mọi màu PHẢI dùng var(--bb-*) khai báo ở css/bulbal-tokens.css. CẤM hardcode
   hex/rgba trong file này, CẤM mọi khai báo có cờ ép mức ưu tiên (dấu chấm
   than + chữ "important" liền sau thuộc tính CSS).

   🔴 CẢNH BÁO BẪY CHÍ MẠNG — CHÉP NGUYÊN VĂN TỪ bulbal-emoji.css (đọc kỹ
   trước khi sửa file này):
   src/widgets/send-message.jsx (dòng 102, 119) dò desktop/mobile bằng cách so
   sánh CHÍNH XÁC computed style của ô nhập tin — thuộc tính CSS ghép chữ
   "transition" + "-property" — với chuỗi 'all'.
   bulbal-composer.css mục 6.1 đã ép lại đúng 1 giá trị 'all' cho ô nhập tin
   (id "send-message-input") CHỈ ở desktop (>640px) để sentinel này hoạt động
   đúng. File này TUYỆT ĐỐI KHÔNG được khai báo bất kỳ rule đổi dần
   (transition) nào chạm vào phần tử ô nhập tin nói trên, dù trực tiếp hay
   qua selector cha lan xuống. Muốn hiệu ứng cho panel mention, khai báo
   trên chính .bulbal-mention-panel / .bulbal-mention-item — không bao giờ
   trên ô nhập tin.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Neo panel — bulbal-emoji.css đã đặt position:relative cho
   #send-message-wrapper (thường nạp trước file này). Khai lại Y HỆT ở đây để
   file này TỰ ĐỦ, không phụ thuộc thứ tự nạp với riêng bulbal-emoji.css —
   cùng giá trị, idempotent, không xung đột (2 rule cùng specificity ID, ai
   nạp sau thắng nhưng giá trị giống hệt nên không có gì để "thắng"). ── */
#send-message-wrapper {
  position: relative;
}

/* ── 2. Panel nổi phía TRÊN ô soạn tin — kích thước/vị trí Y HỆT
   .bulbal-emoji-panel (xem giải thích đầy đủ về hằng số 24px/10px ở
   bulbal-emoji.css mục 2) để 2 bảng luôn nằm đúng 1 chỗ, không giật hình khi
   chuyển từ bảng này sang bảng kia. z-index:30 = cùng quy ước "nổi lên trên
   mọi thứ" đã dùng cho bảng emoji (không cần khác nhau vì không bao giờ cả 2
   cùng mở, xem đầu file). ── */
.bulbal-mention-panel {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 100%;
  margin-bottom: 8px;
  max-width: var(--bb-chat-max);
  margin-inline: auto;
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 30;
  padding: 4px;
  background: var(--bb-bub-in);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-composer);
  box-shadow: var(--bb-sh-2);
}

/* ── 3. Danh sách — role="listbox" khai ở JSX, đây chỉ là trình bày. ── */
.bulbal-mention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── 4. Mỗi dòng — R9 bắt buộc vùng chạm ≥ var(--bb-touch) ở MỌI kích thước
   màn hình (KHÁC bảng emoji chỉ ép 44px từ 640px trở xuống): đây là danh
   sách NGƯỜI thật, bấm nhầm người khác nặng hơn bấm nhầm 1 emoji, nên không
   thu nhỏ ở desktop. transition chỉ áp cho .bulbal-mention-item (KHÔNG bao
   giờ cho ô nhập tin — xem cảnh báo đầu file). ── */
.bulbal-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--bb-touch);
  padding: 4px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--bb-txt-1);
  transition: background var(--bb-dur) var(--bb-ease);
}

.bulbal-mention-item:hover {
  background: var(--bb-hover);
}

.bulbal-mention-item[aria-selected="true"] {
  background: var(--bb-sel);
}

/* ── 5. Avatar/lettertile — base.css định kích thước avatar khác cho ngữ
   cảnh sidebar/topic-header, ép riêng về khung tròn 36px cho hàng gợi ý. ── */
.bulbal-mention-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

.bulbal-mention-avatar .lettertile,
.bulbal-mention-avatar .avatar,
.bulbal-mention-avatar img {
  width: 36px;
  height: 36px;
  border-radius: var(--bb-r-pill);
}

/* Icon thay avatar cho mục "@tất cả" (R7) — dùng var(--bb-brand) làm nền để
   phân biệt rõ với avatar người thật, tránh nhầm "tất cả" là 1 thành viên. */
.bulbal-mention-all-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--bb-r-pill);
  background: var(--bb-brand);
  color: var(--bb-txt-on-brand);
  font-size: 20px;
}

.bulbal-mention-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bulbal-mention-name {
  font-size: var(--bb-fs-name);
  color: var(--bb-txt-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulbal-mention-sub {
  font-size: var(--bb-fs-meta);
  color: var(--bb-txt-2);
}

.bulbal-mention-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--bb-txt-3);
  font-size: var(--bb-fs-preview);
}

/* ── 6. Mobile ≤640px — cùng breakpoint với bulbal-emoji.css/bulbal-composer.css,
   left/right 10px lặp lại padding ngang mobile của wrapper (lý do đầy đủ ở
   bulbal-emoji.css mục 5). Chiều cao dòng đã ≥ --bb-touch ở MỌI kích thước
   (mục 4) nên không cần khai lại ở đây. ── */
@media (max-width: 640px) {
  .bulbal-mention-panel {
    left: 10px;
    right: 10px;
  }
}

/* ── 7. Tôn trọng prefers-reduced-motion — chỉ trong vùng sở hữu của file này. ── */
@media (prefers-reduced-motion: reduce) {
  .bulbal-mention-item {
    transition-duration: .01ms;
  }
}