/* css/group-chat.css. Nhóm chat 24 giờ (PROMPT 36) + hộp hỗ trợ. */

.gc-body {
  margin: 0; background: #0e0e10; color: #eee;
  font-family: 'Be Vietnam Pro', sans-serif;
  display: flex; flex-direction: column; height: 100dvh;
}

.gc-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #17171a; border-bottom: 1px solid rgba(255,255,255,.08);
}
.gc-back { background: none; border: none; color: #eee; font-size: 26px; cursor: pointer; line-height: 1; padding: 0 6px; }
.gc-headinfo { flex: 1; min-width: 0; }
.gc-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-sub { font-size: 12px; color: #999; margin-top: 2px; }
.gc-left { color: #57d69a; }
.gc-closed { color: #e0922a; font-weight: 700; }
.gc-leave { background: none; border: 1px solid rgba(255,255,255,.2); color: #bbb; border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; }

/* ════════════════════════════════════════════════════════════════════════════
   HAI TAB: TRÒ CHUYỆN | THÀNH VIÊN.
   ⚠ `.gc-pane` phải là flex-column + min-height:0, KHÔNG thì `.gc-msgs` (overflow-y:auto)
     không biết cao bao nhiêu và khung chat tràn dài vô tận thay vì tự cuộn.
   ════════════════════════════════════════════════════════════════════════════ */
.gc-tabs { display: flex; background: #17171a; border-bottom: 1px solid rgba(255,255,255,.08); }
.gc-tab {
  flex: 1; background: none; border: 0; border-bottom: 2px solid transparent;
  color: #8b8b93; font-size: 13.5px; font-family: inherit; padding: 11px 0; cursor: pointer;
}
.gc-tab.on { color: #f2f2f0; border-bottom-color: #d14828; }
.gc-dot {
  display: inline-block; min-width: 17px; height: 17px; line-height: 17px;
  background: #d14828; color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-align: center; padding: 0 4px; margin-left: 3px;
}
.gc-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gc-pane[hidden] { display: none; }
#gcPaneMem { overflow-y: auto; }

.gc-sect { font-size: 11.5px; letter-spacing: .3px; color: #8b8b93; padding: 12px 14px 6px; }
.gc-pending .gc-sect { color: #d14828; }
.gc-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.gc-row-n { flex: 1; font-size: 14px; color: #f2f2f0; min-width: 0;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-you { color: #8b8b93; font-style: normal; font-size: 12.5px; }
.gc-ava {
  width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden;
  background: #3a3a3d; color: #f2f2f0; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.gc-ava img { width: 100%; height: 100%; object-fit: cover; }
.gc-badge { font-size: 11.5px; color: #d14828; background: rgba(209,72,40,.14);
            padding: 3px 8px; border-radius: 999px; flex: none; }
.gc-kick { background: none; border: 1px solid rgba(255,255,255,.16); color: #8b8b93;
           border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; flex: none; }
.gc-kick:hover { border-color: #E24B4A; color: #E24B4A; }
.gc-ok, .gc-no { border: none; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; flex: none; }
.gc-ok { background: #1f9d57; color: #fff; }
.gc-no { background: rgba(255,255,255,.1); color: #ddd; }

.gc-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.gc-msg { position: relative; max-width: 78%; align-self: flex-start; background: #1d1d21; border-radius: 14px; padding: 9px 12px; }
.gc-msg.mine { align-self: flex-end; background: #3a2118; }
.gc-text { font-size: 14.5px; line-height: 1.45; word-break: break-word; }
.gc-img { max-width: 100%; border-radius: 10px; display: block; margin-bottom: 6px; }
.gc-time { font-size: 10.5px; color: #888; margin-top: 4px; text-align: right; }

/* Nút ⋯ chỉ hiện trên tin của mình. Trên máy cảm ứng KHÔNG có hover, nên nó phải
   luôn hiện mờ — ẩn hẳn rồi chờ hover là trên điện thoại không bao giờ bấm được. */
.gc-more {
  position: absolute; top: 2px; left: -26px;
  background: none; border: 0; color: #8b8b93; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 4px; opacity: .45;
}
.gc-msg.mine:hover .gc-more { opacity: 1; }

/* HAI BIA MỘ KHÁC NHAU. `gc-removed` = bị gỡ vì VI PHẠM. `gc-recalled` = tự thu hồi,
   KHÔNG phải vi phạm gì. Cùng một kiểu chữ là buộc tội oan người chỉ gõ nhầm. */
.gc-removed { align-self: center; background: none; color: #888; font-size: 12.5px; font-style: italic; }
.gc-sys { align-self: center; text-align: center; background: none; color: #999; font-size: 12px; padding: 4px 10px; max-width: 85%; }
.gc-recalled {
  background: none; border: 1px dashed rgba(255,255,255,.2);
  color: #8b8b93; font-size: 13px; font-style: italic; padding: 7px 12px;
}
.gc-err { padding: 40px 20px; text-align: center; color: #e06b5a; font-size: 14px; }

/* Thanh "soạn lại" sau khi thu hồi. Chữ cũ lấy từ localStorage MÁY NÀY, không phải máy chủ. */
.gc-editbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: #1a1710; border-top: 1px solid rgba(255,255,255,.06);
}
.gc-editbar[hidden] { display: none; }
.gc-editbar-t { flex: 1; font-size: 12.5px; color: #b9a06a; }
.gc-editbar-btn { background: none; border: 1px solid rgba(255,255,255,.2); color: #ddd;
                  border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; }
.gc-editbar-x { background: none; border: 0; color: #8b8b93; font-size: 18px; cursor: pointer; padding: 0 4px; }

.gc-warn {
  font-size: 11.5px; color: #b9a06a; background: #1a1710;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 8px 14px; line-height: 1.5;
}
.gc-closed-note { padding: 12px 14px; color: #999; font-size: 13px; background: #141416; }

.gc-composer { display: flex; gap: 8px; padding: 10px 12px; background: #17171a; border-top: 1px solid rgba(255,255,255,.08); }
.gc-composer input {
  flex: 1; background: #0e0e10; border: 1px solid rgba(255,255,255,.14); color: #eee;
  border-radius: 999px; padding: 11px 16px; font-size: 14.5px; outline: none; font-family: inherit;
}
.gc-sendbtn { background: #d14828; color: #fff; border: none; border-radius: 999px; padding: 11px 20px; font-weight: 700; cursor: pointer; }
.gc-sendbtn:disabled { opacity: .5; cursor: default; }

/* ============================================================
   HỘP HỖ TRỢ (js/support-box.js).
   KHÔNG phải cảnh báo vi phạm. Người này không vi phạm gì cả.
   Tông ấm, không đỏ, không dấu chấm than, có nút Đóng rõ ràng.
   ============================================================ */
.dsb-wrap {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); padding: 20px;
}
.dsb-card {
  max-width: 380px; width: 100%;
  background: #fdfaf5; color: #2a2320;
  border-radius: 18px; padding: 22px 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.dsb-title { font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.dsb-list { margin: 16px 0 4px; }
.dsb-row { background: #f4efe6; border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.dsb-name { font-size: 13px; font-weight: 700; color: #4a4036; }
.dsb-phone { display: inline-block; margin-top: 4px; font-size: 19px; font-weight: 800; color: #8d2d2b; text-decoration: none; letter-spacing: .5px; }
.dsb-hours { font-size: 12px; color: #7a6f63; margin-top: 3px; }
.dsb-note { font-size: 12px; color: #7a6f63; margin-top: 3px; }
.dsb-foot { font-size: 13px; color: #5a5048; margin-top: 10px; line-height: 1.5; }
.dsb-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; align-items: center; }
.dsb-close { background: #2a2320; color: #fff; border: none; border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 700; cursor: pointer; }
.dsb-more { font-size: 13px; color: #8d2d2b; font-weight: 700; text-decoration: none; }

/* ============================================================
   Ô NHÓM trong bình luận (DILO.groupBoxHtml ở js/dilo-common.js)
   ============================================================ */
.cgroup-box {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 10px 12px;
  background: #17171a; border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}
.cgroup-ava { width: 32px; height: 32px; border-radius: 50%; background: #3a2a25; color: #e2a48f; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; overflow: hidden; }
.cgroup-ava img { width: 100%; height: 100%; object-fit: cover; }
.cgroup-main { flex: 1; min-width: 0; }
/* Tiêu đề = TÊN NHÓM (thứ người ta tự đặt), không phải tên chủ nhóm. Tên chủ nhóm
   xuống dòng phụ. Bản cũ đảo ngược hai cái này, nên mọi nhóm trông giống hệt nhau. */
/* 🔴 GHI FONT TƯỜNG MINH. `.cgroup-title` từng bị dilo-typography.css ép League Gothic —
   font nén dựng cho chữ 28px+ — nên tên nhóm ở 14px teo lại và bẹp dí. Ghi rõ ở đây thì
   dù ai có nhét nó vào danh sách ép font lần nữa, dòng này vẫn thắng (nạp sau). */
.cgroup-title {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 14.5px; font-weight: 600; color: #ededef; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cgroup-sub { font-size: 12px; color: #8b8b93; margin-top: 2px; }
.cgroup-btn { background: #ededef; color: #0e0e10; border: none; border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer; flex: 0 0 auto;
  transition: transform .12s cubic-bezier(.2,.8,.2,1); }
.cgroup-btn:hover:not(:disabled) { transform: scale(1.04); }
.cgroup-btn:disabled { background: transparent; color: #8b8b93; border: 1px solid rgba(255,255,255,.12); cursor: default; }

/* "Đang lập nhóm…" — chỗ giữ chỗ trong lúc chờ Cloud Function ghi `groupId` ngược lên
   bình luận. Không có nó thì người ta gõ /group xong không thấy gì, tưởng hỏng. */
.cd-gwait {
  margin-top: 8px; padding: 10px 12px;
  border: 1px dashed rgba(255,255,255,.16); border-radius: 12px;
  font-size: 12.5px; color: #8b8b93;
}

/* ════════════════════════════════════════════════════════════════════════════
   THANH SOẠN NHÓM. Hiện NGAY khi gõ `/group`, trước cả khi gửi bình luận.
   Người ta sửa tên nhóm TRƯỚC, và biết chắc mình sắp tạo ra cái gì.
   ════════════════════════════════════════════════════════════════════════════ */
.gcbar {
  border: 1px solid #d14828; border-radius: 12px;
  background: rgba(209,72,40,.08);
  padding: 10px 12px; margin-bottom: 10px;
  animation: gcbarIn .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes gcbarIn { from { opacity: 0; transform: translateY(-6px); } }
.gcbar.on { border-color: rgba(93,202,165,.5); background: rgba(93,202,165,.07); }

.gcbar-top { display: flex; align-items: center; gap: 9px; }
.gcbar-ic { width: 18px; height: 18px; flex: none; color: #d14828; }
.gcbar.on .gcbar-ic { color: #5DCAA5; }
.gcbar-tag { font-size: 12px; font-weight: 700; color: #d14828; letter-spacing: .3px; flex: none; }
.gcbar.on .gcbar-tag { color: #5DCAA5; }
.gcbar-name {
  flex: 1; min-width: 0; height: 30px;
  background: #0e0e10; border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  color: #ededef; font: inherit; font-size: 13px; padding: 0 10px; outline: none;
}
.gcbar-name:focus { border-color: #d14828; }

.gcbar-ask { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.gcbar-q { flex: 1; font-size: 12.5px; color: #8b8b93; }
.gcbar-no, .gcbar-yes {
  height: 28px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700;
}
.gcbar-no  { background: transparent; border: 1px solid rgba(255,255,255,.16); color: #8b8b93; }
.gcbar-yes { background: #d14828; border: 0; color: #fff; }
.gcbar-ok  { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; color: #5DCAA5; }
.gcbar-ok svg { width: 15px; height: 15px; flex: none; }

.gc-close-btn { background: #7a1f1f; border: none; color: #ffd9d9; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; margin-right: 6px; }
.gc-rename-btn { background: none; border: 1px solid rgba(255,255,255,.2); color: #ddd; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer; margin-right: 6px; }