/* ===== ARIA5 ASSISTANT WIDGET CSS START ===== */

/*
 * Floating chat widget. Sits ABOVE the floating WhatsApp button
 * (.arena5-floating-whatsapp: right 18px / bottom 22px / z-index 80).
 * Night styling is the base; html.theme-day overrides below (additive,
 * same pattern as the Team Orders day block).
 */

/*
 * The launcher sits at the TOP of the floating right-side stack:
 * WhatsApp (bottom 22) -> floating cart (bottom 154, 46px tall) -> assistant.
 * The mascot "buddy" peeks above the launcher.
 */
.aria5-assistant {
	position: fixed;
	right: 18px;
	bottom: calc(208px + env(safe-area-inset-bottom, 0px));
	z-index: 81;
	font-family: var(--arena5-font-main, 'Rubik', sans-serif);
}

@media (max-width: 430px) {
	.aria5-assistant {
		bottom: calc(184px + env(safe-area-inset-bottom, 0px));
	}
}

.aria5-assistant-buddy {
	position: absolute;
	right: -4px;
	bottom: 46px;
	width: 76px;
	pointer-events: none;
}

.aria5-assistant-buddy-figure {
	display: block;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
	filter: drop-shadow(0 6px 12px rgba(7, 20, 38, 0.28));
	animation: aria5-assistant-buddy-idle 5.5s ease-in-out infinite;
}

.aria5-assistant-buddy-figure img,
.aria5-assistant-buddy-figure svg {
	display: block;
	width: auto;
	height: 96px;
	max-width: 90px;
	object-fit: contain;
	margin-left: auto;
}

.aria5-assistant-buddy-figure:hover {
	animation: aria5-assistant-buddy-cheer 0.7s ease-in-out;
}

.aria5-assistant--cheer .aria5-assistant-buddy-figure {
	animation: aria5-assistant-buddy-cheer 0.7s ease-in-out 2;
}

@keyframes aria5-assistant-buddy-idle {
	0%, 86%, 100% { transform: translateY(0); }
	90% { transform: translateY(-7px); }
	94% { transform: translateY(0); }
	97% { transform: translateY(-3px); }
}

@keyframes aria5-assistant-buddy-cheer {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	30% { transform: translateY(-10px) rotate(-6deg); }
	60% { transform: translateY(-4px) rotate(5deg); }
}

.aria5-assistant-buddy-bubble {
	position: absolute;
	right: 84px;
	bottom: 26px;
	width: max-content;
	max-width: 230px;
	padding: 10px 13px;
	border-radius: 14px;
	border-bottom-right-radius: 4px;
	background: #ffffff;
	color: #071426;
	font-size: 13.5px;
	line-height: 1.4;
	box-shadow: 0 10px 28px rgba(7, 20, 38, 0.22);
	pointer-events: auto;
	cursor: pointer;
}

.aria5-assistant-buddy-bubble::after {
	content: '';
	position: absolute;
	right: -7px;
	bottom: 10px;
	border-style: solid;
	border-width: 7px 0 7px 9px;
	border-color: transparent transparent transparent #ffffff;
}

.aria5-assistant-buddy-bubble[hidden] {
	display: none;
}

/* While the panel is open the buddy peeks over its top edge. */
.aria5-assistant[data-open='1'] .aria5-assistant-buddy {
	position: fixed;
	right: 30px;
	bottom: calc(96px + min(540px, 100vh - 160px) - 16px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 520px) {
	.aria5-assistant[data-open='1'] .aria5-assistant-buddy {
		right: 24px;
		bottom: calc(88px + min(70vh, 520px) - 16px + env(safe-area-inset-bottom, 0px));
	}
}

.aria5-assistant-launcher {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-left: auto;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.24), transparent 36%), #0f62fe;
	color: #ffffff;
	box-shadow:
		0 16px 38px rgba(15, 98, 254, 0.32),
		0 0 0 7px rgba(15, 98, 254, 0.12);
	transition: transform 0.15s ease;
}

.aria5-assistant-launcher:hover {
	transform: scale(1.06);
}

/* display:flex below would otherwise override the hidden attribute */
.aria5-assistant-panel[hidden] {
	display: none;
}

.aria5-assistant-panel {
	position: fixed;
	right: 18px;
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	width: min(370px, calc(100vw - 32px));
	height: min(540px, calc(100vh - 160px));
	overflow: hidden;
	border-radius: 18px;
	background: #0b1526;
	color: #e8eefc;
	border: 1px solid rgba(120, 150, 200, 0.28);
	box-shadow: 0 26px 60px rgba(2, 8, 20, 0.55);
}

.aria5-assistant-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	background: rgba(15, 98, 254, 0.16);
	border-bottom: 1px solid rgba(120, 150, 200, 0.22);
}

.aria5-assistant-title {
	font-weight: 600;
	font-size: 15px;
}

.aria5-assistant-header-actions {
	display: flex;
	gap: 6px;
}

.aria5-assistant-close,
.aria5-assistant-clear {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.aria5-assistant-close:hover,
.aria5-assistant-clear:hover {
	background: rgba(255, 255, 255, 0.16);
}

.aria5-assistant-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aria5-assistant-msg {
	max-width: 85%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: break-word;
}

.aria5-assistant-msg-user {
	align-self: flex-end;
	background: #0f62fe;
	color: #ffffff;
	border-bottom-right-radius: 5px;
}

.aria5-assistant-msg-assistant {
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.08);
	border-bottom-left-radius: 5px;
}

.aria5-assistant-msg a {
	color: #7fb0ff;
	text-decoration: underline;
	word-break: break-all;
}

.aria5-assistant-typing {
	opacity: 0.65;
	font-style: italic;
}

.aria5-assistant-msg img {
	display: block;
	max-width: 100%;
	border-radius: 10px;
	margin: 6px 0;
	background: #ffffff;
}

.aria5-assistant-upload-button {
	display: block;
	width: 100%;
	border: 1px dashed rgba(127, 176, 255, 0.65);
	border-radius: 10px;
	padding: 10px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: rgba(15, 98, 254, 0.14);
	color: inherit;
}

.aria5-assistant-upload-button:hover {
	background: rgba(15, 98, 254, 0.24);
}

.aria5-assistant-upload-button:disabled {
	opacity: 0.55;
	cursor: default;
}

.aria5-assistant-upload-status {
	font-size: 12.5px;
	opacity: 0.8;
	margin-top: 6px;
}

.aria5-assistant-upload-status:empty {
	display: none;
}

html.theme-day .aria5-assistant-upload-button {
	border-color: rgba(15, 98, 254, 0.45);
	background: rgba(15, 98, 254, 0.08);
}

html.theme-day .aria5-assistant-upload-button:hover {
	background: rgba(15, 98, 254, 0.16);
}

.aria5-assistant-form {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid rgba(120, 150, 200, 0.22);
	background: rgba(255, 255, 255, 0.03);
}

.aria5-assistant-input {
	flex: 1;
	resize: none;
	border: 1px solid rgba(120, 150, 200, 0.3);
	border-radius: 10px;
	padding: 8px 11px;
	font: inherit;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
}

.aria5-assistant-input:focus {
	outline: 2px solid rgba(15, 98, 254, 0.55);
	outline-offset: 1px;
}

.aria5-assistant-send {
	border: none;
	border-radius: 10px;
	padding: 8px 15px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	background: #0f62fe;
	color: #ffffff;
}

.aria5-assistant-send:disabled {
	opacity: 0.55;
	cursor: default;
}

/* display:flex below would otherwise override the hidden attribute */
.aria5-assistant-mic[hidden] {
	display: none;
}

.aria5-assistant-mic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	border: 1px solid rgba(120, 150, 200, 0.3);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: inherit;
	cursor: pointer;
}

.aria5-assistant-mic:hover {
	background: rgba(255, 255, 255, 0.14);
}

.aria5-assistant-mic--listening {
	background: #d64550;
	border-color: #d64550;
	color: #ffffff;
	animation: aria5-assistant-mic-pulse 1.4s ease-in-out infinite;
}

@keyframes aria5-assistant-mic-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 80, 0.45); }
	50% { box-shadow: 0 0 0 8px rgba(214, 69, 80, 0); }
}

html.theme-day .aria5-assistant-mic {
	background: #ffffff;
	border-color: rgba(7, 20, 38, 0.18);
}

html.theme-day .aria5-assistant-mic:hover {
	background: #eef4ff;
}

html.theme-day .aria5-assistant-mic--listening {
	background: #d64550;
	border-color: #d64550;
	color: #ffffff;
}

/* ----- Day theme overrides (additive; mirrors base.css html.theme-day palette) ----- */

html.theme-day .aria5-assistant-panel {
	background: #ffffff;
	color: #071426;
	border-color: rgba(7, 20, 38, 0.12);
	box-shadow: 0 26px 60px rgba(7, 20, 38, 0.18);
}

html.theme-day .aria5-assistant-header {
	background: #eef4ff;
	border-bottom-color: rgba(7, 20, 38, 0.1);
}

html.theme-day .aria5-assistant-close,
html.theme-day .aria5-assistant-clear {
	background: rgba(7, 20, 38, 0.06);
}

html.theme-day .aria5-assistant-close:hover,
html.theme-day .aria5-assistant-clear:hover {
	background: rgba(7, 20, 38, 0.12);
}

html.theme-day .aria5-assistant-msg-assistant {
	background: #f1f5fd;
	color: #071426;
}

html.theme-day .aria5-assistant-msg a {
	color: #0f62fe;
}

html.theme-day .aria5-assistant-form {
	background: #f8faff;
	border-top-color: rgba(7, 20, 38, 0.1);
}

html.theme-day .aria5-assistant-input {
	background: #ffffff;
	color: #071426;
	border-color: rgba(7, 20, 38, 0.18);
}

/* ----- Mobile ----- */

@media (max-width: 520px) {
	.aria5-assistant {
		bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	}

	.aria5-assistant-panel {
		position: fixed;
		right: 12px;
		left: 12px;
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
		width: auto;
		height: min(70vh, 520px);
	}
}

/* ===== ARIA5 ASSISTANT WIDGET CSS END ===== */