/* =============================================================================
 * bulbal-people.css — NHÓM & DANH BẠ của Bulbal Chat (nạp SAU css/base.css +
 * bulbal-tokens.css + bulbal-contacts.css, cùng lớp với bulbal-{shell,messages,
 * composer,forms,panels}.css — Phase 03, đợt 3, 2026-07-29/30).
 *
 * Sở hữu độc quyền: css/bulbal-people.css (file MỚI, không sửa file nào khác).
 * CHỈ dùng var(--bb-*) khai báo ở bulbal-tokens.css — KHÔNG hardcode màu.
 * KHÔNG !important (không có trường hợp nào trong file này cần vượt base.css ở
 * đúng thuộc tính — mọi override đều thắng qua specificity bằng/hơn + đứng SAU
 * trong nguồn, giống quy ước bulbal-contacts/forms/panels.css).
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * BẢNG ĐỐI CHIẾU CHỐNG TRÙNG (bắt buộc trước khi viết dòng CSS đầu tiên —
 * grep thật, không đoán, xem báo cáo kèm phase để có lệnh grep + số dòng):
 *
 *  - span.unread            → bulbal-contacts.css:157 (ĐÃ XONG đợt 1). KHÔNG
 *                              viết lại ở đây (Key Insight #1 phase file).
 *  - ul.contact-box + MỌI li → bulbal-contacts.css (kể cả <li class="action">
 *    của ContactAction — base.css:1363 `.contact-box > li.action` VÀ base.css:
 *    1467 `.contact-box .action-text` đã tồn tại ngay trong lõi Tinode, nghĩa
 *    là `.action`/`.action-text` LUÔN nằm trong .contact-box). ⇒ mục "4.
 *    contact-action.jsx" của bảng kiến trúc phase file mâu thuẫn với chính bảng
 *    CẤM CHẠM của phase file (đã ghi vào report, coi CẤM CHẠM là hợp đồng cao
 *    hơn) — KHÔNG viết `.action`/`.action-text` ở đây.
 *  - i.as-badge / ContactBadges → CHỈ 3 nơi dùng trong toàn repo: contact.jsx
 *    (trong .contact-box, đã trên), side-navbar.jsx #sidepanel-title và
 *    messages-view.jsx #topic-title (cả 2 đều trong vùng ký hiệu "*" của
 *    bulbal-shell.css — #side-caption-panel* và #topic-caption-panel* — đợt 1).
 *    ⇒ "mục 5" của bảng kiến trúc phase file KHÔNG có phạm vi trống nào cho
 *    Phase 03 — bỏ, ghi report.
 *  - .doc-card, #image-preview, #image-preview-container → the-card-preview.jsx
 *    dùng CHUNG 2 id này với image-preview.jsx/video-preview.jsx/doc-preview.jsx
 *    (Phase 01, media). Không còn tổ tiên nào khác để scope theo đúng luật —
 *    bỏ hẳn "mục 2" (the-card-preview.jsx), ghi report.
 *  - .contact-box.small avatar/hàng → base.css:1344 (.contact-box.small > li)
 *    và base.css:1425 (.contact-box.small .avatar-box) ĐÃ có specificity CAO
 *    HƠN rule chung của bulbal-contacts.css (3 lớp so với 2 lớp) ⇒ tự thắng bất
 *    kể thứ tự nạp file, KHÔNG bị đè, màu đã bridge sẵn qua tokens.css. Viết
 *    thêm ở đây là trùng lặp vô nghĩa — bỏ phần "hàng nhỏ" của mục 7, CHỈ giữ
 *    lại `.center-medium-text` (thật sự trống, xem bên dưới).
 *  - .panel-form-row/-column, a.flat-button*, .chip-input*, ul.menu* → đã có
 *    chủ (panels.css/forms.css đợt 2). Không viết bất kỳ selector nào bắt đầu
 *    bằng các chuỗi này. Với nút "Chat/Save" trong the-card-mini.jsx: base.css
 *    tự nó dùng `.contact-card .contact-actions a` (KHÔNG phải `a.flat-button`)
 *    ở dòng 3633 — nên style ở đây theo ĐÚNG selector `a` hậu duệ đó (không
 *    chứa chuỗi "flat-button"), vừa nằm trong root sở hữu của tôi
 *    (.contact-card .contact-actions), vừa không trùng ký tự với vùng cấm.
 *  - .badge (tag-manager.jsx) → không có tổ tiên ổn định (TagManager render
 *    trong .panel-form-column trần, không id/class riêng) mà không đụng vùng
 *    cấm; bare `.badge` sẽ lan vào .contact-box (ContactBadges "you"/"owner").
 *    Bỏ, ghi report.
 *  - group-subs.jsx `#topic-users .avatar-box` → nằm trong #topic-caption-panel
 *    (bulbal-shell.css, ký hiệu "*" = toàn bộ con). Bỏ, ghi report.
 *
 * Kết luận: phạm vi THẬT còn lại của Phase 03 chỉ có 3 việc — .contact-card
 * (mục 1), .chip (mục 3), .center-medium-text (phần thật trống của mục 7).
 * Đúng như cảnh báo của phase file: "ranh giới hẹp nhất đợt 3".
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DANH THIẾP (vCard) trong tin nhắn — the-card-mini.jsx ────────────────
 * DOM: .contact-card > .contact-body(.avatar-box + .name-box(.name + .org))
 *      + .contact-actions(a.flat-button[+.divider]... )
 * Ý đồ: thẻ nền --bb-bg-side, bo --bb-r-row, bóng --bb-sh-2 (đồng bộ ngôn ngữ
 * "card" dùng ở nơi khác của bộ theme này). */
.contact-card {
  background-color: var(--bb-bg-side);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-row);
  box-shadow: var(--bb-sh-2);
  /* overflow:hidden để 2 khối con (contact-body bo góc trên, contact-actions bo
     góc dưới theo base.css) tự cắt đúng theo bo góc NGOÀI var(--bb-r-row) mới,
     khỏi phải khai lại border-radius ở 2 nơi con — DRY. */
  overflow: hidden;
}

/* base.css để nền .contact-body = --clr-background-blue-gray-50 (bridge sẵn
 * sang --bb-hover, tokens.css đợt 1) — ĐỔI sang --bb-bg-side (đồng nhất với
 * nền ngoài .contact-card): đo được .org (--bb-txt-2) trên --bb-hover sáng chỉ
 * 4.34:1 (TRƯỢT AA chữ thường), trong khi trên --bb-bg-side đạt 4.76:1/6.92:1
 * cả 2 chế độ (xem bảng đo cuối file). Ranh giới thẻ giờ chỉ còn dựa vào
 * border-top của .contact-actions — đủ rõ, khớp phong cách phẳng của cả bộ
 * theme này. */
.contact-card .contact-body {
  background-color: var(--bb-bg-side);
  padding: 14px;
}

.contact-card .contact-body .name-box {
  gap: 3px;
}

.contact-card .contact-body .name-box .name {
  font-size: var(--bb-fs-title);
  font-weight: 600;
  letter-spacing: -.01em;
  /* Màu đã đúng qua --clr-text-primary → var(--bb-txt-1) (bridge tokens.css),
     không khai lại color. */
}

.contact-card .contact-body .name-box .org {
  font-size: var(--bb-fs-preview);
  font-weight: 500; /* base.css để 300 — quá mảnh với Be Vietnam Pro, khó đọc */
  margin-top: 1px;
  /* Màu đã đúng qua --clr-text-secondary → var(--bb-txt-2), không khai lại. */
}

/* Avatar to hơn cỡ gốc (1.8rem≈28.8px) cho rõ mặt người — dùng lại token
 * --bb-touch (44px) thay vì bịa số mới, vừa đủ lớn cho 1 danh thiếp gọn. */
.contact-card .avatar-box {
  width: var(--bb-touch);
  height: var(--bb-touch);
  font-size: 1.3rem;
}

/* Chữ cái trong lettertile khi danh thiếp không có ảnh — xem khối "ĐO TƯƠNG
 * PHẢN LETTERTILE" cuối file: 16/16 màu nền lt-bg-* TRƯỢT AA nặng với màu chữ
 * mặc định của Tinode (~1.0–2.0:1). Đây là lỗi có sẵn của base.css, ảnh hưởng
 * TOÀN APP (kể cả .contact-box của đợt 1, chưa ai vá) — không thể sửa tận gốc
 * ở đây (không có token màu "chữ lettertile cố định, không đổi theo theme" nào
 * trong bulbal-tokens.css, và không được sửa file đó). Áp dụng đúng cú pháp dự
 * án cho token còn thiếu: var(--bb-token-moi, var(--bb-token-cu)) — CHỈ trong
 * phạm vi sở hữu của tôi (.contact-card), yêu cầu Phase 06 bổ sung token thật
 * --bb-lettertile-text (đề xuất #1F2937, cố định không light-dark vì 16 màu
 * nền lt-bg-* cũng cố định không đổi theo theme) — xem report. */
.contact-card .avatar-box .lettertile > div {
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bb-lettertile-text, var(--clr-lettertile-default-text));
}

.contact-card .contact-actions {
  border-top: 1px solid var(--bb-line);
  padding: 4px;
}

/* Nút "Chat"/"Find"/"Save" — cố tình KHÔNG dùng selector chứa ".flat-button"
 * (vùng cấm của bulbal-panels.css). base.css:3633 tự nó style vị trí này bằng
 * hậu duệ `a` trần (.contact-card .contact-actions a{cursor:pointer}), nên style
 * theo ĐÚNG cách đó — khớp DOM thật, không mơ hồ, không trùng ký tự cấm. */
.contact-card .contact-actions a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bb-touch);
  padding: 6px 8px;
  border-radius: var(--bb-r-pill);
  font-size: var(--bb-fs-base);
  font-weight: 600;
  text-decoration: none;
  /* Sáng dùng brand-600 (5.17:1 trên --bb-bg-side trắng) — Tối dùng brand gốc
     sáng hơn (4.82:1 trên --bb-bg-side #111827); brand-600 ở tối chỉ 3.43:1,
     TRƯỢT AA chữ thường — xem bảng đo cuối file. */
  color: light-dark(var(--bb-brand-600), var(--bb-brand));
  transition: background-color var(--bb-dur) var(--bb-ease), color var(--bb-dur) var(--bb-ease);
}

.contact-card .contact-actions a:hover,
.contact-card .contact-actions a:focus-visible {
  background-color: var(--bb-hover);
  text-decoration: none;
}

.contact-card .contact-actions a:focus-visible {
  outline: 2px solid var(--bb-brand);
  outline-offset: -2px;
}

/* Vạch phân cách giữa 2 nút hành động — chọn ĐÚNG chuỗi selector base.css dùng
 * (.contact-card .contact-actions .divider, base.css:3637, 3 lớp) thay vì rút
 * gọn ".contact-card .divider" (2 lớp) như bảng kiến trúc phase file liệt kê —
 * rút gọn sẽ THUA specificity của base.css và không có tác dụng gì. Màu đã
 * đúng qua --clr-border-muted → var(--bb-line) (bridge), chỉ đổi kiểu viền cho
 * phẳng (flat) thay vì "groove" 3D cũ, khớp ngôn ngữ thiết kế Telegram/Zalo. */
.contact-card .contact-actions .divider {
  border-left-style: solid;
  opacity: 1;
}

/* ── 2. the-card-preview.jsx — KHÔNG VIẾT RULE (xem bảng đối chiếu đầu file) ─
 * #image-preview/#image-preview-container dùng chung với 3 widget media khác
 * (Phase 01); .doc-card = Phase 01; .panel-form-column = panels.css. Không còn
 * tổ tiên riêng nào để scope .group.quoted/.large.ellipsized mà không giẫm
 * chân phase khác. Bỏ hẳn, đã ghi report. */

/* ── 3. CHIP người nhận đơn — chip.jsx (dùng trong ChipInput của forms.css) ──
 * CẤM chạm .chip-input* (forms.css sở hữu khung bao ngoài + input con). Chỉ
 * style viên chip đơn + con của nó. */
.chip {
  background-color: var(--bb-chip);
  color: var(--bb-chip-txt);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-r-pill);
}

/* .chip .avatar-box giữ nguyên kích thước gốc (1.8rem, khớp chiều cao .chip) —
 * không đổi, chỉ chỉnh chữ cái lettertile bên trong (xem lý do thiếu token ở
 * mục 1). */
.chip .avatar-box .lettertile > div {
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bb-lettertile-text, var(--clr-lettertile-default-text));
}

/* Nút xoá "×" — base.css để 1.175rem≈18.8px, dưới ngưỡng yêu cầu thiết kế
 * "nút X ≥24px". */
.chip > a {
  width: 24px;
  min-width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 15px;
}

.chip > a:focus-visible {
  outline: 2px solid var(--bb-brand);
  outline-offset: 1px;
}

/* .chip .spacer — giữ nguyên base.css (chỉ là khoảng đệm giữ chỗ khi
 * noAvatar=true), không có gì cần đổi theo token màu. */

/* ── 4. contact-action.jsx — KHÔNG VIẾT RULE (xem bảng đối chiếu đầu file) ───
 * `<li class="action">`/`.action-text` LUÔN là con của `ul.contact-box`
 * (ContactAction chỉ được ContactList dùng, không nơi nào khác) — base.css
 * dòng 1363/1467 đã tự chứng minh 2 class này thuộc lõi ".contact-box > li".
 * Thuộc bulbal-contacts.css (CẤM CHẠM: ".contact-box > li*"). Mâu thuẫn với
 * bảng kiến trúc gốc của phase file — đã ghi report, ưu tiên bảng CẤM CHẠM. */

/* ── 5. contact-badges.jsx (i.as-badge) NGOÀI .contact-box — KHÔNG VIẾT RULE ─
 * ContactBadges chỉ dùng ở 3 nơi trong toàn repo: contact.jsx (trong
 * .contact-box, đã có chủ), side-navbar.jsx #sidepanel-title và
 * messages-view.jsx #topic-title (cả 2 thuộc vùng "*" của bulbal-shell.css).
 * Không còn ngữ cảnh nào khác để mục này có phạm vi — bỏ, đã ghi report. */

/* ── 6. letter-tile.jsx (.lettertile scope card/chip, .avatar.self) ──────────
 * Đã lồng vào mục 1 (.contact-card .avatar-box .lettertile) và mục 3
 * (.chip .avatar-box .lettertile) — không tách mục riêng để tránh selector mồ
 * côi. `.avatar.self` KHÔNG cần rule riêng: img.avatar{width:100%;height:100%}
 * + img.avatar.self{padding:7%} của base.css đã responsive theo kích thước
 * .avatar-box cha (đã đổi ở mục 1) — viết thêm sẽ là rule chết (không đổi gì). */

/* ── 7. contact-list.jsx — .contact-box.small + .center-medium-text ─────────
 * .contact-box.small (hàng gọn trong permissions-editor.jsx): ĐÃ ĐỦ từ
 * base.css (dòng 1344 + 1425, specificity 3-lớp thắng rule 2-lớp của
 * bulbal-contacts.css bất kể thứ tự nạp file) + màu đã bridge sẵn qua
 * tokens.css. KHÔNG viết gì thêm — xem chứng minh specificity ở bảng đối
 * chiếu đầu file + report.
 * .center-medium-text (trạng thái rỗng "không có liên hệ nào") — THẬT SỰ
 * TRỐNG, chỉ dùng 1 nơi duy nhất (contact-list.jsx), base.css không set màu
 * (kế thừa màu ambient) và cỡ chữ 1.4rem hơi to/nặng cho 1 dòng thông báo phụ. */
.center-medium-text {
  color: var(--bb-txt-2);
  font-size: var(--bb-fs-base);
  font-weight: 500;
  line-height: 1.5;
  padding: 24px;
}

/* ── 8. group-manager.jsx / group-subs.jsx / tag-manager.jsx — KHÔNG VIẾT RULE
 * group-manager.jsx: chỉ tái dùng .panel-form-row (panels.css), ChipInput
 * (.chip-input, forms.css), ContactList (.contact-box, contacts.css), button
 * (forms.css). #group-manager/#group-manager-buttons là id KHÔNG bị vùng nào
 * chiếm nhưng cũng KHÔNG có nhu cầu trình bày riêng (mọi phần tử con đã có
 * style qua con đường khác) — không có gì để viết.
 * group-subs.jsx: `#topic-users .avatar-box` nằm TRONG #topic-caption-panel
 * (bulbal-shell.css, ký hiệu "*" nghĩa là toàn bộ con) — KHÔNG có phạm vi
 * trống cho Phase 03 dù bảng kiến trúc gốc gợi ý vậy. Đã ghi report.
 * tag-manager.jsx: `<span class="badge">` cho tag không có tổ tiên ổn định mà
 * không đụng .panel-form-column (cấm) hoặc lan vào .contact-box (ContactBadges
 * "you"/"owner" cũng dùng bare .badge). Bỏ, đã ghi report. */

/* =============================================================================
 * ĐO TƯƠNG PHẢN (WCAG relative luminance chuẩn, tự tính bằng script tại
 * scratch/scripts/wcag-contrast.mjs pattern — xem report kèm phase để có toàn
 * bộ số + code tính).
 *
 * .contact-card .name (--bb-txt-1) / --bb-bg-side:      17.85:1 sáng · 15.23:1 tối [AA]
 * .contact-card .org (--bb-txt-2) / --bb-bg-side (ĐÃ đổi nền .contact-body,
 *   xem ghi chú mục 1):                                  4.76:1 sáng · 6.92:1 tối [AA]
 *   (nếu vẫn để nền gốc --bb-hover: chỉ 4.34:1 sáng — TRƯỢT AA chữ thường, đây
 *   là lý do đổi nền thay vì chỉ đổi màu chữ)
 * .contact-card .contact-actions a (light-dark(brand-600,brand)) / --bb-bg-side:
 *   5.17:1 sáng [AA] · 4.82:1 tối [AA] (brand-600 thuần ở tối chỉ 3.43:1 — đã
 *   đổi sang --bb-brand cho nhánh tối để đạt AA)
 * .chip (--bb-chip-txt) / --bb-chip:                     7.58:1 sáng · 9.85:1 tối [AA]
 * .center-medium-text (--bb-txt-2) / --bb-bg-side:       4.76:1 sáng · 6.92:1 tối [AA]
 *
 * .lettertile — 16 màu nền lt-bg-0..15 × chữ mặc định base.css (#fafafa/​
 * #dcdcdc, alpha .8, KHÔNG đổi bởi file này ở nơi khác ngoài .contact-card/
 * .chip): TRƯỢT AA TRÊN CẢ 16 MÀU, cả 2 chế độ (dải 1.04:1–1.98:1 sáng,
 * 1.04:1–1.58:1 tối) — lỗi có sẵn toàn app, KHÔNG phải do phase 03 gây ra, chỉ
 * phát hiện. Đề xuất fix (đã verify bằng script): màu chữ cố định #1F2937 (bất
 * kể chế độ, vì 16 nền lt-bg-* cũng cố định) đạt 6.08:1–12.54:1 trên cả 16 màu
 * — ĐẠT AA rộng rãi. Áp trong phạm vi sở hữu (.contact-card, .chip) qua cú
 * pháp var(--bb-lettertile-text, var(--clr-lettertile-default-text)); CHƯA có
 * hiệu lực thật cho tới khi Phase 06 thêm token --bb-lettertile-text vào
 * bulbal-tokens.css. .contact-box .lettertile (đợt 1, sidebar chính) CÓ CÙNG
 * lỗi và CHƯA được vá ở bulbal-contacts.css — cần Phase 06 lan cùng 1 token
 * sang đó để tránh 2 màu chữ lettertile khác nhau giữa sidebar và card/chip.
 * ============================================================================= */