/* ══════════════════════════════════════════════════════════════════
   BULBAL CHAT — HIỂN THỊ @NHẮC TÊN TRONG BONG BÓNG TIN (Phase 03, 260730)
   Sở hữu độc quyền: css/bulbal-mention-view.css (Phase 03, plan.md §Ma trận
   sở hữu file). Vùng: .mention/.mention-all bên trong #scroller (bong bóng
   tin), và li.bulbal-mention-me (tô sáng cả dòng tin nhắc tên mình).
   Nạp SAU css/bulbal-messages.css — P05 thêm <link>, xem báo cáo phase-03
   (dòng đề nghị: ngay sau css/bulbal-messages.css, cả index.html lẫn
   index-dev.html).
   Mọi màu PHẢI qua var(--bb-*) khai báo ở css/bulbal-tokens.css. CẤM hardcode
   hex/rgba, 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) trong file này.

   🔴 CẢNH BÁO — ĐỌC TRƯỚC KHI SỬA:
   bulbal-messages.css mục 11b đã ép màu chữ `.mention` = var(--bb-txt-on-brand)
   bằng cờ ép mức ưu tiên nói trên, riêng cho bong bóng GỬI ĐI (#scroller >
   li.right) — đây là NGOẠI LỆ DUY NHẤT của luật cấm cờ đó trong bộ CSS này,
   vì base.css gắn cờ tương tự cho cả 32 lớp .lt-fg-N/.dk-fg-N (không cách
   nào thắng bằng specificity thường). File NÀY tuyệt đối KHÔNG được đổi
   `color` của `.mention` trong bong bóng gửi đi — chỉ thêm NỀN (background),
   dùng color-mix(...currentColor...) để tự động khớp màu chữ hiện có (trắng
   ở bong bóng gửi, dk-fg-N/lt-fg-N ở bong bóng nhận) mà không cần biết trước
   giá trị màu, tránh mọi xung đột với quy tắc ép mức ưu tiên nói trên.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Chip @nhắc tên — nền nhạt + chữ đậm (R1). ─────────────────────────
 * background dùng currentColor: tự động ăn theo màu chữ đang áp dụng (màu
 * theo người ở bong bóng nhận qua idToColorClass -> dk-fg-N/lt-fg-N, hoặc
 * trắng bị ép ở bong bóng gửi bằng cờ ép mức ưu tiên nói trên) — không cần
 * rule riêng cho từng trường hợp sáng/tối/gửi/nhận, và không đụng vào color
 * nên không xung đột với bulbal-messages.css mục 11b. */
#scroller .message-content .mention {
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 6px;
  padding: 0 .3em;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--bb-dur) var(--bb-ease);
}
#scroller .message-content .mention:hover {
  background: color-mix(in srgb, currentColor 26%, transparent);
}

/* ── 2. @tất cả — KHÔNG phải một người cụ thể (R3/R4): màu cảnh báo riêng,
 * không dùng idToColorClass (formatters.js đã cố tình bỏ qua class dk/lt-fg
 * khi data.val === MENTION_ALL_VAL) nên .mention-all hoàn toàn tự chủ màu.
 * Ở bong bóng GỬI ĐI, chữ vẫn bị ép trắng bởi mục 11b (chấp nhận, xem cảnh
 * báo đầu file) — nền cảnh báo dùng color-mix trên currentColor+warn để vẫn
 * đọc được trên nền xanh lẫn nền bong bóng nhận. Không bấm được -> cursor
 * mặc định (R4), không có :hover riêng. */
#scroller .message-content .mention.mention-all {
  color: var(--bb-warn);
  background: color-mix(in srgb, var(--bb-warn) 22%, transparent);
  cursor: default;
}

/* ── 3. Tô sáng cả dòng khi tin nhắc tên mình (R2) — bám <li>, KHÔNG bám
 * .bubble (Key Insight #7: .author nằm ngoài .bubble, tô ở .bubble sẽ lệch
 * so với dòng tên người gửi). Vạch cạnh 3px + nền rất nhạt, hoạt động cả
 * sáng lẫn tối vì --bb-brand không đổi theo light-dark(). */
#scroller > li.bulbal-mention-me {
  position: relative;
  background: color-mix(in srgb, var(--bb-brand) 7%, transparent);
  border-radius: 10px;
}
#scroller > li.bulbal-mention-me::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--bb-brand);
}

/* ── 4. Tôn trọng prefers-reduced-motion — CHỈ trong vùng sở hữu ─────────── */
@media (prefers-reduced-motion: reduce) {
  #scroller .message-content .mention {
    transition: none;
  }
}