/**
 * Chatcue — khung chat bấm chọn.
 *
 * Hình học bám đúng bản thiết kế (chatcue-full-mockup-standalone.html):
 * điện thoại thì khung chiếm hết bề ngang và neo đáy, máy tính thì cửa sổ
 * 380x600 neo góc phải dưới.
 *
 * Mọi kiểu trình bày đều nằm trong `.chatcue`, không có luật nào chạm ra
 * ngoài — plugin cài lên web lạ, đụng vào thẻ chung của người ta là vỡ trang
 * của họ. Không nạp phông từ ngoài: khung chat mượn luôn phông của theme.
 */

.chatcue {
	--cc-surface: #ffffff;
	--cc-subtle: #f6f7f9;
	--cc-text: #17181b;
	--cc-muted: #60646c;
	--cc-border: #d9dce3;
	--cc-accent: #3659e3;
	--cc-on-accent: #ffffff;

	--cc-space-1: 4px;
	--cc-space-2: 8px;
	--cc-space-3: 12px;
	--cc-space-4: 16px;
	--cc-space-5: 20px;
	--cc-space-6: 24px;

	--cc-radius-sm: 10px;
	--cc-radius-md: 12px;
	--cc-radius-lg: 18px;

	--cc-tap-min: 44px;
	--cc-duration: 200ms;
	--cc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Chủ web đổi được khoảng cách từ đáy màn lên nút nổi, dành cho theme có
	   thanh dính đáy mà phần tự dò không nhận ra. */
	--cc-launcher-bottom-offset: 0px;

	position: fixed;
	z-index: 99999;
	bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + var(--cc-launcher-bottom-offset));
	font-size: 15px;
	line-height: 1.5;
	color: var(--cc-text);
}

.chatcue *,
.chatcue *::before,
.chatcue *::after {
	box-sizing: border-box;
}

.chatcue--right {
	right: max(16px, env(safe-area-inset-right, 0px));
}

.chatcue--left {
	left: max(16px, env(safe-area-inset-left, 0px));
}

.chatcue[hidden] {
	display: none;
}

/* Nền tối: theo máy khách khi chủ web chọn "theo máy", hoặc ép cứng khi chọn "tối". */
@media (prefers-color-scheme: dark) {
	.chatcue--auto {
		--cc-surface: #181a1f;
		--cc-subtle: #22252b;
		--cc-text: #f5f7fa;
		--cc-muted: #b7bcc5;
		--cc-border: #3b3f48;
	}
}

.chatcue--dark {
	--cc-surface: #181a1f;
	--cc-subtle: #22252b;
	--cc-text: #f5f7fa;
	--cc-muted: #b7bcc5;
	--cc-border: #3b3f48;
}

/* ---------- Nút nổi ---------- */

/* Nút nổi KHÔNG có nền, không viền: chỉ mỗi nhân vật đứng đó. Logo vốn đã là
   một bong bóng chat có nét viền đậm, nhốt nó vào thêm một cái khung tròn nữa
   là hai lớp vỏ chồng nhau, nhìn nặng và tủn mủn. */
.chatcue__launcher {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius-lg);
	background: none;
	color: var(--cc-text);
	cursor: pointer;
	transition: transform var(--cc-duration) var(--cc-ease);
	-webkit-tap-highlight-color: transparent;
}

.chatcue__launcher-icon {
	width: 100%;
	height: 100%;
	/* Bóng đổ bám theo ĐƯỜNG VIỀN của nhân vật chứ không theo khung vuông —
	   có vậy mới tách được khỏi nền sáng mà không lộ ra một cái hộp. */
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
	/* Theme của web chủ hay đặt luật chung cho mọi thẻ ảnh — chốt lại mấy
	   thuộc tính hay bị đè để logo không méo hay dính viền lạ. */
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	object-fit: contain;
}

/* Vùng đáy chật thì thu nhỏ, vẫn còn trên ngưỡng chạm 44px. */
.chatcue--compact .chatcue__launcher {
	width: 52px;
	height: 52px;
	border-radius: 16px;
}

/* Một vòng sóng lan ra rồi tắt hẳn, chạy đúng hai nhịp lúc trang vừa tải.
   Đủ để mắt bắt được cái nút, mà không thành thứ nhấp nháy suốt buổi. */
.chatcue__launcher::after {
	content: "";
	position: absolute;
	/* Vòng tròn, không phải khung vuông bo góc: nút đã bỏ nền rồi, vẽ khung
	   vuông quanh nhân vật là lại lòi ra cái hộp vừa bỏ đi. */
	inset: 6px;
	border-radius: 999px;
	border: 2px solid var(--cc-accent);
	opacity: 0;
	animation: chatcue-song 2.4s var(--cc-ease) 1.2s 2;
	pointer-events: none;
}

@keyframes chatcue-song {
	0% {
		transform: scale(1);
		opacity: 0.55;
	}

	70% {
		transform: scale(1.45);
		opacity: 0;
	}

	100% {
		transform: scale(1.45);
		opacity: 0;
	}
}

/* Khung mở ra rồi thì thôi, và người chọn bớt chuyển động thì không chạy. */
.chatcue.is-open .chatcue__launcher::after {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.chatcue__launcher::after {
		animation: none;
	}
}

/* ---------- Lời mời cạnh nút ---------- */

.chatcue__teaser {
	position: absolute;
	bottom: 6px;
	display: flex;
	align-items: center;
	gap: 2px;
	/* Khối cha chỉ rộng bằng cái nút, nên phải nói rõ là rộng theo chữ —
	   thiếu dòng này thì lời mời bị bóp lại còn một cột chữ vỡ mấy dòng. */
	width: max-content;
	max-width: min(232px, calc(100vw - 120px));
	padding: 4px 4px 4px 14px;
	border: 1px solid var(--cc-border);
	border-radius: 999px;
	background: var(--cc-surface);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--cc-duration) var(--cc-ease), transform var(--cc-duration) var(--cc-ease);
}

/* Nằm nép về phía trong màn hình, tránh đè lên chính nút nổi. */
.chatcue--right .chatcue__teaser {
	right: 76px;
}

.chatcue--left .chatcue__teaser {
	left: 76px;
}

.chatcue__teaser[hidden] {
	display: none;
}

.chatcue__teaser.is-on {
	opacity: 1;
	transform: translateY(0);
}

.chatcue__teaser-text {
	padding: 0;
	border: 0;
	background: none;
	color: var(--cc-text);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.chatcue__teaser-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--cc-muted);
	cursor: pointer;
}

.chatcue__teaser-close:hover {
	background: var(--cc-subtle);
	color: var(--cc-text);
}

@media (prefers-reduced-motion: reduce) {
	.chatcue__teaser {
		transition-duration: 0.01ms;
		transform: none;
	}
}

.chatcue__launcher:hover {
	transform: translateY(-2px);
}

/* Khung mở ra là nút nổi lui đi: trên điện thoại nó nằm dưới khung, còn để
   lại thì thành hai chỗ cùng đóng mở, khách bối rối. Đóng khung bằng nút X
   trong đầu khung, chỗ nào cũng thấy. */
.chatcue.is-open .chatcue__launcher {
	display: none;
}

.chatcue__dot {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--cc-surface);
	/* Viền dày cùng màu nút để chấm nổi lên mà không cần nhấp nháy. */
	border: 4px solid var(--cc-accent);
}

.chatcue__dot[hidden] {
	display: none;
}

/* ---------- Khung chat ---------- */

/* Điện thoại: chiếm hết bề ngang, neo đáy, chỉ bo hai góc trên. */
.chatcue__panel {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 82dvh;
	max-height: 82dvh;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	border: 1px solid var(--cc-border);
	border-bottom: 0;
	border-radius: var(--cc-radius-lg) var(--cc-radius-lg) 0 0;
	background: var(--cc-surface);
	box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--cc-duration) var(--cc-ease), transform var(--cc-duration) var(--cc-ease);
}

/* Máy cũ chưa hiểu dvh thì lùi về vh, chỉ lệch chút khi thanh địa chỉ ẩn hiện. */
@supports not (height: 82dvh) {
	.chatcue__panel {
		height: 82vh;
		max-height: 82vh;
	}
}

.chatcue__panel[hidden] {
	display: none;
}

.chatcue.is-open .chatcue__panel {
	opacity: 1;
	transform: translateY(0);
}

/* Máy tính: cửa sổ 380x600 neo đúng góc, không chiếm cả màn hình. */
@media (min-width: 640px) {
	.chatcue__panel {
		right: auto;
		left: auto;
		/* Chừa lề đáy cho cửa sổ khỏi dính mép màn hình. */
		bottom: max(16px, env(safe-area-inset-bottom, 0px));
		width: 380px;
		height: 600px;
		max-height: calc(100dvh - 120px);
		padding-bottom: 0;
		border-bottom: 1px solid var(--cc-border);
		border-radius: var(--cc-radius-lg);
		box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
	}

	.chatcue--right .chatcue__panel {
		right: max(16px, env(safe-area-inset-right, 0px));
	}

	.chatcue--left .chatcue__panel {
		left: max(16px, env(safe-area-inset-left, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.chatcue__panel,
	.chatcue__launcher {
		transition-duration: 0.01ms;
		transform: none;
	}

	.chatcue.is-open .chatcue__panel {
		transform: none;
	}
}

/* ---------- Đầu khung ---------- */

/* Đầu khung nằm NGOÀI vùng cuộn và ở lớp trên, nên nội dung dài, màn đang
   tải hay lớp phủ đều không bao giờ che mất nút đóng. */
.chatcue__head {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-2);
	flex: none;
	min-height: 68px;
	padding: 10px 12px 10px var(--cc-space-4);
	border-bottom: 1px solid var(--cc-border);
	background: var(--cc-surface);
}

.chatcue__nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
}

.chatcue__nav[hidden] {
	display: none;
}

.chatcue__head-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.chatcue__head-text[hidden] {
	display: none;
}

.chatcue__title {
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chatcue__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--cc-muted);
}

.chatcue__status::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--cc-accent);
	flex: none;
}

/* Lúc mất mạng thì bỏ chấm màu đi, vì chấm màu nhấn đọc như "đang chạy tốt". */
.chatcue__status--offline::before {
	display: none;
}

.chatcue__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--cc-tap-min);
	height: var(--cc-tap-min);
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius-md);
	background: transparent;
	color: var(--cc-text);
	font: inherit;
	cursor: pointer;
}

.chatcue__icon-btn:hover {
	background: var(--cc-subtle);
}

/* ---------- Thân khung ---------- */

.chatcue__body {
	flex: 1;
	min-height: 0;
	/* Cuộn CẢ vùng nội dung, một vùng cuộn duy nhất. Không tạo khung cuộn
	   lồng bên trong, vì cuộn lồng trên điện thoại là cực hình. */
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--cc-space-4);
	background: var(--cc-surface);
}

@media (min-width: 640px) {
	.chatcue__body {
		padding: 14px;
	}
}

.chatcue__stack {
	display: grid;
	gap: var(--cc-space-3);
}

/* ---------- Đường dẫn rút gọn ---------- */

.chatcue__crumbs {
	display: flex;
	align-items: center;
	gap: var(--cc-space-1);
	min-height: 36px;
	font-size: 12px;
	color: var(--cc-muted);
	/* Không cho xuống hai dòng và cũng không cho cuộn ngang: tên dài thì cắt. */
	white-space: nowrap;
	overflow: hidden;
}

.chatcue__crumb-home {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--cc-radius-sm);
	background: var(--cc-subtle);
	color: var(--cc-text);
	font: inherit;
	cursor: pointer;
	flex: none;
}

/* Nút vẽ ra 36px cho vừa dòng đường dẫn, nhưng vùng bấm nới ra đủ 44px theo
   ngưỡng chạm — nới bằng lớp phủ trong suốt, không đụng tới hình học. */
.chatcue__crumb-home::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--cc-tap-min);
	height: var(--cc-tap-min);
	transform: translate(-50%, -50%);
}

.chatcue__crumb-home:hover {
	background: var(--cc-border);
}

.chatcue__crumb-sep {
	display: inline-flex;
	flex: none;
	color: var(--cc-muted);
}

.chatcue__crumb-ellipsis {
	flex: none;
	letter-spacing: 1px;
}

.chatcue__crumb-last {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--cc-text);
}

/* ---------- Lời chào và câu trả lời ---------- */

.chatcue__bubble {
	padding: var(--cc-space-3) 14px;
	border-radius: 16px 16px 16px 5px;
	background: var(--cc-subtle);
	color: var(--cc-text);
	line-height: 1.5;
	/* Câu trả lời dài hiện trọn vẹn: không chặn chiều cao, không cuộn riêng. */
	overflow-wrap: break-word;
}

.chatcue__bubble p {
	margin: 0 0 var(--cc-space-3);
}

.chatcue__bubble > :last-child {
	margin-bottom: 0;
}

.chatcue__bubble ul,
.chatcue__bubble ol {
	margin: 0 0 var(--cc-space-3);
	padding-left: var(--cc-space-5);
}

.chatcue__bubble li + li {
	margin-top: var(--cc-space-1);
}

.chatcue__bubble a {
	color: inherit;
	text-underline-offset: 2px;
}

/* ---------- Nút lựa chọn ---------- */

.chatcue__choices {
	display: grid;
	gap: var(--cc-space-2);
}

.chatcue__choice,
.chatcue__external,
.chatcue__submit,
.chatcue__product-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-2);
	width: 100%;
	min-height: 48px;
	padding: 10px var(--cc-space-3);
	border-radius: var(--cc-radius-md);
	font: inherit;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.chatcue__choice {
	border: 1px solid var(--cc-border);
	background: var(--cc-surface);
	color: var(--cc-text);
}

.chatcue__choice:hover {
	background: var(--cc-subtle);
}

.chatcue__choice svg {
	flex: none;
	color: var(--cc-muted);
}

/* Nút dẫn ra ngoài trông khác hẳn nút đi tiếp trong kịch bản, để khách biết
   bấm vào là rời trang. Nền đặc bằng đúng màu nhấn, KHÔNG viền đứt nét —
   viền đứt nhìn như ô chưa làm xong. */
.chatcue__external,
.chatcue__submit {
	border: 1px solid var(--cc-accent);
	background: var(--cc-accent);
	color: var(--cc-on-accent);
}

.chatcue__external svg,
.chatcue__submit svg {
	flex: none;
	color: inherit;
}

.chatcue__action-copy {
	display: inline-flex;
	align-items: center;
	gap: var(--cc-space-2);
	min-width: 0;
}

.chatcue__note {
	margin: 0;
	font-size: 12px;
	color: var(--cc-muted);
	text-align: center;
}

/* ---------- Nút gọi ---------- */

.chatcue__hotline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cc-space-2);
	width: 100%;
	min-height: 48px;
	padding: 10px var(--cc-space-3);
	border: 1px solid var(--cc-accent);
	border-radius: var(--cc-radius-md);
	background: var(--cc-accent);
	color: var(--cc-on-accent);
	font: inherit;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.chatcue__hotline svg {
	flex: none;
	color: inherit;
}

/* ---------- Dãy lối liên hệ dính đáy ---------- */

/* Nằm NGOÀI vùng cuộn: khách đang đọc dở ở đâu cũng thấy đường ra gặp người
   thật, khỏi phải cuộn xuống đáy tìm. */
.chatcue__foot {
	display: grid;
	gap: 10px;
	flex: none;
	padding: 14px var(--cc-space-4) var(--cc-space-4);
	border-top: 1px solid var(--cc-border);
	background: var(--cc-surface);
	text-align: center;
}

/* Chữ nhỏ, giãn con chữ, viết hoa — đọc như một cái nhãn khắc chứ không phải
   một dòng chữ chen vào. Logo bên dưới đã đủ màu rồi, dòng này phải lùi lại. */
.chatcue__foot-title {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

.chatcue__channels {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

/* Logo thật của từng hãng, để khách liếc một cái là biết đâu là Zalo đâu là
   Telegram. Đây là chỗ DUY NHẤT trong khung được dùng màu ngoài màu nhấn —
   anh Hien chốt 2026-08-13, xem bàn giao mục 7c. */
/* Logo nằm gọn trong một ô viền mảnh, thu nhỏ lại còn 26px. Để logo trần và
   to bằng cả ô thì bốn mảng màu rực đứng cạnh nhau lấn hết phần còn lại của
   khung — nhất là trên web tông trầm. */
.chatcue__channel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--cc-border);
	border-radius: 14px;
	background: var(--cc-surface);
	text-decoration: none;
	transition: border-color var(--cc-duration) var(--cc-ease),
		transform var(--cc-duration) var(--cc-ease);
}

.chatcue__channel img {
	width: 26px;
	height: 26px;
	/* Theme của web chủ hay đặt luật chung cho mọi thẻ ảnh — chốt lại mấy
	   thuộc tính hay bị đè để logo không méo hay dính viền lạ. */
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}

.chatcue__channel:hover {
	border-color: var(--cc-accent);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.chatcue__channel {
		transition-duration: 0.01ms;
		transform: none;
	}
}

/* ---------- Màn trạng thái: đang tải, chưa có dữ liệu, mất kết nối ---------- */

.chatcue__state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	gap: var(--cc-space-3);
	text-align: center;
}

.chatcue__state-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--cc-subtle);
	color: var(--cc-text);
}

.chatcue__state-title {
	margin: 0;
	font-weight: 500;
}

.chatcue__state-text {
	margin: 0;
	max-width: 250px;
	color: var(--cc-muted);
	line-height: 1.5;
}

.chatcue__spinner {
	width: 30px;
	height: 30px;
	border: 3px solid var(--cc-border);
	border-top-color: var(--cc-accent);
	border-radius: 999px;
	animation: chatcue-spin 850ms linear infinite;
}

@keyframes chatcue-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.chatcue__spinner {
		animation-duration: 2400ms;
	}
}

.chatcue__skeleton {
	display: grid;
	gap: var(--cc-space-2);
	width: 100%;
}

.chatcue__skeleton span {
	height: 12px;
	border-radius: 999px;
	background: var(--cc-subtle);
}

.chatcue__skeleton span:nth-child(2) {
	width: 78%;
}

.chatcue__skeleton span:nth-child(3) {
	width: 58%;
}

/* ---------- Thẻ sản phẩm ---------- */

.chatcue__product {
	display: block;
	border: 1px solid var(--cc-border);
	border-radius: 16px;
	background: var(--cc-surface);
	color: inherit;
	overflow: hidden;
	text-decoration: none;
}

.chatcue__product-media {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--cc-subtle);
	color: var(--cc-muted);
	overflow: hidden;
}

.chatcue__product-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chatcue__product-copy {
	display: grid;
	gap: 6px;
	padding: var(--cc-space-3);
}

/* Tên hàng được xuống dòng thoải mái: cắt cụt một dòng thì mấy món cùng dòng
   đầu nhìn giống hệt nhau. */
.chatcue__product-name {
	font-weight: 500;
	line-height: 1.35;
}

.chatcue__product-price {
	font-weight: 500;
}

.chatcue__product-price-old {
	margin-right: 6px;
	opacity: 0.7;
	text-decoration: line-through;
	font-weight: 400;
}

.chatcue__product-action {
	justify-content: center;
	min-height: var(--cc-tap-min);
	margin-top: var(--cc-space-1);
	border: 1px solid var(--cc-border);
	background: var(--cc-subtle);
	color: var(--cc-text);
}

.chatcue__product-action:hover {
	border-color: var(--cc-accent);
}

/* Nhiều món thì vuốt ngang, chừa lộ một phần thẻ sau để khách biết còn nữa. */
.chatcue__product-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 76%;
	gap: 10px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	padding-bottom: 6px;
}

.chatcue__product-row .chatcue__product {
	scroll-snap-align: start;
}

.chatcue__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.chatcue__dots span {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--cc-border);
}

.chatcue__dots span.is-on {
	width: 18px;
	background: var(--cc-accent);
}

/* ---------- Ô tra cứu đơn hàng ---------- */

.chatcue__form {
	display: grid;
	gap: 14px;
}

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

.chatcue__field label {
	font-weight: 500;
}

.chatcue__input {
	width: 100%;
	/* Ô nhập của trình duyệt có bề rộng tối thiểu riêng — thiếu dòng này là
	   tràn ngang màn hình điện thoại. */
	min-width: 0;
	min-height: 48px;
	padding: 10px var(--cc-space-3);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius-md);
	background: var(--cc-surface);
	color: var(--cc-text);
	font: inherit;
	/* Dưới 16px là iPhone tự phóng to trang khi khách chạm vào ô. */
	font-size: 16px;
}

/* Ô sai được đánh dấu bằng viền dày hẳn lên, không chỉ đổi màu — người phân
   biệt màu kém vẫn nhận ra. */
.chatcue__input[aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--cc-text);
}

.chatcue__hint,
.chatcue__error {
	font-size: 12px;
	line-height: 1.4;
	color: var(--cc-muted);
}

.chatcue__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	color: var(--cc-text);
	font-weight: 500;
}

.chatcue__error svg {
	flex: none;
	margin-top: 1px;
}

.chatcue__order-result {
	display: grid;
	gap: var(--cc-space-1);
	padding: var(--cc-space-3) 14px;
	border-radius: 16px 16px 16px 5px;
	background: var(--cc-subtle);
}

.chatcue__order-label {
	font-size: 12px;
	color: var(--cc-muted);
}

.chatcue__order-status {
	font-size: 18px;
	font-weight: 500;
}

/* ---------- Viền focus ---------- */

/* Phải luôn thấy rõ, kể cả khi theme của web chủ xoá outline mặc định. */
.chatcue :focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 2px;
}

/* Màu nhấn do chủ web chọn có thể trùng nền, nên trộn thêm màu chữ cho viền
   focus luôn tách khỏi nền dù chọn màu gì. */
@supports (outline-color: color-mix(in srgb, red 50%, blue)) {
	.chatcue :focus-visible {
		outline-width: 3px;
		outline-color: color-mix(in srgb, var(--cc-accent) 72%, var(--cc-text));
	}
}

.chatcue .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}