/* ============================================================
   chat.css — Phân hệ "Chat nội bộ" (Bàn làm việc số · Bộ Tài chính)
   Dựng trên design system AI Office (design.css). Chỉ thêm component chat.
   ============================================================ */

/* ---- avatar (design.css .avatar lo border-radius/color/weight) ---- */
.avatar.s24{width:24px;height:24px;font-size:10px}
.avatar.s28{width:28px;height:28px;font-size:11px}
.avatar.s32{width:32px;height:32px;font-size:12.5px}
.avatar.s38{width:38px;height:38px;font-size:13.5px}
.avatar.s44{width:44px;height:44px;font-size:15.5px}
.avatar.s56{width:56px;height:56px;font-size:20px}
.avatar.s72{width:72px;height:72px;font-size:26px}
/* [31-07 YC chủ dự án] Avatar TRÒN ở MỌI NƠI trong Chat — kể cả nhóm/Kênh (trước đây nhóm bo
   vuông nhẹ bằng class `.sq`). Giữ lại luật này để mọi chỗ còn sót class `sq` vẫn ra hình tròn,
   không phải đi soát từng màn. Hình tròn gốc do `.avatar{border-radius:50%}` ở design.css. */
.avatar.sq{border-radius:50%}
/* Ảnh đại diện thật (đồng bộ từ DigitalWorkspace) — phủ kín ô avatar, giữ nguyên bo góc của ô. */
.avatar > .avatar-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.a-blue{background:#1a73c4}.a-navy{background:#15569e}.a-teal{background:#0e7f90}
.a-green{background:#4f7d13}.a-amber{background:#9c5d00}.a-red{background:#b03a57}
.a-purple{background:#6f4bb2}.a-slate{background:#5b6472}
.av-wrap{position:relative;flex-shrink:0;display:inline-flex}
.av-on{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#4f7d13;border:2px solid var(--bg-container)}
.av-on.sm{width:9px;height:9px}

/* ============================================================ DANH SÁCH HỘI THOẠI */
.cvlist{width:326px;flex-shrink:0;background:var(--bg-container);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.cvlist-head{padding:14px 14px 10px;border-bottom:1px solid var(--border-secondary)}
.cvlist-titlerow{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.cvlist-title{font-size:16px;font-weight:600;color:var(--text-heading);font-family:var(--font-heading)}
.cvlist-acts{display:flex;align-items:center;gap:1px}
.cvlist-acts .icon-btn{width:32px;height:32px}
.cv-search{display:flex;align-items:center;gap:7px;background:var(--bg-layout);border:1px solid var(--border);border-radius:var(--r-md);padding:0 9px;height:34px;transition:border-color .15s}
.cv-search:focus-within{border-color:var(--c-primary);background:var(--bg-container)}
.cv-search input{flex:1;border:0;background:transparent;outline:none;color:var(--text);font-size:13px;min-width:0}
.cv-search input::placeholder{color:var(--text-tertiary)}
.cv-tabs{display:flex;gap:4px;margin-top:10px}
.cv-tab{flex:1;border:0;background:transparent;color:var(--text-secondary);font-size:12.5px;font-weight:600;padding:6px 8px;border-radius:var(--r-md);transition:all .12s}
.cv-tab:hover{background:var(--bg-layout)}
.cv-tab.active{background:var(--c-primary-bg);color:var(--c-primary-active)}
.cvlist-scroll{flex:1;overflow-y:auto;padding:6px}
.cvlist-grouplabel{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary);padding:10px 10px 5px}

.cv{display:flex;gap:11px;padding:9px 10px;border-radius:var(--r-md);cursor:pointer;transition:background .12s;position:relative}
.cv:hover{background:var(--bg-layout)}
.cv.active{background:var(--c-primary-bg)}
.cv.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--c-primary)}
/* Ghim hội thoại (Story 3.7 — thêm ngoài mockup): nút ẩn, hiện khi hover hàng hoặc khi đã ghim. */
.cv-pin{position:absolute;right:8px;top:8px;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-tertiary);cursor:pointer;opacity:0;transition:opacity .12s,background .12s,color .12s}
.cv:hover .cv-pin{opacity:1;z-index:2}
.cv-pin:hover{background:var(--bg-spotlight);color:var(--text-secondary)}
.cv-pin.on{opacity:1;color:var(--c-primary)}
/* Khi hover hàng CÓ nút ghim: ẩn timestamp để nút ghim không bị che & bấm được (kiểu Zalo/Messenger).
   Hàng đã ghim (.cv-pin.on) luôn hiện nút → cũng ẩn timestamp cho gọn. */
.cv.has-pin:hover .cv-time,.cv.pinned .cv-time{visibility:hidden}
.cv-body{flex:1;min-width:0}
.cv-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.cv-name{font-size:13.5px;font-weight:600;color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-time{font-size:11px;color:var(--text-tertiary);flex-shrink:0;font-variant-numeric:tabular-nums}
.cv-sub{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cv-prev{font-size:12.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cv-badge{flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--c-primary);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.cv.is-unread .cv-name{font-weight:700}
.cv.is-unread .cv-prev{color:var(--text-heading);font-weight:500}
.cv-mute{color:var(--text-disabled);flex-shrink:0}

/* ============================================================ KHUNG HỘI THOẠI */
.chatmain{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-layout);position:relative}
/* Nút "N tin chưa đọc" — nổi phía trên ô soạn, kiểu Zalo (khung luôn mở ở đáy). */
.chat-unread-jump{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:6;display:flex;align-items:center;gap:7px;padding:7px 10px 7px 12px;border:0;border-radius:999px;background:var(--c-primary);color:#fff;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.chat-unread-jump:hover{background:var(--c-primary-active)}
.chat-unread-x{display:flex;align-items:center;padding-left:6px;margin-left:2px;border-left:1px solid rgba(255,255,255,.4);opacity:.85}
.chat-unread-x:hover{opacity:1}
.chat-head{height:60px;flex-shrink:0;background:var(--bg-container);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 16px}
.chat-head-meta{flex:1;min-width:0}
.chat-head-name{font-size:14.5px;font-weight:600;color:var(--text-heading);display:flex;align-items:center;gap:7px;font-family:var(--font-heading)}
.chat-head-sub{font-size:12px;color:var(--text-secondary);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-actions{display:flex;align-items:center;gap:1px}

.chat-body{flex:1;overflow-y:auto;padding:18px 26px}
.chat-day{text-align:center;margin:4px 0 16px}
.chat-day span{font-size:11.5px;color:var(--text-tertiary);background:var(--bg-spotlight);padding:4px 12px;border-radius:999px;font-weight:500}
/* Thông báo hệ thống giữa luồng: "Bạn được X thêm vào nhóm", "X đã ghim một tin nhắn"… */
.csys{display:flex;justify-content:center;margin:8px 0 14px}
.csys-note{display:inline-flex;align-items:center;gap:8px;max-width:min(520px,86%);padding:6px 14px 6px 6px;border-radius:999px;background:var(--bg-container);border:1px solid var(--border);box-shadow:var(--sh-1);font-size:12.5px;color:var(--text-secondary);line-height:1.45;text-align:left}
.csys-note .avatar{flex-shrink:0}
.chat-sys{display:flex;align-items:center;gap:8px;justify-content:center;margin:12px 0;font-size:12px;color:var(--text-tertiary)}
.chat-sys::before,.chat-sys::after{content:'';height:1px;width:46px;background:var(--border)}

/* hàng tin nhắn */
.cmsg{display:flex;gap:9px;margin-bottom:14px;align-items:flex-end}
/* Ảnh người gửi nằm ở tin ĐẦU cụm và căn LÊN TRÊN, ngang tầm tên (kiểu Zalo). */
.cmsg > .avatar{align-self:flex-start}
.cmsg.me{justify-content:flex-end}
.cmsg.tight{margin-bottom:2px}
.cmsg-col{display:flex;flex-direction:column;max-width:66%;align-items:flex-start;min-width:0}
.cmsg.me .cmsg-col{align-items:flex-end}
/* Bọc RIÊNG bong bóng + tệp/ảnh/cảm xúc (KHÔNG gồm tên người gửi & hàng giờ) — làm mốc neo cho
   nút thao tác hover để chúng bám theo bong bóng, không tụt xuống ngang hàng giờ (YC 30-07). */
.cmsg-main{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}
.cmsg.me .cmsg-main{align-items:flex-end}
.cmsg-spacer{width:30px;flex-shrink:0}
.csender{font-size:11.5px;font-weight:600;color:var(--text-secondary);margin:0 4px 3px}
.cbubble{padding:9px 13px;font-size:13.5px;line-height:1.5;word-break:break-word;background:var(--bg-container);border:1px solid var(--border);color:var(--text);border-radius:3px 12px 12px 12px;box-shadow:var(--sh-1)}
.cmsg.me .cbubble{background:var(--c-primary);color:#fff;border:none;border-radius:12px 3px 12px 12px}
/* Gom cụm tin liên tiếp (Messenger): bo nhỏ các góc tiếp giáp ở cạnh "xương sống" */
.cmsg.them.s-first .cbubble{border-bottom-left-radius:4px}
.cmsg.them.s-mid .cbubble{border-top-left-radius:4px;border-bottom-left-radius:4px}
.cmsg.them.s-last .cbubble{border-top-left-radius:4px}
.cmsg.me.s-first .cbubble{border-bottom-right-radius:4px}
.cmsg.me.s-mid .cbubble{border-top-right-radius:4px;border-bottom-right-radius:4px}
.cmsg.me.s-last .cbubble{border-top-right-radius:4px}
.cmsg.me .cbubble a{color:#fff;text-decoration:underline}
/* Tin đã thu hồi — nhìn là biết ngay không phải tin thường: nền trong, viền nét đứt, chữ nghiêng mờ. */
.cbubble.crecalled,.cmsg.me .cbubble.crecalled{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px dashed var(--border-strong);box-shadow:none;color:var(--text-tertiary);font-style:italic;font-size:12.5px;padding:6px 11px}
.ctime{font-size:11px;color:var(--text-tertiary);margin:3px 4px 0;display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
/* Trạng thái tin của mình cạnh giờ (YC chủ dự án 30-07): tick ĐƠN xám = đã gửi · tick ĐÔI
   xanh = đã xem. Dùng icon thay chữ "Đã gửi/Đã xem" để dòng giờ gọn lại. */
.cseen{color:var(--text-tertiary);display:inline-flex;align-items:center}
.cseen.seen{color:var(--c-primary)}
/* Nút thao tác tin (thả cảm xúc/…): nổi NGOÀI mép bong bóng, không chiếm chiều cao → các tin
   liên tiếp cùng người dính sát nhau (chỉ tin cuối cụm mới có hàng giờ bên dưới). */
.cmsg-tools{position:absolute;bottom:4px;display:flex;align-items:center;pointer-events:none;z-index:5}
.cmsg.them .cmsg-tools{left:100%;margin-left:6px}
.cmsg.me .cmsg-tools{right:100%;margin-right:6px}
.cmsg:hover .cmsg-tools{pointer-events:auto}
/* tô đậm từ khóa tìm kiếm (port tim-kiem.html) */
mark{background:#fde9a8;color:#5c4a16;border-radius:3px;padding:0 2px}
:root[data-theme="dark"] mark{background:#5c4a16;color:#fde9a8}
.cmention{color:var(--c-primary-active);font-weight:600;background:var(--c-primary-bg);border-radius:4px;padding:0 3px}
.cmsg.me .cmention{color:#fff;background:rgba(255,255,255,.22)}
/* Mention Zulip (@thành viên / @nhóm / @all) — CHỈ đổi MÀU CHỮ, không nền. */
.message-body .user-mention,.message-body .user-group-mention{color:var(--c-primary-active);font-weight:600;background:none;padding:0;text-decoration:none}
.cmsg.me .message-body .user-mention,.cmsg.me .message-body .user-group-mention{color:#fff}
/* Bị nhắc CHÍNH MÌNH (@ đúng mình) → chữ ĐỎ để biết ngay. */
.message-body .user-mention.mention-me,.cmsg.me .message-body .user-mention.mention-me{color:var(--st-error)}
/* Khoảng cách các khối trong 1 tin (dòng "đã viết" · trích dẫn · lời trả lời): bỏ margin mặc định
   của trình duyệt (mỗi <p> ~1em rời rạc) → gọn, đều 5px giữa các khối. */
.message-body > *{margin:0}
.message-body > * + *{margin-top:5px}
/* Trích dẫn trả lời (Zulip ```quote → <blockquote>) — kiểu Messenger: khối phụ mờ, bo góc, có
   vạch màu bên trái; đọc được trên CẢ bong bóng trắng (người khác) lẫn xanh (mình). Ghi đè thụt
   lề 40px mặc định của trình duyệt (bóp nát nội dung trong khung chat hẹp). */
.message-body blockquote,.creply-q{padding:4px 9px;border-left:3px solid var(--border-strong);border-radius:5px;background:var(--bg-spotlight);color:var(--text-secondary);font-size:12.5px}
.message-body blockquote > *,.creply-q > *{margin:0}
/* Trên bong bóng CỦA MÌNH (nền xanh đặc): dùng lớp phủ trắng mờ để trích dẫn nổi & chữ đọc rõ. */
.cmsg.me .message-body blockquote,.cmsg.me .creply-q{border-left-color:rgba(255,255,255,.55);background:rgba(255,255,255,.18);color:rgba(255,255,255,.92)}
/* Trích dẫn của tin trả lời (kiểu Messenger) nằm ĐẦU bong bóng → cách phần lời trả lời bên dưới. */
.creply-q{margin:0 0 5px;max-height:3.2em;overflow:hidden}
/* Dòng "đã trả lời [ai]" trên bong bóng — mờ, nhỏ, có mũi tên; theo phía tin (trái/phải). */
.creply-head{display:flex;align-items:center;gap:4px;max-width:100%;margin:0 4px 3px;font-size:11.5px;color:var(--text-tertiary)}
.creply-head .creply-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Bấm header/trích dẫn để nhảy tới tin gốc (khôi phục "focus vào tin được trả lời"). */
.creply-head.jumpable,.creply-q.jumpable{cursor:pointer}
.creply-head.jumpable:hover{color:var(--c-primary-active)}
.creply-q.jumpable:hover{filter:brightness(.97)}
.cmsg.me .creply-q.jumpable:hover{filter:brightness(1.08)}

/* trích dẫn trả lời */
.creply{display:flex;flex-direction:column;gap:1px;border-left:2.5px solid var(--c-primary);background:var(--c-primary-bg);padding:5px 10px;border-radius:5px;margin-bottom:5px;max-width:300px}
.creply-name{font-size:11.5px;font-weight:700;color:var(--c-primary-active)}
.creply-text{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* thẻ tài liệu / file */
.cfile{display:flex;align-items:center;gap:11px;background:var(--bg-container);border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 12px;width:286px;max-width:100%}
.cmsg.me .cfile{background:var(--bg-container);border-color:var(--border)}
.cfile-ic{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.cfile-ic.xls{background:#1f8a5b}.cfile-ic.pdf{background:#c0392b}.cfile-ic.doc{background:#1a73c4}.cfile-ic.ppt{background:#c1672d}.cfile-ic.zip{background:#9c5d00}
.cfile-body{flex:1;min-width:0;display:flex;flex-direction:column}
.cfile-name{font-size:13px;font-weight:600;color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmsg.me .cfile-name{color:var(--text-heading)}
.cfile-meta{font-size:11.5px;color:var(--text-tertiary);margin-top:2px}
.cmsg.me .cfile-meta{color:var(--text-tertiary)}
/* Ảnh đính kèm dạng thumbnail (UAT 4.6).
   Cỡ ảnh trong tin: 300px cũ quá nhỏ so với các app cùng loại (Zalo/Messenger/Telegram bản desktop
   để ảnh rộng ~400–480px, tức gần kín bong bóng tin). Nay ảnh trải KÍN cột tin (`.cmsg-col` = 66%
   bề ngang khung chat) và chỉ chặn trên ở 460px để màn rộng không kéo ảnh quá khổ. */
.cimgs{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;max-width:min(460px,100%)}
.cmsg.me .cimgs{justify-content:flex-end}
.cimgs a{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--border);line-height:0;cursor:zoom-in}
.cimgs.multi a{width:148px;height:148px}
.cimgs.multi a img{width:100%;height:100%;object-fit:cover;display:block}
.cimgs.one a{max-width:100%}
.cimgs.one a img{max-width:100%;max-height:440px;width:auto;height:auto;display:block}

/* ── Cửa sổ chat MINI (embed `.thread`, ~328px) — ảnh preview to như pop-out Messenger ──
   Khung mini hẹp: cột tin 66% (≈200px) bóp ảnh còn tí xíu (YC chủ dự án: "preview quá nhỏ").
   `.thread` CHỈ do EmbedWindow dùng (app đầy đủ dùng `.chat-body`) nên override an toàn, không
   đụng app lớn. Nới cột tin gần kín bề ngang & cho ảnh TRẢI KÍN cột.
   Ảnh 1 tấm: rộng 100% cột, giữ tỉ lệ; ảnh dọc quá cao thì kẹp ở 340px + `object-fit:cover`
   (chỉ crop khi bị kẹp — ảnh ngang vẫn hiện đủ, không méo). Thumbnail Zulip đủ nét cho cỡ này. */
.thread .cmsg-col{max-width:86%}
.thread .cimgs{max-width:100%}
.thread .cimgs.one a{width:100%}
.thread .cimgs.one a img{width:100%;height:auto;max-width:100%;max-height:340px;object-fit:cover;object-position:top}
/* Ảnh nhiều tấm: lưới 2 cột kiểu Messenger. `.cimgs` vốn co theo nội dung nên phải ĐẶT bề rộng
   xác định cho khối `.multi` thì % con mới có cơ sở; `flex:0 0 auto` chặn flex bóp méo ô vuông
   thành hình chữ nhật (đã gặp: 128px cao nhưng bị bóp còn 83px ngang). */
.thread .cimgs.multi{width:264px;max-width:100%}
.thread .cimgs.multi a{flex:0 0 auto;width:calc(50% - 2px);height:auto;aspect-ratio:1}

/* Nút hover (thả cảm xúc / thao tác) trong khung mini: cột tin rộng gần kín khung nên KHÔNG còn
   chỗ đặt nút NGOÀI mép bong bóng như app lớn — với tin TRẢ LỜI (bong bóng rộng) nút bị mép khung
   cắt mất, không bấm reply/react được (YC chủ dự án). Chuyển sang cụm nút nổi kiểu Messenger: ẩn,
   chỉ hiện khi rê chuột, ghim ở góc TRÊN sát mép ngoài bong bóng nên luôn nằm trong khung. */
.thread .cmsg-tools{top:auto;bottom:-9px;left:auto;right:auto;margin:0;gap:2px;padding:2px 4px;background:var(--bg-container);border:1px solid var(--border);border-radius:999px;box-shadow:var(--sh-2);opacity:0;transition:opacity .12s}
.thread .cmsg.them .cmsg-tools{left:auto;right:2px;margin:0}
.thread .cmsg.me .cmsg-tools{right:auto;left:2px;margin:0}
.thread .cmsg:hover .cmsg-tools{opacity:1}
.thread .cmsg-tools .creact-add{display:grid;place-items:center;padding:2px;color:var(--text-secondary);background:transparent;border:0;cursor:pointer}
.thread .cmsg-tools .creact-add:hover{color:var(--c-primary-active)}

/* Trình xem ảnh trong app: nền tối + thanh công cụ (zoom/xoay/khôi phục/tải/đóng).
   Ảnh dùng transform (scale/rotate/translate) nên KHÔNG transition khi đang kéo. */
.cimg-lightbox{position:fixed;inset:0;z-index:200;background:rgba(10,15,25,.9);display:flex;align-items:center;justify-content:center;padding:64px 28px 28px;overflow:hidden;animation:cfade .14s ease}
.cimg-lightbox img{max-width:92vw;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 10px 44px rgba(0,0,0,.55);transform-origin:center;user-select:none;-webkit-user-drag:none;touch-action:none}
.cimg-tools{position:fixed;top:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px 8px;border-radius:999px;background:rgba(28,34,45,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 22px rgba(0,0,0,.45)}
.cimg-tool{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#e8eaed;display:grid;place-items:center;cursor:pointer;text-decoration:none}
.cimg-tool:hover{background:rgba(255,255,255,.16)}
.cimg-zoom{min-width:52px;height:34px;padding:0 6px;border:0;border-radius:17px;background:transparent;text-align:center;font-size:12px;color:#c8ccd2;cursor:pointer;user-select:none}
.cimg-zoom:hover{background:rgba(255,255,255,.16);color:#fff}
.cimg-sep{width:1px;height:20px;margin:0 5px;background:rgba(255,255,255,.2)}
.cimg-close{position:fixed;top:14px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer}
.cimg-close:hover{background:rgba(255,255,255,.3)}

/* thẻ tham chiếu nhiệm vụ/văn bản (đặc thù nội bộ) */
.cref{display:flex;align-items:center;gap:10px;background:var(--bg-layout);border:1px solid var(--border);border-left:3px solid var(--c-primary);border-radius:var(--r-md);padding:9px 12px;width:300px;max-width:100%;margin-top:2px}
.cmsg.me .cref{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);border-left-color:#fff}
.cref-ic{color:var(--c-primary);flex-shrink:0}
.cmsg.me .cref-ic{color:#fff}
.cref-title{font-size:12.5px;font-weight:600;color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmsg.me .cref-title{color:#fff}
.cref-sub{font-size:11px;color:var(--text-tertiary)}
.cmsg.me .cref-sub{color:rgba(255,255,255,.8)}

/* reaction */
.creacts{display:flex;gap:4px;margin-top:-6px;margin-bottom:2px;padding:0 3px}
.creact{display:inline-flex;align-items:center;gap:3px;background:var(--bg-container);border:1px solid var(--border);border-radius:999px;padding:1px 7px;font-size:12px;box-shadow:var(--sh-1)}
.creact b{font-size:11px;font-weight:700;color:var(--text-secondary)}

/* typing */
.ctyping{display:flex;align-items:flex-end;gap:9px;margin-bottom:12px}
.ctyping-bubble{background:var(--bg-container);border:1px solid var(--border);border-radius:3px 12px 12px 12px;padding:11px 14px;display:flex;gap:4px}
.ctyping-bubble i{width:6px;height:6px;border-radius:50%;background:var(--text-disabled);animation:ctdot 1.2s infinite}
.ctyping-bubble i:nth-child(2){animation-delay:.2s}
.ctyping-bubble i:nth-child(3){animation-delay:.4s}
@keyframes ctdot{0%,60%,100%{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- composer ---- */
.composer{flex-shrink:0;padding:12px 22px 18px;background:var(--bg-layout);position:relative}
/* Kéo–thả tệp vào ô soạn tin: phủ lớp gợi ý lên đúng vùng thả. `pointer-events:none` để lớp phủ
   không nuốt sự kiện dragleave/drop của khung bên dưới (thả sẽ không ăn). */
.composer-drop{position:absolute;inset:6px;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:8px;border:2px dashed var(--c-primary);border-radius:var(--r-lg);background:var(--c-primary-bg);color:var(--c-primary-active);font-size:13px;font-weight:600}
.composer-reply{display:flex;align-items:center;gap:9px;background:var(--c-primary-bg);border-left:3px solid var(--c-primary);border-radius:var(--r-md) var(--r-md) 0 0;padding:7px 12px;margin-bottom:-4px}
.composer-reply .crr{flex:1;min-width:0;display:flex;flex-direction:column}
.composer-box{display:flex;align-items:flex-end;gap:6px;background:var(--bg-container);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:6px 7px 6px 10px;transition:border-color .15s}
.composer-box:focus-within{border-color:var(--c-primary)}
.composer-box textarea{flex:1;border:0;outline:none;resize:none;font-family:inherit;font-size:13.5px;line-height:1.5;color:var(--text);background:transparent;max-height:120px;padding:7px 2px}
.composer-box textarea::placeholder{color:var(--text-tertiary)}
.composer-tools{display:flex;align-items:center;gap:1px;color:var(--text-tertiary)}
.composer-send{width:36px;height:36px;border:0;border-radius:var(--r-md);background:var(--c-primary);color:#fff;display:grid;place-items:center;flex-shrink:0;box-shadow:var(--sh-1)}
.composer-send.off{background:var(--bg-spotlight);color:var(--text-disabled);box-shadow:none}
.composer-hint{font-size:11px;color:var(--text-tertiary);text-align:center;margin-top:7px}
.composer-hint kbd{font-family:inherit;border:1px solid var(--border-strong);border-radius:3px;padding:0 4px;font-size:10.5px}
/* Khay xem trước đính kèm CHỜ GỬI (kiểu Facebook): ảnh = thumbnail, tệp = thẻ; × để bỏ. */
.composer-atterr{font-size:12px;color:var(--st-error);padding:2px 4px 6px}
.composer-atts{display:flex;gap:10px;flex-wrap:wrap;padding:2px 2px 9px}
.catt{position:relative;flex:0 0 auto}
.catt-img{width:54px;height:54px;object-fit:cover;border-radius:9px;border:1px solid var(--border);display:block}
.catt-file{display:flex;align-items:center;gap:8px;height:48px;padding:0 12px;background:var(--bg-container);border:1px solid var(--border);border-radius:10px;max-width:190px;color:var(--text-secondary)}
.catt-name{font-size:12.5px;color:var(--text-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catt-x{position:absolute;top:-7px;right:-7px;width:19px;height:19px;border-radius:50%;border:2px solid var(--bg-layout);background:var(--text-secondary);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.catt-x:hover{background:var(--st-error)}

/* ============================================================ PANEL THÔNG TIN */
.chat-info{width:286px;flex-shrink:0;background:var(--bg-container);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.ci-head{padding:24px 20px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;border-bottom:1px solid var(--border-secondary)}
.ci-name{font-size:16px;font-weight:600;color:var(--text-heading);margin-top:12px;font-family:var(--font-heading)}
.ci-sub{font-size:12.5px;color:var(--text-secondary);margin-top:3px}
.ci-actions{display:flex;gap:10px;margin-top:16px}
.ci-act{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--c-primary)}
.ci-act-ic{width:40px;height:40px;border-radius:50%;background:var(--c-primary-bg);display:grid;place-items:center}
.ci-act span{font-size:11px;color:var(--text-secondary);font-weight:500}
.ci-sec{padding:16px 18px;border-bottom:1px solid var(--border-secondary)}
.ci-sec-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.ci-sec-h a{color:var(--c-primary);font-weight:600;text-transform:none;letter-spacing:0;font-size:12px}
.ci-member{display:flex;align-items:center;gap:10px;padding:6px 0}
.ci-member-name{font-size:13px;font-weight:500;color:var(--text-heading)}
.ci-member-role{font-size:11px;color:var(--text-tertiary)}
.ci-doc{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer}
.ci-doc:hover .cfile-name{color:var(--c-primary-active)}
.ci-row{display:flex;align-items:center;gap:11px;padding:10px 0;cursor:pointer;color:var(--text);font-size:13.5px;font-weight:500}
.ci-row:hover{color:var(--c-primary-active)}
.ci-row .ci-row-ic{color:var(--text-tertiary)}
.ci-row.danger{color:var(--st-error)}
.ci-row .ci-row-r{margin-left:auto;color:var(--text-tertiary);font-size:12.5px}

/* nút tròn nhỏ trên header chat (giống icon-btn nhưng 34px) */
.cbtn{width:34px;height:34px;border:0;background:transparent;color:var(--text-secondary);border-radius:var(--r-md);display:grid;place-items:center;transition:all .12s}
.cbtn:hover{background:var(--bg-layout);color:var(--text-heading)}
.cbtn.active{background:var(--c-primary-bg);color:var(--c-primary-active)}
.cbtn:disabled{opacity:.35;pointer-events:none}

/* Thanh tìm-trong-hội-thoại (kiểu Messenger) — ngay dưới header khung chat. */
.chat-search-bar{flex-shrink:0;background:var(--bg-container);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:8px 12px}
.chat-search-count{font-size:12px;color:var(--text-tertiary);min-width:44px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============================================================ UI DÙNG CHUNG */
.c-overlay{position:fixed;inset:0;background:rgba(15,25,40,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;animation:cfade .16s ease}
@keyframes cfade{from{opacity:0}to{opacity:1}}
@keyframes cpop{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.c-modal{background:var(--bg-container);border-radius:var(--r-xl);box-shadow:var(--sh-4);width:100%;max-width:440px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;animation:cpop .18s ease}
.c-modal.wide{max-width:560px}
.c-modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.c-modal-title{font-size:15.5px;font-weight:600;color:var(--text-heading);font-family:var(--font-heading)}
.c-modal-x{margin-left:auto;width:32px;height:32px;border:0;background:transparent;color:var(--text-tertiary);border-radius:var(--r-md);display:grid;place-items:center}
.c-modal-x:hover{background:var(--bg-layout);color:var(--text-heading)}
.c-modal-body{padding:16px 18px;overflow-y:auto;flex:1}
.c-modal-foot{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;align-items:center}

/* context menu (thao tác tin nhắn) */
.c-ctx{width:230px;background:var(--bg-container);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-4);padding:5px;animation:cpop .15s ease}
.c-ctx-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-md);font-size:13.5px;font-weight:500;color:var(--text);cursor:pointer}
.c-ctx-item:hover{background:var(--bg-layout)}
.c-ctx-item.danger{color:var(--st-error)}
.c-ctx-item.danger:hover{background:color-mix(in srgb,var(--st-error) 8%,transparent)}
.c-ctx-item .sc{margin-left:auto;font-size:11px;color:var(--text-tertiary)}
.c-ctx-sep{height:1px;background:var(--border);margin:4px 6px}
.c-reactbar{display:flex;align-items:center;gap:3px;background:var(--bg-container);border:1px solid var(--border);border-radius:999px;padding:6px 9px;box-shadow:var(--sh-4);margin-bottom:11px}
.c-reactbar span{font-size:23px;cursor:pointer;line-height:1;transition:transform .12s}
.c-reactbar span:hover{transform:scale(1.3) translateY(-2px)}

/* checkbox / radio / toggle */
.c-check{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--border-strong);flex-shrink:0;display:grid;place-items:center;color:#fff;transition:all .12s}
.c-check.on{background:var(--c-primary);border-color:var(--c-primary)}
.c-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-strong);flex-shrink:0;display:grid;place-items:center}
.c-radio.on{border-color:var(--c-primary)}
.c-radio.on::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--c-primary)}
.c-toggle{width:40px;height:23px;border-radius:999px;background:var(--border-strong);position:relative;cursor:pointer;flex-shrink:0;transition:background .18s}
.c-toggle::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .18s}
.c-toggle.on{background:var(--c-primary)}
.c-toggle.on::after{transform:translateX(17px)}

/* hàng chọn trong modal (đồng nghiệp/nhóm) */
.pick-row{display:flex;align-items:center;gap:11px;padding:8px 8px;border-radius:var(--r-md);cursor:pointer}
.pick-row:hover{background:var(--bg-layout)}
.pick-name{font-size:13.5px;font-weight:600;color:var(--text-heading)}
.pick-sub{font-size:11.5px;color:var(--text-tertiary)}

/* pane phụ (kho tài liệu, lịch sử gọi, cài đặt) thay khung chat */
.cpane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg-layout)}
.cpane-head{height:60px;flex-shrink:0;background:var(--bg-container);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px}
.cpane-title{font-size:16px;font-weight:600;color:var(--text-heading);font-family:var(--font-heading)}
.cpane-body{flex:1;overflow-y:auto;padding:20px 24px}
.cpane-maxw{max-width:760px}
.cpane-full{max-width:none;width:100%} /* Kho tài liệu: lưới ảnh/tệp trải HẾT chiều ngang body */
.ctabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 20px;background:var(--bg-container);flex-shrink:0}
.ctab{padding:13px 4px;margin-right:20px;font-size:13.5px;font-weight:600;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.ctab.active{color:var(--c-primary-active);border-bottom-color:var(--c-primary)}
.ccard{background:var(--bg-container);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.ccard-title{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-tertiary);padding:15px 16px 7px}
.crow{display:flex;align-items:center;gap:13px;padding:12px 16px;border-top:1px solid var(--border-secondary)}
.crow:first-child{border-top:none}
.crow-ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0;background:var(--c-primary-bg);color:var(--c-primary)}
.crow-title{font-size:13.5px;font-weight:600;color:var(--text-heading)}
.crow-sub{font-size:12px;color:var(--text-secondary);margin-top:1px}
.crow-r{margin-left:auto;color:var(--text-tertiary);font-size:12.5px;display:flex;align-items:center;gap:8px}
/* Kho tài liệu — tab "Tài liệu" dạng LƯỚI kiểu File Explorer: ô tệp icon lớn (badge màu theo loại) + tên 2 dòng. */
.cfilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.cfiletile{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:16px 10px 12px;background:var(--bg-container);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);min-width:0}
.cfiletile.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.cfiletile.clickable:hover{border-color:var(--c-primary);box-shadow:var(--sh-2);transform:translateY(-1px)}
.cfiletile-ic{width:52px;height:52px;border-radius:var(--r-lg);display:grid;place-items:center;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;flex-shrink:0;background:#64748b}
.cfiletile-ic.xls{background:#1f8a5b}.cfiletile-ic.pdf{background:#c0392b}.cfiletile-ic.doc{background:#1a73c4}.cfiletile-ic.ppt{background:#c1672d}.cfiletile-ic.zip{background:#9c5d00}
.cfiletile-name{font-size:12.5px;font-weight:600;color:var(--text-heading);line-height:1.35;width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.cfiletile-sub{font-size:11px;color:var(--text-tertiary);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfiletile-dl{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:var(--r-md);display:none;place-items:center;color:var(--text-secondary);background:var(--bg-layout)}
.cfiletile:hover .cfiletile-dl{display:grid}
.cfiletile-dl:hover{color:var(--c-primary);background:var(--c-primary-bg)}
/* Lưới ảnh/video — ô vuông đều, bo góc, khoảng cách nhất quán với lưới tệp. */
.cmediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.empty-pane{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-secondary);padding:40px}
.empty-pane-ic{width:80px;height:80px;border-radius:22px;background:var(--c-primary-bg);color:var(--c-primary);display:grid;place-items:center;margin-bottom:18px}
.empty-pane h2{font-size:18px;font-weight:600;color:var(--text-heading);margin-bottom:7px;font-family:var(--font-heading)}
.empty-pane p{font-size:13.5px;max-width:340px;line-height:1.55}

/* ============================================================ CUỘC GỌI */
.call{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;color:#e8edf5;background:radial-gradient(1100px 620px at 50% -10%,#16315f,#0c1c3f 60%,#080f1c)}
.call-top{width:100%;display:flex;align-items:center;gap:10px;padding:20px 24px}
.call-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.call-ava{position:relative;margin-bottom:22px}
.call-ring{position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(37,153,220,.45);animation:cpulse 2s ease-out infinite}
.call-ring.d2{animation-delay:1s}
@keyframes cpulse{0%{transform:scale(.85);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.call-name{font-size:26px;font-weight:700;font-family:var(--font-heading)}
.call-sub{font-size:14px;color:#8ea4cc;margin-top:5px}
.call-bar{display:flex;align-items:flex-end;justify-content:center;gap:20px;padding:24px 0 40px}
.call-btn{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:#cdd9ee;font-size:12px;font-weight:500}
.cbb{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.13);display:grid;place-items:center;color:#fff;transition:background .14s}
.call-btn:hover .cbb{background:rgba(255,255,255,.22)}
.cbb.on{background:#fff;color:#0c1c3f}.cbb.end{background:#c0392b}.cbb.accept{background:#3a9b5c}.cbb.big{width:66px;height:66px}
.call-wave{display:flex;align-items:center;gap:3px;height:36px;margin-top:16px}
.call-wave i{width:4px;border-radius:4px;background:rgba(91,179,232,.7);animation:cwv 1s ease-in-out infinite}
@keyframes cwv{0%,100%{height:7px}50%{height:30px}}
.vc-remote{position:absolute;inset:0;background:radial-gradient(700px 480px at 50% 42%,#1f456f,#142a4a 70%,#0c1c3f);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.vc-self{position:absolute;bottom:108px;right:24px;width:176px;height:232px;border-radius:var(--r-xl);background:linear-gradient(160deg,#2a6f74,#16404a);box-shadow:var(--sh-4);border:2px solid rgba(255,255,255,.15);display:flex;align-items:flex-end;padding:11px}
.vc-self span{font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.35);padding:3px 9px;border-radius:999px}
.vc-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:18px 22px;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent);z-index:3;color:#fff}
.vc-bar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:22px 0 30px;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent);z-index:3}

/* nhãn mockup */
.mock-tag{position:fixed;top:10px;right:14px;z-index:300;background:rgba(12,28,63,.85);color:#bcd3f0;font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 11px;border-radius:999px;pointer-events:none}

/* Story 4.10 — modal xem trực tiếp tệp (chỉ đọc) */
.fv-body{flex:1;min-height:0;overflow:auto;padding:0;background:var(--bg-layout);border-radius:0 0 var(--r-lg) var(--r-lg)}
.fv-msg{padding:24px 18px;font-size:13.5px;color:var(--text-secondary);text-align:center}
.fv-msg a{color:var(--c-primary);font-weight:600}
.fv-frame{width:100%;height:100%;min-height:70vh;border:0;background:#fff}
/* PDF vẽ bằng pdf.js: mỗi trang một canvas xếp dọc (KHÔNG dùng iframe — plugin PDF bị iframe
   sandbox của DigitalWorkspace chặn, xem FileViewerModal.tsx). */
.fv-pdf{padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:900px;margin:0 auto}
.fv-pdf .fv-pdf-page{display:block;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.18);border-radius:2px}
.fv-text{margin:0;padding:16px 18px;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.55;color:var(--text-primary)}
.fv-doc{padding:22px 26px;max-width:820px;margin:0 auto;background:var(--bg-container);color:var(--text-primary);font-size:14px;line-height:1.6}
.fv-doc img{max-width:100%;height:auto}
.fv-doc table{border-collapse:collapse;margin:8px 0}
.fv-doc td,.fv-doc th{border:1px solid var(--border);padding:4px 8px}
.fv-tabs{display:flex;gap:4px;padding:8px 10px 0;flex-wrap:wrap;position:sticky;top:0;background:var(--bg-layout);z-index:1}
.fv-tab{border:1px solid var(--border);background:var(--bg-container);color:var(--text-secondary);font-size:12px;padding:4px 10px;border-radius:var(--r-sm) var(--r-sm) 0 0;cursor:pointer}
.fv-tab.active{color:var(--c-primary);border-bottom-color:var(--bg-container);font-weight:600}
.fv-sheet{overflow:auto;padding:10px}
.fv-sheet table{border-collapse:collapse;font-size:12.5px;background:var(--bg-container)}
.fv-sheet td,.fv-sheet th{border:1px solid var(--border);padding:3px 8px;color:var(--text-primary);white-space:nowrap}
.fv-sheet tr:first-child td{background:var(--bg-layout);font-weight:600}

/* "Đã xem" kiểu Messenger — avatar nhỏ người đã đọc, xếp chồng nhẹ ở cuối tin. */
/* Dải avatar "đã xem": nằm NGOÀI khối tin, trải hết bề ngang và dồn sát mép PHẢI khung chat —
   dù tin của mình hay của người khác (YC chủ dự án 29-07). */
.cseen-avs{display:flex;align-items:center;justify-content:flex-end;width:100%;margin:-6px 0 8px}
.cseen-avs .avatar{width:16px;height:16px;font-size:8px;border:1.5px solid var(--bg-container);position:relative}
.cseen-avs .avatar + .avatar{margin-left:-5px}
.cseen-more{font-size:10px;color:var(--text-tertiary);margin-left:4px;line-height:1}
/* Chip nảy nhẹ lúc XUẤT HIỆN (React remount khi "đã xem" nhảy sang tin mới hơn) — không lặp,
   không chiếm thêm chỗ nên KHÔNG xê dịch bố cục tin. `backwards` (không phải `both`): giữ trạng
   thái trước khi chạy để chip xếp sau đứng yên trong lúc chờ, nhưng NHẢ transform khi xong để
   :hover còn nhấc lên được (animation luôn thắng transition nếu giữ fill forwards). */
@keyframes cseen-pop{from{opacity:0;transform:scale(.4) translateY(4px)}60%{opacity:1;transform:scale(1.14) translateY(0)}to{opacity:1;transform:scale(1) translateY(0)}}
.cseen-avs .avatar{animation:cseen-pop 300ms cubic-bezier(.34,1.56,.64,1) backwards;transition:transform 140ms ease,box-shadow 140ms ease}
/* Xếp lớp trước sau + trễ dần → cả cụm "chạy" từ trái sang thay vì bung một lượt. */
.cseen-avs .avatar:nth-child(2){animation-delay:45ms}
.cseen-avs .avatar:nth-child(3){animation-delay:90ms}
.cseen-avs .avatar:nth-child(4){animation-delay:135ms}
.cseen-avs .avatar:nth-child(5){animation-delay:180ms}
.cseen-avs .avatar:nth-child(6){animation-delay:225ms}
.cseen-avs .avatar:hover{transform:translateY(-2px) scale(1.18);z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.cseen-more{animation:cfade 300ms 225ms backwards}
/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành. */
@media (prefers-reduced-motion:reduce){
  .cseen-avs .avatar,.cseen-more{animation:none}
  .cseen-avs .avatar:hover{transform:none}
}

/* "Tệp & liên kết" bung gọn trong panel Info (kiểu Messenger) — lưới ảnh nhỏ + tệp/liên kết + Xem tất cả. */
.ci-media{padding:2px 2px 8px}
.ci-media-empty{font-size:12.5px;color:var(--text-tertiary);padding:6px 4px}
/* Thanh tab gọn trong panel Info (Ảnh/Video · Tài liệu · Liên kết). */
.ci-media-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 2px 8px}
.ci-media-tab{padding:6px 2px;margin-right:14px;font-size:12px;font-weight:600;color:var(--text-secondary);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
.ci-media-tab.active{color:var(--c-primary-active);border-bottom-color:var(--c-primary)}
.ci-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:6px}
.ci-media-thumb{aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);cursor:pointer;background:var(--bg-spotlight)}
.ci-media-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ci-media-file{display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:var(--r-sm);color:var(--text-primary);text-decoration:none;font-size:12.5px}
.ci-media-file:hover{background:var(--bg-layout)}
.ci-media-file .cfile-ic{width:26px;height:26px;font-size:8px;border-radius:6px}
.ci-media-fname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-media-linkic{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:6px;background:var(--c-primary-bg);color:var(--c-primary)}
.ci-media-all{width:100%;margin-top:6px;padding:7px;border:1px solid var(--border);border-radius:var(--r-sm);background:transparent;color:var(--c-primary);font-size:12.5px;font-weight:600;cursor:pointer}
.ci-media-all:hover{background:var(--c-primary-bg)}

/* Bộ chọn emoji (emoji-mart) — mặc định host cố định height:435px. Trong khung chat con
   (embed = iframe height:100vh, thường thấp) popup mở hướng lên trên bị tràn mép trên iframe
   → cắt mất thanh nav + ô tìm kiếm. Cắt chiều cao theo viewport để luôn vừa & cuộn nội bộ. */
/* Bảng emoji: khung RỘNG để nguyên cỡ mặc định của emoji-mart (giao diện gốc).
   CHỈ khung hẹp (cửa sổ chat con) mới ép thấp lại + trải kín bề ngang — bảng cao 435px cố định sẽ
   tràn ra ngoài iframe ~455px và bị cắt mất thanh nav + ô tìm kiếm. */
.emoji-pop.compact em-emoji-picker{height:min(300px,52vh)!important;min-height:0!important;max-width:100%;width:100%}