/* ---------------------------------------------------------
   Datio Pet — chat estilo WhatsApp (componente aislado).

   A propósito robamos color y formato reales de WhatsApp (no es "una
   inspiración sutil"): fondo tipo papel tapiz, blanco para lo que dice
   Datio Pet, verde para lo que escribe el visitante, cada burbuja con una
   esquina achatada simulando la colita clásica de los chats. El resto del
   sitio sigue con la paleta violeta oscura de marca — este bloque es la
   excepción deliberada, el "vos ya sabés usar esto" de WhatsApp.
   --------------------------------------------------------- */

.datio-dialogo {
	position: relative;
	width: 100%;
	min-height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.datio-dialogo[hidden] {
	display: none;
}

.datio-dialogo__close {
	position: sticky;
	top: 8px;
	align-self: flex-end;
	margin: 0 8px 0 0;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #ffffff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.datio-dialogo__bubbles {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 4px 16px 24px;
}

/* Datio Pet (recibido): izquierda, blanco, colita abajo-izquierda. */
.datio-dialogo__bubble {
	position: relative;
	max-width: min(78%, 420px);
	align-self: flex-start;
	background: #ffffff;
	color: #111b21;
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: 500;
	padding: 8px 9px 20px 10px;
	border-radius: 8px 8px 8px 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(6px);
}

/* El visitante (enviado): derecha, verde WhatsApp, colita abajo-derecha. */
.datio-dialogo__bubble--usuario {
	align-self: flex-end;
	background: #d9fdd3;
	color: #111b21;
	border-radius: 8px 8px 2px 8px;
}

.datio-dialogo__bubble.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-dialogo__bubble {
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
}

.datio-dialogo__bubble-hora {
	position: absolute;
	right: 10px;
	bottom: 6px;
	font-size: 10.5px;
	font-weight: 400;
	color: rgba(17, 27, 33, 0.45);
	display: flex;
	align-items: center;
	gap: 3px;
}

.datio-dialogo__bubble--usuario .datio-dialogo__bubble-hora {
	color: rgba(17, 27, 33, 0.5);
}

.datio-dialogo__bubble-check {
	color: #53bdeb;
	font-size: 12px;
}

.datio-dialogo__bubble code {
	background: rgba(0, 0, 0, 0.08);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 0.9em;
}

/* Chips de respuesta rápida — no es un patrón nativo de WhatsApp, pero es
   el que usan los bots de WhatsApp Business, así que sigue leyéndose como
   parte de la misma conversación. */
.datio-dialogo__options {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	max-width: min(90%, 460px);
	align-self: flex-start;
	margin-top: 2px;
}

.datio-dialogo__option {
	display: block;
	text-align: left;
	background: #ffffff;
	color: #008069;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	border: 1.5px solid #00a884;
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(6px);
}

.datio-dialogo__option.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-dialogo__option {
		transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease, color 0.15s ease;
	}
}

.datio-dialogo__option:hover,
.datio-dialogo__option:focus-visible {
	background: #00a884;
	color: #ffffff;
}

.datio-dialogo__option:disabled {
	cursor: default;
	opacity: 0.5 !important;
}

/* Fila de "escribir" — imita la barra de composición de WhatsApp, pero
   anclada a este paso puntual del flujo (no una barra fija abajo de toda
   la pantalla: el guion pre-armado ya sabe qué pregunta va después). */
.datio-dialogo__input-row {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: min(90%, 420px);
	align-self: flex-end;
	opacity: 0;
	transform: translateY(6px);
}

.datio-dialogo__input-row.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-dialogo__input-row {
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
}

.datio-dialogo__input-row input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	padding: 11px 16px;
	border-radius: 999px;
	border: none;
	background: #ffffff;
	color: #111b21;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.datio-dialogo__input-row input::placeholder {
	color: rgba(17, 27, 33, 0.45);
}

.datio-dialogo__input-row input:disabled {
	opacity: 0.6;
}

.datio-dialogo__input-row button {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	border-radius: 50%;
	border: none;
	background: #00a884;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.datio-dialogo__input-row button:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Resumen final: mensaje editable antes de mandarlo por WhatsApp de
   verdad — a propósito se ve como una tarjeta de "mensaje a punto de
   enviar" (el propio wa.me hace el resto). */
.datio-dialogo__resumen {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	max-width: min(90%, 420px);
	align-self: flex-end;
	background: #ffffff;
	padding: 10px;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(6px);
}

.datio-dialogo__resumen.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.datio-dialogo__resumen {
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
}

.datio-dialogo__resumen textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 13px;
	line-height: 1.4;
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid #d1d7db;
	background: #f7f8f9;
	color: #111b21;
	resize: vertical;
}

.datio-dialogo__resumen button {
	align-self: flex-end;
	font: inherit;
	font-weight: 800;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 999px;
	border: none;
	background: #25d366;
	color: #ffffff;
	cursor: pointer;
}

/* Input de texto libre (Datio Pet IA) — mismo lenguaje visual que el resto
   del chat: input redondeado blanco + botón circular verde de enviar. */
.datio-pet-chat__input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 14px;
	padding: 11px 16px;
	border-radius: 999px;
	border: none;
	background: #ffffff;
	color: #111b21;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.datio-pet-chat__input::placeholder {
	color: rgba(17, 27, 33, 0.45);
}

.datio-pet-chat__input:disabled {
	opacity: 0.6;
}

.datio-pet-chat__send {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	font-size: 17px;
	border-radius: 50%;
	border: none;
	background: #00a884;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.datio-pet-chat__send:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Indicador de "escribiendo..." — misma burbuja blanca de Datio Pet, con
   tres puntos que rebotan en cascada en vez de texto. */
.datio-dialogo__bubble--typing {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 12px 14px;
}

.datio-dialogo__bubble--typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(17, 27, 33, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
	.datio-dialogo__bubble--typing span {
		animation: datio-dialogo-typing 1.1s ease-in-out infinite;
	}
	.datio-dialogo__bubble--typing span:nth-child(2) {
		animation-delay: 0.15s;
	}
	.datio-dialogo__bubble--typing span:nth-child(3) {
		animation-delay: 0.3s;
	}
}

@keyframes datio-dialogo-typing {
	0%, 60%, 100% {
		transform: translateY(0);
		opacity: 0.5;
	}
	30% {
		transform: translateY(-4px);
		opacity: 1;
	}
}

@media (max-width: 480px) {
	.datio-dialogo__bubbles {
		padding: 4px 12px 20px;
	}
}