/* ============================================================
   AUTOSALES PRO — PHÒNG CHAT "TƯƠNG TÁC"
   Phần 1: bong bóng + dòng tin DÙNG CHUNG (điện thoại và máy tính) — class
           tiền tố tc-, không phụ thuộc id màn; đặt trong khung có nền
           var(--tc-nen) là đủ.
   Phần 2: danh sách phòng + phòng chat trên điện thoại (#man-tuong-tac,
           .man-phong-chat).
   Cần nen-tang.css nạp trước (token màu/chữ/chuyển động).
   ============================================================ */

:root{
  --tc-nen:      #E4EAF2;   /* nền phòng chat */
  --tc-bong-toi: #DBE8FF;   /* bong bóng của mình */
  --tc-dau-1:    #1D6CF2;   /* thanh đầu phòng — gradient */
  --tc-dau-2:    #2F7DF6;
}

/* =========================================================
   PHẦN 1 — DÒNG TIN / BONG BÓNG (dùng chung)
   ========================================================= */

/* dải ngày */
.tc-ngay{ display:flex; justify-content:center; margin:12px 0 8px; }
.tc-ngay span{
  background:rgba(16,19,25,.2); color:#fff; font-size:11.5px; font-weight:600;
  border-radius:var(--bo-pill); padding:3px 10px;
}
/* tin hệ thống ("X đã tham gia phòng") */
.tc-he-thong{ text-align:center; font-size:12px; color:var(--muc-2); margin:8px 32px; line-height:1.45; }

/* 1 dòng = avatar (hoặc chỗ trống) + cột tin */
.tc-dong{ display:flex; align-items:flex-end; gap:8px; margin-top:3px; }
.tc-dong.tc-dau-nhom{ margin-top:10px; }
.tc-dong-toi{ flex-direction:row-reverse; }
.tc-av{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px;
}
.tc-av-trong{ visibility:hidden; }
.tc-cot{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; max-width:76%; min-width:0; }
.tc-dong-toi .tc-cot{ align-items:flex-end; }
.tc-ten{ font-size:12px; color:var(--muc-2); margin:0 0 1px 10px; line-height:1.35; }
.tc-ten b{ color:var(--muc); font-weight:700; }
.tc-huy-qt{
  display:inline-block; font-size:10px; font-weight:800; color:#fff; background:var(--nhan);
  border-radius:var(--bo-pill); padding:1px 6px; margin-left:5px; vertical-align:1px;
}

/* bong bóng — chặn menu chọn chữ/callout của iOS; sao chép qua menu tin */
.tc-bong{
  position:relative; max-width:100%;
  background:var(--mat); border-radius:16px; padding:8px 11px 6px;
  font-size:14.5px; line-height:1.42; color:var(--muc);
  box-shadow:0 1px 1px rgba(16,19,25,.06);
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  cursor:default; transition:transform var(--nhanh) var(--duong-cong), box-shadow var(--nhanh), opacity var(--nhanh);
}
.tc-bong-toi{ background:var(--tc-bong-toi); }
.tc-bong-qt{ box-shadow:inset 0 0 0 1.5px #BCD0FF, 0 1px 1px rgba(16,19,25,.06); }
.tc-bong-an{ transform:scale(.97); }
.tc-bong-chon{ box-shadow:0 0 0 2px var(--nhan), 0 6px 18px -8px rgba(16,19,25,.35); }
.tc-chu{ white-space:pre-wrap; overflow-wrap:break-word; overflow-wrap:anywhere; word-break:break-word; }
.tc-chu a{ color:var(--nhan-dam); text-decoration:underline; text-underline-offset:2px; -webkit-touch-callout:none; }
.tc-chu-thu-hoi, .tc-bong-thu-hoi .tc-chu{ font-style:italic; color:var(--muc-3); }
.tc-bong-thu-hoi{ background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px var(--ke-2); }
.tc-gio{ display:flex; align-items:center; justify-content:flex-end; gap:3px; font-size:10.5px; color:var(--muc-3); margin-top:2px; }
.tc-bong:not(.tc-bong-toi) .tc-gio{ justify-content:flex-start; }
.tc-dong-ho{ flex:none; }
.tc-cho-mang{ font-style:normal; font-weight:600; color:var(--canh); margin-right:4px; }

/* đang gửi / gửi lỗi */
.tc-dang-gui{ opacity:.62; }
.tc-gui-hong{ box-shadow:inset 0 0 0 1.5px rgba(220,38,38,.45); }
.tc-gui-lai{
  border:0; background:none; font-family:inherit; font-size:12px; color:var(--loi);
  padding:2px 4px; cursor:pointer;
}
.tc-gui-lai b{ font-weight:700; text-decoration:underline; text-underline-offset:2px; }

/* trích dẫn trả lời */
.tc-trich{
  border-left:3px solid var(--nhan); background:rgba(37,99,235,.07);
  border-radius:6px; padding:4px 8px; margin-bottom:5px; font-size:12.5px; color:var(--muc-2);
  cursor:pointer; overflow:hidden;
}
.tc-trich b{ display:block; color:var(--nhan-dam); font-size:12px; font-weight:700; }
.tc-trich span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; overflow-wrap:anywhere; }

/* chip cảm xúc nổi góc dưới bong bóng */
.tc-co-cx{ margin-bottom:12px; }
.tc-cx{
  position:absolute; right:8px; bottom:-12px;
  display:flex; align-items:center; gap:1px;
  background:#fff; border-radius:var(--bo-pill); padding:1px 6px 1px 4px;
  font-size:12px; line-height:18px; box-shadow:0 1px 3px rgba(16,19,25,.18); cursor:pointer;
}
.tc-bong:not(.tc-bong-toi) .tc-cx{ right:auto; left:8px; }
.tc-cx em{ font-style:normal; font-size:11px; font-weight:600; color:var(--muc-2); margin-left:3px; }
.tc-cx-toi em{ color:var(--nhan); }

/* đã xem */
.tc-da-xem{ display:flex; justify-content:flex-end; align-items:center; gap:2px; margin:4px 4px 0; }
.tc-da-xem i{
  width:16px; height:16px; border-radius:50%; font-style:normal; font-size:8.5px; font-weight:800;
  color:#fff; display:grid; place-items:center; border:1.5px solid var(--tc-nen);
}
.tc-da-xem span{ font-size:11px; color:var(--muc-2); margin-left:4px; }

/* đang soạn — 3 chấm nhún */
.tc-dang-soan{ display:flex; align-items:center; gap:8px; margin:8px 0 2px 40px; font-size:12px; color:var(--muc-2); }
.tc-cham3{ display:flex; gap:3px; background:#fff; border-radius:var(--bo-pill); padding:7px 10px; flex:none; }
.tc-cham3 i{ width:6px; height:6px; border-radius:50%; background:var(--muc-3); animation:tcNhun 1.2s infinite; }
.tc-cham3 i:nth-child(2){ animation-delay:.15s; }
.tc-cham3 i:nth-child(3){ animation-delay:.3s; }
@keyframes tcNhun{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

/* tin mới trượt vào + nháy khi nhảy tới tin gốc */
.tc-moi{ animation:tcVao var(--vua) var(--duong-cong); }
@keyframes tcVao{ from{ opacity:0; transform:translateY(10px) scale(.97); } }
.tc-nhay{ animation:tcNhay 1.2s ease; }
@keyframes tcNhay{ 0%,40%{ box-shadow:0 0 0 3px rgba(37,99,235,.55); } 100%{ box-shadow:0 0 0 3px rgba(37,99,235,0); } }

@media (prefers-reduced-motion:reduce){
  .tc-cham3 i{ animation:none; opacity:.7; }
  .tc-moi, .tc-nhay{ animation:none; }
}

/* =========================================================
   PHẦN 2 — ĐIỆN THOẠI
   ========================================================= */

/* ---------- huy hiệu chưa đọc trên thanh tab ---------- */
.thanh-tab a[data-man="tuong-tac"]{ position:relative; }
.tab-cham{
  position:absolute; top:7px; left:calc(50% + 5px);
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--bo-pill);
  background:var(--loi); color:#fff; border:2px solid var(--mat);
  font-size:10.5px; font-weight:800; line-height:14px; text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ---------- danh sách phòng ---------- */
.tc-nhom-phong{
  background:var(--mat); border:1px solid var(--ke); border-radius:var(--bo-the);
  box-shadow:var(--bong); overflow:hidden; margin:0 var(--le-man);
}
.tc-phong{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; border:0; border-top:1px solid var(--ke); background:none;
  font-family:inherit; text-align:left; color:var(--muc); cursor:pointer;
  transition:background var(--nhanh), transform var(--nhanh) var(--duong-cong);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
.tc-phong:first-child{ border-top:0; }
.tc-phong:active{ background:var(--nen); transform:scale(.985); }
.tc-phong-sap{ opacity:.6; }
.tc-av-nhom{
  width:52px; height:52px; border-radius:50%; flex:none;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:17px; letter-spacing:.02em;
  background:linear-gradient(135deg,#3B82F6,#1D4ED8);
}
.tc-av-nhom-xam{ background:linear-gradient(135deg,#CBD2DC,#A3ADBB); }
.tc-phong-chu{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.tc-phong-ten{ display:flex; align-items:center; gap:6px; font-size:15.5px; font-weight:700; min-width:0; }
.tc-phong-ten > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-pill-khoa{
  flex:none; display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:700; color:var(--canh); background:var(--canh-nhat);
  border-radius:var(--bo-pill); padding:2px 7px;
}
.tc-phong-tin{ font-size:13.5px; color:var(--muc-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-phong-tin.tc-dam{ color:var(--muc); font-weight:600; }
.tc-phong-phai{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; align-self:stretch; justify-content:center; }
.tc-phong-phai small{ font-size:12px; color:var(--muc-3); }
.tc-dem{
  min-width:20px; height:20px; border-radius:var(--bo-pill); padding:0 6px;
  background:var(--loi); color:#fff; font-size:11.5px; font-weight:800; line-height:20px; text-align:center;
}
.tc-phong-xuong{ cursor:default; }
.tc-phong-xuong .tc-av-nhom{ background:none; }
.tc-phong-xuong i{ display:block; height:12px; margin:3px 0; }
.tc-ghi-chu{ font-size:12px; color:var(--muc-3); text-align:center; margin:16px 28px 0; line-height:1.5; }
.tc-rong .tc-nut-thu-lai{ margin-top:16px; height:44px; padding:0 22px; }
.tc-rong-khoa{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--canh-nhat); color:var(--canh); margin-bottom:12px; }
.tc-rong-khoa svg{ width:26px; height:26px; opacity:1; margin:0; }

/* ---------- phòng chat ---------- */
.man-phong-chat{ background:var(--tc-nen); }

.tc-dau{
  flex:none; display:flex; align-items:center; gap:8px;
  min-height:56px; padding:calc(env(safe-area-inset-top) + 4px) 10px 4px 4px;
  background:linear-gradient(90deg,var(--tc-dau-1),var(--tc-dau-2)); color:#fff;
}
.tc-ic{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:0; background:none; color:inherit; border-radius:12px; cursor:pointer; padding:0;
  touch-action:manipulation;
}
.tc-ic:active{ background:rgba(16,19,25,.06); }
.tc-dau .tc-ic:active{ background:rgba(255,255,255,.16); }
.tc-av-nhom-nho{ width:36px; height:36px; font-size:13px; background:rgba(255,255,255,.22); }
.tc-dau-chu{ flex:1; min-width:0; line-height:1.25; }
.tc-dau-chu b{ display:block; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-dau-chu span{ display:block; font-size:12px; opacity:.88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-mat-ket-noi .tc-dau-chu span::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#FBBF24; margin-right:6px; vertical-align:1px;
}

/* thanh ghim */
.tc-ghim{
  flex:none; display:flex; align-items:center; gap:4px;
  background:var(--mat); border-bottom:1px solid var(--ke); padding:0 4px 0 0;
}
.tc-ghim-noi{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px;
  padding:9px 6px 9px 14px; border:0; background:none; font-family:inherit; text-align:left; color:var(--muc); cursor:pointer;
}
.tc-ghim-noi svg{ color:var(--nhan); flex:none; }
.tc-ghim-noi > span{ flex:1; min-width:0; }
.tc-ghim-noi small{ display:block; font-size:11px; color:var(--muc-3); }
.tc-ghim-chu{ display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-ghim-bo{ color:var(--muc-3); width:44px; height:44px; }
/* "+n ⌄" — có hơn 1 tin ghim (§5f) */
.tc-ghim-them{
  flex:none; display:inline-flex; align-items:center; gap:2px; min-width:52px; height:44px; padding:0 10px;
  margin-right:2px; border:0; background:none; font-family:inherit; color:var(--nhan); cursor:pointer;
  border-radius:12px; touch-action:manipulation;
}
.tc-ghim-them b{
  font-size:12px; font-weight:800; background:var(--nhan-nhat); color:var(--nhan-dam);
  border-radius:var(--bo-pill); padding:2px 7px; line-height:1.3;
}
.tc-ghim-them svg{ transition:transform var(--vua) var(--duong-cong); }
.tc-ghim-them.tc-mo svg{ transform:rotate(180deg); }
.tc-ghim-them:active{ background:var(--nen); }
.tc-ghim-noi:focus-visible, .tc-ghim-them:focus-visible, .tc-gds-noi:focus-visible, .tc-gds-bo:focus-visible, .tc-gds-gon:focus-visible{
  outline:2px solid var(--nhan); outline-offset:-2px;
}

/* danh sách tất cả tin ghim — xổ xuống phủ trên khung chat */
.tc-ghim-phu{
  position:absolute; inset:0; z-index:6; background:rgba(16,19,25,.28);
  opacity:0; pointer-events:none; transition:opacity var(--vua) var(--duong-cong);
}
.tc-ghim-phu.tc-mo{ opacity:1; pointer-events:auto; }
.tc-ghim-ds{
  position:absolute; left:0; right:0; top:0; z-index:7;
  display:flex; flex-direction:column; max-height:min(76%, 480px);
  background:var(--mat); border-radius:0 0 22px 22px; box-shadow:var(--bong-noi);
  clip-path:inset(0 0 100% 0 round 0 0 22px 22px); opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:clip-path var(--vua) var(--duong-cong), transform var(--vua) var(--duong-cong),
    opacity var(--nhanh) linear, visibility 0s linear var(--vua);
}
.tc-ghim-ds.tc-mo{
  clip-path:inset(0 0 0 0 round 0 0 22px 22px); opacity:1; visibility:visible; transform:none;
  transition:clip-path var(--vua) var(--duong-cong), transform var(--vua) var(--duong-cong), opacity var(--nhanh) linear, visibility 0s;
}
.tc-ghim-ds.tc-dang-keo, .tc-ghim-ds.tc-tuc-thi{ transition:none; }
.tc-gds-dau{ flex:none; display:flex; align-items:baseline; justify-content:space-between; padding:12px 16px 6px; }
.tc-gds-dau b{ font-size:13px; font-weight:700; color:var(--muc); }
.tc-gds-dau span{ font-size:12px; color:var(--muc-3); font-variant-numeric:tabular-nums; }
.tc-gds-ds{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 8px; }
.tc-gds-dong{ display:flex; align-items:center; gap:4px; }
.tc-gds-dong + .tc-gds-dong{ box-shadow:inset 0 1px 0 var(--ke); }
.tc-gds-noi{
  flex:1; min-width:0; display:flex; align-items:flex-start; gap:10px; min-height:56px; padding:10px 8px;
  border:0; background:none; font-family:inherit; text-align:left; color:var(--muc); cursor:pointer;
  border-radius:14px; touch-action:manipulation;
}
.tc-gds-noi:active{ background:var(--nen); }
.tc-gds-noi .tc-av{ width:30px; height:30px; font-size:12px; margin-top:1px; }
.tc-gds-chu{ flex:1; min-width:0; }
.tc-gds-hang{ display:flex; align-items:baseline; gap:8px; }
.tc-gds-hang b{ flex:1; min-width:0; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-gds-hang time{ flex:none; font-size:11px; color:var(--muc-3); }
.tc-gds-nd{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:13.5px; line-height:1.4; color:var(--muc-2); margin-top:2px; overflow-wrap:break-word; overflow-wrap:anywhere;
}
.tc-gds-bo{
  flex:none; height:44px; padding:0 10px; border:0; background:none; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--loi); border-radius:12px; cursor:pointer; touch-action:manipulation;
}
.tc-gds-bo:active{ background:var(--loi-nhat); }
.tc-gds-gon{
  flex:none; display:grid; place-items:center; height:28px; margin:2px 0 4px; border:0; background:none; cursor:pointer;
}
.tc-gds-gon i{ display:block; width:36px; height:4px; border-radius:var(--bo-pill); background:var(--ke-2); }
/* dấu ghim nhỏ cạnh giờ trên bong bóng */
.tc-dau-ghim{ flex:none; color:var(--nhan); transform:rotate(35deg); }
@media (prefers-reduced-motion:reduce){
  .tc-ghim-phu, .tc-ghim-ds, .tc-ghim-ds.tc-mo, .tc-ghim-them svg{ transition:none; }
}

/* vùng tin */
.tc-khung{ flex:1; min-height:0; position:relative; display:flex; flex-direction:column; }
.tc-cuon{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding:6px 10px 10px;
}
.tc-cuon::-webkit-scrollbar{ width:0; }
.tc-tai-cu{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:var(--muc-2); padding:10px 0 4px; min-height:30px; }
.tc-tai-cu-trong{ min-height:30px; }
.tc-xoay{
  width:14px; height:14px; border-radius:50%; flex:none;
  border:2px solid rgba(37,99,235,.25); border-top-color:var(--nhan); animation:tcXoay .8s linear infinite;
}
@keyframes tcXoay{ to{ transform:rotate(360deg); } }
.tc-rong-phong{ text-align:center; color:var(--muc-2); padding:64px 30px 20px; }
.tc-rong-phong svg{ opacity:.35; margin-bottom:10px; }
.tc-rong-phong b{ display:block; color:var(--muc); font-size:15px; font-weight:600; margin-bottom:4px; }
.tc-rong-phong span{ font-size:13px; }

/* nút "↓ n tin mới" */
.tc-tin-moi{
  position:absolute; right:12px; bottom:12px; z-index:3;
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px 0 11px;
  border:0; border-radius:var(--bo-pill); background:var(--mat); color:var(--nhan);
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(16,19,25,.3);
  animation:tcVao var(--vua) var(--duong-cong);
}

/* lớp giữa màn: đang vào phòng / lỗi */
.tc-trang-thai{
  position:absolute; inset:0; z-index:4; background:var(--tc-nen);
  display:flex; flex-direction:column; justify-content:flex-end; padding:0 12px 16px;
}
.tc-trang-thai .rong{ margin:auto 0; }
.tc-xuong-tin{ display:flex; flex-direction:column; gap:10px; }
.tc-xuong-tin i{ display:block; height:38px; border-radius:16px; opacity:.7; }
.tc-xuong-tin .tc-xt-phai{ align-self:flex-end; }
.tc-tt-chu{ text-align:center; font-size:12.5px; color:var(--muc-2); margin-top:14px; }

/* thanh trả lời */
.tc-tra-loi{
  flex:none; display:flex; align-items:center; gap:10px;
  background:var(--mat); border-top:1px solid var(--ke); padding:8px 6px 8px 12px;
}
.tc-tra-loi > div{ flex:1; min-width:0; border-left:3px solid var(--nhan); padding-left:8px; font-size:12.5px; color:var(--muc-2); }
.tc-tra-loi b{ display:block; color:var(--nhan-dam); font-size:12px; font-weight:700; }
.tc-tra-loi p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-tra-loi .tc-ic{ color:var(--muc-3); }

/* ô soạn */
.tc-soan{
  flex:none; display:flex; align-items:flex-end; gap:4px;
  background:var(--mat); border-top:1px solid var(--ke);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom)) 4px;
}
.tc-soan{ position:relative; }
.tc-ban-phim .tc-soan, .tc-ban-phim .tc-bi-cam, .tc-co-emoji .tc-soan{ padding-bottom:6px; }
/* bộ đếm ký tự khi gần giới hạn 1000 — nổi ngay trên nút gửi */
.tc-dem-ky-tu{
  position:absolute; right:8px; top:-22px; pointer-events:none;
  font-size:11px; font-weight:600; color:var(--muc-2); font-variant-numeric:tabular-nums;
  background:var(--mat); border:1px solid var(--ke-2); border-radius:var(--bo-pill); padding:1px 7px;
}
.tc-dem-ky-tu.tc-qua{ color:var(--loi); border-color:rgba(220,38,38,.35); }
.tc-nut-emoji{ color:var(--muc-2); }
.tc-o-soan{
  flex:1; min-width:0; resize:none; display:block;
  border:1px solid var(--ke-2); border-radius:20px; background:var(--nen);
  font-family:inherit; font-size:16px; line-height:22px; color:var(--muc);   /* 16px: iOS không tự phóng to khi chạm */
  padding:8px 14px; margin:0; height:40px; max-height:128px; overflow-y:hidden;
  transition:border-color var(--nhanh), background var(--nhanh);
}
.tc-o-soan::placeholder{ color:var(--muc-3); }
.tc-o-soan:focus{ outline:0; border-color:var(--nhan); background:var(--mat); }
.tc-nut-gui{
  width:40px; height:40px; flex:none; border-radius:50%; border:0; padding:0;
  display:grid; place-items:center; background:transparent; color:var(--muc-3); cursor:pointer;
  transition:background var(--nhanh), color var(--nhanh), transform var(--nhanh) var(--duong-cong);
  touch-action:manipulation;
}
.tc-nut-gui.tc-bat{ background:var(--nhan); color:#fff; }
.tc-nut-gui.tc-bat:active{ transform:scale(.92); }
.tc-bi-cam{
  flex:none; display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--mat); border-top:1px solid var(--ke); color:var(--muc-2); font-size:13.5px; font-weight:600;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
}
.tc-bi-cam svg{ color:var(--canh); }

/* bảng emoji thường dùng */
.tc-bang-emoji{
  flex:none; display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
  background:var(--mat); border-top:1px solid var(--ke);
  padding:8px 8px calc(4px + env(safe-area-inset-bottom));
  max-height:calc(210px + env(safe-area-inset-bottom)); overflow-y:auto;
}
.tc-bang-emoji button{
  height:44px; border:0; background:none; font-size:26px; line-height:1; border-radius:12px; cursor:pointer;
  touch-action:manipulation;
}
.tc-bang-emoji button:active{ background:var(--nen); transform:scale(1.15); }

/* menu nhấn giữ (bottom sheet) */
.tc-phu{
  position:absolute; inset:0; z-index:30; background:rgba(16,19,25,.28);
  opacity:0; pointer-events:none; transition:opacity var(--nhanh);
}
.tc-phu.tc-mo{ opacity:1; pointer-events:auto; }
.tc-menu{
  position:absolute; left:12px; right:12px; z-index:31;
  bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateY(24px); opacity:0; pointer-events:none;
  transition:transform var(--vua) var(--duong-cong), opacity var(--nhanh);
}
.tc-menu.tc-mo{ transform:none; opacity:1; pointer-events:auto; }
.tc-hang-cx{
  display:flex; justify-content:space-between;
  background:#fff; border-radius:var(--bo-pill); padding:6px 10px; margin-bottom:10px;
  box-shadow:0 8px 24px -8px rgba(16,19,25,.3);
}
.tc-hang-cx button{
  font-size:27px; width:44px; height:44px; border-radius:50%; border:0; background:none; cursor:pointer; padding:0;
  transition:transform var(--nhanh) var(--duong-cong), background var(--nhanh); touch-action:manipulation;
}
.tc-hang-cx button:active{ transform:scale(1.25); }
.tc-hang-cx button.tc-chon{ background:var(--nhan-nhat); box-shadow:inset 0 0 0 2px rgba(37,99,235,.35); }
.tc-menu-xem{
  background:#fff; border-radius:12px; padding:10px 12px; margin-bottom:10px;
  font-size:13.5px; color:var(--muc-2); line-height:1.4; max-height:84px; overflow:hidden; overflow-wrap:break-word; overflow-wrap:anywhere;
}
.tc-menu-xem b{ display:block; color:var(--muc); font-size:12.5px; margin-bottom:2px; }
.tc-menu-luoi{ display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-radius:18px; padding:8px 4px; }
.tc-menu-luoi button{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0;
  border:0; background:none; font-family:inherit; font-size:12px; color:var(--muc); cursor:pointer; border-radius:12px;
  touch-action:manipulation;
}
.tc-menu-luoi button:active{ background:var(--nen); }
.tc-menu-luoi svg{ color:var(--nhan); }
.tc-menu-luoi .tc-do, .tc-menu-luoi .tc-do svg{ color:var(--loi); }

/* ---------- thông báo (§5b/§5c) ---------- */
.tc-nut-chuong{ margin-left:auto; color:var(--muc-2); }
.tc-nut-chuong svg{ stroke:currentColor !important; }
.tc-chuong-tat{ flex:none; display:inline-flex; color:var(--muc-3); }
.tc-chuong-dau{ color:rgba(255,255,255,.85); margin-right:-2px; }
.tc-dem-xam{ background:var(--muc-3); }

/* thanh thông báo trong app: trượt từ trên, nằm dưới vùng an toàn, cao ≤ 64px */
.tc-bao{
  position:fixed; z-index:115; left:10px; right:10px;
  top:calc(env(safe-area-inset-top) + 8px);
  display:flex; align-items:center; gap:10px; min-height:56px; max-height:64px;
  padding:8px 12px; border-radius:16px;
  background:var(--mat); border:1px solid var(--ke-2);   /* nền đặc: không lộ chữ màn phía sau */
  box-shadow:0 10px 30px -10px rgba(16,19,25,.35);
  transform:translateY(calc(-100% - 24px - env(safe-area-inset-top))); opacity:0; pointer-events:none;
  transition:transform var(--vua) var(--duong-cong), opacity var(--nhanh);
  touch-action:none; -webkit-user-select:none; user-select:none; cursor:pointer;
}
.tc-bao.tc-mo{ transform:none; opacity:1; pointer-events:auto; }
.tc-bao .tc-av{ width:36px; height:36px; font-size:14px; }
.tc-bao-chu{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tc-bao-chu b{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-bao-chu span{ font-size:13px; color:var(--muc-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tc-bao-them{ flex:none; font-style:normal; font-size:11px; font-weight:700; color:var(--nhan); background:var(--nhan-nhat); border-radius:var(--bo-pill); padding:2px 8px; }
body.dt-che-do .tc-bao{ display:none; }

/* thẻ gợi ý bật thông báo đẩy (đầu danh sách phòng) */
.tc-goi-y{
  display:flex; align-items:center; gap:10px; margin:14px var(--le-man) 0;
  padding:10px 6px 10px 14px; border-radius:var(--bo-the);
  background:var(--nhan-nhat); color:var(--nhan-dam); border:1px solid rgba(37,99,235,.14);
}
.tc-goi-y > svg{ flex:none; }
.tc-goi-y > span{ flex:1; min-width:0; }
.tc-goi-y b{ display:block; font-size:13.5px; font-weight:700; }
.tc-goi-y small{ display:block; font-size:12px; color:var(--muc-2); margin-top:1px; line-height:1.35; }
.tc-goi-y-nut{ flex:none; height:34px; padding:0 14px; font-size:13px; border-radius:10px; }
.tc-goi-y-an{ width:32px; height:32px; color:var(--muc-3); }
.tc-cd-huong-dan{ cursor:default; }
.tc-gat-cho{ opacity:.45; }
.tc-chan-doan{
  margin:0 18px 14px; padding:10px; max-height:220px; overflow:auto;
  background:#0f172a; color:#d1fae5; border-radius:10px;
  font:11px/1.45 ui-monospace, Menlo, monospace; white-space:pre-wrap; word-break:break-all;
  -webkit-user-select:text; user-select:text;
}.tc-cd-huong-dan small{ color:var(--muc-2); }

/* bảng cài đặt thông báo + thông tin phòng (trong KHUNG.moTam) */
.tc-cd{ padding:0 4px 14px; }
.tc-cd-dong{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px; border-top:1px solid var(--ke); cursor:pointer; }
.tc-cd-dong:first-child{ border-top:0; }
.tc-cd-dong b{ display:block; font-size:15px; font-weight:600; }
.tc-cd-dong small{ display:block; font-size:12px; color:var(--muc-3); margin-top:2px; line-height:1.35; }
/* chữ đậm trong câu hướng dẫn (vd "Thông báo đang bị chặn") nằm trong dòng, không tách thành dòng riêng chữ to */
.tc-cd-huong-dan small b{ display:inline; font-size:inherit; }
.tc-tam-nhan{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muc-3); padding:4px 20px 6px; }

/* danh sách thành viên (§5e, trong KHUNG.moTam) */
.tc-dau-chu[data-tc="thanh-vien"]{ cursor:pointer; }
.tc-mui-ten{ color:var(--muc-3); font-size:18px; line-height:1; }
.tc-tv{ padding:0 0 4px; }
.tc-tv-tim{ margin:0 16px 8px; padding:9px 12px; }
.tc-tv-tim input{ font-size:16px; }          /* 16px: iOS không tự phóng to khi chạm */
.tc-tv-ds{ max-height:min(56vh, 460px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.tc-tv-dem{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muc-3); padding:6px 20px 4px; }
.tc-tv-dong{ display:flex; align-items:center; gap:12px; padding:9px 20px; border-top:1px solid var(--ke); }
.tc-tv-dem + .tc-tv-dong{ border-top:0; }
.tc-tv-av{ position:relative; flex:none; }
.tc-tv-av .tc-av{ width:40px; height:40px; font-size:15px; }
.tc-tv-cham{ position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:var(--tot); border:2.5px solid var(--mat); }
.tc-tv-chu{ flex:1; min-width:0; }
.tc-tv-chu b{ display:flex; align-items:center; gap:4px; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* đại lý dài → xuống tối đa 2 dòng để vẫn đọc được "Đang hoạt động / Hoạt động x trước" */
.tc-tv-chu small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; line-height:1.35; color:var(--muc-2); margin-top:1px; }
.tc-tv-on{ color:var(--tot); font-weight:600; }
.tc-tv-trang{ text-align:center; color:var(--muc-2); font-size:13.5px; padding:28px 20px; line-height:1.5; }
.tc-tv-trang .tc-nut-thu-lai{ margin-top:12px; height:40px; padding:0 18px; }

/* hộp hỏi lại "Thu hồi tin nhắn?" (mở qua KHUNG.moTam) */
.tc-hoi-chu{ font-size:14px; color:var(--muc-2); text-align:center; padding:0 22px 16px; line-height:1.5; }
.tc-hoi-nut{ display:flex; gap:10px; padding:0 18px; }
.tc-hoi-nut .nut{ flex:1; height:46px; }
.tc-nut-do{ background:var(--loi); }
.tc-nut-do:active{ background:#B91C1C; }