/* Astrohouse Chatbot — style bong bóng chat & khung chat nhúng.
 *
 * Ngôn ngữ thiết kế: tối giản, dùng icon dạng NÉT MẢNH (line-art, kiểu Feather/Lucide — xem ICONS trong
 * chat-widget.js) thay vì emoji/text, nhiều khoảng trắng, chỉ 1 màu nhấn (accent) dùng có chủ đích cho các
 * điểm tương tác (nút, bong bóng tin của khách, chip link) — còn lại dùng tông trung tính (trắng/xám nhạt)
 * thay vì mảng màu đặc lớn, để trông hiện đại/tinh tế hơn kiểu "khung màu đặc + chữ trắng" trước đây.
 *
 * 2 biến màu CHỈNH ĐƯỢC trong wp-admin (Cài đặt → Giao diện bong bóng chat):
 *   --astro-color       Màu nhấn (nút, bong bóng tin nhắn của khách, link) — mặc định #2563eb.
 *   --astro-text-color  Màu chữ chính (tin nhắn của bot, tiêu đề) — mặc định #1f2937.
 * Font chữ CỐ TÌNH không khai báo cụ thể (dùng "inherit") để tự lấy đúng font của theme site đang cài,
 * thay vì áp 1 bộ font hệ thống cố định như trước — khớp với giao diện chung của toàn site hơn.
 */

#astro-chatbot-bubble-root {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999999;
	font-family: inherit;
}

.astro-chatbot-inline-root {
	font-family: inherit;
}

.astro-chat-launcher {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--astro-color, #2563eb);
	color: #fff;
	border: none;
	box-shadow: 0 10px 24px -6px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.12);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.astro-chat-launcher svg { width: 25px; height: 25px; }
.astro-chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -6px rgba(0,0,0,0.32), 0 3px 8px rgba(0,0,0,0.14); }
.astro-chat-launcher:active { transform: translateY(0) scale(0.96); }

.astro-chat-panel {
	position: absolute;
	right: 0;
	bottom: 74px;
	width: 350px;
	max-width: calc(100vw - 32px);
	height: 490px;
	max-height: 70vh;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px -16px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.05);
	display: none;
	flex-direction: column;
	overflow: hidden;
}
.astro-chat-panel.astro-open { display: flex; }

.astro-chatbot-inline-root .astro-chat-panel {
	position: static;
	width: 100%;
	max-width: 100%;
	height: 520px;
	max-height: none;
	display: flex;
	box-shadow: none;
	border: 1px solid #e9e9ea;
}

.astro-chat-header {
	background: #fff;
	color: var(--astro-text-color, #1f2937);
	padding: 14px 14px 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px solid #efeff0;
}
.astro-chat-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.astro-chat-avatar {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--astro-color, #2563eb);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.astro-chat-avatar svg { width: 16px; height: 16px; }
.astro-chat-title-group {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
}
/* Dòng lớn/nhỏ CỐ TÌNH dùng đúng thẻ H4/H5 (xem chat-widget.js) để tự thừa hưởng cỡ chữ/kiểu chữ tiêu đề
   của theme site đang cài — ở đây CHỈ reset margin mặc định (h4/h5 mặc định có margin dọc, không hợp với
   khung header nhỏ gọn 1 dòng) và ép màu chữ theo --astro-text-color để đồng bộ với phần còn lại của khung
   chat; TUYỆT ĐỐI KHÔNG đặt font-size/font-weight/font-family ở đây để không "đè" mất kiểu chữ theme. Nếu
   theme có H4/H5 quá to (một số theme đặt cỡ rất lớn cho tiêu đề trang), header sẽ giãn theo — báo lại để
   chỉnh riêng bằng cỡ chữ cố định thay vì mượn thẻ theme nếu gặp trường hợp này. */
.astro-chat-title-group h4.astro-chat-title-main,
.astro-chat-title-group h5.astro-chat-title-sub {
	margin: 0;
	padding: 0;
	color: var(--astro-text-color, #1f2937);
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.astro-chat-title-group h5.astro-chat-title-sub { opacity: 0.62; }
.astro-chat-header .astro-chat-close {
	flex: none;
	background: none;
	border: none;
	color: #9ca3af;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.astro-chat-header .astro-chat-close svg { width: 17px; height: 17px; }
.astro-chat-header .astro-chat-close:hover { background: #f3f4f6; color: #4b5563; }

.astro-icon-inline {
	display: inline-flex;
	vertical-align: -3px;
	margin-right: 6px;
	color: var(--astro-color, #2563eb);
	opacity: 0.85;
}
.astro-icon-inline svg { width: 14px; height: 14px; }

.astro-chat-verify {
	padding: 10px 14px;
	background: #fafafa;
	border-bottom: 1px solid #efeff0;
	font-size: 12.5px;
	color: #52525b;
}
.astro-chat-verify.astro-verified { background: #f3fbf7; color: #166534; }
.astro-chat-verify.astro-verified .astro-icon-inline { color: #16a34a; }
.astro-chat-verify-row { display: flex; gap: 6px; margin-top: 8px; }
.astro-chat-verify-row input {
	flex: 1;
	padding: 7px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
}
.astro-chat-verify-row input:focus {
	outline: none;
	border-color: var(--astro-color, #2563eb);
	box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.astro-chat-verify-row button {
	padding: 7px 12px;
	border: none;
	border-radius: 8px;
	background: var(--astro-color, #2563eb);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.astro-chat-verify-error { color: #b91c1c; margin-top: 6px; }
.astro-chat-verify-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Từ bản 1.33.0 dòng này CHỈ còn dùng để hiện "Xin chào {tên}!" SAU KHI đã xác thực mã đặt phòng (xem
   chat-widget.js markVerified()) — không còn là 1 nút bấm để mở/đóng ô nhập mã nữa (việc đó đã chuyển sang
   2 chip trong .astro-chat-authgate-chips bên dưới), nên bỏ cursor:pointer cho đúng bản chất chỉ đọc. */
.astro-chat-verify-link { color: inherit; text-decoration: none; font-size: 12.5px; display: flex; align-items: center; min-width: 0; flex: 1; }

/* "Cổng chọn hướng" xác thực (bản 1.33.0) — thay cho việc hiện SẴN cả dòng gợi ý nhập mã đặt phòng LẪN
   khung tên+SĐT cùng lúc (Juno phản ánh rối mắt): mặc định chỉ hiện 1 dòng hỏi ngắn + 2 chip, khách bấm
   chip nào thì CHỈ khung tương ứng hiện ra (xem applyAuthChoiceUi() trong chat-widget.js). */
.astro-chat-authgate-prompt { margin-bottom: 8px; }
.astro-chat-authgate-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.astro-chat-authgate-chip {
	display: inline-flex;
	align-items: center;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: inherit;
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 12.5px;
	font-family: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.astro-chat-authgate-chip .astro-icon-inline { margin-right: 5px; color: inherit; opacity: 0.7; }
.astro-chat-authgate-chip:hover { border-color: var(--astro-color, #2563eb); }
/* Chip khách ĐANG chọn (xem this.authChoice trong chat-widget.js) — tô đậm để rõ khung nào đang mở bên dưới. */
.astro-chat-authgate-chip-active {
	background: var(--astro-color, #2563eb);
	border-color: var(--astro-color, #2563eb);
	color: #fff;
}
.astro-chat-authgate-chip-active .astro-icon-inline { opacity: 1; }
/* Nút "Thoát" — chỉ hiện SAU KHI khách đã xác thực mã đặt phòng (xem chat-widget.js applyAuthenticated()),
   để khách yên tâm có thể chủ động huỷ phiên bất cứ lúc nào nếu lo ngại bị "nhớ" quá lâu. */
.astro-chat-verify-logout {
	flex: none;
	border: none;
	background: none;
	color: inherit;
	opacity: 0.75;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	padding: 2px 0;
	font-family: inherit;
	white-space: nowrap;
}
.astro-chat-verify-logout:hover { opacity: 1; }

/* Ghi chú nhỏ tuỳ chọn (chủ nhà tự nhập ở Cài đặt) ngay dưới ô nhập tin nhắn — xem chat-widget.js build(). */
.astro-chat-privacy-note {
	padding: 0 14px 10px;
	font-size: 11px;
	font-style: italic;
	color: #9ca3af;
	line-height: 1.4;
}
.astro-chat-privacy-note a { color: inherit; text-decoration: underline; }

/* "Cổng" bắt buộc khách vãng lai nhập tên+SĐT trước khi chat được — xem chat-widget.js showLeadGate(). */
.astro-chat-leadgate {
	display: none;
	padding: 14px;
	background: #fffdf7;
	border-bottom: 1px solid #f5ecd7;
	font-size: 12.5px;
}
.astro-chat-leadgate-text { margin-bottom: 10px; color: #7c5e0e; display: flex; align-items: center; }
.astro-chat-leadgate input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	margin-bottom: 7px;
	background: #fff;
}
.astro-chat-leadgate input[type="text"]:focus {
	outline: none;
	border-color: var(--astro-color, #2563eb);
	box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
/* Bẫy honeypot chống spam: ẩn field này khỏi mắt người dùng thật (nhưng KHÔNG dùng display:none — một số
   bot đơn giản chỉ né các field display:none/visibility:hidden, đặt lệch ra ngoài màn hình "qua mặt" được
   nhiều bot hơn) — người thật không bao giờ thấy để mà điền, bot tự động điền form thường điền cả field này. */
.astro-lead-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
	margin: 0 !important;
	padding: 0 !important;
}
.astro-lead-submit {
	padding: 7px 14px;
	border: none;
	border-radius: 8px;
	background: var(--astro-color, #2563eb);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.astro-lead-submit:disabled { opacity: 0.6; cursor: default; }
.astro-chat-leadgate-error { color: #b91c1c; margin-top: 6px; }

.astro-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #fafafa;
	/* Điểm nhấn "line art" rất nhẹ (đường kẻ chéo mảnh, gần như vô hình) lấy cảm hứng từ cách các sản phẩm
	   tối giản dùng hoạ tiết nét mảnh làm nền thay vì màu phẳng đơn điệu — chỉ mang tính trang trí tinh tế,
	   không ảnh hưởng độ đọc của tin nhắn. Có thể xoá dòng background-image này nếu muốn nền phẳng hoàn toàn. */
	background-image: repeating-linear-gradient(135deg, rgba(17,17,17,0.025) 0px, rgba(17,17,17,0.025) 1px, transparent 1px, transparent 15px);
}

.astro-chat-msg {
	max-width: 85%;
	padding: 9px 13px;
	border-radius: 16px;
	/* Mặc định KHÔNG đặt cỡ chữ/font chữ cố định — 2 biến CSS này chỉ có giá trị khi chủ nhà chủ động ghi đè
	   trong wp-admin (Cài đặt → Giao diện bong bóng chat); nếu để trống, "inherit" khiến nội dung tin nhắn
	   (kể cả dòng chào mừng, dùng chung style này) tự lấy đúng font/cỡ chữ phần nội dung bài viết của theme
	   site đang cài, thay vì 1 cỡ cố định của plugin — line-height dùng đơn vị không có hậu tố (1.5) nên tự
	   giãn theo tỉ lệ đúng dù cỡ chữ theme lớn/nhỏ khác nhau. */
	font-size: var(--astro-content-font-size, inherit);
	font-family: var(--astro-content-font-family, inherit);
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.astro-chat-msg.astro-user {
	align-self: flex-end;
	background: var(--astro-color, #2563eb);
	color: #fff;
	border-bottom-right-radius: 5px;
}
.astro-chat-msg.astro-bot {
	align-self: flex-start;
	background: #fff;
	color: var(--astro-text-color, #1f2937);
	border-bottom-left-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
}
.astro-chat-msg.astro-typing { color: #9ca3af; font-style: italic; box-shadow: none; }

/* Trước đây dùng <a target="_blank"> — giờ đổi sang <button> (bấm mở popup xem ảnh lớn, xem openLightbox()
   trong chat-widget.js) nên cần reset lại style mặc định của button (border/background/padding/font). */
.astro-chat-msg-image-link {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	border-radius: 10px;
	overflow: hidden;
	cursor: zoom-in;
}
/* CỐ Ý không dùng object-fit: cover (cắt ảnh cho vừa khung) — chủ nhà phản ánh ảnh bị cắt mất, không thấy
   hết được toàn bộ ảnh. height: auto giữ nguyên tỉ lệ thật, luôn hiện trọn vẹn ảnh, không crop. */
.astro-chat-msg-image { display: block; width: 100%; max-width: 100%; height: auto; }

/* Popup xem ảnh phóng to (lightbox) — xem openLightbox() trong chat-widget.js. Gắn thẳng vào <body> nên
   z-index chỉ cần cao hơn z-index của khung chat (999999) là đủ để luôn nổi trên cùng. */
.astro-chat-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.85);
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}
.astro-chat-lightbox-img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.astro-chat-lightbox-close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,0.15);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.astro-chat-lightbox-close:hover { background: rgba(255,255,255,0.28); }

.astro-chat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-self: flex-start; max-width: 85%; }
.astro-chat-links a {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(37,99,235,0.35);
	border-color: var(--astro-color, #2563eb);
	background: rgba(37,99,235,0.06);
	background: color-mix(in srgb, var(--astro-color, #2563eb) 8%, #fff);
	color: var(--astro-color, #2563eb);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.astro-chat-links a:hover { background: var(--astro-color, #2563eb); color: #fff; }

/* Nút link CHÈN NGAY TRONG DÒNG VĂN BẢN của tin nhắn — lưới an toàn khi lỡ còn sót 1 URL trần trong câu trả
   lời (xem renderTextWithLinks() trong chat-widget.js); cách sửa chính vẫn là chặn từ gốc ở prompt Gemini,
   nút này chỉ đảm bảo khách KHÔNG BAO GIỜ nhìn thấy 1 chuỗi URL dài dòng dù trường hợp lưới an toàn có chạy. */
.astro-chat-inline-link-btn {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	margin: 1px 2px;
	border-radius: 999px;
	border: 1px solid var(--astro-color, #2563eb);
	background: rgba(37,99,235,0.06);
	background: color-mix(in srgb, var(--astro-color, #2563eb) 8%, #fff);
	color: var(--astro-color, #2563eb);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	vertical-align: middle;
	transition: background 0.15s ease, color 0.15s ease;
}
.astro-chat-inline-link-btn:hover { background: var(--astro-color, #2563eb); color: #fff; }

/* Link THẬT chèn ngay trong câu văn qua token {{link:N}} (bản 1.30.0, xem renderTextWithLinks() trong
   chat-widget.js) — CỐ TÌNH khác hẳn kiểu "nút bấm/pill" ở trên: đây là 1 cụm từ tự nhiên NẰM TRONG câu trả
   lời (vd "...xem qua [trang thông tin thuê xe] và cho..."), nên chỉ tô màu + gạch chân như 1 hyperlink bình
   thường, không có khung/nền — để khách đọc thấy rõ đây là 1 phần của câu, không phải 1 gợi ý hỏi tiếp tách
   rời (khác hẳn các "chip" gợi ý câu hỏi ở dưới ô nhập, vốn CỐ Ý có khung bo tròn để phân biệt). */
.astro-chat-inline-link {
	color: var(--astro-color, #2563eb);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.astro-chat-inline-link:hover { text-decoration-thickness: 2px; }

/* Cụm gợi ý nhanh ("Quick question") — hàng chip ngay trên ô nhập tin, tự ẩn khi khách chạm vào ô nhập để
   gõ (xem chat-widget.js). Dùng flex-wrap thay vì cuộn ngang để không cần thêm chỉ báo "còn nữa", đủ dùng
   với vài cụm ngắn; nếu chủ nhà nhập nhiều cụm dài, hàng sẽ tự xuống dòng thay vì tràn ra ngoài khung. */
.astro-chat-quick-phrases {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 10px 0;
	background: #fff;
}
.astro-chat-quick-chip {
	border: 1px solid #e4e4e7;
	background: #fafafa;
	color: var(--astro-text-color, #1f2937);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12.5px;
	font-family: inherit;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.astro-chat-quick-chip:hover {
	background: var(--astro-color, #2563eb);
	border-color: var(--astro-color, #2563eb);
	color: #fff;
}
/* Cụm gợi ý nhanh RIÊNG cho khách đang lưu trú (xem chat-widget.js maybeAddStayingQuickPhrases()) — tô màu
   nhẹ khác với cụm ngẫu nhiên chung để khách dễ nhận ra đây là gợi ý "dành riêng cho bạn". */
.astro-chat-quick-chip-staying {
	background: rgba(37,99,235,0.08);
	border-color: rgba(37,99,235,0.35);
}
.astro-chat-quick-chip-staying:hover {
	background: var(--astro-color, #2563eb);
	border-color: var(--astro-color, #2563eb);
	color: #fff;
}

.astro-chat-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid #efeff0;
	background: #fff;
}
.astro-chat-input-row textarea {
	flex: 1;
	resize: none;
	border: 1px solid transparent;
	background: #f4f4f5;
	border-radius: 12px;
	padding: 9px 12px;
	font-size: 13.5px;
	font-family: inherit;
	color: var(--astro-text-color, #1f2937);
	max-height: 70px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.astro-chat-input-row textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--astro-color, #2563eb);
	box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.astro-chat-send {
	flex: none;
	width: 36px;
	height: 36px;
	background: var(--astro-color, #2563eb);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.15s ease, transform 0.1s ease;
}
.astro-chat-send svg { width: 17px; height: 17px; }
.astro-chat-send:hover:not(:disabled) { filter: brightness(1.08); }
.astro-chat-send:active:not(:disabled) { transform: scale(0.94); }
.astro-chat-send:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 480px) {
	.astro-chat-panel { width: calc(100vw - 24px); right: -8px; }

	/* Chế độ "toàn màn hình trên điện thoại" (chọn ở wp-admin → Cài đặt → Cách hiển thị khung chat trên điện
	   thoại) — CHỈ đổi layout của khung chat bong bóng khi đang mở trên màn hình nhỏ (không ảnh hưởng khung
	   nhúng bằng shortcode, không ảnh hưởng desktop). Header vẫn giữ nguyên cấu trúc cũ (cố định trên cùng vì
	   .astro-chat-panel vốn đã là flex-column: header rồi tới phần tin nhắn rồi tới ô nhập) — chỉ là panel giờ
	   phủ kín màn hình thay vì 1 khung nhỏ nổi góc, giống trải nghiệm app chat native hơn.
	   CỐ Ý KHÔNG dùng width:100vw/height:100vh — trình duyệt di động (đặc biệt Safari trên iPhone) có thanh
	   địa chỉ/thanh công cụ co giãn khi cuộn, khiến 100vh tính theo viewport "đầy đủ" (lúc ẩn thanh công cụ)
	   dài hơn phần MÀN HÌNH THỰC SỰ đang hiển thị lúc thanh công cụ còn hiện — gây ra đúng hiện tượng đã gặp:
	   khung chat tràn xuống dưới màn hình thực, chừa khoảng trống/mất phần dưới (ô nhập tin) mà không cuộn
	   tới được. Chỉ dùng top/right/bottom/left:0 (không kèm width/height) để trình duyệt tự tính lại kích
	   thước theo ĐÚNG viewport hiển thị hiện tại — cách này ổn định hơn nhiều trên cả Safari lẫn Chrome di động. */
	#astro-chatbot-bubble-root.astro-mobile-fullscreen .astro-chat-panel.astro-open {
		position: fixed;
		/* --astro-mobile-fs-top: số px chừa lại phía trên (không che header/thanh menu thật của site) — chủ
		   nhà tự đo và nhập trong wp-admin (Cài đặt → "Khoảng chừa phía trên khi toàn màn hình"), mặc định
		   0px = phủ kín toàn bộ. Khi bàn phím ảo đang mở, chat-widget.js tự ghi đè top/height bằng inline
		   style theo Visual Viewport API (xem setupMobileViewportSync()) — var này chỉ là giá trị NỀN lúc
		   bàn phím chưa mở. */
		top: var(--astro-mobile-fs-top, 0px);
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		border-radius: 0;
	}
	/* Chế độ "tự mở popup toàn trang" (wp-admin → Cài đặt → "Tự mở popup chat toàn trang trên các trang sau")
	   — CHỈ ÁP DỤNG TRÊN ĐIỆN THOẠI theo yêu cầu chủ nhà (đặt CHUNG trong @media này với
	   .astro-mobile-fullscreen ở trên, không còn để ngoài @media như bản trước — màn hình lớn hơn giữ nguyên
	   hành vi bình thường, chỉ hiện bong bóng). chat-widget.js cũng tự kiểm tra ĐÚNG cùng ngưỡng 480px
	   (isNarrowViewport()) trước khi quyết định có gắn class này + tự mở panel hay không — CSS ở đây chỉ là
	   lớp phòng hờ thứ 2 (vd trường hợp hiếm: khách xoay ngang màn hình sau khi đã tải trang xong ở chế độ
	   dọc). Layout phủ kín màn hình giống hệt kỹ thuật đã dùng cho .astro-mobile-fullscreen ở trên (xem ghi
	   chú đầy đủ về lý do không dùng width:100vw/height:100vh). */
	#astro-chatbot-bubble-root.astro-force-fullscreen .astro-chat-panel.astro-open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		border-radius: 0;
	}
	/* body.astro-chat-fs-lock (khoá scroll trang nền lúc khung chat toàn màn hình đang mở) dùng chung cho cả 2
	   chế độ toàn màn hình ở trên — điện thoại lẫn "tự mở toàn trang" (xem lockBodyScroll() trong
	   chat-widget.js, gọi từ togglePanel()). */
	body.astro-chat-fs-lock { overflow: hidden; }

	/* Cỡ chữ ô nhập tin PHẢI >= 16px trên điện thoại — dưới mức này, Safari trên iPhone sẽ tự động PHÓNG TO
	   (zoom) cả trang mỗi khi chạm vào ô nhập để gõ, làm vỡ bố cục khung chat (đã gặp thực tế). Chỉ ghi đè
	   trên điện thoại (giữ nguyên 13.5px gọn gàng hơn trên máy tính) — áp dụng cho CẢ 2 chế độ hiển thị (box
	   và fullscreen), vì lỗi này xảy ra bất kể đang dùng chế độ nào. */
	.astro-chat-input-row textarea { font-size: 16px; }
}