/* ==========================================================================
   Escalautos — chat en vivo del CRM (widget de Support Board) con el look Autoverso.
   El widget llega con su propio CSS (css/main.css del CRM); aquí se lo viste con los tokens de
   escalautos-marca.css. Las reglas van con .ea-chat (clase que pone assets/js/chat.js) para ganarle en
   especificidad sin !important donde se pueda.
   ========================================================================== */

/* ---------- Lanzador (el botón flotante y el de la barra del celular) ---------- */
.ea-wa-float.ea-chat-lanzador { position: fixed; }
.ea-chat-lanzador svg { width: 26px; height: 26px; }
.ea-mobile-bar a.is-chat { position: relative; }
/* En la ficha, la barra de abajo no es la del sitio: su botón verde abre el chat (templates/ficha.php del plugin). */
.ea-ficha-barra-wa.is-chat { position: relative; }
.ea-ficha-barra-wa.is-chat svg { width: 24px; height: 24px; }
[data-ea-chat].is-cargando { pointer-events: none; }
[data-ea-chat].is-cargando svg { animation: ea-chat-latido 0.9s ease-in-out infinite; }
@keyframes ea-chat-latido { 50% { opacity: 0.35; transform: scale(0.9); } }
.ea-chat-lanzador__cuenta {
	position: absolute;
	top: -6px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #00e688;
	color: #02170e;
	font: 700 12px/22px var(--ea-font-text);
	text-align: center;
	box-shadow: 0 0 0 3px #02170e;
}
.ea-chat-lanzador__cuenta[hidden] { display: none; }

/* El botón del proveedor sobra: el lanzador es el nuestro. */
.sb-main.sb-chat .sb-chat-btn { display: none !important; }
/* Hasta que chat.js lo viste, el panel no se pinta: así no se asoma con los colores del proveedor. */
.sb-main.sb-chat:not(.ea-chat) { visibility: hidden; }

/* Con el panel abierto, el lanzador de escritorio sigue ahí y cierra el panel. */
.ea-chat-abierto .ea-wa-float.ea-chat-lanzador { background: var(--ea-night); box-shadow: inset 0 0 0 1px rgba(35, 255, 165, 0.5); }

/* ---------- Panel ---------- */
html body .ea-chat.sb-chat {
	--ea-chat-fondo: #032417;
	--ea-chat-capa: #04311e;
	--ea-chat-linea: rgba(255, 255, 255, 0.09);
	--ea-chat-texto: rgba(255, 255, 255, 0.92);
	--ea-chat-suave: rgba(255, 255, 255, 0.62);
	--ea-chat-tope: 16px;
	font-family: var(--ea-font-text);
	z-index: 1000;
}
html body.admin-bar .ea-chat.sb-chat { --ea-chat-tope: calc(var(--wp-admin--admin-bar--height, 32px) + 12px); }
html body .ea-chat.sb-chat .sb-body {
	background: var(--ea-chat-fondo);
	overflow: hidden;
}
/* Ventana: el proveedor cuelga el panel de una caja que ya está a 100 px del borde, y sumarle nuestro
   margen lo subía 192 px: en una ventana baja la cabecera se salía por arriba. El panel se mide contra
   la ventana, deja libre el lanzador y, con sesión iniciada, la barra de administración. */
@media (min-width: 768px) and (min-height: 521px) {
	html body .ea-chat.sb-chat { right: 0; bottom: 0; }
	html body .ea-chat.sb-chat .sb-body {
		position: fixed;
		right: 22px;
		bottom: 92px;
		max-width: calc(100vw - 44px);
		max-height: calc(100vh - 92px - var(--ea-chat-tope));
		max-height: min(720px, calc(100dvh - 92px - var(--ea-chat-tope)));
		border-radius: 20px;
		border: 1px solid var(--ea-chat-linea);
		box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 230, 136, 0.18), 0 20px 60px -30px rgba(0, 230, 136, 0.55);
	}
	html body .ea-chat.sb-chat.sb-chat-large .sb-body { max-height: calc(100vh - 92px - var(--ea-chat-tope)); max-height: calc(100dvh - 92px - var(--ea-chat-tope)); }
}
html body .ea-chat.sb-chat .sb-scroll-area {
	flex: 1 1 auto;
	min-height: 0;
	background: var(--ea-chat-fondo);
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
/* La barra de desplazamiento del proveedor es clara: sobre la noche era una franja blanca. */
html body .ea-chat.sb-chat .sb-scroll-area::-webkit-scrollbar-track { background: transparent; }
html body .ea-chat.sb-chat .sb-scroll-area::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); }
html body .ea-chat.sb-chat .sb-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--ea-primary-300); }

/* Cabecera: la noche de la marca con su resplandor */
html body .ea-chat.sb-chat .sb-header,
html body .ea-chat.sb-chat .sb-header-main {
	background-color: #02170e !important;
	background-image: radial-gradient(120% 140% at 0% 0%, rgba(35, 255, 165, 0.45) 0%, rgba(0, 230, 136, 0.15) 45%, transparent 70%) !important;
	color: #fff;
}
/* Las fotos del equipo salen del CRM y no siempre existen: la cabecera se queda con el mensaje. */
html body .ea-chat.sb-chat .sb-header .sb-profiles { display: none; }
html body .ea-chat.sb-chat .sb-header .sb-title {
	font: 600 16px/1.2 var(--ea-font-display);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
}
/* «Bienvenido al Autoverso» no cabe en un renglón a 360 px: baja un punto en vez de cortarse. */
html body .ea-chat.sb-chat .sb-header-main .sb-title { padding-right: 28px; padding-left: 28px; font-size: clamp(13px, 4.1vw, 16px); overflow: visible; text-overflow: clip; }
html body .ea-chat.sb-chat .sb-header .sb-text { color: var(--ea-chat-suave); font-size: 14px; }
/* La X de la bienvenida: en la esquina y con área de toque completa. */
html body .ea-chat.sb-chat .sb-header-main .sb-icon-close.sb-dashboard-btn {
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	color: #fff;
	line-height: 44px;
	text-align: center;
	opacity: 0.8;
}
html body .ea-chat.sb-chat .sb-header-main .sb-icon-close.sb-dashboard-btn:hover { opacity: 1; }
html body .ea-chat.sb-chat .sb-header-main .sb-icon-close.sb-dashboard-btn::before { line-height: 44px; }

/* Mensajes: los del cliente en morado, los del asesor en la capa oscura */
html body .ea-chat.sb-chat .sb-list > div { border-radius: 16px 16px 16px 4px; background-color: var(--ea-chat-capa); }
html body .ea-chat.sb-chat .sb-list > div.sb-right { border-radius: 16px 16px 4px 16px; background-color: var(--ea-primary); }
html body .ea-chat.sb-chat .sb-list > div.sb-label-date { background: none; }
html body .ea-chat.sb-chat .sb-list .sb-message,
html body .ea-chat.sb-chat .sb-list .sb-message a { color: var(--ea-chat-texto); font: 400 15px/1.45 var(--ea-font-text); }
html body .ea-chat.sb-chat .sb-list > div.sb-right .sb-message,
html body .ea-chat.sb-chat .sb-list > div.sb-right .sb-message a { color: #fff; }
html body .ea-chat.sb-chat .sb-list .sb-time { color: var(--ea-chat-suave); }
html body .ea-chat.sb-chat .sb-label-date span,
html body .ea-chat.sb-chat .sb-label-date-top span { background: rgba(255, 255, 255, 0.06); color: var(--ea-chat-suave); border-radius: 999px; font-family: var(--ea-font-text); }
html body .ea-chat.sb-chat .sb-list .sb-message .sb-text,
html body .ea-chat.sb-chat .sb-list .sb-message > span { background: transparent; }

/* ---------- Edibot: preguntas con botones, tarjetas y su avatar ---------- */
/* Un mensaje con botones es el mismo globo de siempre: el proveedor lo deja transparente y a medio
   apagar hasta que se contesta, y sobre la noche de la marca la pregunta no se leía. */
html body .ea-chat.sb-chat .sb-list > div.sb-rich-cnt { background: transparent; opacity: 1; max-width: calc(100% - 64px); }
html body .ea-chat.sb-chat .sb-list .sb-rich-message .sb-text {
	display: inline-block;
	padding: 12px 16px;
	border-radius: 16px 16px 16px 4px;
	background: var(--ea-chat-capa);
	color: var(--ea-chat-texto);
	font: 400 15px/1.45 var(--ea-font-text);
}
/* Las opciones van de contorno: llenas de morado se confundían con lo que escribe el cliente, que
   también es morado. Una por renglón y con el texto completo («Outlet Factory · Av. Américas…»). */
html body .ea-chat.sb-chat .sb-rich-chips .sb-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0 12px; }
html body .ea-chat.sb-chat .sb-rich-chips .sb-btn {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	min-height: 40px;
	margin: 0;
	padding: 10px 16px;
	border: 1px solid rgba(35, 255, 165, 0.6);
	border-radius: 12px;
	background: rgba(0, 230, 136, 0.12);
	color: #fff;
	font: 600 14px/1.3 var(--ea-font-text);
	white-space: normal;
	overflow: visible;
	text-align: left;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
html body .ea-chat.sb-chat .sb-rich-chips .sb-btn:hover,
html body .ea-chat.sb-chat .sb-rich-chips .sb-btn:focus-visible { background: var(--ea-primary); border-color: var(--ea-primary); }
/* Ya contestada, la pregunta se queda y sus opciones se apagan: no se puede volver a elegir. */
html body .ea-chat.sb-chat .sb-rich-chips[disabled] .sb-btn { opacity: 0.45; pointer-events: none; }

/* Accesos de inicio: sólo mientras la conversación está vacía. */
.ea-chat-inicio { display: none; }
html body .ea-chat.sb-chat:not(.sb-dashboard-active):not(.sb-panel-active) .sb-list.sb-active:empty + .ea-chat-inicio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	/* La cabecera de bienvenida va flotando encima del área: los accesos empiezan donde ella termina. */
	padding: 158px 16px 16px;
}
/* La lista vacía reserva su alto y empujaba los accesos al fondo. */
html body .ea-chat.sb-chat:not(.sb-dashboard-active) .sb-list.sb-active:empty { display: none; }
html body .ea-chat.sb-chat.ea-chat-enviando .ea-chat-inicio { opacity: 0.5; pointer-events: none; }
.ea-chat-inicio__acceso {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-height: 84px;
	padding: 12px;
	border: 1px solid rgba(35, 255, 165, 0.45);
	border-radius: 14px;
	background: rgba(0, 230, 136, 0.1);
	color: #fff;
	font: 600 13px/1.3 var(--ea-font-text);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ea-chat-inicio__acceso svg { width: 22px; height: 22px; color: var(--ea-primary-300); transition: color 0.2s ease; }
.ea-chat-inicio__acceso:hover,
.ea-chat-inicio__acceso:focus-visible { border-color: var(--ea-primary); background: var(--ea-primary); outline: 0; }
.ea-chat-inicio__acceso:hover svg,
.ea-chat-inicio__acceso:focus-visible svg { color: #fff; }

/* Tarjetas de carros: la foto arriba, el precio como sello sobre la foto y «Ver auto» como botón. */
html body .ea-chat.sb-chat .sb-rich-message .sb-card,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider > div > div {
	border: 1px solid var(--ea-chat-linea);
	border-radius: 16px;
	background: var(--ea-chat-capa);
	color: var(--ea-chat-texto);
	overflow: hidden;
}
/* El precio es un sello SOBRE LA FOTO de su tarjeta. El proveedor lo ubica contra el mensaje entero,
   y cuando la tarjeta lleva una frase antes («Sí, tengo este:») el sello caía encima de la frase. */
html body .ea-chat.sb-chat .sb-rich-message .sb-card,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider > div > div { position: relative; }
/* La frase que acompaña a las tarjetas, con la letra y el aire de los demás mensajes. */
html body .ea-chat.sb-chat .sb-list > div.sb-rich-cnt[data-type="card"] .sb-message,
html body .ea-chat.sb-chat .sb-list > div.sb-rich-cnt[data-type="slider"] .sb-message { color: var(--ea-chat-texto); font: 400 15px/1.45 var(--ea-font-text); }
html body .ea-chat.sb-chat .sb-list > div.sb-rich-cnt .sb-message > br { display: none; }
html body .ea-chat.sb-chat .sb-list > div.sb-rich-cnt[data-type="card"] .sb-message > .sb-rich-message,
html body .ea-chat.sb-chat .sb-list > div.sb-rich-cnt[data-type="slider"] .sb-message > .sb-rich-message { margin-top: 10px; }
html body .ea-chat.sb-chat .sb-rich-message .sb-slider { max-width: 100%; }
html body .ea-chat.sb-chat .sb-rich-message .sb-card .sb-card-img,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider .sb-card-img { height: 170px; margin-bottom: 14px; border-radius: 0; }
html body .ea-chat.sb-chat .sb-rich-message .sb-card .sb-card-header,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider .sb-card-header { color: #fff; font: 600 15px/1.3 var(--ea-font-text); }
html body .ea-chat.sb-chat .sb-rich-message .sb-card .sb-card-extra,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider .sb-card-extra {
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(2, 23, 14, 0.86);
	color: #fff;
	font: 700 13px/1 var(--ea-font-text);
}
html body .ea-chat.sb-chat .sb-rich-message .sb-card .sb-card-extra::before,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider .sb-card-extra::before { content: "$ "; color: var(--ea-primary-300); }
html body .ea-chat.sb-chat .sb-rich-message .sb-card .sb-card-description,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider .sb-card-description { margin-top: 6px; color: var(--ea-chat-suave); font: 400 13px/1.45 var(--ea-font-text); }
html body .ea-chat.sb-chat .sb-rich-message .sb-card .sb-card-btn,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider .sb-card-btn {
	display: block;
	margin: 14px 15px 15px;
	padding: 10px 14px;
	border: 1px solid rgba(35, 255, 165, 0.6);
	border-radius: 12px;
	background: rgba(0, 230, 136, 0.12);
	color: #fff;
	font: 600 14px/1.2 var(--ea-font-text);
	text-align: center;
}
html body .ea-chat.sb-chat .sb-rich-message .sb-card .sb-card-btn:hover,
html body .ea-chat.sb-chat .sb-rich-message .sb-slider .sb-card-btn:hover { background: var(--ea-primary) !important; border-color: var(--ea-primary); color: #fff; }
html body .ea-chat.sb-chat .sb-rich-message .sb-slider-arrow { background: var(--ea-primary); color: #fff; box-shadow: 0 0 0 3px var(--ea-chat-fondo); }
html body .ea-chat.sb-chat .sb-rich-message .sb-slider-arrow:hover { color: #fff; background: var(--ea-primary-600); }

/* Quien contesta sin foto —Edibot— lleva el isotipo, no el muñeco gris del proveedor. */
html body .ea-chat.sb-chat .sb-header img[src$="user.svg"],
html body .ea-chat.sb-chat .sb-user-conversations img[src$="user.svg"],
html body .ea-chat.sb-chat .sb-list .sb-thumb img[src$="user.svg"] {
	content: url("https://escalautos.com/wp-content/themes/saasking-child/assets/css/../img/escalautos-isotipo-blanco.svg");
	box-sizing: border-box;
	padding: 5px;
	border-radius: 50%;
	background: var(--ea-primary);
}

/* La flecha de volver: el proveedor la esconde y la hace entrar al pasar el cursor, empujando el
   nombre. Aquí está siempre en su sitio, sin recuadro. */
html body .ea-chat.sb-chat .sb-scroll-area .sb-header-agent .sb-dashboard-btn {
	top: 50%;
	left: 8px !important;
	right: auto;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: 12px;
	background: none;
	color: #fff;
	opacity: 0.75 !important;
	animation: none;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
html body .ea-chat.sb-chat .sb-scroll-area .sb-header-agent .sb-dashboard-btn:hover { background: rgba(255, 255, 255, 0.08); opacity: 1 !important; }
html body .ea-chat.sb-chat .sb-header-agent .sb-profile,
html body .ea-chat.sb-chat .sb-header-agent:hover .sb-profile { margin-left: 36px !important; animation: none; transition: none; }

/* Lista de conversaciones («volver») y botones */
html body .ea-chat.sb-chat.sb-dashboard-active:not(.sb-panel-active) .sb-scroll-area { background: var(--ea-chat-fondo); }
html body .ea-chat.sb-chat .sb-dashboard > div { background: var(--ea-chat-capa); border: 1px solid var(--ea-chat-linea); color: var(--ea-chat-texto); border-radius: 16px; box-shadow: none; overflow: hidden; }
html body .ea-chat.sb-chat .sb-dashboard > div > .sb-title,
html body .ea-chat.sb-chat .sb-dashboard > div > .sb-top,
html body .ea-chat.sb-chat .sb-dashboard > div > div > .sb-title { border-bottom-color: var(--ea-chat-linea); }
html body .ea-chat.sb-chat .sb-dashboard .sb-title { font: 600 13px/1.2 var(--ea-font-display); text-transform: uppercase; letter-spacing: 0.08em; color: #fff; }
html body .ea-chat.sb-chat .sb-user-conversations > li { border-left: 0; }
html body .ea-chat.sb-chat .sb-user-conversations > li > div { color: var(--ea-chat-texto); font: 400 14px/25px var(--ea-font-text); }
html body .ea-chat.sb-chat .sb-user-conversations > li > div div:not(.sb-message) { opacity: 1; color: #fff; font-weight: 600; }
html body .ea-chat.sb-chat .sb-user-conversations > li > div .sb-time { color: var(--ea-chat-suave); font-weight: 400; }
html body .ea-chat.sb-chat .sb-user-conversations > li > div .sb-message { color: var(--ea-chat-suave); font-weight: 400; font-size: 13px; }
html body .ea-chat.sb-chat .sb-user-conversations > li:hover,
html body .ea-chat.sb-chat .sb-user-conversations > li.sb-active { background-color: rgba(255, 255, 255, 0.05); }
html body .ea-chat.sb-chat .sb-user-conversations > li > [data-count] { border-color: var(--ea-chat-capa); background: #00e688; color: #02170e; }
html body .ea-chat.sb-chat .sb-dashboard > div > .sb-btn { margin: 6px auto 18px; padding: 0 18px; height: 40px; line-height: 40px; border: 0; background: var(--ea-primary); color: #fff; font-size: 14px; }
html body .ea-chat.sb-chat .sb-dashboard > div > .sb-btn:hover { background: var(--ea-primary-600); color: #fff; }
html body .ea-chat.sb-chat .sb-btn { border-radius: 12px; background: var(--ea-primary); color: #fff; font-family: var(--ea-font-text); font-weight: 600; }
html body .ea-chat.sb-chat .sb-btn:hover { background: var(--ea-primary-600); }

/* Editor */
html body .ea-chat.sb-chat .sb-editor { flex: 0 0 auto; background: var(--ea-chat-fondo); }
html body .ea-chat.sb-chat .sb-editor .sb-textarea { border-top-color: var(--ea-chat-linea); }
html body .ea-chat.sb-chat .sb-editor .sb-loader { background: var(--ea-chat-fondo); }
/* El proveedor fija el color del texto con !important (gris para fondo claro): sobre la noche no se leía. */
html body .ea-chat.sb-chat .sb-editor textarea { max-height: 96px; color: #fff !important; caret-color: var(--ea-primary-300); font-family: var(--ea-font-text); font-size: 15px; }
html body .ea-chat.sb-chat .sb-editor textarea::placeholder,
html body .ea-chat.sb-chat .sb-editor textarea:focus::placeholder { color: var(--ea-chat-suave); opacity: 1; }
html body .ea-chat.sb-chat .sb-editor .sb-submit { color: var(--ea-primary-300); }
html body .ea-chat.sb-chat .sb-editor .sb-submit:hover { color: #fff; }
html body .ea-chat.sb-chat .sb-editor .sb-bar-icons > div:not(:hover) { opacity: 1; }
html body .ea-chat.sb-chat .sb-editor .sb-bar-icons > div::before { color: var(--ea-chat-suave); transition: color 0.2s ease; }
html body .ea-chat.sb-chat .sb-editor .sb-bar-icons > div:hover::before,
html body .ea-chat.sb-chat .sb-editor .sb-bar-icons > div.sb-active::before { color: var(--ea-primary-300); }
html body .ea-chat.sb-chat .sb-editor .sb-clear-text { color: var(--ea-chat-suave); }
html body .ea-chat.sb-chat .sb-editor.sb-drag { border-color: var(--ea-primary) !important; background-color: var(--ea-chat-capa) !important; }
html body .ea-chat.sb-chat .sb-editor.sb-drag::before { color: var(--ea-primary-300); }
html body .ea-chat.sb-chat .sb-editor .sb-attachments > div { color: var(--ea-chat-texto); }

/* WhatsApp y aviso de datos, debajo del editor */
.ea-chat-extra {
	flex: 0 0 auto;
	padding: 8px 16px 14px;
	background: var(--ea-chat-fondo, #032417);
	text-align: center;
}
.ea-chat-extra__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 38px;
	border-radius: 12px;
	border: 1px solid rgba(0, 230, 136, 0.45);
	color: #00e688 !important;
	font: 600 14px/1 var(--ea-font-text);
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}
.ea-chat-extra__wa:hover { background: rgba(0, 230, 136, 0.1); }
.ea-chat-extra__aviso {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, 0.5);
	font: 400 11px/1.4 var(--ea-font-text);
}
.ea-chat-extra__aviso a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; }

/* Celular, y cualquier ventana tan baja que el panel flotante no cabría (un celular acostado): el
   panel es la pantalla entera, como en cualquier app de mensajes. El proveedor sólo lo hace hasta
   464 px; de ahí a 767 faltaban el botón de cerrar y el alto del área de mensajes. */
@media (max-width: 767px), (max-height: 520px) {
	html body .ea-chat.sb-chat { z-index: 100000; }
	html body .ea-chat.sb-chat .sb-body {
		position: fixed;
		inset: 0;
		width: auto;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		animation: none;
	}
	html body .ea-chat.sb-chat .sb-body .sb-scroll-area { height: auto; }
	/* Cerrar: siempre en la esquina y del tamaño de un dedo, también en la lista de conversaciones. */
	html body .ea-chat.sb-chat .sb-responsive-close-btn {
		position: fixed;
		top: 8px;
		right: 8px;
		width: 44px;
		height: 44px;
		color: #fff;
		text-align: center;
		cursor: pointer;
	}
	html body .ea-chat.sb-chat .sb-header .sb-responsive-close-btn,
	html body .ea-chat.sb-chat.sb-dashboard-active .sb-responsive-close-btn { display: block; }
	html body .ea-chat.sb-chat .sb-responsive-close-btn::before { position: static; font-size: 13px; line-height: 44px; }
	html body .ea-chat.sb-chat .sb-enlarge-chat-widget { display: none; }
	.ea-chat-extra { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
	.ea-chat-abierto .ea-mobile-bar,
	.ea-chat-abierto .ea-wa-float,
	.ea-chat-abierto .ea-cookies { display: none; }
	/* Con el panel a pantalla completa la página de atrás no se desplaza. */
	html.ea-chat-abierto,
	html.ea-chat-abierto body { overflow: hidden; }
}
@media (max-width: 767px) {
	.ea-mobile-bar .ea-chat-lanzador__cuenta { top: 4px; right: 8px; box-shadow: none; }
}
/* Poco alto: WhatsApp y el aviso en un renglón, para dejarle el espacio a los mensajes. */
@media (max-height: 520px) {
	.ea-chat-extra { display: flex; align-items: center; gap: 12px; padding-top: 6px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); text-align: left; }
	.ea-chat-extra__wa { flex: 0 0 auto; width: auto; height: 34px; padding: 0 14px; }
	.ea-chat-extra__aviso { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
	[data-ea-chat].is-cargando svg { animation: none; opacity: 0.6; }
}