/*
 * El widget. Todo bajo .jfsat-chat y con la especificidad mas baja posible: esto entra en
 * sitios con Elementor, y una regla suelta que herede del tema descoloca la caja entera.
 */
.jfsat-chat {
	position: fixed;
	right: 20px;
	bottom: max(var(--jfsat-abajo, 20px), var(--jfsat-reserva-captcha, 0px), env(safe-area-inset-bottom, 0px));
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.45;
}

/* reCAPTCHA puede insertarse después del chat. Reservar su esquina también entonces. */
body:has(.grecaptcha-badge) .jfsat-chat {
	--jfsat-reserva-captcha: 90px;
}

.jfsat-chat .jfsat-burbuja {
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--jfsat-color, #2563eb);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	transition: transform .15s ease;
}
.jfsat-chat .jfsat-burbuja:hover { transform: scale(1.06); }

.jfsat-chat .jfsat-panel {
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 460px;
	max-height: calc(100vh - max(var(--jfsat-abajo, 20px), var(--jfsat-reserva-captcha, 0px), env(safe-area-inset-bottom, 0px)) - 88px);
	max-height: calc(100dvh - max(var(--jfsat-abajo, 20px), var(--jfsat-reserva-captcha, 0px), env(safe-area-inset-bottom, 0px)) - 88px);
	margin-bottom: 12px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.jfsat-chat .jfsat-cabecera {
	background: var(--jfsat-color, #2563eb);
	color: #fff;
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* La cara del agente. Cuadrada de lado fijo y `flex:0 0 auto` para que un nombre largo
   la estruje: sin eso, el avatar se aplasta a un ovalo y se ve roto. */
.jfsat-chat .jfsat-foto {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .22);
	font-size: 15px;
	font-weight: 700;
}
.jfsat-chat .jfsat-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jfsat-chat .jfsat-quien {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.jfsat-chat .jfsat-quien strong,
.jfsat-chat .jfsat-cargo {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jfsat-chat .jfsat-cargo {
	font-size: 12px;
	opacity: .85;
}

/* El aviso de datos: presente pero sin gritar. Si compitiera con la conversacion nadie
   escribiria, y si no estuviera se estaria pidiendo un correo sin decir para que. */
.jfsat-chat .jfsat-nota {
	margin: 0;
	padding: 7px 14px;
	font-size: 11.5px;
	line-height: 1.4;
	color: #6b7280;
	background: #f7f8fa;
	border-top: 1px solid #e9ebee;
}
.jfsat-chat .jfsat-nota a {
	color: inherit;
	text-decoration: underline;
}
.jfsat-chat .jfsat-cerrar {
	background: none;
	border: 0;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.jfsat-chat .jfsat-mensajes {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	background: #f6f7f9;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.jfsat-chat .jfsat-msg { display: flex; }
.jfsat-chat .jfsat-msg span {
	padding: 9px 13px;
	border-radius: 14px;
	max-width: 78%;
	/* Un visitante puede pegar una URL de 200 caracteres sin un solo espacio: sin esto
	   la burbuja se estira y rompe el panel. */
	overflow-wrap: anywhere;
}
.jfsat-chat .jfsat-yo { justify-content: flex-end; }
.jfsat-chat .jfsat-yo span {
	background: var(--jfsat-color, #2563eb);
	color: #fff;
	border-bottom-right-radius: 4px;
}
.jfsat-chat .jfsat-ellos span {
	background: #fff;
	color: #1f2328;
	border: 1px solid #e3e5e8;
	border-bottom-left-radius: 4px;
}

.jfsat-chat .jfsat-aviso {
	margin: 0;
	padding: 8px 14px;
	background: #fff4e5;
	color: #7a4b00;
	font-size: 13px;
}

.jfsat-chat .jfsat-pie {
	display: flex;
	gap: 8px;
	padding: 10px;
	border-top: 1px solid #e3e5e8;
	background: #fff;
}
.jfsat-chat .jfsat-campo {
	flex: 1;
	resize: none;
	border: 1px solid #d0d3d7;
	border-radius: 9px;
	padding: 9px 11px;
	font: inherit;
	color: #1f2328;
	background: #fff;
	max-height: 90px;
}
.jfsat-chat .jfsat-campo:focus {
	outline: 2px solid var(--jfsat-color, #2563eb);
	outline-offset: -1px;
}
.jfsat-chat .jfsat-enviar {
	border: 0;
	border-radius: 9px;
	padding: 0 15px;
	background: var(--jfsat-color, #2563eb);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/*
 * Los botones fijan tambien sus estados. Hello Elementor pinta de rosa (#c36) todo
 * `button:hover`, `button:focus` y `[type=submit]:focus`, y ese ultimo pesa lo mismo que
 * `.jfsat-chat .jfsat-enviar`: gana el que llegue despues, y en la hoja combinada llega el
 * tema. Con el estado dentro del selector, el nuestro pesa mas en cualquier orden. Igual
 * con el anillo de foco: el del tema es negro sobre blanco; el nuestro, del color del chat.
 */
.jfsat-chat .jfsat-enviar:hover,
.jfsat-chat .jfsat-enviar:focus,
.jfsat-chat .jfsat-enviar:active,
.jfsat-chat .jfsat-burbuja:hover,
.jfsat-chat .jfsat-burbuja:focus,
.jfsat-chat .jfsat-burbuja:active {
	background: var(--jfsat-color, #2563eb);
	color: #fff;
}
.jfsat-chat .jfsat-enviar:hover { filter: brightness(.93); }
.jfsat-chat .jfsat-cerrar:hover,
.jfsat-chat .jfsat-cerrar:focus,
.jfsat-chat .jfsat-cerrar:active {
	background: none;
	color: #fff;
}
.jfsat-chat button:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--jfsat-color, #2563eb);
	outline-offset: 2px;
}
.jfsat-chat .jfsat-cerrar:focus-visible { outline-color: #fff; outline-offset: 0; }
.jfsat-chat button:focus:not(:focus-visible) { outline: none; box-shadow: none; }

@media (max-width: 480px) {
	.jfsat-chat { right: 12px; }
	.jfsat-chat .jfsat-panel { width: calc(100vw - 24px); height: calc(100vh - 100px); }
}

/*
 * Red de seguridad para TODO lo que se oculta con el atributo hidden.
 *
 * Ya me mordió tres veces el mismo patrón: una regla con dos clases o un id lleva
 * `display:flex` y le gana al `[hidden]{display:none}` del navegador, que apenas tiene
 * especificidad. El atributo se pone, el elemento se sigue viendo, y el fallo aparece como
 * «el panel se abre solo» — que es justo lo que pasaba aquí.
 *
 * Con `!important` en un selector propio del widget, cualquier elemento con hidden
 * desaparece pase lo que pase, sin tener que acordarse de escribir su regla una por una.
 */
.jfsat-chat [hidden] { display: none !important; }

/* Los tres puntos de «escribiendo». */
.jfsat-chat .jfsat-puntos { display: inline-flex; gap: 4px; align-items: center; padding: 3px 0; }
.jfsat-chat .jfsat-puntos i {
	width: 7px; height: 7px; border-radius: 50%;
	background: #9aa1a9;
	animation: jfsat-latir 1.2s infinite ease-in-out;
}
.jfsat-chat .jfsat-puntos i:nth-child(2) { animation-delay: .18s; }
.jfsat-chat .jfsat-puntos i:nth-child(3) { animation-delay: .36s; }
@keyframes jfsat-latir {
	0%, 60%, 100% { opacity: .3; transform: translateY(0); }
	30%           { opacity: 1;  transform: translateY(-3px); }
}

/* El botón de agendar, dentro de una burbuja nuestra. */
.jfsat-chat .jfsat-cta {
	display: inline-block;
	padding: 9px 15px;
	border-radius: 10px;
	background: var(--jfsat-color, #2563eb);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

/* Quien pide menos movimiento no tiene por que ver la burbuja crecer. */
@media (prefers-reduced-motion: reduce) {
	.jfsat-chat .jfsat-burbuja { transition: none; }
	.jfsat-chat .jfsat-burbuja:hover { transform: none; }
	/* Los puntos se quedan quietos, pero visibles: siguen diciendo que hay algo en curso. */
	.jfsat-chat .jfsat-puntos i { animation: none; opacity: .55; }
}