/* =====================================================================
   PLG Chatbot widget — self-contained styles.
   Mọi quy tắc scope trong #plg-chat nên KHÔNG đụng theme đích, và tái tạo
   chính xác các utility Tailwind mà markup dùng → hiển thị giống hệt 100%
   trên bất kỳ website nào (không cần Tailwind).
   ===================================================================== */

/* ---- Reset cục bộ (chặn theme đích “rò” style vào widget) ---- */
#plg-chat,
#plg-chat *,
#plg-chat *::before,
#plg-chat *::after {
	box-sizing: border-box;
	/* biến của hệ ring/shadow/gradient (như Tailwind preflight) */
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59,130,246,.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
}
#plg-chat {
	font-family: 'Inter', 'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	/* Bố cục container (các class này nằm TRÊN chính #plg-chat nên đặt trực tiếp,
	   tránh phụ thuộc selector con .fixed/.bottom-5/...) */
	position: fixed;
	bottom: 1.25rem;
	right: 1.25rem;
	z-index: 2147483000; /* nổi trên mọi thành phần của theme đích */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
#plg-chat p { margin: 0; padding: 0; }
#plg-chat button {
	margin: 0; padding: 0; background: transparent; border: 0;
	font: inherit; color: inherit; cursor: pointer; line-height: inherit;
	-webkit-appearance: none; appearance: none;
}
#plg-chat a { color: inherit; text-decoration: none; }
#plg-chat input {
	margin: 0; font: inherit; color: inherit; line-height: inherit;
	background: transparent; border: 0;
}
#plg-chat svg { display: inline-block; vertical-align: middle; }
#plg-chat img { max-width: 100%; border-style: solid; border-width: 0; }

/* ---- Display / layout ---- */
#plg-chat .fixed { position: fixed; }
#plg-chat .absolute { position: absolute; }
#plg-chat .flex { display: flex; }
#plg-chat .grid { display: grid; }
#plg-chat .block { display: block; }
#plg-chat .hidden { display: none; }
#plg-chat .flex-col { flex-direction: column; }
#plg-chat .flex-wrap { flex-wrap: wrap; }
#plg-chat .flex-1 { flex: 1 1 0%; }
#plg-chat .shrink-0 { flex-shrink: 0; }
#plg-chat .items-center { align-items: center; }
#plg-chat .items-end { align-items: flex-end; }
#plg-chat .justify-center { justify-content: center; }
#plg-chat .place-items-center { place-items: center; align-items: center; justify-items: center; }
#plg-chat .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#plg-chat .ml-auto { margin-left: auto; }

/* <button> không phải grid container đáng tin cậy trên nhiều trình duyệt
   (nội dung bị bọc trong anonymous box) → ép canh giữa bằng flex cho mọi
   nút icon. Nhờ đó icon ở nút nổi và icon X luôn nằm chính giữa. */
#plg-chat button.grid {
	display: flex;
	align-items: center;
	justify-content: center;
}
#plg-chat button.grid > svg { flex-shrink: 0; }

/* ---- Position offsets ---- */
#plg-chat .bottom-5 { bottom: 1.25rem; }
#plg-chat .right-5 { right: 1.25rem; }
#plg-chat .right-0 { right: 0; }
#plg-chat .bottom-\[4\.5rem\] { bottom: 4.5rem; }
#plg-chat .z-\[60\] { z-index: 60; }

/* ---- Sizing ---- */
#plg-chat .w-1\.5 { width: 0.375rem; }
#plg-chat .h-1\.5 { height: 0.375rem; }
#plg-chat .w-3\.5 { width: 0.875rem; }
#plg-chat .h-3\.5 { height: 0.875rem; }
#plg-chat .w-4 { width: 1rem; }
#plg-chat .h-4 { height: 1rem; }
#plg-chat .w-5 { width: 1.25rem; }
#plg-chat .h-5 { height: 1.25rem; }
#plg-chat .w-6 { width: 1.5rem; }
#plg-chat .h-6 { height: 1.5rem; }
#plg-chat .w-8 { width: 2rem; }
#plg-chat .h-8 { height: 2rem; }
#plg-chat .w-9 { width: 2.25rem; }
#plg-chat .h-9 { height: 2.25rem; }
#plg-chat .w-10 { width: 2.5rem; }
#plg-chat .h-10 { height: 2.5rem; }
#plg-chat .w-12 { width: 3rem; }
#plg-chat .h-12 { height: 3rem; }
#plg-chat .w-14 { width: 3.5rem; }
#plg-chat .h-14 { height: 3.5rem; }
#plg-chat .w-full { width: 100%; }
#plg-chat .h-auto { height: auto; }
#plg-chat .w-auto { width: auto; }
#plg-chat .h-\[18px\] { height: 18px; }
#plg-chat .w-max { width: max-content; }
#plg-chat .min-w-0 { min-width: 0; }
#plg-chat .w-\[340px\] { width: 340px; }
#plg-chat .max-w-\[calc\(100vw-2\.5rem\)\] { max-width: calc(100vw - 2.5rem); }
#plg-chat .max-w-\[82\%\] { max-width: 82%; }
#plg-chat .max-w-\[260px\] { max-width: 260px; }

/* ---- Spacing ---- */
#plg-chat .gap-1 { gap: 0.25rem; }
#plg-chat .gap-1\.5 { gap: 0.375rem; }
#plg-chat .gap-2 { gap: 0.5rem; }
#plg-chat .gap-2\.5 { gap: 0.625rem; }
#plg-chat .gap-3 { gap: 0.75rem; }
#plg-chat .mb-3 { margin-bottom: 0.75rem; }
#plg-chat .p-3 { padding: 0.75rem; }
#plg-chat .p-4 { padding: 1rem; }
#plg-chat .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
#plg-chat .px-4 { padding-left: 1rem; padding-right: 1rem; }
#plg-chat .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
#plg-chat .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
#plg-chat .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
#plg-chat .pl-2\.5 { padding-left: 0.625rem; }
#plg-chat .pr-1 { padding-right: 0.25rem; }
#plg-chat .pr-1\.5 { padding-right: 0.375rem; }
#plg-chat .space-y-3 > * + * { margin-top: 0.75rem; }

/* ---- Rounded (rounded-2xl khớp đúng theme gốc = .75rem) ---- */
#plg-chat .rounded-2xl { border-radius: 0.75rem; }
#plg-chat .rounded-full { border-radius: 9999px; }
#plg-chat .rounded-tl-sm { border-top-left-radius: 0.125rem; }
#plg-chat .rounded-tr-sm { border-top-right-radius: 0.125rem; }

/* ---- Borders ---- */
#plg-chat .border-t { border-top-width: 1px; border-top-style: solid; }
#plg-chat .border-bordr { border-color: #EAECEF; }

/* ---- Background colors ---- */
#plg-chat .bg-white { background-color: #fff; }
#plg-chat .bg-bgsoft { background-color: #F7F8FC; }
#plg-chat .bg-navy { background-color: #081C45; }
#plg-chat .bg-green-400 { background-color: #4ade80; }
#plg-chat .bg-grayt\/70 { background-color: rgba(107,114,128,.7); }

/* ---- Text colors ---- */
#plg-chat .text-white { color: #fff; }
#plg-chat .text-white\/75 { color: rgba(255,255,255,.75); }
#plg-chat .text-ink { color: #1A1A1A; }
#plg-chat .text-navy { color: #081C45; }
#plg-chat .text-orange { color: #FF8A23; }
#plg-chat .text-grayt { color: #6B7280; }

/* ---- Typography ---- */
#plg-chat .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
#plg-chat .text-base { font-size: 1rem; line-height: 1.5rem; }
#plg-chat .text-\[11px\] { font-size: 11px; }
#plg-chat .text-\[12px\] { font-size: 12px; }
#plg-chat .text-\[13px\] { font-size: 13px; }
#plg-chat .font-medium { font-weight: 500; }
#plg-chat .font-semibold { font-weight: 600; }
#plg-chat .font-bold { font-weight: 700; }
#plg-chat .leading-tight { line-height: 1.25; }
#plg-chat .leading-snug { line-height: 1.375; }

/* ---- Misc ---- */
#plg-chat .overflow-hidden { overflow: hidden; }
#plg-chat .overflow-y-auto { overflow-y: auto; }
#plg-chat .object-contain { object-fit: contain; }
#plg-chat .whitespace-pre-wrap { white-space: pre-wrap; }
#plg-chat .break-words { overflow-wrap: break-word; }
#plg-chat .cursor-pointer { cursor: pointer; }
#plg-chat .pointer-events-none { pointer-events: none; }
#plg-chat .opacity-0 { opacity: 0; }
#plg-chat .outline-none { outline: 2px solid transparent; outline-offset: 2px; }
#plg-chat .placeholder-grayt::placeholder { color: #6B7280; opacity: 1; }
#plg-chat .translate-y-2 { transform: translateY(0.5rem); }

/* Link trong câu trả lời của AI */
#plg-chat .plg-link { color: #FF8A23; text-decoration: underline; word-break: break-word; overflow-wrap: anywhere; }
#plg-chat .plg-link:hover { color: #FF7A05; }

/* ---- Transition ---- */
#plg-chat .transition {
	transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s;
}
#plg-chat .duration-300 { transition-duration: .3s; }

/* ---- Hover / active / focus ---- */
#plg-chat .hover\:bg-white\/15:hover { background-color: rgba(255,255,255,.15); }
#plg-chat .hover\:bg-bordr\/40:hover { background-color: rgba(234,236,239,.4); }
#plg-chat .hover\:bg-bgsoft:hover { background-color: #F7F8FC; }
#plg-chat .hover\:brightness-105:hover { filter: brightness(1.05); }
#plg-chat .hover\:brightness-110:hover { filter: brightness(1.1); }
#plg-chat .active\:scale-95:active { transform: scale(.95); }

/* ---- Ring (đúng cơ chế Tailwind: compose với shadow qua box-shadow) ---- */
#plg-chat .ring-1 {
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
#plg-chat .ring-bordr { --tw-ring-color: #EAECEF; }
#plg-chat .focus\:ring-2:focus {
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
#plg-chat .focus\:ring-orange\/50:focus { --tw-ring-color: rgba(255,138,35,.5); }

/* ---- Shadows ---- */
#plg-chat .shadow-2xl {
	--tw-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
#plg-chat .shadow-softer {
	--tw-shadow: 0 6px 20px rgba(0,0,0,.05);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
#plg-chat .shadow-navy {
	--tw-shadow: 0 20px 50px rgba(8,28,69,.25);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* ---- Gradients ---- */
#plg-chat .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
#plg-chat .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
#plg-chat .from-navy {
	--tw-gradient-from: #081C45 var(--tw-gradient-from-position);
	--tw-gradient-to: rgba(8,28,69,0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
#plg-chat .to-navy2 { --tw-gradient-to: #0E2A5C var(--tw-gradient-to-position); }
#plg-chat .from-orange {
	--tw-gradient-from: #FF8A23 var(--tw-gradient-from-position);
	--tw-gradient-to: rgba(255,138,35,0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
#plg-chat .to-orange2 { --tw-gradient-to: #FF7A05 var(--tw-gradient-to-position); }
#plg-chat .from-\[\#4F74E0\] {
	--tw-gradient-from: #4F74E0 var(--tw-gradient-from-position);
	--tw-gradient-to: rgba(79,116,224,0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
#plg-chat .to-\[\#2F4FB5\] { --tw-gradient-to: #2F4FB5 var(--tw-gradient-to-position); }

/* ---- Animations ---- */
/* robot nháy mắt (chỉ co theo trục Y, đứng yên tại chỗ nhờ transform-box: fill-box) */
@keyframes plg-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
#plg-chat .robot-eye { transform-box: fill-box; transform-origin: center; animation: plg-blink 4s infinite; }

/* nút nổi nhún nhẹ thu hút (dừng khi hover) */
@keyframes plg-bob { 0%, 84%, 100% { transform: translateY(0); } 90% { transform: translateY(-7px); } 95% { transform: translateY(-3px); } }
#plg-chat .chat-fab { animation: plg-bob 5s ease-in-out infinite; }
#plg-chat .chat-fab:hover { animation-play-state: paused; }

/* chấm “đang gõ”: . → .. → ... */
@keyframes plg-dots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } 100% { content: '.'; } }
#plg-chat .plg-dots::after { content: '.'; animation: plg-dots 1.5s steps(1, end) infinite; }

/* chấm typing nảy */
@keyframes plg-bounce {
	0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
	50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
#plg-chat .animate-bounce { animation: plg-bounce 1s infinite; }

@media (prefers-reduced-motion: reduce) {
	#plg-chat .robot-eye,
	#plg-chat .chat-fab,
	#plg-chat .animate-bounce { animation: none; }
}

/* iOS Safari tự phóng to trang khi focus input có font-size < 16px.
   Ép ô nhập ≥ 16px trên mobile để KHÔNG bị zoom (desktop giữ 14px cho gọn). */
@media (max-width: 640px) {
	#plg-chat #plg-chat-input { font-size: 16px; }
}

/* Nút đánh giá tin nhắn (👍/👎) — icon SVG, bố trí gọn đẹp */
#plg-chat .plg-fb { display: flex; align-items: center; gap: 6px; padding-left: 2px; margin-top: -2px; }
#plg-chat .plg-fb-btn {
	display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
	border: 1px solid #EAECEF; border-radius: 9px; background: #fff; color: #9AA1AC;
	cursor: pointer; transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
#plg-chat .plg-fb-btn svg { width: 15px; height: 15px; display: block; }
#plg-chat .plg-fb-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -5px rgba(8,28,69,.25); }
#plg-chat .plg-fb-up:hover { color: #16A34A; border-color: #86EFAC; background: #F0FDF4; }
#plg-chat .plg-fb-down:hover { color: #EF4444; border-color: #FCA5A5; background: #FEF2F2; }
#plg-chat .plg-fb-btn:active { transform: scale(.92); }
#plg-chat .plg-fb-up.is-on { color: #fff; background: #16A34A; border-color: #16A34A; }
#plg-chat .plg-fb-down.is-on { color: #fff; background: #EF4444; border-color: #EF4444; }
#plg-chat .plg-fb-done { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: #6B7280; padding-left: 1px; }
#plg-chat .plg-fb-done svg { width: 13px; height: 13px; color: #16A34A; display: block; }

/* Nút "Trả lời" (trích dẫn) trong hàng đánh giá */
#plg-chat .plg-fb-reply:hover { color: #2F4FB5; border-color: #BFD0F5; background: #EFF3FE; }

/* Thanh "đang trả lời tin nhắn nào" phía trên ô nhập */
#plg-chat .plg-reply {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px; border-top: 1px solid #EAECEF; background: #F7F8FC;
}
#plg-chat .plg-reply.hidden { display: none; }
#plg-chat .plg-reply-ic { width: 16px; height: 16px; color: #2F4FB5; flex: 0 0 auto; }
#plg-chat .plg-reply-txt {
	flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #4B5563;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	border-left: 2px solid #2F4FB5; padding-left: 8px;
}
#plg-chat .plg-reply-x {
	display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
	border: 0; border-radius: 7px; background: transparent; color: #6B7280; cursor: pointer; padding: 0;
	transition: background-color .15s ease, color .15s ease;
}
#plg-chat .plg-reply-x:hover { background: #EAECEF; color: #081C45; }
#plg-chat .plg-reply-x svg { width: 14px; height: 14px; }

/* Trích dẫn bên trong bong bóng tin của khách (nền navy) */
#plg-chat .plg-quote {
	margin-bottom: 5px; padding: 4px 8px; border-left: 2px solid rgba(255,255,255,.55);
	background: rgba(255,255,255,.14); border-radius: 6px;
	font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,.82);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Ghi chú quyền riêng tư dưới ô nhập */
#plg-chat .plg-consent{margin:0;padding:2px 16px 10px;font-size:10.5px;line-height:1.4;color:#9AA1AC;background:#fff;text-align:center}
#plg-chat .plg-consent a{color:#6B7280;text-decoration:underline}
#plg-chat .plg-consent a:hover{color:#2F4FB5}