/* =========================================================================
   chat.css — bong bóng hỗ trợ (cặp với shared/js/chat.js)
   ========================================================================= */

.mtchat { position: fixed; right: 18px; bottom: 18px; z-index: 150; }

.mtchat__bubble {
  position: relative;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: var(--accent-solid);
  color: var(--accent-fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(232, 163, 23, .4);
  transition: transform .15s ease;
}

.mtchat__bubble:hover { transform: scale(1.06); }

/* ═══ VONG SONG LAN TOA QUANH NUT ════════════════════════════════════════
   Hai vong tron no dan roi tan, lech pha nhau nua nhip -> nhin nhu song
   lan lien tuc chu khong phai "nhap nhay" tung hoi.

   Dung ::before / ::after chu khong them the: nut nay do chat.js dung bang
   chuoi HTML, cang it manh HTML phai sua cang do sai.

   ⚠️ PHAI `position: absolute`. Nut la `display: grid; place-items: center`
      nen pseudo-element mac dinh se thanh MOT O CUA LUOI, day cai icon lech
      di. Absolute thi no ra khoi luong, khong dung toi icon.

   ⚠️ `pointer-events: none` — vong song phu ra ngoai nut toi hon 100px;
      khong tat thi no an mat cu bam vao nhung gi nam duoi do. */
.mtchat__bubble::before,
.mtchat__bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent-solid);
  pointer-events: none;
  animation: mtchat-lan 2.8s cubic-bezier(.2, .6, .35, 1) infinite;
}
.mtchat__bubble::after { animation-delay: 1.4s; }

/* Toi da 1.9 lan, KHONG hon. Nut nam cach day man hinh 18px, ban kinh nut
   la 27px — no toi 2.05 lan thi vong song thoc xuong duoi mep man hinh
   khoang 10px va bi cat ngang mot duong thang, trong nhu loi ve. 1.9 la
   muc lon nhat con nam tron trong man hinh. */
@keyframes mtchat-lan {
  0%   { transform: scale(1);   opacity: .6; }
  70%  {                        opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Da mo khung chat roi thi thoi vay goi nua — song van chay luc do chi lam
   roi mat nguoi dang doc. JS gan class `is-mo` cho .mtchat khi mo/dong. */
.mtchat.is-mo .mtchat__bubble::before,
.mtchat.is-mo .mtchat__bubble::after { animation: none; opacity: 0; }

/* May dat "giam chuyen dong": tat han. Bat buoc — hieu ung lap vo han la
   dung thu ma nguoi nhay cam tien dinh chiu khong noi. */
@media (prefers-reduced-motion: reduce) {
  .mtchat__bubble::before,
  .mtchat__bubble::after { animation: none; opacity: 0; }
}

/* ═══ NHAN "Live Chat" ═══════════════════════════════════════════════════
   Nam ben trai nut. Co cham xanh nhay de bao "dang truc" — chinh cai cham
   do moi noi len chu "live", con mot chu khong thi nguoi ta van tuong la
   form gui thu. */
.mtchat__nhan {
  position: absolute;
  right: 64px;
  bottom: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: .82rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
}
.mtchat__nhan:hover { transform: translateX(-2px); }

/* Cham "dang truc" */
.mtchat__song {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
.mtchat__song::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: mtchat-tho 2s ease-out infinite;
}
@keyframes mtchat-tho {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mtchat__song::after { animation: none; opacity: 0; }
}

/* Mo khung chat thi giau nhan di — no se de len goc khung. */
.mtchat.is-mo .mtchat__nhan {
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
}

/* May hep: bo nhan, chi con nut. Duoi 520px cai nhan an mat mot mang man
   hinh ma khong them thong tin gi — bieu tuong bong bong da du hieu. */
@media (max-width: 519px) {
  .mtchat__nhan { display: none; }
}

.mtchat__dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--accent-solid);
}

.mtchat__panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: min(360px, calc(100vw - 36px));
  height: min(520px, calc(100dvh - 110px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-xl);
  overflow: hidden;
}

.mtchat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 3px 0 var(--accent-solid);
}

.mtchat__x { border: 0; background: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: 4px 8px; }

.mtchat__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
}

.mtchat__tabs [data-tab], .mtchat__tabs a {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--surface-2);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.mtchat__tabs .is-on { background: var(--card); color: var(--accent); border-color: var(--accent-solid); }

.mtchat__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mtchat__msg {
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 12px 12px 12px 4px;
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.55;
  align-self: flex-start;
  word-break: break-word;
  white-space: pre-wrap;
}

.mtchat__msg--me {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
  background: var(--accent-soft);
  color: var(--text);
}

.mtchat__msg a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }

.mtchat__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.mtchat__chip {
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.mtchat__chip:hover { border-color: var(--accent-solid); color: var(--accent); }
.mtchat__chip--admin { border-style: dashed; color: var(--accent); }

.mtchat__guest { display: grid; gap: 8px; }
.mtchat__guest p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

.mtchat__guest input {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;              /* chong iOS tu phong to */
}

.mtchat__hint { font-size: var(--fs-xs) !important; }
.mtchat__hint a { color: var(--accent); }

.mtchat__form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--border);
}

.mtchat__form input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

/* Điện thoại: khung chiếm gần trọn màn hình. */
@media (max-width: 480px) {
  .mtchat { right: 12px; bottom: 12px; }
  .mtchat__panel {
    width: calc(100vw - 24px);
    height: min(600px, calc(100dvh - 90px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mtchat__bubble { transition: none; }
}

/* ══ ẢNH TRONG CHAT ════════════════════════════════════════════════════ */

.mtchat__msg--anh { padding: 4px; background: var(--surface-2); }
.mtchat__msg--me.mtchat__msg--anh { background: var(--accent-soft); }

.mtchat__img {
  display: block;
  max-width: 200px;
  max-height: 240px;
  border-radius: 9px;
  cursor: zoom-in;
}

/* Nút 📷 trong hàng gửi tin. */
.mtchat__attach {
  flex: none;
  width: 40px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
}
.mtchat__attach:hover { border-color: var(--accent-solid); color: var(--accent); }
.mtchat__attach:disabled { opacity: .45; cursor: not-allowed; }

/* ── Lightbox: bấm ảnh phóng to, Esc / ✕ / bấm nền để đóng ── */
#mt-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .82);
  cursor: zoom-out;
}

#mt-lightbox img {
  max-width: 94vw;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  cursor: default;
}

.mtlb__x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
}
.mtlb__x:hover { background: rgba(255, 255, 255, .28); }

/* ══ HÀNG ĐỢI MINI (bong bóng của tài khoản quản trị) ══════════════════ */

.mtchat__qh {
  margin: 10px 0 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-faint);
}

.mtchat__qtrong { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--text-faint); }

.mtchat__qi {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mtchat__qi:hover { border-color: var(--accent-solid); }
.mtchat__qi b { font-size: var(--fs-sm); }
.mtchat__qi span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nút quay về danh sách khi đang xem một cuộc. */
.mtchat__qback {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.mtchat__qback:hover { border-color: var(--accent-solid); }

/* ══ CỤM SỐ 3 MÀU trên bong bóng (admin, lúc thu gọn) ══════════════════ */

.mtchat__counts {
  position: absolute;
  right: 0;
  bottom: 62px;
  display: grid;
  gap: 4px;
  justify-items: end;
  pointer-events: none;      /* chi de nhin — bam xuyen qua duoc */
}

.mtchat__cnt {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}

.mtchat__cnt--cho  { background: var(--danger); }  /* đỏ  — đang chờ phản hồi */
.mtchat__cnt--dang { background: var(--warn);   }  /* cam — đang phản hồi     */
.mtchat__cnt--xong { background: var(--ok);     }  /* xanh — hoàn thành       */

/* ══ Ô GÕ LÀ TEXTAREA (Enter xuống dòng) + CHIP TỆP ĐÍNH KÈM ═══════════ */

.mtchat__form .mtchat__say {
  flex: 1;
  min-width: 0;
  max-height: 110px;            /* tu cao theo noi dung, tran 5 dong */
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;              /* chong iOS tu phong to */
  line-height: 1.45;
  resize: none;
  overflow-y: auto;
}

.mtchat__tep {
  display: inline-block;
  max-width: 100%;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Nhóm hàng đợi mini thu gọn được: đầu mục là NÚT, thân gập/bung. */
button.mtchat__qh {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  text-align: left;
  cursor: pointer;
  font-weight: 700;
}
button.mtchat__qh:hover { border-color: var(--accent-solid); }

.mtchat__qbody { display: grid; gap: 6px; }

/* Tên admin xử lý trên dòng hàng đợi + hàng nút xử lý trong cuộc. */
.mtchat__qadmin { color: var(--accent) !important; font-weight: 600; }
.mtchat__qacts { display: flex; gap: 6px; margin: 6px 0; }

/* Nút xóa hẳn (SuperAdmin) — đỏ để không lẫn với thao tác thường. */
.mtchat__chip--xoa { border-color: var(--danger); color: var(--danger); }
.mtchat__chip--xoa:hover { border-color: var(--danger); color: #fff; background: var(--danger); }