/* Phân hệ Nhắn riêng (tr-). Bong bóng, ô gửi dùng lại lớp td-* của pb-trao-doi.css. Chỉ dùng token của app.css. */

.tr-chip-so { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px;
  background: var(--do); color: #fff; font-size: .6875rem; font-weight: 700; vertical-align: 1px; }

/* Danh sách hội thoại: cả hàng bấm được */
.tr-ds { padding-top: 4px; padding-bottom: 4px; }
.tr-hang { position: relative; align-items: center; }
.tr-hang:hover { background: var(--bg); }
.tr-lk::before { content: ""; position: absolute; inset: 0; }
.tr-hang__dau { display: flex; align-items: baseline; gap: 0; min-width: 0; }
.tr-hang__dau .vt { flex: none; white-space: nowrap; }
.tr-hang__dau .tr-lk { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-hang__luc { margin-left: auto; padding-left: 8px; flex: none; font-size: .75rem; color: var(--phu); }
.tr-hang__tom { display: flex; align-items: center; gap: 8px; color: var(--phu); font-size: .9375rem; }
.tr-hang__tom > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-hang--moi .tr-hang__tom { color: var(--chu); font-weight: 600; }
.tr-hang--moi .tr-hang__luc { color: var(--c-dam); font-weight: 700; }

/* Chọn người để nhắn mới */
.tr-moi { margin-bottom: 14px; }
.tr-moi > summary { list-style: none; }
.tr-moi > summary::-webkit-details-marker { display: none; }
.tr-moi[open] > summary { background: var(--c-dam); border-color: var(--c-dam); }
.tr-moi__khung { margin: 10px 0 0; }
.tr-chon { margin-top: 8px; max-height: 50vh; overflow-y: auto; }
.tr-chon .ds__muc { position: relative; align-items: center; padding: 10px 0; }
.tr-chon .ds__muc[hidden] { display: none; }
.tr-khong-thay { margin: 10px 0 0; }

/* Đầu hội thoại */
.tr-dau { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.tr-dau > .nut-bt { margin-left: -10px; }
.tr-dau__ten { min-width: 0; display: flex; flex-direction: column; }
.tr-dau__ten h1 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.tr-da-xem { margin: 0 4px; text-align: right; font-size: .75rem; color: var(--phu); }
.tr-da-xem[hidden] { display: none; }