/* HYVAI — widget styling
   Sits on the RIGHT, directly above the floating WhatsApp button, and shares
   its exact size and resting style so the two read as one control stack.
   WhatsApp reveals its brand green on hover; the assistant reveals blue. */

.hya-root {
	position: fixed;
	right: 24px;
	bottom: 164px; /* WhatsApp bottom 96 + its 52px + 16px gap */
	z-index: 341;
	font-family: "Galano Grotesque", -apple-system, "Segoe UI", sans-serif;
}

/* ---------- launcher ---------- */

.hya-fab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	/* Same shape, size and resting colour as the WhatsApp button below it.
	   Only the hover colour differs: blue here, green there. */
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 50%;
	background-color: #0C0C0C;
	color: #FFFFFF;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

.hya-fab:hover {
	background-color: #2F6BFF;
	border-color: #2F6BFF;
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(47, 107, 255, .42);
}

.hya-root.hya-open .hya-fab {
	background-color: #2F6BFF;
	border-color: #2F6BFF;
}

/* ---------- panel ---------- */

.hya-panel {
	position: absolute;
	right: 0;
	bottom: 68px;
	display: none;
	flex-direction: column;
	width: min(calc(100vw - 48px), 400px);
	height: min(calc(100vh - 140px), 620px);
	background-color: #FFFFFF;
	border: 1px solid rgba(12, 12, 12, .12);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
	overflow: hidden;
}

.hya-root.hya-open .hya-panel {
	display: flex;
}

.hya-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background-color: #0C0C0C;
	color: #FFFFFF;
}

.hya-titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hya-titles strong {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.hya-titles span {
	font-size: 12px;
	color: rgba(255, 255, 255, .7);
}

.hya-close {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: .75;
}

.hya-close:hover { opacity: 1; }

/* ---------- messages ---------- */

.hya-log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: #FAFAFA;
}

.hya-msg { display: flex; }
.hya-msg--user { justify-content: flex-end; }

.hya-bubble {
	max-width: 82%;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

.hya-msg--bot .hya-bubble {
	background-color: #FFFFFF;
	border: 1px solid rgba(12, 12, 12, .1);
	color: #0C0C0C;
}

.hya-msg--user .hya-bubble {
	background-color: #0C0C0C;
	color: #FFFFFF;
}

.hya-typing .hya-bubble { opacity: .55; letter-spacing: .2em; }

/* ---------- product cards ---------- */

.hya-products {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hya-product {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "name price" "stock price";
	gap: 2px 12px;
	padding: 12px 14px;
	background-color: #FFFFFF;
	border: 1px solid rgba(12, 12, 12, .12);
	text-decoration: none;
	color: #0C0C0C;
	transition: border-color .2s ease, transform .2s ease;
}

.hya-product:hover {
	border-color: #0C0C0C;
	transform: translateX(2px);
}

.hya-product__name  { grid-area: name;  font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hya-product__price { grid-area: price; font-size: 13.5px; font-weight: 600; align-self: center; white-space: nowrap; }
.hya-product__stock { grid-area: stock; font-size: 11.5px; color: rgba(12, 12, 12, .55); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- suggested questions ---------- */

.hya-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hya-chip {
	padding: 8px 12px;
	border: 1px solid rgba(12, 12, 12, .18);
	background-color: transparent;
	color: #0C0C0C;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.hya-chip:hover {
	background-color: #0C0C0C;
	color: #FFFFFF;
}

/* ---------- composer ---------- */

.hya-form {
	display: flex;
	gap: 0;
	border-top: 1px solid rgba(12, 12, 12, .12);
	background-color: #FFFFFF;
}

.hya-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 15px 16px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: #0C0C0C;
}

.hya-input:focus { outline: none; }

.hya-send {
	flex: 0 0 auto;
	padding: 0 22px;
	border: 0;
	background-color: #0C0C0C;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .2s ease;
}

.hya-send:hover { opacity: .85; }

/* ---------- mobile ---------- */

@media (max-width: 768px) {
	/* WhatsApp on mobile: right 16, bottom 84, 48px tall */
	.hya-root { right: 16px; bottom: 148px; }

	.hya-fab { width: 48px; height: 48px; }

	.hya-panel {
		width: calc(100vw - 32px);
		height: min(calc(100vh - 120px), 560px);
		bottom: 62px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hya-fab,
	.hya-product { transition: none; }
}