/* ==========================================================================================================================
   LÕI TRÒ CHUYỆN DÙNG CHUNG — public/chat-core/chat.css (tách khỏi css/p0.css của OneCAD Portal ngày 11/10/2026 để Nexus dùng lại).
   Nạp NGAY SAU bộ CSS nền của host (Portal: index.html nạp /css/p0.css rồi tới tệp này). Thứ tự các quy tắc trong tệp giữ đúng
   thứ tự tương đối như khi còn nằm trong p0.css — thêm quy tắc mới thì thêm vào CUỐI tệp.

   HOST PHẢI CUNG CẤP
   1. Biến màu (đặt trên :root, đổi theo nền sáng / tối):
        --blue  --ink  --muted  --card  --card-edge  --hair  --neutral-bg  --warn-bg  --danger-bg  --ok-bg
      Lõi tự đặt và tự dùng: --tc-me (màu bong bóng tin của mình, theo lớp .bb-…).
   2. Nền tối: host gắn thuộc tính data-mode="dark" lên <html> (các quy tắc html[data-mode="dark"] .tc-… trong tệp này).
   3. Lớp chung lõi dùng mà KHÔNG định nghĩa ở đây (lấy của host):
        .btn (+ .sm .primary .reject)      nút
        .field                             nhãn + ô nhập trong hộp thoại (label.field > span + input / select / textarea)
        .seg-ctl                           công tắc nhiều lựa chọn (nút .on = đang chọn)
        .tabs  .cnt  .cnt.warn             hàng thẻ gạch chân + số đếm
        .icon-mini                         nút biểu tượng nhỏ trong dòng
        .card.flush                        khung thẻ bọc «Trao đổi về phiếu này»
        .opt-cards.cols-2  .opt-card.tall  ô lựa chọn dạng thẻ (radio)
        .muted  .hidden                    chữ phụ · ẩn phần tử (display:none !important)
        dialog.modal  .modal-body  [data-cancel]  button[type=submit]     hộp thoại do ui.openDialog của host dựng
        .nt-panel .nt-ph .nt-list .nt-it(.un/.read) .nt-tx .nt-t .nt-empty .nt-pf .nt-link .sub     khung bảng nổi kiểu bảng chuông —
                                           bảng xem nhanh (js/quick.js) vẽ trong khung này, lớp .tcq ở đây chỉ chỉnh thêm
        .icon-btn + phần tử #chat-btn      nút Trò chuyện trên thanh trên của host (host tự vẽ; lõi chỉ đặt số chưa đọc vào thẻ <i>)
      Biểu tượng: hàm icon(tên) của host trả <svg> nét; lõi tự đặt cỡ.
   4. Phông chữ: lõi kế thừa phông của host (font: inherit), không tự nạp phông.
   5. Màu riêng của lõi: thân quy tắc KHÔNG còn mã màu viết cứng — mọi màu lõi tự chọn đều là biến --tc-* khai trong khối :root ngay dưới
      chú thích này (giá trị mặc định = đúng màu OneCAD Portal, Portal không phải khai gì thêm).
      Host khác đổi tông: nạp SAU tệp này MỘT khối  :root{ --tc-…: màu mới; … }  ghi đè những biến cần đổi; không cần ghi đè lớp nào.
      Biến đuôi -d là màu của nền tối (chỉ dùng trong các quy tắc html[data-mode="dark"] …) — cũng ghi đè ở :root, không cần bọc data-mode.
      Nhóm biến:  --tc-on-accent --tc-on-media (chữ trên nền màu / trên ảnh) · --tc-me-… (lớp phủ trong bong bóng của mình) ·
        --tc-av-1…6 --tc-cloud-1…3 --tc-online (avatar) · --tc-tone-… (tông bong bóng tự chọn) · --tc-ok… --tc-warn… --tc-danger… --tc-alert
        --tc-mention-badge --tc-draft --tc-rec --tc-flash --tc-kw-bg --tc-stt-meeting… --tc-edit-edge (trạng thái) · --tc-guest… (khách) ·
        --tc-secret --tc-ttl… --tc-switch-… (nhóm Mật, tự xoá, công tắc) · --tc-react-… (cảm xúc) · --tc-file-… --tc-att-1…6 (tệp, bảng Gửi kèm) ·
        --tc-wp-… --tc-pv-logo-bg (hình nền khung tin) · --tc-media-… --tc-view-… --tc-ph-d (ảnh / video) · --tc-map-… (bản đồ vị trí) ·
        --tc-stk-1…6(-bg)(-d) (nhãn dán chữ) · --tc-shadow-… --tc-dim… (bóng đổ, lớp mờ).
      Kiểm không lệch khi sửa khối biến: thế ngược var(--tc-…) bằng giá trị mặc định phải ra đúng tệp trước khi gom (11/10/2026).
   ========================================================================================================================== */

/* ===== BIẾN MÀU CỦA LÕI (--tc-*) — giá trị mặc định = màu OneCAD Portal. Host khác đổi tông: ghi đè các biến này trong một khối
   :root{…} nạp SAU tệp này. Biến đuôi -d = màu của nền tối, chỉ được dùng trong các quy tắc html[data-mode="dark"] … phía dưới.
   Thêm màu mới: khai biến ở đây trước rồi dùng var(--tc-…) trong quy tắc — không viết mã màu thẳng vào quy tắc. ===== */
:root{
  /* Chữ / nét trên nền màu */
  --tc-on-accent:#fff; /* chữ, biểu tượng trắng trên nền màu (avatar, số chưa đọc, bong bóng của mình, nút gửi, nhãn Mật, nút đang chọn…); cũng là nền nút phát + vạch sóng đã nghe của tin thoại trong bong bóng của mình */
  --tc-on-media:#fff; /* chữ, biểu tượng trên ảnh / video (nút phát, thời lượng, +N, mũi tên, số đếm, dấu chìm) */
  /* Bong bóng của mình (lớp phủ trắng mờ trên --tc-me) */
  --tc-me-mention-bg:rgba(255,255,255,.22); /* nền chữ @nhắc tên trong bong bóng của mình */
  --tc-me-quote-bg:rgba(255,255,255,.16); /* nền khối trích dẫn trong bong bóng của mình */
  --tc-me-soft:rgba(255,255,255,.88); /* chữ phụ: trích dẫn, thời lượng tin thoại */
  --tc-me-fwd:rgba(255,255,255,.82); /* dòng «Đã chuyển tiếp» */
  --tc-me-ed:rgba(255,255,255,.78); /* chữ «đã sửa» */
  --tc-me-wave:rgba(255,255,255,.42); /* vạch sóng tin thoại chưa nghe */
  --tc-me-edge:rgba(255,255,255,.55); /* viền nút tốc độ tin thoại */
  /* Avatar c1–c6 (cũng dùng cho chấm «đã xem» và thẻ người) */
  --tc-av-1:#0665ed; /* avatar c1 */
  --tc-av-2:#0f9d8a; /* avatar c2 */
  --tc-av-3:#7c5cd6; /* avatar c3 */
  --tc-av-4:#d97706; /* avatar c4 */
  --tc-av-5:#475569; /* avatar c5 */
  --tc-av-6:#db2777; /* avatar c6 */
  --tc-cloud-1:#38bdf8; /* avatar «Cloud của tôi»: điểm đầu dải màu */
  --tc-cloud-2:#0665ed; /* avatar «Cloud của tôi»: điểm giữa */
  --tc-cloud-3:#7c5cd6; /* avatar «Cloud của tôi»: điểm cuối */
  --tc-online:#22c55e; /* chấm đang trực tuyến */
  /* Tông bong bóng tự chọn (.bb-… đặt --tc-me; .bb-blue dùng --blue của host) */
  --tc-tone-teal:#0f9d8a; /* .bb-teal */
  --tc-tone-violet:#7c5cd6; /* .bb-violet */
  --tc-tone-amber:#d97706; /* .bb-amber */
  --tc-tone-pink:#db2777; /* .bb-pink */
  --tc-tone-slate:#475569; /* .bb-slate */
  /* Trạng thái: ổn / nhắc / nguy hiểm */
  --tc-ok:#15803d; /* chữ xanh «ổn»: việc xong, khách đang hoạt động, dấu tích, trạng thái có mặt, mục đang chọn trong bảng nổi */
  --tc-ok-soft:#e7f6ec; /* nền nhãn trạng thái có mặt / nút trạng thái đang chọn */
  --tc-ok-edge:#86d3a0; /* viền nút trạng thái đang chọn */
  --tc-warn:#b45309; /* chữ hổ phách «nhắc»: nút biểu tượng đang tắt, Trưởng nhóm, chờ duyệt, ghim, nghỉ phép / công tác, từ khoá, đang sửa tin */
  --tc-warn-d:#fbbf24; /* nền tối: dòng tin ghim + tên khi đang sửa tin */
  --tc-warn-strong:#92400e; /* dòng «bỏ qua» khi chuyển tiếp */
  --tc-warn-strong-d:#fbbf24; /* nền tối: dòng «bỏ qua» khi chuyển tiếp */
  --tc-edit-edge:#d97706; /* vạch trái khối «đang sửa tin» */
  --tc-danger:#d92d20; /* chữ đỏ: tệp gửi lỗi, mục xoá trong bảng nổi, nút xoá khi chọn nhiều tin */
  --tc-danger-d:#ff8589; /* nền tối: mục xoá, nút xoá */
  --tc-alert:#b91c1c; /* dòng hệ thống cảnh báo */
  --tc-mention-badge:#e5484d; /* nền số «có nhắc tên mình» */
  --tc-draft:#e5484d; /* chữ «Nháp:» ở danh sách */
  --tc-draft-d:#ff8589; /* nền tối: chữ «Nháp:» */
  --tc-rec:#e5484d; /* chấm + đồng hồ khi đang ghi âm */
  --tc-rec-d:#ff8589; /* nền tối: chấm + đồng hồ ghi âm */
  --tc-flash:#f59e0b; /* viền nháy khi nhảy tới một tin */
  --tc-kw-bg:#fde68a; /* nền tô từ khoá tìm thấy */
  --tc-stt-meeting:#1d4ed8; /* chữ nhãn trạng thái «đang họp» */
  --tc-stt-meeting-bg:#e0edff; /* nền nhãn trạng thái «đang họp» */
  /* Khách ngoài công ty */
  --tc-guest:#b45309; /* chữ nhãn Khách, ghi chú khách, nút hổ phách, tiêu đề «Mời khách» */
  --tc-guest-edge:#f3c98b; /* viền bong bóng của khách, viền nút hổ phách, khung quy định */
  /* Nhóm Mật và tin tự xoá */
  --tc-secret:#7f1d1d; /* avatar, nhãn, viền, biểu tượng nhóm Mật; màu pha nền khung tin nhóm Mật */
  --tc-ttl:#4f46e5; /* chữ nhãn tự xoá + dòng «còn … nữa» */
  --tc-ttl-mix:#4338ca; /* màu pha nền nhãn tự xoá (12% với --card) */
  --tc-switch-off:#cbd5e1; /* công tắc: nền khi tắt */
  --tc-switch-on:#7f1d1d; /* công tắc: nền khi bật */
  --tc-switch-knob:#fff; /* công tắc: núm */
  /* Cảm xúc thả vào tin */
  --tc-react-heart:#e5484d; /* tim */
  --tc-react-smile:#d97706; /* cười */
  --tc-react-check:#15803d; /* tích */
  --tc-react-star:#ca8a04; /* sao */
  --tc-react-bolt:#7c3aed; /* tia chớp */
  /* Tệp đính kèm và bảng «Gửi kèm» */
  --tc-file-pdf:#d92d20; /* biểu tượng tệp (mặc định / PDF) */
  --tc-file-xls:#15803d; /* biểu tượng tệp bảng tính (.fi.x) */
  --tc-att-1:#0665ed; /* ô tròn thứ 1 (mặc định) */
  --tc-att-2:#7c5cd6; /* ô tròn .ga2 */
  --tc-att-3:#0f9d8a; /* ô tròn .ga3 */
  --tc-att-4:#d9480f; /* ô tròn .ga4 */
  --tc-att-5:#15803d; /* ô tròn .ga5 */
  --tc-att-6:#d97706; /* ô tròn .ga6 */
  /* Hình nền khung tin (.wp-…) */
  --tc-wp-grid-bg:#f6f9fd; /* hình nền Lưới: nền */
  --tc-wp-grid-line:rgba(6,101,237,.07); /* hình nền Lưới: nét kẻ */
  --tc-wp-sky-1:#e0f2fe; /* hình nền Trời: điểm đầu */
  --tc-wp-sky-2:#ede9fe; /* hình nền Trời: điểm cuối */
  --tc-wp-stripe-1:#f1f5f9; /* hình nền Sọc: sọc 1 */
  --tc-wp-stripe-2:#e8eef5; /* hình nền Sọc: sọc 2 */
  --tc-wp-dark:#0d2542; /* hình nền Đậm: nền */
  --tc-wp-dark-ink:#c7d5e8; /* trên hình nền Đậm: chữ phụ (tên người, dòng hệ thống, đã xem…), viền ô chọn tin, chữ ô xem thử */
  --tc-wp-dark-ink-strong:#fff; /* trên hình nền Đậm: tên người gửi */
  --tc-wp-dark-alert:#fca5a5; /* trên hình nền Đậm: dòng cảnh báo */
  --tc-wp-dark-link:#93c5fd; /* trên hình nền Đậm: nút trong dòng nhắc */
  --tc-wp-dark-pin:#fbbf24; /* trên hình nền Đậm: dòng tin ghim */
  --tc-wp-dark-heard:#8ab8ff; /* trên hình nền Đậm: dòng «đã nghe» */
  --tc-pv-logo-bg:#0d2542; /* ô biểu tượng trong khung xem thử thông báo */
  /* Ảnh / video / trình xem */
  --tc-media-bg:#111a2b; /* nền ô video khi chưa có hình */
  --tc-media-scrim-58:rgba(10,22,40,.58); /* lớp phủ «+N» của album, nút mũi tên trình xem */
  --tc-media-scrim-62:rgba(10,22,40,.62); /* nút phát trên video, ô số đếm trình xem */
  --tc-media-scrim-80:rgba(10,22,40,.8); /* nút mũi tên trình xem khi rê chuột */
  --tc-media-badge:rgba(0,0,0,.58); /* nền nhãn thời lượng video */
  --tc-view-bg:#0b1220; /* nền trình xem video */
  --tc-view-muted:#cbd5e1; /* chữ «đang tải» trong trình xem */
  --tc-ph-d:#1b2535; /* nền tối: ô chờ ảnh album, ảnh xem trước liên kết */
  /* Bản đồ vị trí (hình vẽ minh hoạ) */
  --tc-map-land:#e3ebdd; /* đất */
  --tc-map-land-d:#26331f; /* nền tối: đất */
  --tc-map-water:#bcd5ef; /* nước */
  --tc-map-water-d:#1f4468; /* nền tối: nước */
  --tc-map-road:#fff; /* đường */
  --tc-map-road-d:#4a5568; /* nền tối: đường */
  --tc-map-pin:#e5484d; /* ghim vị trí */
  --tc-map-pin-edge:#fff; /* viền ghim */
  --tc-map-pin-edge-d:#0f172a; /* nền tối: viền ghim */
  --tc-map-pin-shadow:rgba(13,37,66,.35); /* bóng ghim */
  /* Nhãn dán chữ (.tc-stk k1–k6; .tc-stk không số = k1) */
  --tc-stk-1-bg:#fff4d6; /* k1 nền */
  --tc-stk-1:#8a5a00; /* k1 chữ */
  --tc-stk-2-bg:#e3f6ea; /* k2 nền */
  --tc-stk-2:#167548; /* k2 chữ */
  --tc-stk-3-bg:#e8efff; /* k3 nền */
  --tc-stk-3:#0b4fb3; /* k3 chữ */
  --tc-stk-4-bg:#fde8ef; /* k4 nền */
  --tc-stk-4:#b4235a; /* k4 chữ */
  --tc-stk-5-bg:#f1eaff; /* k5 nền */
  --tc-stk-5:#6941c6; /* k5 chữ */
  --tc-stk-6-bg:#ffe9dc; /* k6 nền */
  --tc-stk-6:#c2410c; /* k6 chữ */
  --tc-stk-1-bg-d:#4a3a10; /* nền tối: k1 nền */
  --tc-stk-1-d:#ffd97a; /* nền tối: k1 chữ */
  --tc-stk-2-bg-d:#123d2a; /* nền tối: k2 nền */
  --tc-stk-2-d:#7ee2b0; /* nền tối: k2 chữ */
  --tc-stk-3-bg-d:#14305f; /* nền tối: k3 nền */
  --tc-stk-3-d:#a9c6ff; /* nền tối: k3 chữ */
  --tc-stk-4-bg-d:#4d1830; /* nền tối: k4 nền */
  --tc-stk-4-d:#ffa8c5; /* nền tối: k4 chữ */
  --tc-stk-5-bg-d:#33235c; /* nền tối: k5 nền */
  --tc-stk-5-d:#cdb8ff; /* nền tối: k5 chữ */
  --tc-stk-6-bg-d:#4f2410; /* nền tối: k6 nền */
  --tc-stk-6-d:#ffb48a; /* nền tối: k6 chữ */
  /* Bóng đổ và lớp mờ (cả màu lẫn độ trong; số cuối = độ đậm %) */
  --tc-shadow-10:rgba(13,37,66,.1); /* bóng nhãn dán cỡ lớn */
  --tc-shadow-14:rgba(13,37,66,.14); /* bóng thanh thao tác trên tin */
  --tc-shadow-16:rgba(13,37,66,.16); /* bóng bảng kết quả tìm trong cuộc trò chuyện */
  --tc-shadow-18:rgba(13,37,66,.18); /* bóng bảng gợi ý @nhắc tên, bảng Tin nhắn nhanh */
  --tc-shadow-20:rgba(13,37,66,.2); /* bóng bảng nổi (.tc-pop), nút «xuống cuối» */
  --tc-shadow-24:rgba(13,37,66,.24); /* bóng bảng biểu tượng cảm xúc */
  --tc-shadow-25:rgba(13,37,66,.25); /* bóng nút «Đi tới tin» trên ô kho ảnh */
  --tc-shadow-sheet:rgba(8,24,48,.22); /* bóng bảng cảm xúc dạng trượt từ dưới (điện thoại) */
  --tc-shadow-40-d:rgba(0,0,0,.4); /* nền tối: bóng nhãn dán cỡ lớn */
  --tc-shadow-50-d:rgba(0,0,0,.5); /* nền tối: bóng nút «xuống cuối», bảng kết quả tìm */
  --tc-shadow-55-d:rgba(0,0,0,.55); /* nền tối: bóng bảng cảm xúc, bảng Gửi kèm, bảng Tin nhắn nhanh */
  --tc-dim:rgba(10,22,40,.35); /* lớp mờ sau bảng cảm xúc dạng trượt */
  --tc-dim-d:rgba(0,0,0,.55); /* nền tối: lớp mờ sau bảng cảm xúc */
}
/* ===== hết khối biến màu ===== */

/* ===== Trò chuyện (ảnh TC-1 / TC-2, anh Tâm duyệt 07/10/2026) — pages/chat.js ===== */
.tc-tabs{margin:-8px 0 -4px}.tc-tabs a{cursor:pointer}
.tc{display:grid;grid-template-columns:348px minmax(0,1fr);gap:16px;height:calc(100dvh - 292px);min-height:440px}
.tc-pane{background:var(--card);border:1px solid var(--card-edge);border-radius:10px;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.tc-search{margin:12px 12px 6px;height:38px;border:1px solid var(--card-edge);border-radius:10px;display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);flex:none}
.tc-search svg{width:18px;height:18px;flex:none}
.tc-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:inherit;font-size:14px}
.tc-search:focus-within{border-color:var(--blue)}
.tc-list{flex:1;overflow-y:auto;padding-bottom:8px}
.tc-sec{padding:10px 16px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.tc-sec.in{padding:14px 0 6px}
.tc-empty{padding:18px 16px;color:var(--muted);font-size:14px}
.tc-row{display:flex;gap:12px;padding:10px 14px;margin:0 6px;border-radius:10px;align-items:center;width:calc(100% - 12px);border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.tc-row:hover{background:var(--hair)}
.tc-row.on{background:color-mix(in srgb,var(--blue) 10%,var(--card))}
.tc-av{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--tc-on-accent);font-weight:700;font-size:14px;flex:none;position:relative}
.tc-av.p{border-radius:50%}.tc-av.sm{width:34px;height:34px;font-size:12px;border-radius:10px}.tc-av.p.sm{border-radius:50%}
.tc-av.gap{height:0;background:none}
.tc-av svg{width:20px;height:20px}.tc-av.sm svg{width:17px;height:17px}
.tc-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.tc-av.c1,.seen i.c1,.pchip i.c1{background:var(--tc-av-1)}.tc-av.c2,.seen i.c2,.pchip i.c2{background:var(--tc-av-2)}.tc-av.c3,.seen i.c3,.pchip i.c3{background:var(--tc-av-3)}
.tc-av.c4,.seen i.c4,.pchip i.c4{background:var(--tc-av-4)}.tc-av.c5,.seen i.c5,.pchip i.c5{background:var(--tc-av-5)}.tc-av.c6,.seen i.c6,.pchip i.c6{background:var(--tc-av-6)}
.tc-av .on-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--tc-online);border:2px solid var(--card)}
.tc-row .tx{min-width:0;flex:1;display:block}
.tc-row .l1{display:flex;gap:8px;align-items:baseline}
.tc-row b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-row time{margin-left:auto;font-size:12px;color:var(--muted);flex:none}
.tc-row .l2{display:flex;gap:8px;align-items:center;margin-top:2px}
.tc-row .l2>span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.tc-row.unread .l2>span{color:var(--ink);font-weight:600}
.tc-mute{color:var(--muted);opacity:.6;flex:none;align-self:center}.tc-mute svg{width:13px;height:13px;display:block}
.tc-n{font-style:normal;min-width:20px;height:20px;border-radius:10px;background:var(--blue);color:var(--tc-on-accent);font-size:11.5px;font-weight:700;display:inline-grid;place-items:center;padding:0 6px;flex:none}
.tc-n.at{background:var(--tc-mention-badge)}
.tc-blank{flex:1;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--muted);text-align:center;padding:24px}
.tc-blank svg{width:44px;height:44px;opacity:.45;margin-bottom:6px}.tc-blank b{color:var(--ink);font-size:16px}
.tc-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--card-edge);flex:none}
.tc-head .tt{min-width:0}
.tc-head h2{margin:0;font-size:16.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-head p{margin:2px 0 0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-head .sp{flex:1}
.tc-ib{width:38px;height:38px;border-radius:10px;border:1px solid var(--card-edge);display:grid;place-items:center;color:var(--muted);background:var(--card);cursor:pointer;flex:none;padding:0}
.tc-ib:hover{color:var(--blue);border-color:var(--blue)}.tc-ib svg{width:18px;height:18px}
.tc-ib.off{color:var(--tc-warn);background:var(--warn-bg);border-color:transparent}
.tc-back{display:none}.tc-back svg{transform:scaleX(-1)}
.tc-msgs{flex:1;min-height:0;overflow-y:auto;padding:14px 20px 10px;display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--hair) 45%,var(--card))}
.tc-msgs>:first-child{margin-top:auto}
.tc-more{align-self:center;border:1px solid var(--card-edge);background:var(--card);color:var(--blue);border-radius:14px;padding:4px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.tc-day{align-self:center;font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--card-edge);border-radius:12px;padding:2px 12px}
.tc-sys{align-self:center;text-align:center;font-size:12.5px;color:var(--muted);max-width:86%}
.tc .m{display:flex;gap:10px;max-width:74%;position:relative}
.tc .m.joined{margin-top:-8px}
.tc .m .tc-av{align-self:flex-end}
.tc .m .mb{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.tc .m.me{align-self:flex-end;flex-direction:row-reverse}.tc .m.me .mb{align-items:flex-end}
.tc .m .who{font-size:12.5px;color:var(--muted);margin:0 0 3px 2px;display:flex;gap:6px;align-items:center}
.tc .m .who b{color:var(--ink);font-weight:600}
.tc .bub{background:var(--card);border:1px solid var(--card-edge);border-radius:14px 14px 14px 4px;padding:9px 13px;font-size:14.5px;line-height:1.5;min-width:0;max-width:100%;overflow-wrap:anywhere}
.tc .bub .tx{display:block}
.tc .bub a{color:var(--blue);text-decoration:underline}
.tc .m.me .bub{background:var(--blue);border-color:var(--blue);color:var(--tc-on-accent);border-radius:14px 14px 4px 14px}
.tc .m.me .bub .tx a{color:var(--tc-on-accent)}
.tc .bub.gone{display:flex;gap:6px;align-items:center;color:var(--muted);font-style:italic;background:none;border-style:dashed}
.tc .m.me .bub.gone{background:none;color:var(--muted);border-color:var(--card-edge)}
.tc .bub.gone svg{width:15px;height:15px}
.tc .at{color:var(--blue);font-weight:600;background:color-mix(in srgb,var(--blue) 12%,transparent);border-radius:5px;padding:0 4px}
.tc .m.me .at{color:var(--tc-on-accent);background:var(--tc-me-mention-bg)}
.tc .quote{display:block;border-left:3px solid var(--blue);background:var(--hair);border-radius:6px;padding:5px 10px;margin-bottom:6px;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:460px}
.tc .quote b{display:block;color:var(--ink);font-size:12.5px}
.tc .m.me .quote{background:var(--tc-me-quote-bg);border-left-color:var(--tc-on-accent);color:var(--tc-me-soft)}.tc .m.me .quote b{color:var(--tc-on-accent)}
.tc .att-file{display:flex;gap:10px;align-items:center;border:1px solid var(--card-edge);border-radius:10px;padding:8px 12px;margin-top:6px;background:var(--card);color:var(--ink);text-decoration:none}
.tc .bub .att-file:first-child,.tc .bub .att-imgs:first-child{margin-top:0}
.tc .att-file:hover{border-color:var(--blue)}
.tc .att-file .fi{width:36px;height:36px;border-radius:8px;background:var(--danger-bg);color:var(--tc-file-pdf);display:grid;place-items:center;font-size:10.5px;font-weight:800;flex:none}
.tc .att-file .fi.x{background:var(--ok-bg);color:var(--tc-file-xls)}.tc .att-file .fi.w{background:color-mix(in srgb,var(--blue) 12%,var(--card));color:var(--blue)}
.tc .att-file b{display:block;font-size:13.5px;font-weight:600;overflow-wrap:anywhere}.tc .att-file small{color:var(--muted);font-size:12px}
.tc .att-imgs{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.tc .att-img{width:150px;height:104px;border-radius:10px;overflow:hidden;background:var(--hair);display:block}
.tc .att-img img{width:100%;height:100%;object-fit:cover;display:block}
.tc .reacts{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.tc .react{display:inline-flex;gap:4px;align-items:center;height:24px;padding:0 8px;border-radius:12px;background:var(--card);border:1px solid var(--card-edge);font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.tc .react svg{width:14px;height:14px}.tc .react.heart{color:var(--tc-react-heart)}.tc .react.like{color:var(--blue)}.tc .react.smile{color:var(--tc-react-smile)}.tc .react.check{color:var(--tc-react-check)}
.tc .react.mine{border-color:currentColor;background:color-mix(in srgb,currentColor 9%,var(--card))}
.tc .react:disabled{cursor:default;opacity:1}
.tc .seen{align-self:flex-end;display:flex;gap:5px;align-items:center;font-size:12px;color:var(--muted);margin-top:-6px}
.tc .seen svg{width:14px;height:14px;color:var(--blue)}
.tc .seen i{width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;color:var(--tc-on-accent);font-size:8.5px;font-weight:700;font-style:normal;margin-left:-6px;border:1.5px solid var(--card)}
.tc .seen i:first-of-type{margin-left:2px}
.tc .acts{position:absolute;top:-18px;right:8px;display:none;background:var(--card);border:1px solid var(--card-edge);border-radius:10px;box-shadow:0 6px 18px var(--tc-shadow-14);padding:3px;z-index:2;white-space:nowrap}
.tc .m.me .acts{right:auto;left:8px}
.tc .m:hover .acts,.tc .m.act .acts,.tc .m:focus-within .acts{display:flex}
.tc .acts button{display:flex;gap:6px;align-items:center;height:30px;padding:0 10px;border-radius:7px;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.tc .acts button:hover{background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue)}
.tc .acts svg{width:16px;height:16px}
.tc .acts .ico{width:36px;justify-content:center;padding:0}.tc .acts .ico svg{width:19px;height:19px}
.tc .acts .ico.heart{color:var(--tc-react-heart)}.tc .acts .ico.like{color:var(--blue)}.tc .acts .ico.smile{color:var(--tc-react-smile)}.tc .acts .ico.check{color:var(--tc-react-check)}
.tc-comp{flex:none;border-top:1px solid var(--card-edge);padding:10px 16px 12px;display:flex;flex-direction:column;gap:8px;background:var(--card)}
.tc-comp.ro{flex-direction:row;align-items:center;color:var(--muted);font-size:14px}.tc-comp.ro svg{width:16px;height:16px}
.tc-line{display:flex;gap:10px;align-items:flex-end}
.tc-in{flex:1;min-width:0;position:relative}
.tc-in textarea{display:block;width:100%;min-height:42px;max-height:140px;resize:none;border:1px solid var(--card-edge);border-radius:12px;padding:10px 14px;font:inherit;font-size:14.5px;line-height:1.4;color:var(--ink);background:var(--card);outline:0}
.tc-in textarea:focus{border-color:var(--blue)}
.tc-send{height:42px;padding:0 18px;border-radius:12px;border:0;background:var(--blue);color:var(--tc-on-accent);font:inherit;font-weight:600;font-size:14.5px;display:flex;gap:8px;align-items:center;cursor:pointer;flex:none}
.tc-send svg{width:18px;height:18px}.tc-send:disabled{opacity:.6}
.tc-reply{display:flex;gap:8px;align-items:center}.tc-reply .quote{flex:1;margin:0;max-width:none}
.tc-x{width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}.tc-x svg{width:16px;height:16px}
.tc-pend{display:flex;gap:6px;flex-wrap:wrap}
.pchip{display:inline-flex;gap:6px;align-items:center;min-height:28px;padding:0 6px 0 8px;border-radius:14px;background:var(--hair);font-size:13px;font-weight:600;max-width:100%}
.pchip svg{width:14px;height:14px;flex:none}
.pchip i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--tc-on-accent);font-size:9px;font-style:normal;font-weight:700;margin-left:-4px;flex:none}
.pchip.dept{background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue)}
.pchip.err{background:var(--danger-bg);color:var(--tc-danger)}
.pchip button{border:0;background:none;color:inherit;opacity:.6;cursor:pointer;display:grid;place-items:center;padding:2px;border-radius:50%}.pchip button:hover{opacity:1}
.tc-at{position:absolute;left:0;bottom:calc(100% + 6px);width:min(360px,100%);background:var(--card);border:1px solid var(--card-edge);border-radius:12px;box-shadow:0 10px 30px var(--tc-shadow-18);padding:4px;z-index:5}
.tc-at button,.tc-person{display:flex;gap:10px;align-items:center;width:100%;padding:7px 10px;border:0;border-radius:9px;background:none;color:var(--ink);font:inherit;text-align:left}
.tc-at button{cursor:pointer}.tc-at button.hi,.tc-at button:hover{background:color-mix(in srgb,var(--blue) 10%,var(--card))}
.tc-at b,.tc-person b{display:block;font-size:14px;font-weight:600}.tc-at small,.tc-person small{display:block;font-size:12.5px;color:var(--muted)}
.tc-person>span:nth-child(2){flex:1;min-width:0}
.tc-people{display:grid;gap:2px}.tc-people.pick{max-height:300px;overflow-y:auto;margin-top:6px;border:1px solid var(--card-edge);border-radius:10px;padding:4px}
.tc-people.pick .tc-person{cursor:pointer}.tc-people.pick .tc-person:hover{background:var(--hair)}
.tc-pick-q{width:100%;height:40px;border:1px solid var(--card-edge);border-radius:10px;padding:0 12px;font:inherit;background:var(--card);color:var(--ink)}
.tc-role{font-size:12px;font-weight:700;color:var(--tc-warn);background:var(--warn-bg);border-radius:10px;padding:2px 9px;flex:none}
.tc-pa{display:flex;gap:4px;align-items:center;flex:none}
.inp.chips{min-height:42px;border:1px solid var(--card-edge);border-radius:10px;padding:6px 8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--card)}
.inp.chips input{flex:1;min-width:160px;border:0;outline:0;background:none;font:inherit;color:var(--ink);height:28px}
.inp.chips:focus-within{border-color:var(--blue)}
.tc-hint{font-size:13.5px;margin:0}
.tc-manage{display:grid;gap:12px;padding-bottom:6px;border-bottom:1px solid var(--card-edge)}
.tc-manage [data-add]{justify-self:start;margin-top:6px}
.tc-inline{display:flex;gap:8px}.tc-inline input{flex:1;min-width:0;height:36px;text-transform:none}
/* Ô nhập nằm trong label.field của hộp thoại host: khung, phông, màu theo kiểu ô nhập hộp thoại của host (ở p0.css quy tắc đó đứng SAU nên thắng — giữ đúng như trước khi tách) */
.tc-inline input:not(:where(dialog.modal .field input)){border:1px solid var(--card-edge);border-radius:9px;padding:0 10px;font:inherit;background:var(--card);color:var(--ink)}
.tc-check{display:flex;gap:8px;align-items:center;font-size:14px}
.tc-leave{margin-top:12px;justify-self:start}
@media (max-width:850px){
  .tc{grid-template-columns:minmax(0,1fr);height:calc(100dvh - 250px)}
  .tc .tc-conv{display:none}.tc.show-conv .tc-conv{display:flex}.tc.show-conv .tc-side{display:none}
  .tc-tabs:has(+ .tc.show-conv){display:none}
  .tc-back{display:grid}
  .tc .m{max-width:90%}.tc-msgs{padding:12px 12px 8px}
  .tc-send{padding:0 14px}
  .tc .acts{top:auto;bottom:calc(100% - 6px)}
}
.tc-form{display:grid;gap:14px}.field .inp.chips input,.field .inp.chips input:focus{border:0;box-shadow:none;padding:0;background:none;min-height:28px;width:auto}
.tc-in textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc .m .who{flex-wrap:wrap}

/* Trò chuyện Đợt 2 (ảnh TC-3): trao đổi theo phiếu + chuyển tin thành việc — chat-thread.js */
.tag-doc{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue);font-size:11.5px;font-weight:700;flex:none}
.tc.tc-embed{display:block;height:auto;min-height:0;padding:0;overflow:hidden}
.tc.tc-embed .tc-pane{border:0;border-radius:0;height:auto;max-height:540px}.tc.tc-embed .tc-msgs{min-height:96px}.tc.tc-embed .tc-mwrap{flex:0 1 auto}
.tc-embed .tc-head h2{font-size:16px}
/* Khung trao đổi nhúng trên trang phiếu: tiêu đề / dòng phụ không xuống dòng làm cả trang rộng quá màn hình điện thoại (trang chi tiết đề nghị chi 390px rộng thành 480px) */
.tc-embed .tc-head .tt{flex:1 1 0;width:0}.tc-embed .tc-head .sp{display:none}
.tc-sys svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.tc-sys a{color:var(--blue);font-weight:600}
.tc-tasks{display:flex;flex-direction:column;gap:4px;margin-top:5px;max-width:100%}
.tc-task{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:28px;padding:2px 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--blue) 35%,var(--card-edge));background:color-mix(in srgb,var(--blue) 7%,var(--card));color:var(--ink);font-size:13px;text-decoration:none}
.tc-task:hover{border-color:var(--blue);text-decoration:none}
.tc-task svg{width:15px;height:15px;color:var(--blue);flex:none}.tc-task b{color:var(--blue);font-weight:700;flex:none}
.tc-task span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tc-task i{font-style:normal;font-size:11.5px;font-weight:700;border-radius:8px;padding:1px 7px;background:var(--hair);color:var(--muted);flex:none}
.tc-task.s-XONG i{background:var(--ok-bg);color:var(--tc-ok)}.tc-task.s-CHO_DUYET i{background:var(--warn-bg);color:var(--tc-warn)}.tc-task.s-HUY{opacity:.7}.tc-task.s-HUY span{text-decoration:line-through}
.tc .acts button.hi{background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue)}
.tc-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote.tc-q{display:block;border-left:3px solid var(--blue);background:var(--hair);border-radius:6px;padding:6px 10px;font-size:13.5px;color:var(--muted);white-space:normal}
.quote.tc-q b{display:block;color:var(--ink);font-size:12.5px}
@media (max-width:600px){.tc-two{grid-template-columns:1fr}.tc.tc-embed .tc-pane{max-height:480px}}

/* Trò chuyện Đợt 3 (ảnh TC-2): khách bên ngoài */
.tag-guest{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:10px;background:var(--warn-bg);color:var(--tc-guest);font-size:11.5px;font-weight:700;flex:none;white-space:nowrap}
.tag-guest svg{width:12px;height:12px}
.tc-head h2 .tag-guest{margin-left:8px;vertical-align:2px}
.tc .m.guest .bub{border-color:var(--tc-guest-edge)}
.tc-gnote{display:flex;gap:6px;align-items:center;font-size:12.5px;font-weight:600;color:var(--tc-guest);background:var(--warn-bg);border-radius:8px;padding:5px 10px}
.tc-gnote svg{width:14px;height:14px;flex:none}
.tc-guests{margin-top:6px;padding-top:4px;border-top:1px solid var(--card-edge)}
.tc-guests .tc-sec svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.tc-gst{font-size:12px;font-weight:700;border-radius:10px;padding:2px 9px;white-space:nowrap;flex:none;background:var(--hair);color:var(--muted)}
.tc-gst.ACTIVE{background:var(--ok-bg);color:var(--tc-ok)}.tc-gst.PENDING{background:var(--warn-bg);color:var(--tc-warn)}
.tc-ginvite{display:grid;gap:10px;margin-top:10px;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--warn-bg) 40%,var(--card))}
.tc-ginvite [data-ginvite]{justify-self:start}
.btn.amber{border-color:var(--tc-guest-edge);color:var(--tc-guest);background:var(--card)}
.tc-rules{margin:0;padding:10px 14px 10px 30px;border-radius:10px;background:var(--card);border:1px dashed var(--tc-guest-edge);font-size:13px;line-height:1.6}
.tc-gnew{border:1px solid var(--card-edge);border-radius:12px;padding:10px 14px}
.tc-gnew summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--tc-guest)}.tc-gnew summary svg{width:15px;height:15px;vertical-align:-2px;margin-right:6px}
.tc-gnew [data-gnew]{display:grid;gap:10px;margin-top:10px}

/* Trò chuyện · Gói nền bảo mật (ảnh BM-1): tin tự xoá + mục Bảo mật */
.chip-ttl{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;font-size:11.5px;font-weight:700;white-space:nowrap;background:color-mix(in srgb,var(--tc-ttl-mix) 12%,var(--card));color:var(--tc-ttl);margin-left:8px;vertical-align:2px}
.chip-ttl svg{width:13px;height:13px}
.tc-left{color:var(--tc-ttl);font-size:12px}.tc-left.me{margin-top:3px}
.tc-secu{margin-top:6px;padding-top:4px;border-top:1px solid var(--card-edge)}
.tc-secu .tc-sec svg,.tc-ttl b svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.tc-ttl{display:grid;gap:8px;margin:4px 0 10px}.tc-ttl>b{font-size:14px}
.tc-ttl small{color:var(--muted);font-size:12.5px;line-height:1.5}.tc-ttl small b{color:var(--ink)}
.tc-ttlseg button:disabled{opacity:.55;cursor:default}
.tc-always{list-style:none;margin:0;padding:10px 12px;border:1px solid var(--card-edge);border-radius:12px;display:grid;gap:8px}
.tc-always li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.tc-always svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--tc-ok)}.tc-always li.no svg{color:var(--tc-warn)}
.tc-always small{display:block;color:var(--muted);font-size:12.5px}
/* Trò chuyện · Nhóm «Mật» (ảnh BM-2) */
.tc-av.mat{background:var(--tc-secret)}
.chip-mat{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:11px;font-size:11.5px;font-weight:800;letter-spacing:.04em;white-space:nowrap;background:var(--tc-secret);color:var(--tc-on-accent);margin-left:8px;vertical-align:2px;flex:none}
.chip-mat svg{width:12px;height:12px}.chip-mat.sm{height:20px;margin-left:0}
.tc-msgs.mat{position:relative;background:color-mix(in srgb,var(--tc-secret) 4%,var(--card));user-select:none;-webkit-user-select:none}
.tc-mwrap{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;overflow:hidden}
.tc-wm{position:absolute;inset:-40% -30%;display:flex;flex-wrap:wrap;gap:54px 70px;align-content:center;justify-content:center;transform:rotate(-18deg);pointer-events:none;z-index:2;opacity:.085;color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;margin-top:0!important}
.tc-sys.alert{color:var(--tc-alert);font-weight:600}.tc-sys.alert svg{width:15px;height:15px;vertical-align:-2px;margin-right:6px}
button.att-file,button.att-img{font:inherit;text-align:left;cursor:pointer;padding:0}
button.att-file{padding:8px 12px;width:100%}button.att-img{border:0}
.tc .att-file.locked{opacity:.6;cursor:not-allowed}
.tc-view{position:relative;overflow:hidden;border-radius:10px;background:var(--hair);display:grid;place-items:center;min-height:320px;max-height:70vh;user-select:none;-webkit-user-select:none}
.tc-view img{max-width:100%;max-height:70vh;display:block;pointer-events:none}
.tc-view iframe{width:100%;height:70vh;border:0;display:block}
.tc-view .tc-wm{opacity:.13}
.tc-mat{border:1px solid var(--card-edge);border-radius:12px;padding:12px 14px;margin-bottom:10px;display:grid;gap:10px}
.tc-mat.on{border-color:var(--tc-secret);background:color-mix(in srgb,var(--tc-secret) 4%,var(--card))}
.tc-matrow{display:flex;gap:14px;align-items:center;justify-content:space-between;cursor:pointer}
.tc-matrow.new{border:1px solid var(--card-edge);border-radius:12px;padding:10px 14px}
.tc-matrow b{display:block;font-size:14.5px}.tc-matrow b svg{width:15px;height:15px;vertical-align:-2px;margin-right:6px;color:var(--tc-secret)}
.tc-matrow small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45;font-weight:400;text-transform:none;letter-spacing:0}
.tc-switch{appearance:none;-webkit-appearance:none;width:44px;height:26px;min-height:26px!important;border-radius:13px!important;background:var(--tc-switch-off)!important;border:0!important;padding:0!important;position:relative;flex:none;cursor:pointer;transition:background .15s}
.tc-switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--tc-switch-knob);transition:left .15s}
.tc-switch:checked{background:var(--tc-switch-on)!important}.tc-switch:checked:after{left:21px}.tc-switch:disabled{opacity:.5;cursor:default}
.tc-matrules{margin:0;padding-left:20px;font-size:13px;line-height:1.6}

/* Trò chuyện · Cài đặt của từng người (ảnh CD-1 / CD-4) */
.tc-pop{position:fixed;z-index:1200;min-width:230px;max-width:300px;background:var(--card);border:1px solid var(--card-edge);border-radius:12px;box-shadow:0 10px 28px var(--tc-shadow-20);padding:6px;display:grid;gap:1px}
.tc-pop button{display:flex;gap:9px;align-items:center;min-height:36px;padding:0 10px;border:0;background:none;border-radius:8px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.tc-pop button:hover,.tc-pop button:focus-visible{background:color-mix(in srgb,var(--blue) 9%,var(--card));color:var(--blue);outline:none}
.tc-pop button.on{color:var(--tc-ok)}.tc-pop button svg{width:16px;height:16px;flex:none;color:var(--muted)}.tc-pop button:hover svg{color:inherit}
.tc-pop small{padding:6px 10px 4px;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-pop small.note{text-transform:none;letter-spacing:0;font-weight:400;font-size:12.5px;white-space:normal;line-height:1.45}
.tc-pin{color:var(--tc-warn);flex:none;align-self:center}.tc-pin svg{width:13px;height:13px;display:block}
.tc-dot{width:10px;height:10px;border-radius:50%;background:var(--blue);flex:none}
.tc-tip{margin:10px 16px 12px;font-size:12px;color:var(--muted);line-height:1.45}
.tc.fs-s .tc-msgs .bub{font-size:13px}.tc.fs-l .tc-msgs .bub{font-size:16.5px}
.tc-set{display:grid;grid-template-columns:1.1fr 1fr;gap:16px 22px;align-items:start}.tc-set .col{display:grid;gap:16px;min-width:0}
.tc-set section{border:1px solid var(--card-edge);border-radius:12px;padding:14px 16px;display:grid;gap:2px}
.tc-set h4{margin:0 0 4px;font-size:15.5px;display:flex;gap:8px;align-items:center}.tc-set h4 svg{width:18px;height:18px}
.tc-set .tc-hint svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.tc-kr{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair)}.tc-set section>.tc-kr:last-child{border-bottom:0;padding-bottom:0}
.tc-kr .ki{width:36px;height:36px;border-radius:10px;background:var(--hair);display:grid;place-items:center;color:var(--muted);flex:none}.tc-kr .ki svg{width:18px;height:18px}
.tc-kr .kt{flex:1;min-width:0}.tc-kr b{display:block;font-size:14.5px}.tc-kr small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}
.tc-seg{flex:none;flex-wrap:nowrap}.tc-seg button{white-space:nowrap;padding:7px 11px;font-size:14px}.tc-kr .kt{min-width:150px}
.tc-set .lbl{font-size:12.5px;font-weight:700;color:var(--muted);margin:10px 0 4px}
.tc-tones{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.tc-tones button{display:flex;gap:6px;align-items:center;min-height:38px;padding:0 8px;white-space:nowrap;border:1px solid var(--card-edge);border-radius:10px;background:var(--card);font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.tc-tones button svg{width:15px;height:15px;color:var(--muted);flex:none}
.tc-tones button.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,var(--card));color:var(--blue)}.tc-tones button.on svg{color:var(--blue)}
.tc-switch.blue:checked{background:var(--blue)!important}
.tc-pv{display:flex;gap:10px;align-items:center;border:1px solid var(--card-edge);border-radius:12px;padding:10px 12px;margin:10px 0 6px;background:color-mix(in srgb,var(--hair) 45%,var(--card))}
.tc-pv .lg{width:34px;height:34px;border-radius:9px;background:var(--tc-pv-logo-bg);color:var(--tc-on-accent);display:grid;place-items:center;flex:none}.tc-pv .lg svg{width:18px;height:18px}
.tc-pv b{display:block;font-size:13.5px}.tc-pv small{font-size:12.5px;color:var(--muted)}
.tc-fs{display:flex;gap:8px;flex:none}.tc-fs button{width:38px;height:34px;border:1px solid var(--card-edge);border-radius:9px;background:var(--card);font:inherit;font-weight:700;cursor:pointer;color:var(--ink)}
.tc-fs button.f-s{font-size:12px}.tc-fs button.f-l{font-size:17px}.tc-fs button.on{border-color:var(--blue);color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,var(--card))}
@media (max-width:900px){.tc-set{grid-template-columns:1fr}.tc-kr{flex-wrap:wrap}.tc-tones{grid-template-columns:repeat(2,1fr)}}

/* Trò chuyện · Cài đặt Đợt 2 (ảnh CD-3 / CD-4): hình nền, màu tin, trạng thái, ưu tiên, vắng mặt, nhắc lại */
.wp-grid{background-image:linear-gradient(var(--tc-wp-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--tc-wp-grid-line) 1px,transparent 1px)!important;background-size:22px 22px!important;background-color:var(--tc-wp-grid-bg)!important}
.wp-sky{background:linear-gradient(160deg,var(--tc-wp-sky-1),var(--tc-wp-sky-2))!important}
.wp-stripe{background:repeating-linear-gradient(45deg,var(--tc-wp-stripe-1) 0 10px,var(--tc-wp-stripe-2) 10px 20px)!important}
.wp-dark{background:var(--tc-wp-dark)!important}
.tc-msgs.wp-dark .who,.tc-msgs.wp-dark .tc-sys,.tc-msgs.wp-dark .seen,.tc-msgs.wp-dark .tc-left,.tc-msgs.wp-dark .tc-remind{color:var(--tc-wp-dark-ink)}.tc-msgs.wp-dark .who b{color:var(--tc-wp-dark-ink-strong)}
.tc-msgs.wp-dark .tc-sys.alert{color:var(--tc-wp-dark-alert)}.tc-msgs.wp-dark .tc-remind button{color:var(--tc-wp-dark-link)}
.bb-teal{--tc-me:var(--tc-tone-teal)}.bb-violet{--tc-me:var(--tc-tone-violet)}.bb-amber{--tc-me:var(--tc-tone-amber)}.bb-pink{--tc-me:var(--tc-tone-pink)}.bb-slate{--tc-me:var(--tc-tone-slate)}.bb-blue{--tc-me:var(--blue)}
.tc .tc-mwrap .m.me .bub:not(.gone){background:var(--tc-me,var(--blue));border-color:var(--tc-me,var(--blue))}
.tc-kw{background:var(--tc-kw-bg);color:inherit;border-radius:4px;padding:0 3px;font-weight:600}
.tc-remind{display:flex;gap:5px;align-items:center;font-size:12.5px;color:var(--muted);margin-top:4px}.tc-remind svg{width:14px;height:14px}
.tc-remind button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--blue);cursor:pointer}
.tc-stt{font-size:11.5px;font-weight:700;color:var(--tc-ok);background:var(--tc-ok-soft);border-radius:9px;padding:1px 8px;white-space:nowrap;flex:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;margin-left:6px}
.tc-stt.leave,.tc-stt.trip{color:var(--tc-warn);background:var(--warn-bg)}.tc-stt.meeting{color:var(--tc-stt-meeting);background:var(--tc-stt-meeting-bg)}
.tc .react.star{color:var(--tc-react-star)}.tc .react.bolt{color:var(--tc-react-bolt)}.tc .acts .ico.star{color:var(--tc-react-star)}.tc .acts .ico.bolt{color:var(--tc-react-bolt)}
.tc-setnav{margin-bottom:14px}.tc-setnav button svg{width:16px;height:16px}
.tc-wps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tc-wps button{height:66px;border-radius:10px;border:1px solid var(--card-edge);background:var(--card);display:flex;align-items:flex-end;padding:5px 7px;font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;text-align:left}
.tc-wps button.wp-dark{color:var(--tc-wp-dark-ink)}.tc-wps button.on{outline:2px solid var(--blue);outline-offset:1px}
.tc-cols{display:flex;gap:10px}.tc-cols button{width:34px;height:34px;border-radius:50%;border:0;background:var(--tc-me);cursor:pointer;padding:0}.tc-cols button.on{outline:2px solid var(--ink);outline-offset:2px}
.tc-pvb{display:flex;justify-content:flex-end;margin-top:10px;padding:12px;border-radius:10px;border:1px solid var(--card-edge)}
.tc-pvb span{background:var(--tc-me,var(--blue));color:var(--tc-on-accent);border-radius:14px 14px 4px 14px;padding:8px 13px;font-size:14px}
.tc-emo{display:flex;gap:8px}.tc-emo button{width:40px;height:40px;border-radius:50%;border:0;background:var(--hair);display:grid;place-items:center;color:var(--muted);cursor:pointer}
.tc-emo button svg{width:19px;height:19px}.tc-emo button.on{outline:2px solid currentColor;background:var(--card)}
.tc-emo .heart.on{color:var(--tc-react-heart)}.tc-emo .like.on{color:var(--blue)}.tc-emo .smile.on{color:var(--tc-react-smile)}.tc-emo .check.on{color:var(--tc-react-check)}.tc-emo .star.on{color:var(--tc-react-star)}.tc-emo .bolt.on{color:var(--tc-react-bolt)}
.tc-sts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tc-sts button{min-height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--card-edge);background:var(--card);display:inline-flex;gap:6px;align-items:center;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.tc-sts button svg{width:15px;height:15px}.tc-sts button.on{background:var(--tc-ok-soft);border-color:var(--tc-ok-edge);color:var(--tc-ok)}
.tc-stc{margin-bottom:4px}.tc-set .tc-inline{display:flex;gap:8px}.tc-set .tc-inline input{flex:1;min-width:0}
.tc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;min-height:4px}
.tc-chip{display:inline-flex;gap:6px;align-items:center;min-height:30px;padding:0 6px 0 5px;border-radius:15px;background:var(--hair);font-size:13px;font-weight:600}
.tc-chip.kw{background:var(--warn-bg);color:var(--tc-warn);padding-left:11px}
.tc-chip button{border:0;background:none;padding:2px;display:grid;place-items:center;color:inherit;opacity:.6;cursor:pointer;border-radius:50%}.tc-chip button:hover{opacity:1}.tc-chip button svg{width:13px;height:13px}
.tc-add{position:relative;margin-bottom:6px}.tc-add input{width:100%}
.tc-sug{display:grid;gap:1px;border:1px solid var(--card-edge);border-radius:10px;padding:4px;margin-top:4px;background:var(--card)}
.tc-sug button{display:flex;gap:9px;align-items:center;border:0;background:none;padding:6px 8px;border-radius:8px;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.tc-sug button:hover{background:color-mix(in srgb,var(--blue) 9%,var(--card))}.tc-sug b{display:block;font-size:13.5px}.tc-sug small{color:var(--muted);font-size:12px}
.tc-days{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0}
@media (max-width:900px){.tc-wps{grid-template-columns:repeat(3,1fr)}}
.tc-av.xs{width:22px;height:22px;font-size:9px;border-radius:50%}
.tc-set input:not([type=checkbox]):not([type=date]),.tc-set textarea{min-height:40px;border:1px solid var(--card-edge);border-radius:10px;padding:8px 12px;font:inherit;font-size:14.5px;background:var(--card);color:var(--ink)}
.tc-set textarea{width:100%;resize:vertical}

/* Ảnh 167a: nút Trò chuyện cạnh chuông + bảng xem nhanh (cùng khung .nt-panel) */
.tcq .nt-ph>.sub{margin-left:10px}.tcq .tcq-sp{flex:1}.tcq .nt-ph .nt-link{display:inline-flex;align-items:center;gap:6px}.tcq .nt-ph .nt-link svg{width:16px;height:16px}
.tcq .nt-it{align-items:center}.tcq .nt-it .tc-av{width:40px;height:40px;flex:none;margin-right:2px}.tcq .nt-tx{min-width:0}
.tcq .nt-tx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tcq .nt-it.un .nt-tx small{color:var(--ink);font-weight:600}
.tcq .tcq-n{background:var(--blue);color:var(--tc-on-accent);font-size:12px;font-weight:800;min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 6px;margin-left:8px;flex:none}
.tcq .nt-pf{justify-content:space-between}.tcq .tcq-tip{display:flex;align-items:center;gap:6px;min-width:0}
/* Ảnh 167b: chuông + hình nền riêng trong bảng thông tin cuộc trò chuyện */
.tc-pers{border:1px solid var(--card-edge);border-radius:14px;padding:14px 16px;margin-bottom:16px;background:var(--neutral-bg)}
.tc-pers-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}.tc-pers-h svg{width:18px;height:18px;color:var(--blue)}.tc-pers-h .sub{margin-left:auto;font-size:12.5px}
.tc-pers .lbl{font-size:13px;font-weight:700;margin:10px 0 6px}.tc-pers .tc-tones button.on{border-color:var(--blue);color:var(--blue);background:var(--card)}
.tc-wps.tc-wps6{grid-template-columns:repeat(6,1fr)}.tc-wps6 button{height:54px}.tc-wps button.wp-def{background:repeating-linear-gradient(135deg,var(--card) 0 6px,var(--neutral-bg) 6px 12px)}
.tc-pers-f{margin-top:10px;font-size:12.5px}.tc-pers-reset{border:0;background:none;padding:0;font:inherit;color:var(--blue);cursor:pointer;font-weight:600}
@media (max-width:900px){.tc-wps.tc-wps6{grid-template-columns:repeat(3,1fr)}}

/* Trò chuyện bổ sung — Đợt 1 (ảnh TC-A1..TC-A5, anh Tâm duyệt 10/10/2026): sửa tin, chuyển tiếp, ghim tin, @Tất cả, đang nhập, kho ảnh / tệp / link, tìm trong một cuộc, nút xuống tin mới nhất, bản nháp — chat-thread.js */
.tc-ib.on{color:var(--blue);border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--card))}
.tc .tc-fwd{display:flex;gap:5px;align-items:center;font-size:12px;font-weight:600;font-style:italic;color:var(--muted);margin-bottom:3px}.tc .tc-fwd svg{width:13px;height:13px;flex:none}
.tc .m.me .tc-fwd{color:var(--tc-me-fwd)}
.tc .tc-ed{font-size:12px;font-style:italic;color:var(--muted);white-space:nowrap}.tc .m.me .tc-ed{color:var(--tc-me-ed)}
.tc .at.all{font-weight:800}
/* Thanh thao tác thêm nút ba chấm (Chuyển tiếp · Sửa tin · Ghim): tin của mình neo mép phải để không tràn khỏi khung khi tin ngắn; điện thoại cho xuống dòng */
.tc .m.me .acts{left:auto;right:8px}
.tc .tc-pinned{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:600;color:var(--tc-warn);margin-top:3px}.tc .tc-pinned svg{width:12px;height:12px}
.tc .m.flash .bub{animation:tc-flash 2.2s ease-out}
@keyframes tc-flash{0%,55%{box-shadow:0 0 0 3px color-mix(in srgb,var(--tc-flash) 75%,transparent)}100%{box-shadow:0 0 0 3px transparent}}
.tc-pinbar{display:flex;gap:10px;align-items:center;width:100%;padding:8px 18px;border:0;border-bottom:1px solid var(--card-edge);border-left:3px solid var(--blue);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;flex:none}
.tc-pinbar:hover{background:color-mix(in srgb,var(--blue) 6%,var(--card))}
.tc-pinbar>svg{width:16px;height:16px;flex:none;color:var(--blue)}
.tc-pinbar .tx{flex:1;min-width:0;display:block}.tc-pinbar .tx b{display:block;font-size:12px;font-weight:700;color:var(--blue)}
.tc-pinbar .tx span{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-pinbar>i{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);flex:none}
.tc-find{display:flex;gap:8px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--card-edge);flex:none;background:var(--card)}
.tc-find .tc-search{flex:1;margin:0}
.tc-found{position:absolute;inset:0 0 auto 0;max-height:min(70%,420px);overflow-y:auto;background:var(--card);border-bottom:1px solid var(--card-edge);box-shadow:0 12px 26px var(--tc-shadow-16);z-index:4;padding-bottom:6px}
.tc-found .tc-row .l2>span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tc-jump{position:absolute;right:18px;bottom:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--card-edge);background:var(--card);color:var(--blue);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px var(--tc-shadow-20);z-index:3;padding:0}
.tc-jump:hover{border-color:var(--blue)}.tc-jump svg{width:20px;height:20px}
.tc-jump i{position:absolute;top:-7px;right:-5px;min-width:20px;height:20px;border-radius:10px;background:var(--blue);color:var(--tc-on-accent);font-style:normal;font-size:11.5px;font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid var(--card)}
.tc-typing{flex:none;display:flex;gap:8px;align-items:center;padding:4px 20px 5px;font-size:12.5px;color:var(--muted);background:color-mix(in srgb,var(--hair) 45%,var(--card))}
.tc-typing .dots{display:inline-flex;gap:3px;align-items:center;height:18px;padding:0 8px;border-radius:9px;background:var(--card);border:1px solid var(--card-edge)}
.tc-typing .dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:tc-dot 1.2s infinite ease-in-out}
.tc-typing .dots i:nth-child(2){animation-delay:.15s}.tc-typing .dots i:nth-child(3){animation-delay:.3s}
@keyframes tc-dot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.tc-typing .dots i,.tc .m.flash .bub{animation-duration:0s}}
.tc-row .l2>.tc-typing-l,.tc-row.unread .l2>.tc-typing-l{color:var(--blue);font-weight:600}
.tc-draft{font-style:normal;font-weight:700;color:var(--tc-draft)}
.tc-reply.edit .quote{border-left-color:var(--tc-edit-edge)}.tc-reply.edit .quote b{display:flex;gap:5px;align-items:center;color:var(--tc-warn)}.tc-reply.edit .quote b svg{width:13px;height:13px}
.tc-mlink{display:flex;gap:12px;align-items:center;width:100%;padding:11px 14px;margin-bottom:14px;border:1px solid var(--card-edge);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.tc-mlink:hover{border-color:var(--blue)}.tc-mlink>svg{width:20px;height:20px;flex:none;color:var(--blue)}.tc-mlink>svg:last-child{width:16px;height:16px;color:var(--muted)}
.tc-mlink span{flex:1;min-width:0}.tc-mlink b{display:block;font-size:14.5px;font-weight:600}.tc-mlink small{display:block;font-size:12.5px;color:var(--muted)}
/* Hộp chuyển tiếp: dòng chọn có dấu tích tròn */
.tc-fw .tc-q{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.tc-fw .tc-people.pick{max-height:min(42vh,340px);margin-top:0}.tc-fw .tc-sec{padding:8px 10px 2px}
.tc-ck{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--card-edge);display:grid;place-items:center;flex:none;color:transparent}
.tc-ck svg{width:13px;height:13px;stroke-width:3}
.tc-person.sel .tc-ck{background:var(--blue);border-color:var(--blue);color:var(--tc-on-accent)}
.tc-person.sel{background:color-mix(in srgb,var(--blue) 8%,var(--card))}
.tc-person[data-fk]:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* Kho ảnh · tệp · link */
.tc-media{min-height:280px}.tc-mtabs{margin:-8px 0 6px}.tc-mtabs a{cursor:pointer}
.tc-mbody{position:relative;overflow:hidden;display:grid;gap:6px}.tc-mbody .tc-more{justify-self:center;margin-top:8px}
.tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.tc-tile{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--hair)}
.tc-tile .pic{display:block;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer}.tc-tile img{width:100%;height:100%;object-fit:cover;display:block}
.tc-go{width:32px;height:32px;border-radius:9px;border:1px solid var(--card-edge);background:var(--card);color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.tc-go:hover{color:var(--blue);border-color:var(--blue)}.tc-go svg{width:16px;height:16px}
.tc-tile .tc-go{position:absolute;right:5px;bottom:5px;width:28px;height:28px;opacity:0;box-shadow:0 2px 8px var(--tc-shadow-25)}
.tc-tile:hover .tc-go,.tc-tile .tc-go:focus-visible{opacity:1}
@media (hover:none){.tc-tile .tc-go{opacity:1}}
.tc-frow{display:flex;gap:8px;align-items:center;min-width:0}
.tc-media .att-file{flex:1;min-width:0;display:flex;gap:10px;align-items:center;border:1px solid var(--card-edge);border-radius:10px;padding:8px 12px;background:var(--card);color:var(--ink);text-decoration:none;font:inherit;text-align:left}
.tc-media a.att-file:hover,.tc-media button.att-file:hover{border-color:var(--blue)}.tc-media button.att-file{cursor:pointer}
.tc-media .att-file.locked{opacity:.6;cursor:not-allowed}
.tc-media .att-file>span:last-child{min-width:0;flex:1}
.tc-media .att-file b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tc-media .att-file small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-media .fi{width:36px;height:36px;border-radius:8px;background:var(--danger-bg);color:var(--tc-file-pdf);display:grid;place-items:center;font-size:10.5px;font-weight:800;flex:none}
.tc-media .fi.x{background:var(--ok-bg);color:var(--tc-file-xls)}.tc-media .fi.w,.tc-media .fi.l{background:color-mix(in srgb,var(--blue) 12%,var(--card));color:var(--blue)}.tc-media .fi svg{width:17px;height:17px}
html[data-mode="dark"] .tc .tc-pinned,html[data-mode="dark"] .tc-reply.edit .quote b{color:var(--tc-warn-d)}
html[data-mode="dark"] .tc-draft{color:var(--tc-draft-d)}
html[data-mode="dark"] .tc-jump,html[data-mode="dark"] .tc-found{box-shadow:0 10px 26px var(--tc-shadow-50-d)}
.tc-msgs.wp-dark .tc-pinned{color:var(--tc-wp-dark-pin)}
@media (max-width:850px){
  .tc-pinbar{padding:8px 12px}.tc-find{padding:8px 10px}.tc-typing{padding:4px 12px 5px}.tc-jump{right:12px;bottom:10px}
  .tc-head{gap:8px;padding:10px 12px}
  .tc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tc .acts{flex-wrap:wrap;justify-content:flex-end;max-width:min(330px,calc(100vw - 64px));white-space:normal}.tc .m:not(.me) .acts{right:auto;left:44px;justify-content:flex-start}
}

/* Trò chuyện bổ sung — Đợt 2, kiểu Zalo (ảnh TC-B1..TC-B6, anh Tâm duyệt 10/10/2026): tin thoại, bảng «Gửi kèm», video, album ảnh, xem trước link, bình chọn, danh thiếp, vị trí, Cloud của tôi, bảng biểu tượng đầy đủ — chat-thread.js + chat-extra.js */
.tc-av.cloud{background:linear-gradient(135deg,var(--tc-cloud-1),var(--tc-cloud-2) 55%,var(--tc-cloud-3))}
/* Ô soạn tin: nút «+» mở bảng Gửi kèm, nút biểu tượng nằm trong ô nhập, micro chỉ hiện khi ô nhập trống */
.tc-in textarea{padding-right:44px}
.tc-emo-b{position:absolute;right:6px;bottom:6px;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.tc-emo-b:hover{color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--card))}.tc-emo-b svg{width:19px;height:19px}
.tc-line.has-text .tc-mic{display:none}
.tc-pop.att{grid-template-columns:repeat(3,86px);gap:4px;padding:10px;min-width:0;max-width:none}
.tc-pop.att small{grid-column:1/-1;padding:0 4px 6px}
.tc-pop.att button{flex-direction:column;justify-content:center;gap:6px;min-height:0;padding:8px 2px;font-size:13px;text-align:center}
.tc-pop.att button svg,.tc-pop.att button:hover svg{width:46px;height:46px;padding:12px;border-radius:14px;color:var(--tc-on-accent);background:var(--tc-att-1)}
.tc-pop.att .ga2 svg,.tc-pop.att .ga2:hover svg{background:var(--tc-att-2)}.tc-pop.att .ga3 svg,.tc-pop.att .ga3:hover svg{background:var(--tc-att-3)}.tc-pop.att .ga4 svg,.tc-pop.att .ga4:hover svg{background:var(--tc-att-4)}
.tc-pop.att .ga5 svg,.tc-pop.att .ga5:hover svg{background:var(--tc-att-5)}.tc-pop.att .ga6 svg,.tc-pop.att .ga6:hover svg{background:var(--tc-att-6)}
/* Thanh đang ghi tin thoại (ảnh TC-B1) */
.tc-rec{display:flex;gap:10px;align-items:center;min-height:42px}
.tc-rec .dot{width:10px;height:10px;border-radius:50%;background:var(--tc-rec);flex:none;animation:tc-recdot 1s infinite}
.tc-rec>b{font-size:15px;font-weight:700;color:var(--tc-rec);font-variant-numeric:tabular-nums;min-width:36px}
.tc-rec .lv{display:flex;gap:3px;align-items:center;height:26px;flex:none}
.tc-rec .lv i{width:3px;height:7px;border-radius:2px;background:var(--blue);animation:tc-lv 1.1s infinite ease-in-out}
.tc-rec .lv .d1{animation-delay:.12s}.tc-rec .lv .d2{animation-delay:.31s}.tc-rec .lv .d3{animation-delay:.05s}.tc-rec .lv .d4{animation-delay:.44s}.tc-rec .lv .d5{animation-delay:.22s}
.tc-rec .nt{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes tc-recdot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes tc-lv{0%,100%{height:6px}50%{height:24px}}
@media (prefers-reduced-motion:reduce){.tc-rec .dot,.tc-rec .lv i{animation:none}.tc-rec .lv i{height:14px}}
/* Bong bóng tin thoại: nút phát, sóng âm (cột cao thấp cố định theo mã tệp), thời lượng, tốc độ */
.tc-voice{display:flex;gap:9px;align-items:center;min-width:min(250px,62vw);margin-top:6px}.tc .bub .tc-voice:first-child{margin-top:0}
.tc-voice .vp{width:34px;height:34px;border-radius:50%;border:0;background:var(--blue);color:var(--tc-on-accent);display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.tc-voice .vp svg{width:15px;height:15px;fill:currentColor}
.tc-voice .vw{flex:1;min-width:0;display:flex;gap:2px;align-items:center;height:28px;cursor:pointer;overflow:hidden}
.tc-voice .vw i{flex:1;max-width:3px;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--muted) 45%,transparent)}
.tc-voice .vw i.on{background:var(--blue)}
.tc-voice .vw .h1{height:5px}.tc-voice .vw .h2{height:8px}.tc-voice .vw .h3{height:12px}.tc-voice .vw .h4{height:15px}.tc-voice .vw .h5{height:19px}.tc-voice .vw .h6{height:23px}.tc-voice .vw .h7{height:27px}
.tc-voice small{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.tc-voice .vs{height:22px;min-width:36px;padding:0 6px;border-radius:11px;border:1px solid var(--card-edge);background:none;color:var(--muted);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;flex:none}
.tc-voice .vs:hover{border-color:var(--blue);color:var(--blue)}
.tc .m.me .tc-voice .vp{background:var(--tc-on-accent);color:var(--tc-me,var(--blue))}
.tc .m.me .tc-voice .vw i{background:var(--tc-me-wave)}.tc .m.me .tc-voice .vw i.on{background:var(--tc-on-accent)}
.tc .m.me .tc-voice small{color:var(--tc-me-soft)}.tc .m.me .tc-voice .vs,.tc .m.me .tc-voice .vs:hover{border-color:var(--tc-me-edge);color:var(--tc-on-accent)}
/* Album ảnh + video (ảnh TC-B3) */
.tc-album{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:268px;max-width:100%;border-radius:10px;overflow:hidden;margin-top:6px}
.tc-album .ph{position:relative;aspect-ratio:1;border:0;padding:0;background:var(--hair);cursor:pointer;display:block;overflow:hidden}
.tc-album .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tc-album.n3 .ph:first-child{grid-column:1/-1;aspect-ratio:2/1}
.tc-album .more{position:absolute;inset:0;background:var(--tc-media-scrim-58);color:var(--tc-on-media);font-size:22px;font-weight:700;display:grid;place-items:center}
.tc-vid{position:relative;display:block;width:268px;max-width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--tc-media-bg);border:0;padding:0;cursor:pointer;margin-top:6px}
.tc-vid img,.tc-tile .pic.vid img{width:100%;height:100%;object-fit:cover;display:block}
.tc-vid .pb,.tc-tile .pic.vid .pb{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;background:var(--tc-media-scrim-62);color:var(--tc-on-media);display:grid;place-items:center}
.tc-vid .pb svg,.tc-tile .pic.vid .pb svg{width:19px;height:19px;fill:var(--tc-on-media);margin-left:2px}
.tc-vid .du,.tc-tile .pic.vid .du{position:absolute;right:8px;bottom:8px;font-size:11.5px;font-weight:700;color:var(--tc-on-media);background:var(--tc-media-badge);border-radius:6px;padding:1px 6px}
.tc-tile .pic.vid{position:relative;background:var(--tc-media-bg)}.tc-tile .pic.vid .pb{width:36px;height:36px}.tc-tile .pic.vid .du{right:auto;left:6px;bottom:6px}
.tc .bub .tc-album:first-child,.tc .bub .tc-vid:first-child{margin-top:0}
/* Khung xem: lướt ảnh trong album, phát video */
.tc-vnav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:var(--tc-media-scrim-58);color:var(--tc-on-media);display:grid;place-items:center;cursor:pointer;z-index:3;padding:0}
.tc-vnav:hover{background:var(--tc-media-scrim-80)}.tc-vnav svg{width:20px;height:20px}.tc-vnav.prev{left:10px}.tc-vnav.prev svg{transform:rotate(180deg)}.tc-vnav.next{right:10px}
.tc-vcount{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:var(--tc-media-scrim-62);color:var(--tc-on-media);font-size:12.5px;font-weight:700;border-radius:10px;padding:2px 10px;z-index:3}
.tc-view.vid{background:var(--tc-view-bg);user-select:auto;-webkit-user-select:auto}.tc-view.vid video{max-width:100%;max-height:70vh;display:block;position:relative;z-index:1}
.tc-view.vid .tc-wm{z-index:2;color:var(--tc-on-media)}
.tc-vload{color:var(--tc-view-muted);font-size:14px;padding:40px 20px;text-align:center;margin:0}
/* Thẻ xem trước đường link (ảnh TC-B3) */
.tc .bub .tc-lk{display:block;margin-top:8px;width:320px;max-width:100%;border:1px solid var(--card-edge);border-radius:10px;overflow:hidden;background:var(--card);color:var(--ink);text-decoration:none}
.tc .bub .tc-lk:hover{border-color:var(--blue)}
.tc-lk img{display:block;width:100%;max-height:150px;object-fit:cover;background:var(--hair)}
.tc-lk .lt{display:block;padding:8px 11px 9px}
.tc-lk b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:700;line-height:1.35}
.tc-lk .ds{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.tc-lk .hs{display:block;font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bong bóng dạng thẻ (bình chọn, danh thiếp, vị trí): nền thẻ cả ở tin của mình */
.tc .tc-mwrap .m.me .bub.rich:not(.gone),.tc .m.me .bub.rich{background:var(--card);border-color:var(--card-edge);color:var(--ink)}
.tc .m.me .bub.rich .tc-fwd{color:var(--muted)}
/* Bình chọn (ảnh TC-B4) */
.tc-poll{display:grid;gap:6px;width:min(300px,68vw)}
.tc-poll .ph{display:flex;gap:5px;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--muted)}.tc-poll .ph svg{width:13px;height:13px;flex:none}
.tc-poll h5{margin:0 0 2px;font-size:15px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.tc-poll .tcp-o{position:relative;display:flex;gap:8px;align-items:center;min-height:36px;padding:6px 10px;border:1px solid var(--card-edge);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer;overflow:hidden;width:100%}
.tc-poll .tcp-o>i{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--blue) 14%,var(--card));transition:width .25s}
.tc-poll .tcp-o>span{position:relative;flex:1;min-width:0;display:flex;gap:5px;align-items:center;overflow-wrap:anywhere}.tc-poll .tcp-o>span svg{width:14px;height:14px;stroke-width:3;flex:none;color:var(--blue)}
.tc-poll .tcp-o>b{position:relative;font-weight:700;font-variant-numeric:tabular-nums}
.tc-poll .tcp-o:hover:not(:disabled){border-color:var(--blue)}.tc-poll .tcp-o.on{border-color:var(--blue);font-weight:600}.tc-poll .tcp-o.on>span{color:var(--blue)}
.tc-poll .tcp-o:disabled{cursor:default;opacity:.85}
.tc-poll .tcp-ft{display:flex;gap:4px 12px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:2px}.tc-poll .tcp-ft span{flex:1;min-width:0;white-space:nowrap}
.tc-poll .tcp-ft button{border:0;background:none;padding:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--blue);cursor:pointer}.tc-poll .tcp-ft button:hover{text-decoration:underline}
.tc-popts{display:grid;gap:6px}.tc-popt{display:flex;gap:6px;align-items:center}.tc-popt input{flex:1;min-width:0}
.tc-padd{display:flex;gap:8px;align-items:center;width:100%;min-height:38px;margin-top:6px;padding:0 12px;border:1px dashed var(--card-edge);border-radius:9px;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.tc-padd:hover{border-color:var(--blue);color:var(--blue)}.tc-padd svg{width:16px;height:16px}
.tc-pollf .tc-matrow b svg{display:none}
/* Danh thiếp (ảnh TC-B5) */
.tc-card{width:min(280px,66vw)}
.tc-card .top{display:flex;gap:11px;align-items:center;padding-bottom:9px}.tc-card .top>span:last-child{min-width:0}
.tc-card .top b{display:block;font-size:14.5px;font-weight:700;overflow-wrap:anywhere}.tc-card .top small{display:block;font-size:12.5px;color:var(--muted)}
.tc-card .ac{display:flex;border-top:1px solid var(--card-edge);margin:0 -13px -9px}
.tc .bub .tc-card .ac>*{flex:1;display:flex;gap:5px;align-items:center;justify-content:center;min-height:38px;border:0;border-left:1px solid var(--card-edge);background:none;color:var(--blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;padding:0 4px;white-space:nowrap}
.tc .bub .tc-card .ac>*:first-child{border-left:0}.tc-card .ac>*:hover{background:color-mix(in srgb,var(--blue) 8%,var(--card))}.tc-card .ac svg{width:14px;height:14px;flex:none}
.tc-cinfo{display:flex;gap:16px;align-items:center}.tc-cinfo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;min-width:0}
.tc-cinfo dt{color:var(--muted);font-size:13px}.tc-cinfo dd{margin:0;font-weight:600;overflow-wrap:anywhere}.tc-cinfo a{color:var(--blue)}
/* Vị trí (ảnh TC-B5): ô bản đồ vẽ bằng CSS — không tải ảnh bản đồ ngoài */
.tc-loc{display:grid;gap:8px;width:min(280px,66vw)}.tc-loc.pv{width:auto}
.tc-map{position:relative;display:block;height:118px;border-radius:9px;overflow:hidden;background:var(--tc-map-land)}
.tc-map i{position:absolute;display:block}
.tc-map .wt{left:14%;top:-15%;width:15%;height:140%;background:var(--tc-map-water);transform:rotate(9deg)}
.tc-map .r1{left:-10%;top:30%;width:130%;height:11px;background:var(--tc-map-road);transform:rotate(-13deg)}
.tc-map .r2{left:56%;top:-25%;width:12px;height:160%;background:var(--tc-map-road);transform:rotate(31deg)}
.tc-map .r3{left:-10%;top:74%;width:130%;height:7px;background:var(--tc-map-road);transform:rotate(8deg)}
.tc-map .tcm-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-88%);display:grid;filter:drop-shadow(0 3px 4px var(--tc-map-pin-shadow))}
.tc-map .tcm-pin svg{width:32px;height:32px;fill:var(--tc-map-pin);stroke:var(--tc-map-pin-edge);stroke-width:1.5}
.tc-loc .mp{display:block;min-width:0}.tc-loc .mp b{display:block;font-size:14.5px;font-weight:700;overflow-wrap:anywhere}.tc-loc .mp small{display:block;font-size:12.5px;color:var(--muted)}
.tc .bub .tc-loc .mp a{display:inline-flex;gap:5px;align-items:center;margin-top:4px;font-size:13px;font-weight:700;color:var(--blue);text-decoration:none}.tc-loc .mp a svg{width:13px;height:13px}
.tc .bub .tc-loc .mp a:hover{text-decoration:underline}
/* Cảm xúc bằng biểu tượng bất kỳ + bảng biểu tượng (ảnh TC-B6) */
.tc .react.emo{color:var(--ink)}.tc .react .em{font-size:14.5px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.tc .react.emo.mine{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,var(--card));color:var(--blue)}
.tc .acts .ico.plus{color:var(--muted)}
.tc-emojis{position:fixed;z-index:1250;width:348px;max-width:calc(100vw - 16px);height:392px;max-height:calc(100vh - 16px);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-edge);border-radius:14px;box-shadow:0 12px 32px var(--tc-shadow-24);overflow:hidden}
.tc-emojis .hd{display:flex;gap:4px;align-items:center;padding:8px 6px 4px 8px;flex:none}.tc-emojis .tc-search{flex:1;margin:0;height:34px}
.tc-emojis .tabs-e{display:flex;gap:2px;padding:2px 8px 6px;border-bottom:1px solid var(--card-edge);flex:none}
.tc-emojis .tabs-e button{flex:1;height:32px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.tc-emojis .tabs-e button:hover{background:var(--hair)}.tc-emojis .tabs-e button.on{background:color-mix(in srgb,var(--blue) 13%,var(--card));color:var(--blue)}.tc-emojis .tabs-e svg{width:17px;height:17px}
.tc-emojis .eg{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 10px}
.tc-emojis .lb{padding:8px 2px 4px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tc-emojis .g{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.tc-emojis .g button{aspect-ratio:1;border:0;border-radius:8px;background:none;font-size:23px;line-height:1;cursor:pointer;padding:0;color:var(--ink);font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.tc-emojis .g button:hover,.tc-emojis .g button:focus-visible{background:var(--hair);outline:none}
.tc-emojis.sheet{left:0;right:0;bottom:0;width:auto;max-width:none;height:min(64vh,460px);border-radius:18px 18px 0 0;border-width:1px 0 0;box-shadow:0 -10px 30px var(--tc-shadow-sheet)}
.tc-emojis .grab{width:38px;height:4px;border-radius:2px;background:var(--card-edge);margin:8px auto 0;flex:none}
.tc-emo-dim{position:fixed;inset:0;z-index:1249;background:var(--tc-dim)}
html[data-mode="dark"] .tc-map{background:var(--tc-map-land-d)}html[data-mode="dark"] .tc-map .wt{background:var(--tc-map-water-d)}html[data-mode="dark"] .tc-map .r1,html[data-mode="dark"] .tc-map .r2,html[data-mode="dark"] .tc-map .r3{background:var(--tc-map-road-d)}
html[data-mode="dark"] .tc-map .tcm-pin svg{stroke:var(--tc-map-pin-edge-d)}
html[data-mode="dark"] .tc-emojis,html[data-mode="dark"] .tc-pop.att{box-shadow:0 12px 32px var(--tc-shadow-55-d)}
html[data-mode="dark"] .tc-emo-dim{background:var(--tc-dim-d)}
html[data-mode="dark"] .tc-rec>b{color:var(--tc-rec-d)}html[data-mode="dark"] .tc-rec .dot{background:var(--tc-rec-d)}
html[data-mode="dark"] .tc-voice .vw i{background:color-mix(in srgb,var(--muted) 55%,transparent)}html[data-mode="dark"] .tc-voice .vw i.on{background:var(--blue)}
html[data-mode="dark"] .tc .m.me .tc-voice .vw i{background:var(--tc-me-wave)}html[data-mode="dark"] .tc .m.me .tc-voice .vw i.on{background:var(--tc-on-accent)}
html[data-mode="dark"] .tc-poll .tcp-o>i{background:color-mix(in srgb,var(--blue) 26%,var(--card))}
html[data-mode="dark"] .tc-album .ph,html[data-mode="dark"] .tc-lk img{background:var(--tc-ph-d)}
@media (max-width:850px){
  .tc-line{gap:7px}
  .tc .acts .ico{width:32px}
  .tc-pop.att{grid-template-columns:repeat(3,minmax(0,92px))}
}
@media (max-width:480px){
  .tc-send span{display:none}.tc-send{padding:0 13px}
  .tc-rec .nt{display:none}.tc-rec .lv{flex:1;overflow:hidden}
  .tc-emojis .g{grid-template-columns:repeat(7,minmax(0,1fr))}
}

/* Trò chuyện — Đợt 3 (ảnh TC-C1..TC-C6, anh Tâm duyệt 10/10/2026): xoá hội thoại / xoá tin chỉ ở phía tôi, chọn nhiều, lưu trữ, nhãn dán cỡ lớn, tin nhắn nhanh, «Đã nghe» tin thoại. Lớp mới đều mang tiền tố tc-. */
.tc-pop button.danger,.tc-pop button.danger svg{color:var(--tc-danger)}
.tc-pop button.danger:hover,.tc-pop button.danger:focus-visible{background:var(--danger-bg);color:var(--tc-danger)}
/* TC-C1: nút ba chấm trên từng dòng (rê chuột mới hiện; điện thoại luôn hiện) + dòng «Đã lưu trữ (N)» cuối danh sách */
.tc-row .l2>.tc-rmore{display:none;flex:none;width:28px;height:22px;border-radius:7px;place-items:center;color:var(--muted);cursor:pointer;overflow:visible}
.tc-row:hover .l2>.tc-rmore,.tc-row:focus-visible .l2>.tc-rmore{display:grid}
.tc-row .l2>.tc-rmore:hover{background:var(--card);color:var(--blue)}.tc-rmore svg{width:17px;height:17px}
@media (hover:none),(max-width:850px){.tc-row .l2>.tc-rmore{display:grid}}
.tc-arch{display:flex;gap:10px;align-items:center;width:calc(100% - 12px);margin:8px 6px 0;padding:11px 14px;border:0;border-top:1px solid var(--card-edge);background:none;color:var(--ink);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.tc-arch:hover{background:var(--hair)}
.tc-arch>svg:first-child{width:18px;height:18px;color:var(--muted);flex:none}
.tc-arch b{flex:1;font-weight:600}
.tc-arch i{font-style:normal;min-width:24px;height:20px;border-radius:10px;background:var(--hair);color:var(--muted);font-size:12px;font-weight:700;display:inline-grid;place-items:center;padding:0 7px}
.tc-arch>svg:last-child{width:16px;height:16px;color:var(--muted);flex:none;transition:transform .15s}
.tc-arch.open>svg:last-child{transform:rotate(180deg)}
.tc-archl{margin:2px 6px 0;padding:4px 0;border-radius:10px;background:color-mix(in srgb,var(--hair) 60%,transparent)}
.tc-archl .tc-row{margin:0;width:100%}
/* TC-C2: hộp xác nhận xoá hội thoại + mục «Chỉ ở phía tôi» trong bảng thông tin */
.tc-clr{margin:0 0 10px;padding:12px 14px 12px 32px;border-radius:12px;background:var(--hair);font-size:14px;line-height:1.55;display:grid;gap:5px}
.tc-r3{margin-top:14px}.tc-r3 .tc-sec svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.tc-r3b{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
/* TC-C4: chọn nhiều tin — ô tích bên trái từng dòng, thanh trên «Đã chọn N tin», thanh dưới thay ô soạn tin */
.tc-head.tc-selbar{background:color-mix(in srgb,var(--blue) 7%,var(--card))}
.tc-sellink{border:0;background:none;color:var(--blue);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;padding:8px 8px;border-radius:8px;flex:none;white-space:nowrap}
.tc-sellink:hover{background:color-mix(in srgb,var(--blue) 10%,var(--card))}
.tc-selck{width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--muted) 60%,transparent);background:var(--card);display:grid;place-items:center;flex:none;align-self:center;color:transparent}
.tc-selck svg{width:13px;height:13px;stroke-width:3}
.tc .m.sel>.tc-selck,.tc-selsys.sel>.tc-selck{background:var(--blue);border-color:var(--blue);color:var(--tc-on-accent)}
.tc .tc-msgs.selecting .m{max-width:none;align-self:stretch;cursor:pointer;padding:5px 10px;margin-left:-10px;margin-right:-10px;border-radius:10px;user-select:none;-webkit-user-select:none}
.tc .tc-msgs.selecting .m.me{flex-direction:row}.tc .tc-msgs.selecting .m.me .mb{margin-left:auto}
.tc .tc-msgs.selecting .m .mb{max-width:74%;pointer-events:none}
.tc .tc-msgs.selecting .m:hover,.tc-selsys:hover{background:color-mix(in srgb,var(--blue) 6%,transparent)}
.tc .tc-msgs.selecting .m.sel,.tc-selsys.sel{background:color-mix(in srgb,var(--blue) 13%,transparent)}
.tc .tc-msgs.selecting .m:focus-visible,.tc-selsys:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.tc .tc-msgs.selecting .m .acts{display:none !important}
.tc-selsys{display:flex;gap:10px;align-items:center;align-self:stretch;padding:5px 10px;margin:0 -10px;border-radius:10px;cursor:pointer;user-select:none;-webkit-user-select:none}
.tc-selsys .tc-sys{flex:1;max-width:none;pointer-events:none}.tc-selsys::after{content:"";width:22px;flex:none}
.tc-comp.tc-selacts{flex-direction:row;justify-content:space-around;gap:6px;padding:8px 12px 10px}
.tc-selacts button{flex:1;max-width:230px;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;border-radius:10px;padding:7px 6px;font:inherit;font-size:13px;font-weight:600;color:var(--blue);cursor:pointer}
.tc-selacts button svg{width:21px;height:21px}
.tc-selacts button.red{color:var(--tc-danger)}
.tc-selacts button:hover:not(:disabled){background:color-mix(in srgb,currentColor 9%,var(--card))}
.tc-selacts button:disabled{color:var(--muted);opacity:.5;cursor:not-allowed}
.tc-fwskip{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 12px;border-radius:10px;background:var(--warn-bg);color:var(--tc-warn-strong);font-size:13px;line-height:1.45}.tc-fwskip svg{width:16px;height:16px;flex:none;margin-top:2px}
/* TC-C5: nhãn dán — ô bo tròn nền màu theo tone, emoji to, chữ đậm; trong cuộc trò chuyện hiện cỡ 150px, không khung bong bóng */
.tc-stk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;border:0;border-radius:16px;background:var(--tc-stk-1-bg);color:var(--tc-stk-1);font:inherit;text-align:center}
.tc-stk .e{font-size:28px;line-height:1.15;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.tc-stk b{max-width:100%;padding:0 2px;font-size:11px;font-weight:700;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.tc-stk.k1{background:var(--tc-stk-1-bg);color:var(--tc-stk-1)}.tc-stk.k2{background:var(--tc-stk-2-bg);color:var(--tc-stk-2)}.tc-stk.k3{background:var(--tc-stk-3-bg);color:var(--tc-stk-3)}
.tc-stk.k4{background:var(--tc-stk-4-bg);color:var(--tc-stk-4)}.tc-stk.k5{background:var(--tc-stk-5-bg);color:var(--tc-stk-5)}.tc-stk.k6{background:var(--tc-stk-6-bg);color:var(--tc-stk-6)}
button.tc-stk{aspect-ratio:1;padding:4px 2px;cursor:pointer;transition:transform .1s}
button.tc-stk:hover,button.tc-stk:focus-visible{transform:scale(1.05);outline:2px solid currentColor;outline-offset:-2px}
.tc-stk.big{width:150px;height:150px;border-radius:26px;gap:8px;box-shadow:0 4px 14px var(--tc-shadow-10)}
.tc-stk.big .e{font-size:68px}.tc-stk.big b{font-size:16px;padding:0 8px}
.tc .tc-mwrap .m .bub.tc-stkb:not(.gone),.tc .tc-mwrap .m.me .bub.tc-stkb:not(.gone),.tc .m .bub.tc-stkb{background:none;border:0;border-radius:0;padding:0;color:var(--ink)}
.tc .m.me .bub.tc-stkb{display:flex;flex-direction:column;align-items:flex-end}
.tc .m.me .bub.tc-stkb .tc-fwd{color:var(--muted)}
.tc .m.me .bub.tc-stkb .quote{background:var(--hair);border-left-color:var(--blue);color:var(--muted)}.tc .m.me .bub.tc-stkb .quote b{color:var(--ink)}
.tc-stg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px 2px 4px}
.tc-ptab{display:flex;gap:6px;padding:8px 8px 4px;flex:none}
.tc-ptab button{flex:1;display:flex;gap:6px;align-items:center;justify-content:center;height:34px;border:0;border-radius:9px;background:var(--hair);color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.tc-ptab button svg{width:16px;height:16px}.tc-ptab button.on{background:var(--blue);color:var(--tc-on-accent)}
.tc-emojis.stk .hd,.tc-emojis.stk .tabs-e{display:none}
/* TC-C6: bảng «Tin nhắn nhanh» phía trên ô nhập (gõ /), hộp sửa danh sách, mục trong Cài đặt trò chuyện */
.tc-qk{position:absolute;left:0;right:0;bottom:calc(100% + 6px);max-height:min(46vh,320px);overflow-y:auto;background:var(--card);border:1px solid var(--card-edge);border-radius:12px;box-shadow:0 10px 30px var(--tc-shadow-18);padding:4px;z-index:5}
.tc-qkt{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tc-qkt button{border:0;background:none;color:var(--blue);font:inherit;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer;padding:2px 4px;border-radius:6px}
.tc-qkt button:hover{text-decoration:underline}
.tc-qki{display:flex;gap:12px;align-items:baseline;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.tc-qki.hi,.tc-qki:hover{background:color-mix(in srgb,var(--blue) 10%,var(--card))}
.tc-qki code,.tc-qlist code{font:inherit;font-weight:700;color:var(--blue);background:none;border:0;padding:0;min-width:78px;flex:none}
.tc-qki span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-qk .tc-empty{padding:8px 10px}
.tc-qkh{display:grid;grid-template-columns:132px minmax(0,1fr) 28px;gap:8px;padding:0 2px;font-size:12.5px;font-weight:600;color:var(--muted)}
.tc-qrows{display:grid;gap:8px}
.tc-qrow{display:grid;grid-template-columns:132px minmax(0,1fr) 28px;gap:8px;align-items:center}
.tc-qrow input{min-width:0;width:100%}
.tc-qkey{position:relative;display:block;min-width:0}
.tc-qkey em{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700;color:var(--blue);pointer-events:none}
.tc-qrow .tc-qkey input{padding-left:24px;font-weight:600}
.tc-qlist{display:grid;gap:4px;margin:6px 0 10px}
.tc-qlist div{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:8px;background:var(--hair);font-size:13.5px}
.tc-qlist span{min-width:0;overflow-wrap:anywhere}
/* TC-C6: «Đã nghe» dưới tin thoại của mình + chấm xanh ở tin thoại chưa nghe */
.tc .tc-heard{display:flex;gap:4px;align-items:center;font-size:12px;font-weight:600;color:var(--blue);margin-top:3px}.tc .tc-heard svg{width:13px;height:13px}
.tc-vdot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.tc-msgs.wp-dark .tc-heard{color:var(--tc-wp-dark-heard)}.tc-msgs.wp-dark .tc-selck{background:transparent;border-color:var(--tc-wp-dark-ink)}
html[data-mode="dark"] .tc-pop button.danger,html[data-mode="dark"] .tc-pop button.danger svg,html[data-mode="dark"] .tc-selacts button.red{color:var(--tc-danger-d)}
html[data-mode="dark"] .tc-pop button.danger:hover,html[data-mode="dark"] .tc-pop button.danger:focus-visible{color:var(--tc-danger-d)}
html[data-mode="dark"] .tc-fwskip{color:var(--tc-warn-strong-d)}
html[data-mode="dark"] .tc-qk{box-shadow:0 10px 30px var(--tc-shadow-55-d)}
html[data-mode="dark"] .tc-selck{border-color:color-mix(in srgb,var(--muted) 80%,transparent)}
html[data-mode="dark"] .tc-stk.k1{background:var(--tc-stk-1-bg-d);color:var(--tc-stk-1-d)}html[data-mode="dark"] .tc-stk.k2{background:var(--tc-stk-2-bg-d);color:var(--tc-stk-2-d)}html[data-mode="dark"] .tc-stk.k3{background:var(--tc-stk-3-bg-d);color:var(--tc-stk-3-d)}
html[data-mode="dark"] .tc-stk.k4{background:var(--tc-stk-4-bg-d);color:var(--tc-stk-4-d)}html[data-mode="dark"] .tc-stk.k5{background:var(--tc-stk-5-bg-d);color:var(--tc-stk-5-d)}html[data-mode="dark"] .tc-stk.k6{background:var(--tc-stk-6-bg-d);color:var(--tc-stk-6-d)}
html[data-mode="dark"] .tc-stk.big{box-shadow:0 4px 14px var(--tc-shadow-40-d)}
@media (max-width:600px){
  .tc-qkh{display:none}.tc-qrows{gap:12px}
  .tc-qrow{grid-template-columns:minmax(0,1fr) 28px;gap:6px}.tc-qrow .tc-qkey{max-width:170px}.tc-qrow>input{grid-column:1/-1;grid-row:2}
  .tc-selacts button{font-size:12.5px;padding:6px 2px}
  .tc .tc-msgs.selecting .m .mb{max-width:80%}
}
/* Host không có dải tiêu đề riêng (chatPage không nhận setHead): hàng nút Cài đặt · Nhắn riêng · Tạo nhóm nằm trên thẻ lọc. Portal không dùng. */
.tc-hostbar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin:0 0 14px}

/* ===== 0.4.0 — phần tuỳ chọn cho host khác (danh sách gom khối, công tắc, thẻ trong tin, lời chép, bảng chọn trên tin, cây chọn người, hộp Mời khách).
   Portal không bật mục nào nên các lớp dưới đây không xuất hiện trên Portal. Màu: chỉ dùng biến của host + biến --tc-* đã khai ở đầu tệp. ===== */
.tc-lswitch{display:flex;margin:0 10px 8px}.tc-lswitch button{flex:1}
.tc-grp{display:flex;flex-direction:column}
.tc-grph{display:flex;align-items:center;gap:6px;width:100%;padding:10px 12px 5px;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;text-align:left;cursor:pointer}
.tc-grph svg{width:12px;height:12px;flex:none;transition:transform .12s}.tc-grp.shut .tc-grph svg{transform:rotate(-90deg)}
.tc-grph b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-grph em{margin-left:auto;font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap}
.tc .m .who .org{color:var(--muted);font-weight:400;margin:0 6px}
.tc-cards{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tc-lkc{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--card-edge);border-radius:10px;background:var(--neutral-bg);color:inherit;text-decoration:none;min-width:0}
.tc-lkc .k{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--card);color:var(--blue)}.tc-lkc .k svg{width:18px;height:18px}
.tc-lkc .t{flex:1;min-width:0}.tc-lkc .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-lkc small{color:var(--muted);font-size:11.5px}
.tc-lkc.locked{border-style:dashed;opacity:.82;cursor:default}.tc-lkc .lock{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.tc-lkc .lock svg{width:13px;height:13px}
.tc-vtr{display:block;margin-top:7px;padding-top:7px;border-top:1px dashed var(--card-edge);font-size:12.5px;line-height:1.45;white-space:normal}
.tc-vtr b{margin-right:6px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.tc-pop .tc-pophead{display:flex;justify-content:space-between;gap:4px;padding:4px 4px 8px;margin-bottom:5px;border-bottom:1px solid var(--hair)}
.tc-pop .tc-pophead button{width:32px;height:32px;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--neutral-bg);justify-content:center}
.tc-pop .tc-pophead button svg{margin:0}
.tc-pop .tc-pophead .heart{color:var(--tc-react-heart)}.tc-pop .tc-pophead .smile{color:var(--tc-react-smile)}.tc-pop .tc-pophead .check{color:var(--tc-react-check)}.tc-pop .tc-pophead .star{color:var(--tc-react-star)}.tc-pop .tc-pophead .bolt{color:var(--tc-react-bolt)}.tc-pop .tc-pophead .like{color:var(--blue)}
.tc-pop hr{border:0;border-top:1px solid var(--hair);margin:5px 0}.tc-pop hr:first-child,.tc-pop hr:last-child,.tc-pop hr+hr{display:none}
.tc-pop button .hint{margin-left:auto;padding-left:12px;color:var(--muted);font-size:12px;font-weight:400}
.tc-pop button.hi{color:var(--blue);font-weight:600}
.tc-gform{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:22px}.tc-gform .col{display:flex;flex-direction:column;gap:14px;min-width:0}
.tc-chosen{display:flex;flex-wrap:wrap;gap:6px;min-height:44px;align-items:center}
.tc-postseg{display:flex;border:1px solid var(--card-edge);border-radius:8px;overflow:hidden}.tc-postseg button{flex:1;padding:9px 10px;border:0;background:var(--card);color:inherit;font:inherit;font-weight:500;cursor:pointer}
.tc-postseg button.on{background:var(--blue);color:var(--tc-on-accent);font-weight:600}
.tc-ugtop{display:flex;align-items:center;gap:10px}.tc-ugtop .lbl{flex:1}.tc-ugtop .tc-search{flex:0 1 260px;margin:0}
.tc-ugs{display:flex;flex-direction:column;gap:4px;max-height:min(52vh,560px);overflow:auto}
.tc-ug{display:flex;align-items:center;gap:8px;padding:2px 10px 2px 4px;border-radius:8px;background:var(--neutral-bg)}
.tc-ugh{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 6px;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer}
.tc-ugh svg{width:13px;height:13px;flex:none;color:var(--muted);transform:rotate(-90deg);transition:transform .12s}.tc-ug.open .tc-ugh svg{transform:none}
.tc-ugh small{font-weight:500;color:var(--muted)}
.tc-ugall{display:flex;align-items:center;gap:7px;color:var(--blue);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.tc-urs{display:flex;flex-direction:column;padding:2px 0 6px}
.tc-ur{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 26px;cursor:pointer}.tc-ur b{font-weight:600}.tc-ur small{margin-left:auto;color:var(--muted);white-space:nowrap}
.tc-gd{display:flex;flex-direction:column;gap:12px}
.tc-gdh{display:flex;align-items:center;gap:8px;font-weight:600}.tc-gdh svg{width:18px;height:18px;color:var(--muted)}.tc-gdh small{color:var(--muted);font-weight:400}
.tc-gr{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair)}.tc-gr .t{flex:1;min-width:0;display:flex;flex-direction:column}.tc-gr .t small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-ginvite.box{border:1px solid var(--tc-guest-edge);border-radius:12px;padding:14px 16px;background:var(--warn-bg);display:flex;flex-direction:column;gap:12px}
.tc-ginvite.box .h{display:flex;align-items:center;gap:8px;color:var(--tc-guest);font-weight:600}
.tc-gdays{display:flex;align-items:center;gap:8px}.tc-gdays>span{margin-left:auto;display:flex;gap:5px}
.tc-gdays button{padding:1px 9px;border:1px solid var(--card-edge);border-radius:999px;background:var(--card);color:inherit;font:inherit;font-size:12px;cursor:pointer}.tc-gdays button.on{border-color:var(--tc-guest-edge);color:var(--tc-guest);font-weight:600}
.tc-gexp{display:flex;align-items:center;gap:8px}.tc-gexp input{flex:1}.tc-gexp small{color:var(--muted);white-space:nowrap}
@media (max-width:850px){.tc-gform{grid-template-columns:1fr}.tc-gr{flex-wrap:wrap}}
/* 0.5.0 — mục «Mời khách bên ngoài» của hộp Tạo nhóm kiểu cây mở hộp Mời khách riêng (group.guestDialog); khách soạn sẵn; máy ảnh ở ô soạn kiểu tách (thread.camera); dòng đầu luồng (mountDocThread lead) */
button.tc-gnew.tc-gopen{display:flex;align-items:center;gap:12px;width:100%;background:none;color:var(--tc-guest);font:inherit;text-align:left;cursor:pointer}
button.tc-gnew.tc-gopen>span{flex:1;min-width:0;display:flex;flex-direction:column}button.tc-gnew.tc-gopen b{font-weight:600}button.tc-gnew.tc-gopen small{overflow:hidden;text-overflow:ellipsis}
button.tc-gnew.tc-gopen svg{width:16px;height:16px;flex:none}
.tc-gst.DRAFT{background:var(--warn-bg);color:var(--tc-guest)}
.tc-line.split .tc-pcam{display:none}
@media (max-width:850px){.tc-line.split .tc-pimg{display:none}.tc-line.split .tc-pcam{display:grid}}