/* ============================================================
   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}
/* [CMC DESIGN SYSTEM] Tám màu ĐỊNH DANH (băm từ tên người để mỗi người luôn ra một màu) —
   vai trò khác hẳn màu ngữ nghĩa: chỉ cần phân biệt được với nhau, không mang nghĩa tốt/xấu.
   Lượt áp đầu phải giữ nguyên bộ cũ vì bản rút gọn `cmc-ui-kit` chỉ mang 5 họ màu, không đủ
   8 sắc. Bản đầy đủ `design-system-cmc/01-tokens/colors.json` có 14 hue × 10 bậc, nên nay
   lấy 8 hue KHÁC NHAU ở bậc 8-9. Tên class giữ nguyên (là khoá băm trong `chatModel.ts`),
   chỉ giá trị đổi. Số trong ngoặc là tương phản ĐO ĐƯỢC với chữ trắng — 7/8 đạt AA 4.5:1. */
.a-blue{background:#1971c2}   /* blue 8   — 5.02 */
.a-navy{background:#3b5bdb}   /* indigo 8 — 5.67 */
.a-teal{background:#0b7285}   /* cyan 9   — 5.59 */
.a-green{background:#087f5b}  /* teal 9   — 5.00 */
/* 4.30 — THIẾU 0.2 so với AA. #D9480F là bậc TỐI NHẤT của thang orange trên board, và thang
   yellow còn thấp hơn (bậc 9 chỉ 3.00) — đây là màu ấm tối nhất bảng màu chính thức có. Chữ tắt
   trong avatar luôn in đậm ⇒ từ cỡ s38 trở lên đạt ngưỡng AA chữ lớn (3.0); chỉ hai cỡ nhỏ nhất
   (s24/s28, chữ 10-11px) là chưa đạt. Sửa được khi khách bổ sung bậc cam đậm hơn. */
.a-amber{background:#d9480f}  /* orange 9 — 4.30 */
.a-red{background:#c2255c}    /* pink 8   — 5.66 */
.a-purple{background:#6741d9} /* violet 8 — 6.30 */
.a-slate{background:#495057}  /* gray 7   — 8.18 */
.av-wrap{position:relative;flex-shrink:0;display:inline-flex}
/* Chấm "đang trực tuyến" LÀ màu ngữ nghĩa (khác bảng định danh ở trên) → success-600 CMC. */
.av-on{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#0ca678;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)}
/* Header có tabs gạch chân: chính đường kẻ của tabs làm viền dưới, bỏ viền của head kẻo kẻ đôi. */
.cvlist-head.has-linetabs{padding-bottom:0;border-bottom:0}
.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}
/* Ô tìm ở cột hội thoại: viên thuốc, cao hơn chút cho dễ bấm — chỉ trong header, các ô
   `.cv-search` dùng lại trong modal (tạo nhóm, thêm thành viên…) giữ nguyên dáng vuông. */
.cvlist-head .cv-search{height:36px;border-radius:999px;padding:0 12px;background:var(--bg-layout)}
.cvlist-head .cv-search:focus-within{box-shadow:0 0 0 3px var(--c-primary-bg)}
.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)}
/* Tabs kiểu GẠCH CHÂN — chỉ dùng ở header cột hội thoại (YC chủ dự án 09-09). Tách bằng
   `.is-line` để KHÔNG đụng tabs viên bo đang dùng ở SearchPane · MembersPane · EmbedPanel.
   Âm lề 14px để đường kẻ chạy hết bề ngang cột, thay luôn viền dưới của `.cvlist-head`. */
.cv-tabs.is-line{gap:0;margin:11px -14px 0;padding:0 8px;border-bottom:1px solid var(--border-secondary)}
/* `white-space:nowrap` là BẮT BUỘC: cột chỉ rộng 326px, ba tab kèm số đếm mà để chữ tự xuống
   dòng thì "Chưa đọc" gãy làm hai hàng, tabs cao gấp đôi và lệch hẳn khỏi đường gạch chân. */
.cv-tabs.is-line .cv-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;padding:9px 2px 10px;border-radius:0;font-size:12.5px;white-space:nowrap;color:var(--text-tertiary)}
.cv-tabs.is-line .cv-tab::after{content:'';position:absolute;left:50%;right:50%;bottom:-1px;height:2px;border-radius:2px 2px 0 0;background:var(--c-primary);opacity:0;transition:left .16s,right .16s,opacity .16s}
.cv-tabs.is-line .cv-tab:hover{background:transparent;color:var(--text-heading)}
.cv-tabs.is-line .cv-tab.active{background:transparent;color:var(--c-primary-active)}
.cv-tabs.is-line .cv-tab.active::after{left:14%;right:14%;opacity:1}
/* Số đếm cạnh nhãn tab (chưa đọc · nhóm) — đủ nổi để đọc, không tranh chỗ với nhãn. */
.cv-tab-n{min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--bg-spotlight,var(--bg-layout));color:var(--text-tertiary);font-size:10px;font-weight:700;line-height:16px}
.cv-tabs.is-line .cv-tab.active .cv-tab-n{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}
/* Nép SÁT mép bong bóng (YC chủ dự án 03-09: "vị trí icon btn quá xa"). Trước đây 6px của khối
   cộng thêm 4px `margin-left` của nút đầu tiên ⇒ nhìn như rời hẳn khỏi tin. */
.cmsg.them .cmsg-tools{left:100%;margin-left:2px}
.cmsg.me .cmsg-tools{right:100%;margin-right:2px}
.cmsg-tools .creact-add:first-child{margin-left:0}
.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:4px;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:4px;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:#087f5b}.cfile-ic.pdf{background:#c92a2a}.cfile-ic.doc{background:#0064b1}.cfile-ic.ppt{background:#d9480f}.cfile-ic.zip{background:#495057}
.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:12px;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:120px;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 */
/* Kiểu Messenger/Zalo: MỘT viên nhỏ gom hết cảm xúc, nép mép dưới bong bóng — không phải mỗi loại
   một chip riêng (nhiều loại thì hàng chip dài hơn cả tin nhắn, thò khỏi mép tin: YC chủ dự án
   03-09 "cảm xúc quá dài so với tin nhắn, thu gọn lại, nhiều thì để +").
   Tin mình gửi dạt PHẢI nên viên cũng dạt theo; `flex-wrap` + `max-width` để lúc bung hết cảm xúc
   thì xuống dòng trong bề ngang cột tin. Số loại hiện sẵn: `MAX_REACTS` trong Thread.tsx. */
.creacts{display:flex;gap:4px;margin-top:-6px;margin-bottom:2px;padding:0 3px;max-width:100%}
.cmsg.me .creacts{justify-content:flex-end}
.creact-pill{display:inline-flex;align-items:center;flex-wrap:wrap;gap:1px;max-width:100%;background:var(--bg-container);border:1px solid var(--border);border-radius:999px;padding:1px 4px;box-shadow:var(--sh-1)}
.creact{display:inline-flex;align-items:center;gap:2px;border-radius:999px;padding:0 1px;font-size:12px;line-height:1.5;cursor:pointer}
.creact:hover{background:var(--bg-spotlight)}
/* Cảm xúc CHÍNH MÌNH đã thả — nền nhạt màu chủ đạo để biết bấm lần nữa là bỏ. */
.creact.mine{background:var(--c-primary-bg)}
.creact-more{font-weight:700;color:var(--text-secondary)}
.creact b{font-size:10.5px;font-weight:700;color:var(--text-secondary)}
/* Số TỔNG lượt ở cuối viên khi thu gọn ("👍❤️ 5") — thay cho số đếm từng loại (QA 15-09). */
.creact-total{font-size:10.5px;font-weight:700;color:var(--text-secondary);padding:0 3px 0 1px}

/* 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:8px;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:12px;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}
/* Popup Cài đặt: cao hơn modal thường vì có 8 mục, và trạng thái "Đang tải/Đã lưu" nằm ở head. */
.c-settings{max-width:560px}
.c-settings .c-modal-body{padding:4px 20px 12px}
.c-settings-state{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-tertiary);white-space:nowrap}
.c-settings-state.saved{color:var(--st-success,#38a169)}
.c-settings-state+.c-modal-x{margin-left:8px}
.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}
/* thẻ tin trong modal "Tin nhắn đã ghim" — bấm được thì phải nhìn ra là bấm được */
.cpin-card{transition:background-color .15s,border-color .15s}
.cpin-card.jumpable:hover{background:var(--c-primary-bg);border-color:var(--c-primary)}

/* 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:4px;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)}
/* Trong popup Cài đặt: bỏ khung/nền của thẻ — thẻ-trong-thẻ nhìn nặng và thừa một lớp viền.
   Chỉ giữ nhãn nhóm + đường kẻ giữa các hàng làm ranh giới. */
.ccard.is-plain{background:transparent;border:0;box-shadow:none;border-radius:0}
.ccard.is-plain+.ccard.is-plain{border-top:1px solid var(--border-secondary);margin-top:4px}
.ccard.is-plain .crow{padding-left:0;padding-right:0}
.ccard.is-plain .ccard-title{padding-left:0;padding-right:0}
.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:#087f5b}.cfiletile-ic.pdf{background:#c92a2a}.cfiletile-ic.doc{background:#0064b1}.cfiletile-ic.ppt{background:#d9480f}.cfiletile-ic.zip{background:#495057}
.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:32px;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:#f03e3e}.cbb.accept{background:#0ca678}.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:3px}
.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:8px}
.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:8px;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%}

/* ═══ THU HẸP CỬA SỔ — chống chữ chồng chéo (YC chủ dự án 26-08) ═══════════════
   Bố cục là 3 cột flex: .cvlist 326px + .chatmain co giãn + .chat-info 286px, hai cột bên
   `flex-shrink:0`. Hệ quả đo được: thu cửa sổ còn 700px thì .chatmain chỉ còn 88px, còn 612px
   thì về 0 và panel Thông tin tràn ra ngoài rồi bị .work{overflow:hidden} cắt — chữ trong header,
   bong bóng tin và ô soạn dồn vào cột 0px nên đè lên nhau.

   Cách chữa, theo thứ tự nhường chỗ: panel Thông tin nổi lên trên → danh sách hội thoại hẹp dần
   → khung chat luôn giữ được bề ngang tối thiểu. KHÔNG phải bản responsive cho điện thoại
   (xem NFR-U04 / CX-07 — mốc 375px vẫn chờ chủ dự án chốt), mà là để cửa sổ desktop thu nhỏ
   vẫn đọc được. */

/* 1) Chữ trong header phải cắt bằng "…", cụm nút KHÔNG được co lại.
      `.chat-head-name` là flex container, chữ nằm trong text node ⇒ đặt ellipsis cho cả hai lớp. */
.chat-head-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-name>span:not(.badge){overflow:hidden;text-overflow:ellipsis}
.chat-head-actions{flex-shrink:0}

/* 2) Panel Thông tin NỔI lên trên khung chat thay vì chiếm chỗ — nút "Thông tin" vẫn bật/tắt
      được bình thường (nếu `display:none` thì bấm nút sẽ không thấy gì hiện ra). */
@media (max-width:1080px){
  .work{position:relative}
  .chat-info{position:absolute;top:0;right:0;bottom:0;width:min(286px,84%);z-index:20;box-shadow:var(--sh-2)}
  .cvlist{width:280px}
}

/* 3) Hẹp hơn nữa: thu danh sách hội thoại và bớt padding để khung chat còn chỗ thở. */
@media (max-width:860px){
  .cvlist{width:240px}
  .chat-body{padding:14px 14px}
  .composer{padding:10px 12px 14px}
  .chat-head{padding:0 10px;gap:8px}
}
@media (max-width:720px){
  .cvlist{width:200px}
  .cmsg-col{max-width:84%}
}

/* Ảnh đại diện bấm được để xem cỡ lớn (YC chủ dự án 26-08). Chỉ gắn class này khi người đó CÓ
   ảnh thật — ô chữ viết tắt không có gì để phóng to nên cũng không để con trỏ tay. */
.avatar.viewable{cursor:zoom-in}
.avatar.viewable:hover{filter:brightness(1.06)}

/* ============================================================ ĐIỆN THOẠI (≤767px)
   Mốc PHẢI khớp `MOBILE_QUERY` (useMediaQuery.ts). Các mốc 1080/860/720 ở trên chỉ là desktop thu
   nhỏ — dưới 767px mà vẫn xếp danh sách 200px cạnh khung chat thì cả hai cùng không dùng được.

   Kiểu Messenger/Zalo di động: MỘT cột. `.work` mang `m-list` (hiện danh sách / tìm kiếm tổng) hoặc
   `m-chat` (hiện khung chat / Thành viên / Kho tài liệu), ChatShell quyết định qua `mobilePane`.
   Khung chat có nút ← (`.chat-back`) quay về danh sách. */
.chat-back{display:none}
@media (max-width:767px){
  /* 100vh trên trình duyệt di động tính cả thanh địa chỉ ⇒ ô soạn bị đẩy khuất đáy màn hình. */
  .shell{height:100vh;height:100dvh}

  .work.m-list > :not(.cvlist){display:none !important}
  .work.m-chat > .cvlist{display:none}
  .work > .cvlist{width:100%;flex:1;border-right:0}

  .chat-back{display:grid;flex-shrink:0;margin-right:-4px}
  .cbtn-call{display:none}
  .chat-head{padding:0 6px 0 4px;gap:8px}
  .cpane-head{padding:0 10px;gap:8px}

  /* Thông tin hội thoại phủ KÍN phía dưới header — chừa header để nút (i) vẫn bấm được mà đóng lại. */
  .chat-info{top:60px;width:100%;border-left:0;box-shadow:none}

  .chat-body{padding:12px 10px}
  .cmsg-col{max-width:86%}
  .creply{max-width:100%}
  .composer{padding:8px 8px calc(8px + env(safe-area-inset-bottom, 0px))}
  /* Gợi ý phím tắt (Enter gửi / Shift+Enter xuống dòng) vô nghĩa trên bàn phím cảm ứng. */
  .composer-hint{display:none}
  /* iOS Safari tự PHÓNG TO trang khi focus ô nhập có chữ < 16px, rồi không thu lại. */
  .composer-box textarea,.cv-search input{font-size:16px}

  .c-overlay{padding:12px}
  .c-modal{max-height:calc(100dvh - 24px)}
}

/* ============================================================ TẠO NHIỆM VỤ TỪ TIN (DEMO)
   `TaskFromMessageModal` — bản TRÌNH DIỄN, không gọi API. Chỉ dùng token màu để khớp light/dark. */
.c-modal.ctask-modal{max-width:640px}
.ctask-head-ic{width:30px;height:30px;border-radius:var(--r-md);background:var(--c-primary-bg);color:var(--c-primary);display:grid;place-items:center;flex-shrink:0}
.ctask-body{display:flex;flex-direction:column;gap:14px;padding:16px 20px 18px}
.ctask-src{border-left:3px solid var(--c-primary);background:var(--c-primary-bg);border-radius:var(--r-md);padding:8px 12px}
.ctask-src-h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);margin-bottom:3px}
.ctask-src-h b{color:var(--c-primary-active);font-weight:600}
.ctask-src-text{font-size:13px;color:var(--text);line-height:1.45;white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ctask-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ctask-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.ctask-label{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--text-secondary)}
.ctask-req{color:var(--st-error)}
.ctask-count{margin-left:auto;font-weight:400;font-size:11.5px;color:var(--text-tertiary)}
.ctask-input{width:100%;padding:8px 11px;min-height:36px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-container);color:var(--text);font-size:13.5px;font-family:inherit;line-height:1.5;outline:none;transition:border-color .15s,box-shadow .15s}
textarea.ctask-input{resize:vertical;min-height:84px}
.ctask-input:hover{border-color:var(--c-primary)}
.ctask-input:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-bg)}
.ctask-input.invalid,.ctask-pp-field.invalid{border-color:var(--st-error)}
.ctask-input.invalid:focus,.ctask-pp-field.invalid.focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--st-error) 14%,transparent)}
.ctask-input::placeholder,.ctask-pp-field input::placeholder{color:var(--text-tertiary)}
[data-theme="dark"] .ctask-input[type=date]{color-scheme:dark}
.ctask-err{font-size:12px;color:var(--st-error)}
.ctask-quick{display:flex;flex-wrap:wrap;gap:6px}
.ctask-qchip{border:1px solid var(--border);background:transparent;color:var(--text-secondary);border-radius:999px;font-size:11.5px;padding:2px 10px;cursor:pointer;font-family:inherit}
.ctask-qchip:hover{border-color:var(--c-primary);color:var(--c-primary-active)}
.ctask-qchip.on{background:var(--c-primary-bg);border-color:var(--c-primary);color:var(--c-primary-active);font-weight:600}

.ctask-pp{position:relative}
.ctask-pp-field{display:flex;flex-wrap:wrap;align-items:center;gap:5px;min-height:36px;padding:4px 30px 4px 6px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--bg-container);cursor:text;position:relative;transition:border-color .15s,box-shadow .15s}
.ctask-pp-field:hover{border-color:var(--c-primary)}
.ctask-pp-field.focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-bg)}
.ctask-pp-field input{flex:1;min-width:90px;border:0;outline:none;background:transparent;color:var(--text);font-size:13.5px;font-family:inherit;padding:3px 4px}
.ctask-pp-caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none}
.ctask-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 4px 2px 2px;border-radius:999px;background:var(--bg-layout);border:1px solid var(--border);font-size:12.5px;color:var(--text)}
.ctask-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctask-chip-x{width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:var(--text-tertiary);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.ctask-chip-x:hover{background:color-mix(in srgb,var(--st-error) 12%,transparent);color:var(--st-error)}
.ctask-pp-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;max-height:232px;overflow-y:auto;background:var(--bg-container);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-4);padding:4px;animation:cpop .12s ease}
.ctask-pp-opt{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:var(--r-md);cursor:pointer}
.ctask-pp-opt.hi{background:var(--c-primary-bg)}
.ctask-pp-name{font-size:13.5px;font-weight:500;color:var(--text-heading)}
.ctask-pp-sub{font-size:12px;color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctask-pp-empty{padding:12px;text-align:center;font-size:12.5px;color:var(--text-tertiary)}

.ctask-drop{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .15s}
.ctask-drop b{color:var(--c-primary-active);font-weight:600}
.ctask-drop:hover,.ctask-drop.over,.ctask-drop:focus-visible{border-color:var(--c-primary);background:var(--c-primary-bg);color:var(--c-primary-active);outline:none}
.ctask-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ctask-file{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-container)}
.ctask-file-ic{width:28px;height:28px;border-radius:var(--r-sm);background:var(--c-primary-bg);color:var(--c-primary);display:grid;place-items:center;flex-shrink:0}
.ctask-file-name{flex:1;min-width:0;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctask-file-size{font-size:11.5px;color:var(--text-tertiary);flex-shrink:0}
.ctask-file-tag{font-size:11px;color:var(--c-primary-active);background:var(--c-primary-bg);border-radius:999px;padding:1px 8px;flex-shrink:0}

.ctask-btn{width:auto;height:36px;padding:0 16px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer}
.ctask-btn:disabled{opacity:.6;cursor:progress}
.ctask-btn.ghost{border:1px solid var(--border-strong);background:var(--bg-container);color:var(--text);border-radius:var(--r-md)}
.ctask-btn.ghost:hover{border-color:var(--c-primary);color:var(--c-primary-active)}

.ctask-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 24px 20px;gap:4px}
.ctask-done-ic{width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--st-success,#52c41a) 14%,transparent);color:var(--st-success,#52c41a);display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.ctask-done-h{font-size:16px;font-weight:600;color:var(--text-heading)}
.ctask-done-code{font-size:13px;font-weight:600;color:var(--c-primary-active);background:var(--c-primary-bg);border-radius:999px;padding:2px 12px;margin-bottom:12px}
.ctask-done-sum{width:100%;max-width:440px;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0 0 14px;padding:12px 14px;text-align:left;font-size:13px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-layout)}
.ctask-done-sum dt{color:var(--text-tertiary)}
.ctask-done-sum dd{margin:0;color:var(--text);word-break:break-word}

@media (max-width:560px){
  .ctask-grid{grid-template-columns:1fr}
  .ctask-body{padding:14px 14px 16px}
  /* iOS Safari tự phóng to khi focus ô < 16px. */
  .ctask-input,.ctask-pp-field input{font-size:16px}
  .ctask-done-sum{grid-template-columns:1fr;gap:2px}
  .ctask-done-sum dd{margin-bottom:6px}
}