/**
 * EML Chatbot Icon — standalone interactive floating chatbot launcher.
 *
 * Self-contained: zero dependencies, every class/keyframe prefixed
 * `eml-chi-` so it can be enqueued on ANY page without collisions.
 * Pairs with assets/js/eml-chatbot-icon.js (which self-injects the markup).
 *
 * Re-skin: override the four gradient custom properties on .eml-chi-stage.
 */

.eml-chi-stage {
	/* skin — đổi 4 màu này là đổi cả con bot (brand insights series: navy/cyan) */
	--eml-chi-g1: #69d0f7;   /* cyan (đỉnh đầu) */
	--eml-chi-g2: #3489ee;   /* navy brand */
	--eml-chi-g3: #004392;   /* navy */
	--eml-chi-g4: #69d0f7;   /* cyan (bụng) */
	--eml-chi-face-bg: #021c3f;
	--eml-chi-eye-core: #bdf3ff;

	position: fixed;
	right: 26px;
	bottom: 26px;
	width: 170px;
	height: 195px;
	perspective: 620px;              /* không gian 3D cho con bot */
	z-index: 99999;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	font-size: 0;                    /* neuter whitespace between inline blocks */
}

.eml-chi-stage:focus-visible {
	border-radius: 24px;
	box-shadow: 0 0 0 3px rgba(105, 208, 247, 0.6);
}

/* Lớp nhún khi vẫy tay (tách lớp để không đụng transform của lớp khác) */
.eml-chi-float {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	animation: eml-chi-float 3.2s ease-in-out infinite;
}
.eml-chi-hop {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

@keyframes eml-chi-float {        /* idle: tự do bồng bềnh */
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

/* THÂN BOT — --hx/--hy do JS ghi mỗi khung hình (đã lerp mượt) */
.eml-chi-bot {
	--hx: 0;
	--hy: 0;
	position: relative;
	width: 118px;
	height: 150px;
	margin: 8px auto 0;
	transform-style: preserve-3d;
	/* thân nghiêng ÍT hơn đầu → chênh lệch góc tạo cảm giác 3D thật
	 * rotateY(+) = quay mặt sang phải người xem; rotateX(+) = ngửa lên */
	transform: rotateY(calc(var(--hx) * 13deg)) rotateX(calc(var(--hy) * -9deg));
}

/* Skin chung: gradient tím→indigo→hồng */
.eml-chi-skin {
	background: linear-gradient(140deg, var(--eml-chi-g1) 0%, var(--eml-chi-g2) 42%, var(--eml-chi-g3) 68%, var(--eml-chi-g4) 100%);
	position: relative;
}
.eml-chi-skin::after {            /* vệt bóng ánh sáng trên trái */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(120% 85% at 28% 10%, rgba(255, 255, 255, 0.38), transparent 55%);
	pointer-events: none;
}

/* ĐẦU — nghiêng NHIỀU hơn thân */
.eml-chi-head {
	position: absolute;
	top: 0;
	left: 50%;
	width: 92px;
	height: 76px;
	margin-left: -46px;
	border-radius: 27px;
	transform-style: preserve-3d;
	transform: translateZ(24px) rotateY(calc(var(--hx) * 10deg)) rotateX(calc(var(--hy) * -8deg));
	box-shadow: 0 10px 24px rgba(4, 8, 26, 0.45);
}

/* Kính mặt */
.eml-chi-face {
	position: absolute;
	left: 50%;
	top: 16px;
	width: 66px;
	height: 46px;
	margin-left: -33px;
	border-radius: 19px;
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(105, 208, 247, 0.25), transparent 60%),
		linear-gradient(160deg, #0a2f66, var(--eml-chi-face-bg));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.16),
		inset 0 6px 18px rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	transform: translateZ(10px);
}

/* MẮT — .eml-chi-eye-track nhận hướng nhìn (--hx/--hy), .eml-chi-eye riêng để blink */
.eml-chi-eye-track {
	transform: translate(calc(var(--hx) * 5.5px), calc(var(--hy) * 4.5px));
}
.eml-chi-eye {
	width: 14px;
	height: 21px;
	border-radius: 7px;
	background: radial-gradient(60% 50% at 38% 30%, #ffffff 0%, var(--eml-chi-eye-core) 45%, rgba(105, 208, 247, 0.95) 100%);
	box-shadow:
		0 0 10px rgba(147, 220, 255, 0.95),
		0 0 26px rgba(105, 208, 247, 0.55);
	transition: transform 0.09s ease;
}
.eml-chi-blink .eml-chi-eye {
	transform: scaleY(0.08);
}
.eml-chi-pupil {
	display: block;
	position: absolute;
	left: 4px;
	top: 4px;
	width: 6px;
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.95);
	transform: translate(calc(var(--hx) * 3px), calc(var(--hy) * 2.5px));
}

/* Anten — sáng nhấp nháy, rộn ràng hơn khi vẫy tay/mở chat */
.eml-chi-antenna {
	position: absolute;
	top: -17px;
	left: 50%;
	width: 4px;
	height: 18px;
	margin-left: -2px;
	border-radius: 2px;
	background: linear-gradient(#a8e2fc, var(--eml-chi-g2));
}
.eml-chi-antenna-ball {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, #69d0f7 55%, #013879);
	box-shadow: 0 0 10px rgba(105, 208, 247, 0.9), 0 0 22px rgba(1, 56, 121, 0.5);
	animation: eml-chi-pulse 2.6s ease-in-out infinite;
}
@keyframes eml-chi-pulse {
	0%, 100% { opacity: 0.75; }
	50%      { opacity: 1; }
}
.eml-chi-waving .eml-chi-antenna-ball,
.eml-chi-panel-open .eml-chi-antenna-ball {
	animation-duration: 0.7s;
	box-shadow: 0 0 14px rgba(105, 208, 247, 1), 0 0 34px rgba(105, 208, 247, 0.7);
}

/* Tai hai bên */
.eml-chi-ear {
	position: absolute;
	top: 26px;
	width: 12px;
	height: 26px;
	border-radius: 7px;
}
.eml-chi-ear-l { left: -9px; }
.eml-chi-ear-r { right: -9px; }

/* THÂN dưới */
.eml-chi-body {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100px;
	height: 70px;
	margin-left: -50px;
	border-radius: 30px;
	box-shadow: 0 14px 30px rgba(4, 8, 26, 0.5);
}
.eml-chi-belly {
	position: absolute;
	left: 50%;
	top: 16px;
	width: 46px;
	height: 30px;
	margin-left: -23px;
	border-radius: 16px;
	background: radial-gradient(80% 100% at 50% 25%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.14) 70%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* TAY — khớp quay ở VAI; tay phải là tay vẫy */
.eml-chi-arm {
	position: absolute;
	top: 88px;
	width: 19px;
	height: 40px;
	border-radius: 10px;
	transform-origin: 50% 13%;
	box-shadow: 0 6px 14px rgba(4, 8, 26, 0.35);
}
.eml-chi-arm::after {             /* bàn tay tròn mũm mĩm */
	content: "";
	position: absolute;
	bottom: -4px;
	left: 50%;
	width: 15px;
	height: 15px;
	margin-left: -7.5px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--eml-chi-g1), var(--eml-chi-g4));
	box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.18);
}
.eml-chi-arm-l { left: -2px; transform: rotate(16deg); }
.eml-chi-arm-r { right: -2px; transform: rotate(-16deg); }

/* Vẫy tay: giơ lên rồi lắc trái–phải quanh trục vai, rồi hạ xuống */
@keyframes eml-chi-wave {
	0%   { transform: rotate(-16deg); }
	16%  { transform: rotate(-150deg); }
	32%  { transform: rotate(-118deg); }
	48%  { transform: rotate(-152deg); }
	64%  { transform: rotate(-118deg); }
	80%  { transform: rotate(-150deg); }
	100% { transform: rotate(-16deg); }
}
.eml-chi-waving .eml-chi-arm-r {
	animation: eml-chi-wave 1.1s ease-in-out;
}

@keyframes eml-chi-hop-anim {
	0%   { transform: translateY(0); }
	30%  { transform: translateY(-13px) scale(1.03); }
	60%  { transform: translateY(0) scale(0.99); }
	80%  { transform: translateY(-4px); }
	100% { transform: translateY(0); }
}
.eml-chi-waving .eml-chi-hop {
	animation: eml-chi-hop-anim 0.8s ease-out;
}

/* Bóng đổ dưới đất — co/giãn cùng nhịp float */
.eml-chi-shadow {
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 76px;
	height: 14px;
	margin-left: -38px;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5), transparent 70%);
	animation: eml-chi-shadow-pulse 3.2s ease-in-out infinite;
}
@keyframes eml-chi-shadow-pulse {
	0%, 100% { transform: scale(1); opacity: 0.8; }
	50%      { transform: scale(0.82); opacity: 0.55; }
}

/* BONG BÓNG NGÔN NGỮ */
.eml-chi-bubble {
	position: absolute;
	right: 6px;
	bottom: 240px;
	min-width: 150px;
	padding: 10px 14px;
	background: #ffffff;
	color: #013879;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
	white-space: nowrap;   /* luôn 1 hàng — bubble giãn theo chữ, mũi tên vẫn ghim trục đầu bot */
	border-radius: 14px;
	/* drop-shadow (không box-shadow): bóng ôm CẢ đuôi ::after → 1 khối liền */
	filter: drop-shadow(0 10px 20px rgba(4, 8, 26, 0.45));
	opacity: 0;
	transform: translateY(8px) scale(0.96);
	transform-origin: bottom right;
	transition: opacity 0.22s ease, transform 0.22s ease;
	pointer-events: none;
	z-index: 3; /* vẽ TRÊN lớp 3D của bot (float layer là stacking context) */
}
/* đuôi tam giác nhọn: màu ĐẶC trùng thân + chồng 1px vào mép dưới → không đường nối.
 * right:71px = ghim theo TRỤC ĐẦU BOT (bubble right 6 + 71 + 8 nửa đuôi = 85px = tim bot)
 * → thẳng đầu icon bất kể bubble dài ngắn (bubble ngắn thì cũng ~giữa ô chat) */
.eml-chi-bubble::after {
	content: "";
	position: absolute;
	bottom: -8px;
	right: 71px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 9px solid #ffffff;
}
.eml-chi-bubble.show {
	opacity: 1;
	transform: translateY(0) scale(1);
}
/* Panel đang mở thì nhả bong bóng — không đè lên panel/modal chat */
.eml-chi-stage.eml-chi-panel-open .eml-chi-bubble {
	opacity: 0;
	transform: translateY(8px) scale(0.96);
}

/* Giảm chuyển động (a11y) */
@media (prefers-reduced-motion: reduce) {
	.eml-chi-float,
	.eml-chi-shadow,
	.eml-chi-antenna-ball {
		animation: none;
	}
	.eml-chi-waving .eml-chi-arm-r,
	.eml-chi-waving .eml-chi-hop {
		animation: none;
	}
}

/* Mobile: thu nhỏ con bot */
@media (max-width: 600px) {
	.eml-chi-stage {
		transform: scale(0.82);
		transform-origin: bottom right;
		right: 14px;
		bottom: 14px;
	}
}