/* =========================================================
   Widget chat "Luca" (giao diện, đính kèm ảnh) — MONICE Garden
   =========================================================
   File CSS RIÊNG cho chatbot, tách khỏi style.css chính để dễ bảo trì/rollback
   độc lập (chỉ cần gỡ 1 dòng <link> ở includes/header.php là tắt hẳn giao diện
   chat mà không đụng gì tới phần còn lại của web).

   TOÀN BỘ màu sắc/font chữ/khoảng cách/độ bo góc/thời gian chuyển động dưới đây
   đều dùng lại biến CSS (--ink, --jade, --koi-orange, --paper, --font-*,
   --space-*, --radius*, --dur-*, --ease-*...) đã khai báo sẵn ở :root trong
   assets/css/style.css — để giao diện chat LUÔN đồng bộ tông màu/phông chữ với
   toàn site, kể cả sau này site đổi màu thương hiệu (chỉ cần sửa 1 chỗ ở
   style.css, file này tự động ăn theo, không cần sửa lại ở đây).

   File này được nạp SAU style.css (xem <link> thêm ở includes/header.php) nên
   mọi biến --xxx dùng bên dưới đều đã có giá trị.
   ========================================================= */

/* Biến riêng cho z-index của khung chat — đặt CAO HƠN mọi lớp phủ mobile hiện
   có (nav-overlay 55 / mobile-bottom-nav 56 / category-sheet 57, xem
   style.css) để khung chat luôn nổi lên trên cùng khi mở trên điện thoại,
   nhưng THẤP HƠN toast (100)/confirm-modal (200) — nếu 1 thao tác khác trên
   trang cần hiện toast/hộp xác nhận trong lúc khung chat đang mở, chúng vẫn
   phải hiện đè lên trên, không bị khung chat che mất. */
:root {
  --z-luca-panel: calc(var(--z-sticky-header) + 9);
}

/* ---------- Nút bong bóng tròn (nằm CHUNG cột với nút Lên đầu trang/
   Facebook/Zalo trong .floating-social, xem includes/footer.php) ----------
   Cố ý KHÔNG viết lại position/right/bottom/kích thước — .luca-fab thừa
   hưởng nguyên các rule đó từ .float-btn/.floating-social (style.css), gồm cả
   cơ chế tự "hạ thấp" khi thanh tab bar mobile ẩn đi lúc cuộn (.fs-lowered).
   Ở đây chỉ ghi đè phần MÀU SẮC/hiệu ứng riêng cho nút Luca. */
.luca-fab {
  background: var(--accent-grad);
  position: relative;
}
.luca-fab:hover,
.luca-fab:active {
  transform: scale(1.08); /* giữ đúng hiệu ứng hover chung của .float-btn */
}
/* Chấm nhỏ "đang hoạt động" góc trên-phải nút — thuần trang trí, tạo cảm giác
   Luca luôn sẵn sàng trả lời (giống chấm online của các app chat quen thuộc). */
.luca-fab::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3ecf6a;
  border: 2px solid var(--paper);
}
@media (max-width: 640px) {
  .luca-fab::after { width: 10px; height: 10px; }
}

/* Icon cá (ảnh <img class="luca-fab-fish"> trong footer.php) — ẢNH GỐC đã tự
   vẽ sẵn 1 khối tròn xanh làm nền + vây tràn nhẹ ra ngoài khối tròn đó, nên
   bản thân file ảnh đã LÀ một cái "huy hiệu" tròn hoàn chỉnh rồi, không cần
   nút bọc thêm 1 lớp tròn nữa.
   Quy tắc chung `.float-btn { background:#fff; box-shadow:...; overflow:hidden }`
   + `.float-btn img { width:100%; height:100%; object-fit:cover }` (style.css,
   áp dụng chung cho Lên đầu trang/Facebook/Zalo) lại đang:
    1) Ép ảnh phủ kín rồi CẮT theo khung tròn 54px → xén mất phần vây tràn ra
       ngoài khối tròn xanh trong ảnh, trông như ảnh bị vỡ/mất nét ở rìa.
    2) Vẽ thêm nền tròn trắng + đổ bóng viền quanh nút → tạo hiệu ứng "khung
       viền" giống hệt nút Lên đầu trang, dư thừa vì ảnh đã tự có khối tròn
       xanh riêng.
   Ghi đè lại RIÊNG cho nút Luca: bỏ nền/đổ bóng/cắt viền của nút, đồng thời
   cho ảnh hiển thị TRỌN VẸN (object-fit: contain) và phóng to hơn khung nút
   một chút để phần vây tràn ra ngoài đúng như ý đồ thiết kế gốc. */
.luca-fab {
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.luca-fab .luca-fab-fish {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* .float-btn img (style.css) vừa được thêm border-radius:50% + display:block
     để fix viền răng cưa của FB/Zalo — nhưng ảnh cá KHÔNG phải hình vuông lấp
     đầy khung (đã contain + tràn viền cố ý), nên phải trả lại border-radius:0
     ở đây, nếu không góc bo tròn sẽ cắt mất phần vây tràn ra ngoài. */
  border-radius: 0;
}
@media (max-width: 640px) {
  .luca-fab .luca-fab-fish { width: 46px; }
}

/* Khi khung chat đang MỞ: nút Luca ở NGUYÊN chỗ (không biến mất) và đổi icon cá -> mũi tên ▾ — bấm lại chính nút đó là
   thu nhỏ khung chat (đóng bằng nút ✕ ở header, bấm ra ngoài, Esc, hoặc vuốt xuống trên điện thoại vẫn dùng được).
   Chỉ 3 nút phụ (Lên đầu trang/Facebook/Zalo) mờ đi — chúng nằm TRÊN nút Luca trong cùng cột nên sẽ bị khung chat đè
   lên; Luca là nút dưới cùng nên không dịch chỗ. Khung chat đã được đặt cao hơn nút (xem .luca-panel bottom). main.js
   (script gốc của site) hoàn toàn không hay biết class này — do class GẮN TRÊN <body> bởi assets/js/chatbot-widget.js,
   không đụng gì tới cơ chế .fs-lowered mà main.js đang tự quản lý. */
body.luca-chat-open .floating-social {
  /* Nổi trên lớp mờ (.luca-backdrop) để nút vẫn nhìn rõ và bấm được. */
  z-index: calc(var(--z-sticky-header) + 10);
  /* VÁ LỖI "bấm Gửi là chat tự đóng": khối .floating-social cao bằng cả cột 4 nút (3 nút phụ chỉ bị ẩn
     bằng visibility chứ vẫn chiếm chỗ) và z-index (+10) CAO HƠN khung chat (+9), nên phần hộp của nó che đúng
     lên nút Gửi/ô nhập sát mép phải. Cú bấm trúng cái hộp vô hình này = "bấm ra ngoài khung chat" => listener
     pointerdown trong chatbot-widget.js đóng chat, và click không tới được nút Gửi. Cho cả khối trong suốt với
     chuột/cảm ứng; riêng nút Luca bật lại bên dưới để vẫn bấm đóng được. */
  pointer-events: none;
}
body.luca-chat-open .floating-social .luca-fab {
  pointer-events: auto;
}
body.luca-chat-open .floating-social .float-btn:not(.luca-fab) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
/* Đổi icon: cá xoay nhỏ lại rồi mờ, mũi tên (nằm trên nền tròn gradient như các nút khác) xoay vào. */
.luca-fab .luca-fab-fish {
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.luca-fab::after { transition: opacity var(--dur-base) var(--ease-standard); }
.luca-fab-chevron {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 12px 26px -8px rgba(18, 34, 44, .4);
  opacity: 0;
  transform: rotate(-90deg) scale(.6);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
body.luca-chat-open .luca-fab-chevron { opacity: 1; transform: none; }
body.luca-chat-open .luca-fab .luca-fab-fish {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(.6);
}
body.luca-chat-open .luca-fab::after { opacity: 0; } /* chấm "online" chỉ có ý nghĩa khi đang đóng */
@media (max-width: 640px) {
  .luca-fab-chevron svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .luca-fab .luca-fab-fish, .luca-fab-chevron, .luca-fab::after { transition: none; }
  body.luca-chat-open .luca-fab .luca-fab-fish { transform: translate(-50%, -50%); }
  .luca-fab-chevron { transform: none; }
}

/* Lớp mờ phía sau khung chat — chỉ dùng trên điện thoại (xem @media 640px cuối file); nằm DƯỚI khung chat
   (+9) và dưới cụm nút nổi lúc chat mở (+10). Trên desktop không hiển thị (display:none) để không chặn thao tác. */
.luca-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky-header) + 8);
  background: rgba(18, 34, 44, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-enter),
              visibility 0s linear var(--dur-slow); /* vẫn bắt chạm thêm ~300ms sau khi chat đóng -> không "xuyên" xuống trang */
}
body.luca-chat-open .luca-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-enter), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .luca-backdrop { transition: none; }
}

/* =========================== KHUNG CHAT =========================== */
.luca-panel {
  position: fixed;
  right: 22px;
  bottom: 96px;
  width: 380px;
  max-width: calc(100vw - 44px);
  height: min(640px, 72vh);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: var(--z-luca-panel);
  font-family: var(--font-body);
  /* Mặc định ẩn — JS thêm class .luca-open để hiện (xem chatbot-widget.js).
     transform-origin đặt ở góc dưới-phải để hiệu ứng "phồng ra từ bong bóng"
     giống các bottom-sheet khác của site (category-sheet/cart-sheet), không
     phải phồng ra từ giữa màn hình. */
  transform-origin: bottom right;
  transform: scale(.9) translateY(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease-enter),
              opacity var(--dur-slow) var(--ease-enter),
              visibility 0s linear var(--dur-slow);
}
.luca-panel.luca-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease-enter),
              opacity var(--dur-slow) var(--ease-enter),
              visibility 0s linear 0s;
}
/* Người dùng bật "giảm chuyển động" ở hệ điều hành — tắt hẳn animation phồng/
   scale, chỉ còn ẩn/hiện tức thì (cùng tinh thần khối @media reduced-motion
   chung của style.css, nhưng khai riêng ở đây vì file CSS tách biệt). */
@media (prefers-reduced-motion: reduce) {
  .luca-panel { transition: opacity var(--dur-fast) linear, visibility 0s linear; }
  .luca-panel.luca-open,
  .luca-panel { transform: none; }
}

.luca-panel-header {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--space-4);
  background: var(--accent-grad);
  color: #fff;
}
.luca-panel-grab {
  display: none; /* chỉ hiện trên điện thoại, xem @media 640px cuối file */
  position: absolute;
  top: 5px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
  pointer-events: none;
}
.luca-panel-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.luca-panel-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.luca-panel-title strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}
.luca-panel-title span {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.78);
}
.luca-header-btn {
  flex: none;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.luca-header-btn:hover,
.luca-header-btn:active { background: rgba(255,255,255,.18); }

/* ---------- Vùng tin nhắn (cuộn dọc) ---------- */
.luca-messages {
  position: relative; /* neo cho .luca-typing.is-leaving (position:absolute) */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* cuộn hết khung chat không kéo luôn cả trang phía sau */
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--paper);
}

/* "Trò chuyện mới": danh sách mờ ra trước khi bị xoá (JS gỡ class ngay sau khi xoá nên trở lại opacity 1
   tức thì, không có transition ngược — lời chào mới tự có hiệu ứng vào riêng). */
.luca-messages.luca-clearing {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-exit);
}

.luca-msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: var(--fs-base);
  line-height: 1.48;
  white-space: pre-wrap; /* giữ nguyên xuống dòng thật trong câu trả lời của Luca, không cần chèn <br> bằng tay */
  word-break: break-word;
  /* Tin nhắn mới (bot/khách/hệ thống/thẻ form) trồi lên nhẹ. Dùng `animation` chứ không phải `transition`
     vì phần tử mới tạo đã ở trạng thái cuối. Chạy đúng 1 lần lúc được thêm vào DOM; mở/đóng khung chat
     chỉ đổi visibility nên KHÔNG chạy lại. Chỉ dịch 6px để scrollMessagesToBottom() không lệch đáng kể. */
  animation: lucaMsgIn var(--dur-base) var(--ease-enter) 1;
}
@keyframes lucaMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.luca-msg-bot {
  align-self: flex-start;
  background: var(--paper-deep);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.luca-msg-user {
  align-self: flex-end;
  background: var(--koi-orange);
  color: #fff;
  border-bottom-right-radius: 4px;
}
/* Ảnh khách đính kèm, hiển thị ngay trong bong bóng tin nhắn của
   chính khách (giống cách các app chat quen thuộc hiện ảnh đã gửi). */
.luca-msg img {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 6px;
}
.luca-msg img:last-child { margin-bottom: 0; }
/* Tin nhắn hệ thống (lỗi kết nối, hết quota, hết lượt tra cứu...) — tách hẳn
   giao diện khỏi tin nhắn thường để khách phân biệt ngay đây KHÔNG phải câu
   Luca trả lời, mà là thông báo của hệ thống. Dùng lại đúng tông đỏ cảnh báo
   --koi-red của site (đã dùng cho .field-invalid, nút huỷ đơn...). */
.luca-msg-system {
  align-self: center;
  max-width: 92%;
  background: #fdecea;
  color: var(--koi-red);
  font-size: var(--fs-sm);
  text-align: center;
  border-radius: var(--radius-sm);
}

/* ---------- Thẻ form "Yêu cầu hỗ trợ" ----------
   Hiện ngay trong dòng tin nhắn (con của .luca-messages), ngay sau bong bóng
   trả lời của Luca khi model gọi hàm request_human_handoff — xem
   showHandoffForm() trong assets/js/chatbot-widget.js. Kế thừa layout căn lề
   trái + max-width từ .luca-msg (đã gán chung class "luca-msg luca-handoff-
   card" ở JS), chỉ ghi đè phần nền/khoảng cách riêng cho nội dung dạng form
   thay vì chỉ 1 đoạn văn thường. */
.luca-handoff-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  white-space: normal; /* ghi đè pre-wrap của .luca-msg — nội dung ở đây là form, không phải câu chat thô */
}
.luca-handoff-title {
  margin: 0 0 2px;
  font-size: var(--fs-sm);
  color: var(--ink);
}
.luca-handoff-label {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 4px;
}
.luca-handoff-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-sm);
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  resize: vertical;
}
.luca-handoff-input:focus {
  outline: none;
  border-color: var(--jade);
}
.luca-handoff-input:disabled { opacity: .6; }
.luca-handoff-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: 4px;
}
.luca-handoff-btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.luca-handoff-btn:disabled { opacity: .6; cursor: default; }
.luca-handoff-cancel {
  background: transparent;
  color: var(--text-muted);
}
.luca-handoff-cancel:hover,
.luca-handoff-cancel:active:not(:disabled) { color: var(--ink); }
.luca-handoff-submit {
  background: var(--koi-orange);
  color: #fff;
}
.luca-handoff-submit:hover { opacity: .92; }
.luca-handoff-submit:active:not(:disabled) { opacity: .8; }
.luca-handoff-error {
  margin: 2px 0 0;
  font-size: var(--fs-xs);
  color: var(--koi-red);
}
.luca-handoff-done {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
  animation: lucaMsgFade var(--dur-base) var(--ease-enter) 1; /* dòng xác nhận mờ vào sau khi form mờ ra */
}
@keyframes lucaMsgFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Form -> dòng xác nhận (finish() trong chatbot-widget.js): nội dung form mờ ra, chiều cao thẻ trượt
   sang chiều cao mới (JS đặt height inline + overflow:hidden), rồi dòng xác nhận mờ vào. */
/* flex: none là BẮT BUỘC: .luca-messages là flex cột có cuộn; phần tử overflow:hidden có min-height:auto = 0
   nên flex-shrink sẽ ép thẻ xẹp xuống (đo được 370px -> 22px) thay vì giữ chiều cao JS đã chốt. */
.luca-handoff-card.is-finishing { flex: none; overflow: hidden; transition: height var(--dur-base) var(--ease-standard); }
.luca-handoff-card.is-finishing > * { opacity: 0; transition: opacity var(--dur-fast) var(--ease-exit); }
.luca-handoff-card.is-finishing > .luca-handoff-done { opacity: 1; transition: none; }

/* ---------- Hiệu ứng "Luca đang gõ..." ---------- */
.luca-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  background: var(--paper-deep);
  animation: lucaMsgIn var(--dur-base) var(--ease-enter) 1; /* cùng nhịp với bong bóng tin nhắn */
}
/* Rời đi: ra khỏi luồng (JS đặt top/left đúng vị trí cũ) để tin trả lời chiếm chỗ ngay, ba chấm mờ ra tại chỗ. */
.luca-typing.is-leaving {
  position: absolute;
  margin: 0;
  animation: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-exit);
}
.luca-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: lucaTypingBounce 1.1s ease-in-out infinite;
}
.luca-typing span:nth-child(2) { animation-delay: .15s; }
.luca-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lucaTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .luca-typing span { animation: none; opacity: .8; }
  /* Hiệu ứng vào của tin nhắn/dấu gõ chỉ là trang trí (nội dung vẫn hiện đủ) -> tắt hẳn. */
  .luca-msg, .luca-typing, .luca-handoff-done { animation: none; }
  .luca-handoff-card.is-finishing > *, .luca-messages.luca-clearing, .luca-image-preview, .luca-typing.is-leaving { transition: none; }
}

/* Tiện ích ẩn phần tử khỏi màn hình nhưng vẫn tồn tại trong DOM (dùng cho
   input file thật #lucaImageInput — bấm qua nút #lucaAttachBtn trang trí
   thay vì hiện input file mặc định xấu xí của trình duyệt). Không dùng
   display:none vì 1 số trình duyệt/trợ năng xử lý khác nhau với input file
   bị display:none khi .click() được gọi bằng JS — position/kích thước 1px
   là cách an toàn, tương thích rộng rãi hơn. */
.luca-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Thanh nhập tin nhắn ---------- */
.luca-inputbar {
  flex: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: var(--paper);
  /* Chừa khoảng an toàn cho thanh cử chỉ iPhone khi khung chat ở chế độ toàn
     màn hình trên điện thoại (xem @media 640px bên dưới). Ở desktop giá trị
     env() này bằng 0 nên không ảnh hưởng gì. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.luca-inputbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
}

/* Dải xem trước ảnh vừa chọn, hiện phía trên thanh nhập chữ.
   QUAN TRỌNG: rule [hidden] riêng bên dưới BẮT BUỘC phải có — thuộc tính
   HTML "hidden" mặc định chỉ ẩn được phần tử nếu không có CSS nào khác của
   TRANG (author stylesheet) đặt lại display; ở đây .luca-image-preview
   (ngay dưới) đã tự đặt display:flex nên sẽ ĐÈ MẤT hiệu lực ẩn của thuộc
   tính "hidden" nếu thiếu rule [hidden] này (cùng mức độ ưu tiên CSS, chỉ
   khác độ cụ thể của selector) — JS (chatbot-widget.js) chỉ toggle thuộc
   tính "hidden" qua previewBox.hidden = true/false, không tự thêm class gì
   khác, nên phải chắc chắn CSS xử lý đúng ngay ở đây. */
.luca-image-preview[hidden] { display: none; }
/* Đóng = max-height/padding/opacity về 0; JS (chatbot-widget.js showImagePreview/hideImagePreview) thêm
   .is-open để mở. Chỉ đặt `hidden = true` SAU khi thu xong (hẹn giờ huỷ được), nên rule [hidden] ở trên
   vẫn đúng vai trò "ẩn hẳn khi không dùng" mà không cắt cụt animation.
   max-height = ảnh 40px + padding-top (border-box) — khớp đúng chiều cao thật của dải xem trước. */
.luca-image-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-standard),
              padding-top var(--dur-base) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.luca-image-preview.is-open {
  max-height: calc(40px + var(--space-2));
  padding-top: var(--space-2);
  opacity: 1;
}
.luca-image-preview img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: none;
}
.luca-image-preview-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.luca-image-preview .luca-header-btn {
  color: var(--text-muted);
  width: 26px;
  height: 26px;
}
.luca-image-preview .luca-header-btn:hover { background: var(--paper-deep); }

.luca-attach-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.luca-attach-btn:hover,
.luca-attach-btn:active:not(:disabled) { background: var(--paper-deep); color: var(--jade); }
.luca-attach-btn:disabled { opacity: .55; cursor: default; background: transparent; color: var(--text-muted); }
.luca-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: var(--fs-base);
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.luca-input:focus {
  outline: none;
  border-color: var(--jade);
}
.luca-input:disabled { opacity: .6; }
.luca-send-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--koi-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.luca-send-btn:hover { transform: scale(1.06); }
.luca-send-btn:active:not(:disabled) { transform: scale(.96); }
.luca-send-btn:disabled { opacity: .55; cursor: default; transform: none; }

/* Bàn phím ảo đang hiện trên điện thoại: JS (syncKeyboardLayout) gán top/height theo visualViewport, class này chỉ
   gọn phần đầu lại cho nhiều chỗ hơn cho tin nhắn — bỏ thanh kéo, header thấp hơn. */
.luca-panel.luca-kb .luca-panel-grab { display: none; }
.luca-panel.luca-kb .luca-panel-header { padding-top: 10px; padding-bottom: 10px; }

/* =========================== HỘP XÁC NHẬN TRONG KHUNG CHAT ===========================
   Dựng bằng JS (buildConfirm() trong chatbot-widget.js), phủ lên đúng khung chat — .luca-panel là position:fixed
   + overflow:hidden nên lớp absolute này tự bị cắt theo góc bo. Dùng cho "Bắt đầu cuộc trò chuyện mới" thay hộp
   confirm() gốc của trình duyệt. Ẩn bằng visibility (có trễ bằng thời gian mờ) để lúc đóng không còn nhận
   focus/chạm. z-index 10 chỉ cần cao hơn header/ô nhập trong khung (cùng ngữ cảnh xếp chồng của .luca-panel). */
.luca-confirm {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(18, 34, 44, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-exit),
              visibility 0s linear var(--dur-base);
}
.luca-confirm.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-enter), visibility 0s linear 0s;
}
.luca-confirm-card {
  width: 100%;
  max-width: 300px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(18, 34, 44, .28);
  padding: var(--space-4);
  transform: scale(.96) translateY(6px);
  transition: transform var(--dur-base) var(--ease-exit);
}
.luca-confirm.is-open .luca-confirm-card {
  transform: none;
  transition: transform var(--dur-base) var(--ease-enter);
}
.luca-confirm-title {
  margin: 0 0 4px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
}
.luca-confirm-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
}
.luca-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.luca-confirm-btn {
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.luca-confirm-cancel {
  background: transparent;
  color: var(--text-muted);
}
.luca-confirm-cancel:hover,
.luca-confirm-cancel:active { color: var(--ink); background: rgba(18, 34, 44, .06); }
.luca-confirm-ok {
  background: var(--koi-orange);
  color: #fff;
}
.luca-confirm-ok:hover { opacity: .92; }
.luca-confirm-ok:active { opacity: .8; }
.luca-confirm-btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .luca-confirm,
  .luca-confirm.is-open,
  .luca-confirm-card,
  .luca-confirm.is-open .luca-confirm-card { transition: none; }
  .luca-confirm-card { transform: none; }
}

/* =========================== VỊ TRÍ KHUNG CHAT TRÊN MÀN HẸP ===========================
   Nút Luca vẫn hiện khi chat mở nên khung chat PHẢI nằm cao hơn nút (chừa khoảng hở), tính cả thanh tab bar mobile
   (--mobile-bottom-nav-h, ≤900px) mà .floating-social đang cộng thêm vào "bottom". Khi tab bar tự ẩn lúc cuộn,
   main.js gắn .fs-lowered lên .floating-social — khung chat là phần tử anh em đứng sau nó (xem footer.php) nên
   dùng được bộ chọn "~" để hạ theo. */
@media (max-width: 900px) {
  .luca-panel {
    bottom: calc(var(--mobile-bottom-nav-h) + 96px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--mobile-bottom-nav-h) - 120px);
  }
  .floating-social.fs-lowered ~ .luca-panel {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 120px);
  }
}

/* =========================== RESPONSIVE ĐIỆN THOẠI ===========================
   Đa số khách Việt Nam chat bằng điện thoại — dưới 640px, khung chat gần như toàn màn hình (kiểu Messenger/Zalo)
   nhưng CHỪA hàng dưới cho nút Luca (nút 46px + hở 12px) để bấm lại nút là thu nhỏ; có lớp mờ phía sau (chạm là đóng)
   và thanh kéo ở header (vuốt xuống là đóng). */
@media (max-width: 640px) {
  .luca-panel {
    left: 8px;
    right: 8px;
    top: calc(8px + env(safe-area-inset-top, 0px));
    bottom: calc(var(--mobile-bottom-nav-h) + 72px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    /* HIỆU ỨNG MỞ/ĐÓNG = "MATERIAL MORPH" GIỐNG HỆT bottom sheet Danh mục/Giỏ hàng ở navbar dưới (.category-sheet,
       xem style.css): scale ĐỀU (scaleX = scaleY) xuất phát từ 1 ĐIỂM duy nhất là TÂM NÚT LUCA, rồi phồng ra thành
       khung chat; đóng thì thu ngược về đúng điểm đó. Dùng CÙNG token thời lượng/easing với sheet để 2 nơi cho cảm
       giác y hệt nhau: mở .4s --ease-sheet-in (mờ .3s), đóng .4s --ease-sheet-drag-release (mờ .3s).
       Trước đây khung chỉ trượt 28px + scale .9 (gần như không đổi kích thước trên 1 khung gần full màn hình) và
       thiếu isolation/will-change nên điện thoại phải dựng layer + vẽ lại góc bo ở khung hình đầu -> giật.
       --luca-ox/--luca-oy do chatbot-widget.js gán (toạ độ px của tâm nút tính từ góc trên-trái khung chat) ngay
       trước khi mở; 100%/100% (góc dưới-phải, đúng chỗ nút) chỉ là giá trị dự phòng khi JS chưa kịp chạy.
       scale(.045) thay vì scale(0): scale(0) làm vài bản Safari cũ bỏ hẳn phép biến đổi, giật ở khung hình đầu. */
    transform: scale(.045);
    transform-origin: var(--luca-ox, 100%) var(--luca-oy, 100%);
    /* isolation + will-change: vá lỗi Safari/WebKit không cập nhật clip bo góc (border-radius + overflow:hidden) theo
       từng khung hình transform + dựng sẵn layer GPU để khung hình đầu tiên không bị khựng (cùng lý do, cùng cách
       với .category-sheet trong style.css). */
    isolation: isolate;
    will-change: transform, opacity;
    transition: transform .4s var(--ease-sheet-drag-release),
                opacity .3s var(--ease-sheet-drag-release),
                visibility 0s linear .4s;
  }
  .floating-social.fs-lowered ~ .luca-panel {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    max-height: none;
  }
  .luca-panel.luca-open {
    transform: scale(1);
    transition: transform .4s var(--ease-sheet-in),
                opacity .3s var(--ease-sheet-in),
                visibility 0s linear 0s;
  }
  /* Lớp mờ nền: cùng thời lượng/easing với #navOverlay của sheet (.3s --ease-standard); visibility chỉ ẩn SAU khi
     khung chat thu xong (.4s) để lớp mờ không biến mất trước khung. */
  .luca-backdrop {
    /* pointer-events:none khi KHÔNG mở: visibility còn "visible" thêm .4s lúc đang đóng (để lớp mờ kịp tan dần), nếu
       vẫn nhận chạm thì suốt .4s đó nó đè lên nút Luca + tab bar và NUỐT cú chạm mở lại nhanh (cảm giác "trễ, không
       phản hồi"). Giống .nav-overlay của sheet: chỉ nhận chạm khi đang .show. */
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-standard), visibility 0s linear .4s;
    touch-action: none; /* chạm/vuốt lên lớp mờ không cuộn trang nền (thay cho body{overflow:hidden} cũ — xem chatbot-widget.js) */
  }
  body.luca-chat-open .luca-backdrop {
    pointer-events: auto;
    transition: opacity var(--dur-slow) var(--ease-standard), visibility 0s linear 0s;
  }

  .luca-panel-header { touch-action: none; } /* để trình duyệt không cướp cử chỉ vuốt xuống của header */
  .luca-panel-grab { display: block; }
  .luca-backdrop { display: block; }
}

/* Giảm chuyển động trên điện thoại: khối @media 640px phía trên đặt lại transition/transform cho khung chat nên phải
   khai lại ở SAU nó để tắt scale/trượt, chỉ còn mờ nhanh. */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .luca-panel,
  .luca-panel.luca-open {
    transform: none;
    transition: opacity var(--dur-fast) linear, visibility 0s linear;
  }
  .luca-backdrop,
  body.luca-chat-open .luca-backdrop { transition: none; }
}