:root {
	--olivia-blue: #1e6fff;
	--olivia-neon: #00d9ff;
	--olivia-deep: #001233;
	--olivia-panel-bg: rgba(8, 14, 28, 0.92);
	--olivia-text-size: 14px;
}

#olivia-bot-widget {
	position: fixed;
	right: 19px;
	bottom: 19px;
	z-index: 9999;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 8px;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#olivia-bot-widget .olivia-bot-fab {
	position: relative;
	width: 43px;
	height: 43px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(0, 217, 255, 0.55);
	background: radial-gradient(circle at 32% 30%, var(--olivia-blue), var(--olivia-deep) 72%);
	box-shadow:
		0 0 9px 1px rgba(0, 153, 255, 0.55),
		0 0 20px 4px rgba(0, 153, 255, 0.30),
		inset 0 0 8px rgba(0, 217, 255, 0.35);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: olivia-bot-pulse 2.6s ease-in-out infinite;
	transition: transform .2s ease;
}

#olivia-bot-widget .olivia-bot-fab:hover {
	transform: scale(1.08);
}

#olivia-bot-widget .olivia-bot-orbit {
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid transparent;
	border-top-color: var(--olivia-neon);
	border-right-color: var(--olivia-neon);
	animation: olivia-bot-spin 3s linear infinite;
}

#olivia-bot-widget .olivia-bot-core {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--olivia-neon);
	box-shadow: 0 0 5px 1px var(--olivia-neon);
}

@keyframes olivia-bot-pulse {
	0%, 100% {
		box-shadow:
			0 0 9px 1px rgba(0, 153, 255, 0.55),
			0 0 20px 4px rgba(0, 153, 255, 0.30),
			inset 0 0 8px rgba(0, 217, 255, 0.35);
	}
	50% {
		box-shadow:
			0 0 12px 3px rgba(0, 217, 255, 0.9),
			0 0 30px 7px rgba(0, 153, 255, 0.55),
			inset 0 0 11px rgba(0, 217, 255, 0.6);
	}
}

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

/*
 * Tamaño del panel: en mobile ocupa casi todo el ancho disponible y una parte
 * generosa del alto de la pantalla; en desktop (>= 600px) crece a un tamaño
 * fijo mayor, pensado para sostener una conversación real con varios turnos.
 */
#olivia-bot-widget .olivia-bot-panel {
	display: none;
	flex-direction: column;
	width: min(92vw, 360px);
	max-height: min(75vh, 480px);
	border-radius: 14px;
	border: 1px solid rgba(0, 217, 255, 0.35);
	background: var(--olivia-panel-bg);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 0 16px rgba(0, 153, 255, 0.25), 0 6px 22px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

@media (min-width: 600px) {
	#olivia-bot-widget .olivia-bot-panel {
		width: 400px;
		max-height: 600px;
	}
}

#olivia-bot-widget .olivia-bot-panel.is-open {
	display: flex;
}

#olivia-bot-widget .olivia-bot-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(0, 217, 255, 0.2);
	background: linear-gradient(180deg, rgba(0, 153, 255, 0.08), transparent);
}

#olivia-bot-widget .olivia-bot-avatar {
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex-shrink: 0;
	background: radial-gradient(circle at 32% 30%, var(--olivia-blue), var(--olivia-deep) 72%);
	box-shadow: 0 0 6px 1px rgba(0, 153, 255, 0.6);
}

#olivia-bot-widget .olivia-bot-avatar::after {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: var(--olivia-neon);
	box-shadow: 0 0 4px 1px var(--olivia-neon);
}

#olivia-bot-widget .olivia-bot-title {
	margin: 0;
	color: #eaf7ff;
	font-size: 14px;
	font-weight: 600;
}

#olivia-bot-widget .olivia-bot-status-row {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 2px;
	color: #7fd8ff;
	font-size: 11px;
}

#olivia-bot-widget .olivia-bot-status-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #37e6a0;
	box-shadow: 0 0 4px 1px #37e6a0;
	animation: olivia-bot-blink 1.8s ease-in-out infinite;
}

@keyframes olivia-bot-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

#olivia-bot-widget .olivia-bot-messages {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	overflow-y: auto;
	font-size: var(--olivia-text-size);
	line-height: 1.45;
}

#olivia-bot-widget .olivia-bot-message {
	max-width: 85%;
	padding: 9px 13px;
	border-radius: 13px;
	font-size: inherit;
}

#olivia-bot-widget .olivia-bot-message--bot {
	align-self: flex-start;
	border: 1px solid rgba(0, 217, 255, 0.22);
	border-radius: 3px 13px 13px 13px;
	background: rgba(255, 255, 255, 0.04);
	color: #d9ecfb;
}

#olivia-bot-widget .olivia-bot-message--user {
	align-self: flex-end;
	border-radius: 13px 3px 13px 13px;
	background: linear-gradient(135deg, var(--olivia-blue), var(--olivia-neon));
	color: #03121f;
	font-weight: 500;
}

#olivia-bot-widget .olivia-bot-whatsapp-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: -4px;
	padding: 9px 15px;
	border-radius: 999px;
	background: #25d366;
	color: #04170d;
	font-size: var(--olivia-text-size);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 0 10px rgba(37, 217, 102, 0.45);
	transition: filter .15s ease, transform .15s ease;
}

#olivia-bot-widget .olivia-bot-whatsapp-link::before {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 0 0 4.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.95 6.45 17.5 2 12.04 2Zm5.8 14.03c-.24.68-1.4 1.32-1.94 1.4-.5.08-1.12.11-1.81-.11-.42-.13-.95-.31-1.64-.6-2.89-1.25-4.78-4.17-4.93-4.36-.14-.2-1.18-1.57-1.18-3 0-1.42.75-2.12 1.02-2.41.26-.28.57-.36.76-.36h.55c.18 0 .42-.07.65.5s.8 1.96.87 2.1c.07.14.11.3.02.49-.09.19-.14.31-.28.47-.14.16-.29.36-.42.48-.14.14-.28.28-.13.55.16.28.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.21 1.37.28.14.44.12.6-.07.16-.19.68-.79.86-1.06.18-.28.36-.23.6-.14.25.09 1.58.75 1.85.88.28.14.46.2.53.32.07.12.07.68-.17 1.36Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.29-1.39a9.9 9.9 0 0 0 4.75 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.95 6.45 17.5 2 12.04 2Zm5.8 14.03c-.24.68-1.4 1.32-1.94 1.4-.5.08-1.12.11-1.81-.11-.42-.13-.95-.31-1.64-.6-2.89-1.25-4.78-4.17-4.93-4.36-.14-.2-1.18-1.57-1.18-3 0-1.42.75-2.12 1.02-2.41.26-.28.57-.36.76-.36h.55c.18 0 .42-.07.65.5s.8 1.96.87 2.1c.07.14.11.3.02.49-.09.19-.14.31-.28.47-.14.16-.29.36-.42.48-.14.14-.28.28-.13.55.16.28.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.21 1.37.28.14.44.12.6-.07.16-.19.68-.79.86-1.06.18-.28.36-.23.6-.14.25.09 1.58.75 1.85.88.28.14.46.2.53.32.07.12.07.68-.17 1.36Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

#olivia-bot-widget .olivia-bot-whatsapp-link:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

#olivia-bot-widget .olivia-bot-contact-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
	margin-top: -2px;
	padding: 12px;
	border: 1px solid rgba(0, 217, 255, 0.3);
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.03);
}

#olivia-bot-widget .olivia-bot-contact-form input {
	padding: 8px 12px;
	border: 1px solid rgba(0, 217, 255, 0.25);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	color: #eaf7ff;
	font-family: inherit;
	font-size: var(--olivia-text-size);
	outline: none;
}

#olivia-bot-widget .olivia-bot-contact-form input::placeholder {
	color: rgba(234, 247, 255, 0.45);
}

#olivia-bot-widget .olivia-bot-contact-form input:focus {
	border-color: var(--olivia-neon);
	box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.15);
}

#olivia-bot-widget .olivia-bot-contact-form input:disabled {
	opacity: .6;
}

#olivia-bot-widget .olivia-bot-contact-form button {
	padding: 8px 14px;
	border: none;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--olivia-blue), var(--olivia-neon));
	color: #03121f;
	font-family: inherit;
	font-size: var(--olivia-text-size);
	font-weight: 600;
	cursor: pointer;
}

#olivia-bot-widget .olivia-bot-contact-form button:disabled {
	opacity: .6;
	cursor: default;
}

#olivia-bot-widget .olivia-bot-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid rgba(0, 217, 255, 0.2);
}

#olivia-bot-widget .olivia-bot-input {
	flex: 1;
	min-width: 0;
	padding: 9px 14px;
	border: 1px solid rgba(0, 217, 255, 0.25);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.04);
	color: #eaf7ff;
	font-family: inherit;
	font-size: var(--olivia-text-size);
	line-height: 1.45;
	outline: none;
}

#olivia-bot-widget .olivia-bot-input::placeholder {
	color: rgba(234, 247, 255, 0.45);
}

#olivia-bot-widget .olivia-bot-input:focus {
	border-color: var(--olivia-neon);
	box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.15);
}

#olivia-bot-widget .olivia-bot-send {
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--olivia-blue), var(--olivia-neon));
	box-shadow: 0 0 6px rgba(0, 153, 255, 0.5);
	color: #03121f;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
	cursor: pointer;
}