/* Bong bóng trò chuyện trực tiếp ở khu khách.
   Widget này còn xuất hiện trên trang đăng nhập và trang chủ, nơi bảng màu có
   thể khác hẳn - nên nó tự mang toàn bộ màu của mình qua biến riêng, không mượn
   biến Bootstrap của trang chủ. */

.lc-root {
  --lc-brand: #2563eb;
  --lc-brand-2: #4f46e5;
  --lc-surface: #ffffff;
  --lc-surface-2: #f5f7fb;
  --lc-line: #e6eaf2;
  --lc-text: #16202e;
  --lc-muted: #7b8698;
  --lc-bubble-in: #ffffff;
  --lc-bubble-out: linear-gradient(135deg, #2563eb, #4f46e5);

  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1090;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Nút bong bóng ---------- */
.lc-bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--lc-bubble-out);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 .65rem 1.5rem rgba(37, 99, 235, .38), 0 .15rem .4rem rgba(16, 24, 40, .12);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
}

.lc-bubble:hover { transform: scale(1.06); box-shadow: 0 .8rem 1.8rem rgba(37, 99, 235, .45); }
.lc-bubble:active { transform: scale(.97); }
.lc-bubble svg { width: 1.55rem; height: 1.55rem; fill: currentColor; transition: opacity .15s ease, transform .2s ease; }

/* Mở khung thì đổi icon sang dấu đóng, không cần hai nút. */
.lc-bubble .lc-ico-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.6); }
.lc-root.is-open .lc-bubble .lc-ico-chat { opacity: 0; transform: rotate(90deg) scale(.6); }
.lc-root.is-open .lc-bubble .lc-ico-close { opacity: 1; transform: none; }

/* Vòng sóng nhẹ khi có tin chưa đọc - đủ để mắt bắt được, không nhấp nháy. */
.lc-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--lc-brand);
  opacity: 0;
}

.lc-root.has-unread .lc-bubble::after { animation: lc-ping 1.8s ease-out infinite; }

@keyframes lc-ping {
  0% { opacity: .55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-root.has-unread .lc-bubble::after { animation: none; }
  .lc-panel { transition: none !important; }
}

.lc-badge {
  position: absolute;
  top: -.2rem;
  right: -.2rem;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 .35rem;
  border: 2px solid var(--lc-surface);
  border-radius: 1rem;
  background: #ef4444;
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

.lc-badge[hidden] { display: none; }

/* ---------- Khung chat ---------- */
.lc-panel {
  position: absolute;
  right: 0;
  bottom: 4.5rem;
  width: min(23rem, calc(100vw - 2rem));
  height: min(32rem, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.1rem;
  background: var(--lc-surface);
  color: var(--lc-text);
  box-shadow: 0 1.5rem 3rem rgba(16, 24, 40, .22), 0 0 0 1px rgba(16, 24, 40, .05);

  opacity: 0;
  visibility: hidden;
  transform: translateY(.75rem) scale(.97);
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .22s cubic-bezier(.34, 1.3, .64, 1), visibility .18s;
}

.lc-root.is-open .lc-panel { opacity: 1; visibility: visible; transform: none; }

/* ---------- Đầu khung ---------- */
.lc-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .95rem 1rem;
  background: var(--lc-bubble-out);
  color: #fff;
}

/* Vệt sáng chéo cho đỡ phẳng. */
.lc-head::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 85% -20%, rgba(255, 255, 255, .28), transparent 60%);
  pointer-events: none;
}

.lc-head-av {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-weight: 700;
  font-size: .95rem;
}

.lc-head-av svg { width: 1.25rem; height: 1.25rem; fill: #fff; }

/* min-width: 0 để hai dòng chữ bên trong cắt được bằng ellipsis - thiếu nó thì
   flex item không co lại và dòng phụ tràn xuống làm cả đầu khung cao vống lên. */
.lc-head-txt { min-width: 0; flex: 1 1 auto; line-height: 1.3; }

.lc-head-title {
  font-weight: 650;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lc-head-sub {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lc-head-sub .lc-dot { flex: 0 0 auto; }

.lc-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 .18rem rgba(52, 211, 153, .28);
}

.lc-close {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: .55rem;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}

.lc-close:hover { background: rgba(255, 255, 255, .26); }

/* ---------- Thân ---------- */
.lc-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .9rem .85rem .3rem;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(37, 99, 235, .06), transparent 70%),
    var(--lc-surface-2);
  scrollbar-width: thin;
}

.lc-body::-webkit-scrollbar { width: .4rem; }
.lc-body::-webkit-scrollbar-thumb { background: #cfd6e4; border-radius: 1rem; }

/* Dấu phân cách ngày. */
.lc-day {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .4rem .2rem .7rem;
  color: var(--lc-muted);
  font-size: .7rem;
}

.lc-day::before,
.lc-day::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--lc-line); }

/* Một lượt nói: avatar + một hay nhiều bong bóng liền nhau. */
.lc-turn {
  display: flex;
  gap: .5rem;
  margin-bottom: .6rem;
  animation: lc-in .22s ease both;
}

@keyframes lc-in {
  from { opacity: 0; transform: translateY(.4rem); }
  to { opacity: 1; transform: none; }
}

.lc-turn.is-client { flex-direction: row-reverse; }

.lc-av {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  align-self: flex-end;
  border-radius: 50%;
  background: linear-gradient(135deg, #64748b, #475569);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

.lc-turn.is-client .lc-av { background: linear-gradient(135deg, #2563eb, #4f46e5); }

.lc-stack { min-width: 0; max-width: 78%; display: flex; flex-direction: column; gap: .18rem; }
.lc-turn.is-client .lc-stack { align-items: flex-end; }

.lc-name {
  margin: 0 .15rem .1rem;
  font-size: .7rem;
  font-weight: 600;
  color: var(--lc-muted);
}

.lc-msg-text {
  padding: .5rem .75rem;
  border-radius: 1rem;
  font-size: .875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lc-turn.is-admin .lc-msg-text {
  background: var(--lc-bubble-in);
  color: var(--lc-text);
  border-bottom-left-radius: .3rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.lc-turn.is-client .lc-msg-text {
  background: var(--lc-bubble-out);
  color: #fff;
  border-bottom-right-radius: .3rem;
}

/* Bong bóng giữa một lượt nói thì bo đều, chỉ cái cuối mới có "đuôi". */
.lc-turn.is-admin .lc-msg-text:not(:last-child) { border-bottom-left-radius: 1rem; }
.lc-turn.is-client .lc-msg-text:not(:last-child) { border-bottom-right-radius: 1rem; }

.lc-time { margin: .1rem .3rem 0; font-size: .67rem; color: var(--lc-muted); }

/* Lời chào và các thông báo hệ thống. */
.lc-sys {
  margin: .2rem auto .8rem;
  max-width: 90%;
  padding: .5rem .8rem;
  border-radius: .8rem;
  background: rgba(37, 99, 235, .07);
  color: #35507e;
  font-size: .8rem;
  line-height: 1.45;
  text-align: center;
}

/* ---------- Chân khung ---------- */
.lc-foot {
  padding: .6rem .7rem .7rem;
  border-top: 1px solid var(--lc-line);
  background: var(--lc-surface);
}

.lc-identity { display: none; gap: .4rem; margin-bottom: .5rem; }
.lc-root.needs-identity .lc-identity { display: flex; }

.lc-identity input {
  flex: 1 1 0;
  min-width: 0;
  padding: .45rem .6rem;
  border: 1px solid var(--lc-line);
  border-radius: .6rem;
  background: var(--lc-surface-2);
  color: var(--lc-text);
  font-size: .8rem;
}

.lc-identity input:focus { outline: none; border-color: var(--lc-brand); background: var(--lc-surface); }

.lc-form {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  padding: .3rem .3rem .3rem .75rem;
  border: 1px solid var(--lc-line);
  border-radius: 1.35rem;
  background: var(--lc-surface-2);
  transition: border-color .15s ease, background .15s ease;
}

.lc-form:focus-within { border-color: var(--lc-brand); background: var(--lc-surface); }

.lc-input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 6.5rem;
  padding: .45rem 0;
  border: 0;
  background: transparent;
  color: var(--lc-text);
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.45;
  resize: none;
}

.lc-input:focus { outline: none; }
.lc-input::placeholder { color: var(--lc-muted); }

.lc-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 50%;
  background: var(--lc-bubble-out);
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}

.lc-send:hover:not(:disabled) { transform: scale(1.06); }
.lc-send:disabled { opacity: .45; cursor: default; }
.lc-send svg { width: 1rem; height: 1rem; fill: currentColor; }

.lc-note { padding: .3rem .6rem 0; font-size: .7rem; color: var(--lc-muted); min-height: 1rem; }
.lc-note.is-error { color: #dc2626; }

/* ---------- Nền tối ----------

   Khung chat là một tấm thẻ NỔI lên trên trang. Ở nền sáng nó tự nổi vì trắng
   hơn nền (thẻ #fff trên trang #eff1f3). Bảng màu tối đầu tiên lại đi theo chiều
   ngược: thẻ #151b26 và khung tin #0f141d đều TỐI HƠN nền trang (#181c1f ở giao
   diện mặc định), nên tấm thẻ chìm xuống dưới trang thay vì nổi lên - mà bóng đổ
   lẫn vòng viền của nó đều là màu tối (rgba(16,24,40,...)), tức là vô hình trên
   nền tối. Kết quả: một mảng đen không rõ mép, dính vào trang.

   Nay hai bề mặt được kéo lên trên tông nền tối thường gặp, và độ nổi không còn
   phụ thuộc vào việc trang nền sáng hay tối tới đâu: vòng viền chuyển sang màu
   SÁNG mờ, bóng đổ chuyển sang đen đặc. Widget này còn chạy trên các theme tối
   khác (midnight, nord, terminal) với tông nền khác hẳn nhau, nên nổi bằng
   viền + bóng là cách duy nhất đúng cho mọi trường hợp. */
[data-bs-theme="dark"] .lc-root,
.lc-root[data-theme="dark"] {
  --lc-surface: #1c2331;
  --lc-surface-2: #141a24;
  --lc-line: #2c3648;
  --lc-text: #e8edf6;
  --lc-muted: #94a1b8;
  --lc-bubble-in: #28313f;
}

[data-bs-theme="dark"] .lc-panel {
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .09);
}

[data-bs-theme="dark"] .lc-body {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(79, 70, 229, .12), transparent 70%),
    var(--lc-surface-2);
}

[data-bs-theme="dark"] .lc-body::-webkit-scrollbar-thumb { background: #37425a; }
[data-bs-theme="dark"] .lc-turn.is-admin .lc-msg-text { box-shadow: none; }

/* Lời chào ở nền sáng là một vệt xanh rất nhạt (alpha .07). Bản tối cũ để .16
   trên nền tối hơn hẳn nên nó thành một thanh chàm đặc, nhìn như cái nút. */
[data-bs-theme="dark"] .lc-sys { background: rgba(99, 102, 241, .10); color: #c3cee6; }
[data-bs-theme="dark"] .lc-badge { border-color: var(--lc-surface); }

@media (max-width: 480px) {
  .lc-root { right: .85rem; bottom: .85rem; }
  .lc-panel { width: calc(100vw - 1.7rem); height: min(30rem, calc(100vh - 6.5rem)); }
}

/* Không bao giờ in ra giấy.

   Bong bóng chat do includes/client_layout.php dựng, nằm NGOÀI header/nav/aside/
   footer - mà khối @media print của trang hoá đơn chỉ ẩn mấy thẻ đó, nên khi
   khách bấm In thì cái bong bóng in luôn vào tờ hoá đơn.

   Ẩn ngay tại đây chứ không vá riêng trang hoá đơn: một nút trò chuyện không có
   nghĩa gì trên giấy, ở BẤT KỲ trang nào. */
@media print {
  .lc-root { display: none !important; }
}