/*
 * Estilos de Merak Chat Core: chat, panel de cliente y botones de
 * contacto/favorito que se insertan dentro de las páginas de los 3 plugins
 * de negocio.
 *
 * Paleta por defecto: naranja/blanco/negro de la marca Merak (Servicios y
 * Empresas/Productos), tomada tal cual de "--merak-naranja"/"--merak-negro"
 * de assets/css/merak.css de esos 2 plugins, para que el panel de cliente
 * se sienta parte del mismo sitio que el panel del vendedor (mismo radio de
 * 14px, misma sombra suave, mismo lenguaje de sidebar con indicador de
 * punto en el ítem activo). Como este plugin también convive con la
 * identidad oscura/dorada de Nidoo Propiedades, los colores viven en
 * variables CSS — Nidoo redefine "--merak-chat-acento" y el resto de estas
 * variables en su propio merak.css (ver el bloque "Merak Chat Core" al
 * final de ese archivo) sin tener que tocar este.
 */

:root {
	--merak-chat-acento: #E8642C;
	--merak-chat-acento-2: #FF8A50;
	--merak-chat-acento-oscuro: #C94F1E;
	--merak-chat-gradiente: linear-gradient(135deg, var(--merak-chat-acento-2) 0%, var(--merak-chat-acento) 45%, var(--merak-chat-acento-oscuro) 100%);
	--merak-chat-fondo: #ffffff;
	--merak-chat-fondo-suave: #F4F4F4;
	--merak-chat-borde: #ececec;
	--merak-chat-texto: #1A1A1A;
	--merak-chat-texto-suave: #666666;
	--merak-chat-exito: #1E9E5A;
	--merak-chat-error: #B3261E;
	--merak-chat-radio: 14px;
	--merak-chat-sombra-suave: 0 10px 30px rgba(26,26,26,.08);
}

.merak-chat, .merak-chat * {
	box-sizing: border-box;
}

.merak-chat {
	font-family: inherit;
	color: var(--merak-chat-texto);
}

.merak-chat h2 {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.3rem;
	margin: 0 0 1rem;
	color: var(--merak-chat-texto);
}

.merak-chat-vacio {
	color: var(--merak-chat-texto-suave);
	padding: 1.5rem;
	background: var(--merak-chat-fondo-suave);
	border-radius: var(--merak-chat-radio);
	text-align: center;
}

.merak-chat-mensaje {
	padding: .75rem 1rem;
	border-radius: 10px;
	margin-bottom: 1rem;
	font-size: .92rem;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.merak-chat-mensaje-exito { background: rgba(30,158,90,.12); color: var(--merak-chat-exito); }
.merak-chat-mensaje-error { background: rgba(179,38,30,.1); color: var(--merak-chat-error); }
.merak-chat-mensaje-info  { background: rgba(232,100,44,.1); color: var(--merak-chat-acento-oscuro); }

/* ---------------------------------------------------------------------
 * Botón "Enviar mensaje" (ficha de publicación)
 * --------------------------------------------------------------------- */
.merak-chat-btn-contacto {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.1rem;
	border-radius: 10px;
	background: var(--merak-chat-gradiente);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: .92rem;
	transition: transform .15s ease, opacity .15s ease;
}
.merak-chat-btn-contacto:hover { opacity: .92; transform: translateY(-1px); color: #fff; }

/* ---------------------------------------------------------------------
 * Botón de favorito (corazón)
 * --------------------------------------------------------------------- */
.merak-chat-btn-favorito {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--merak-chat-borde);
	background: var(--merak-chat-fondo);
	color: var(--merak-chat-texto-suave);
	cursor: pointer;
	transition: transform .15s ease, color .15s ease, border-color .15s ease;
	text-decoration: none;
}
.merak-chat-btn-favorito:hover { transform: scale(1.08); color: var(--merak-chat-acento); border-color: var(--merak-chat-acento); }
.merak-chat-btn-favorito .merak-chat-icono-corazon-lleno { display: none; color: var(--merak-chat-acento); }
.merak-chat-btn-favorito-activo .merak-chat-icono-corazon-vacio { display: none; }
.merak-chat-btn-favorito-activo .merak-chat-icono-corazon-lleno { display: inline-flex; }
.merak-chat-btn-favorito-activo { border-color: var(--merak-chat-acento); }
.merak-chat-btn-favorito.merak-chat-favorito-animar { animation: merak-chat-favorito-pop .3s ease; }
@keyframes merak-chat-favorito-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------
 * Auth de cliente — tarjeta oscura de dos columnas, mismo lenguaje visual
 * que ".merak-auth"/".merak-auth-lateral" del login del VENDEDOR de cada
 * plugin de negocio (fondo casi negro con textura de puntos, tarjeta con
 * resplandor del color de acento, panel lateral de marca con ícono/imagen
 * + mensaje de bienvenida que cambia según la pestaña) — a pedido de
 * Sebastián: "copia el diseño de ingresar vendedor al ingresar cliente".
 * Usa colores fijos (#101010/#1A1A1A) en vez de las variables --merak-chat-
 * fondo/-texto (esas son para el resto del plugin, pensado en fondo
 * blanco) — el resplandor y los acentos sí usan --merak-chat-acento para
 * seguir adaptándose a cada marca (naranja en Merak, dorado en Nidoo).
 * --------------------------------------------------------------------- */
.merak-chat-auth-pagina {
	position: relative;
	overflow: hidden;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
		linear-gradient(160deg, #101010, #1A1A1A 55%, #0b0b0b);
	/* Ocupa el alto completo de la pantalla (no solo un recuadro chico
	   centrado) — a pedido de Sebastián, mismo criterio que el fondo oscuro
	   full-bleed del login del vendedor. */
	min-height: 100vh;
}
.merak-chat-aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.merak-chat-aurora span { position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(50px); }
.merak-chat-aurora span:nth-child(1) { background: radial-gradient(circle, var(--merak-chat-acento-2), transparent 72%); top: -18%; left: -10%; opacity: .5; }
.merak-chat-aurora span:nth-child(2) { background: radial-gradient(circle, var(--merak-chat-acento), transparent 72%); bottom: -22%; right: -8%; opacity: .38; width: 280px; height: 280px; }
.merak-chat-aurora span:nth-child(3) { background: radial-gradient(circle, var(--merak-chat-acento-2), transparent 72%); top: 25%; right: 15%; width: 170px; height: 170px; opacity: .3; }

.merak-chat-auth {
	max-width: 920px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	border-radius: 20px;
	overflow: hidden;
	background:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
		linear-gradient(160deg, #101010, #1A1A1A 55%, #0b0b0b);
	box-shadow:
		0 0 0 1px rgba(255,255,255,.09),
		0 0 70px rgba(232,100,44,.18),
		0 25px 70px rgba(0,0,0,.55);
}
.merak-chat-auth-cuerpo { display: grid; grid-template-columns: 1fr 300px; align-items: stretch; }
.merak-chat-auth-principal { padding: clamp(28px, 4vw, 44px); }
.merak-chat-auth-titulo { margin: 0 0 1rem; font-size: 1.4rem; color: #fff; }
.merak-chat-auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.merak-chat-auth-tabs a { padding: 10px 6px; text-decoration: none; font-weight: 600; font-size: .88rem; color: rgba(255,255,255,.55); border-bottom: 3px solid transparent; transition: color .2s ease, border-color .2s ease; }
.merak-chat-auth-tabs a.activo { color: var(--merak-chat-acento-2); border-color: var(--merak-chat-acento); font-weight: 700; }

/* Etiquetas, campos, notas y mensajes DENTRO de la tarjeta oscura: el
   resto de ".merak-chat-form"/".merak-chat-mensaje"/".merak-chat-nota" está
   pensado para fondo blanco (ver más abajo) — acá se necesita la versión
   clara sobre fondo oscuro, igual que hace el panel del vendedor. */
.merak-chat-auth .merak-chat-form label { color: rgba(255,255,255,.85); }
.merak-chat-auth .merak-chat-form input[type="text"],
.merak-chat-auth .merak-chat-form input[type="email"],
.merak-chat-auth .merak-chat-form input[type="password"] {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.18);
	color: #fff;
}
.merak-chat-auth .merak-chat-form input:focus { border-color: var(--merak-chat-acento); box-shadow: 0 0 0 2px rgba(232,100,44,.25); }
.merak-chat-auth .merak-chat-form input::placeholder { color: rgba(255,255,255,.35); }
.merak-chat-auth .merak-chat-campo-icono svg { color: rgba(255,255,255,.38); }
.merak-chat-auth .merak-chat-toggle-clave { color: rgba(255,255,255,.4); }
.merak-chat-auth .merak-chat-toggle-clave:hover { color: rgba(255,255,255,.8); }
.merak-chat-auth .merak-chat-nota { color: rgba(255,255,255,.5); }
.merak-chat-auth .merak-chat-nota a { color: var(--merak-chat-acento-2); }
.merak-chat-auth .merak-chat-mensaje-exito { background: rgba(30,158,90,.18); color: #6FE3A6; }
.merak-chat-auth .merak-chat-mensaje-error { background: rgba(179,38,30,.2); color: #FF9A90; }
.merak-chat-auth .merak-chat-mensaje-info  { background: rgba(232,100,44,.18); color: var(--merak-chat-acento-2); }

/* Panel lateral de marca — mismo efecto "aurora" detrás de un emblema
   circular (ícono por defecto o, si existe, la misma imagen que ya subió
   Sebastián para el login del vendedor de ese negocio — ver
   merak_chat_core_shortcode_auth() en includes/auth-cliente.php). En
   celular se oculta (no resta espacio al formulario). */
.merak-chat-auth-lateral {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	border-left: 1px solid rgba(255,255,255,.08);
}
.merak-chat-auth-lateral-cuerpo { position: relative; z-index: 1; text-align: center; }
.merak-chat-auth-lateral-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin: 0 auto 18px;
	border-radius: 50%;
	font-size: 40px;
	box-shadow: 0 14px 30px rgba(0,0,0,.4);
	border: 4px solid rgba(255,255,255,.18);
	overflow: hidden;
}
.merak-chat-auth-lateral-logo img { width: 100%; height: 100%; object-fit: cover; }
.merak-chat-auth-lateral-logo-claro { background: #fff; }
.merak-chat-auth-lateral-logo-imagen { background: #1A1A1A; }
.merak-chat-auth-lateral-cuerpo h3 { color: #fff; margin: 0 0 10px; font-size: 19px; }
.merak-chat-auth-lateral-cuerpo p { color: #fff; font-size: 13.5px; line-height: 1.6; margin: 0; }

@media (max-width: 780px) {
	.merak-chat-auth-cuerpo { grid-template-columns: 1fr; }
	.merak-chat-auth-lateral { display: none; }
}

.merak-chat-form { display: flex; flex-direction: column; gap: 1rem; }
.merak-chat-form label { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; color: var(--merak-chat-texto-suave); }
.merak-chat-form input[type="text"],
.merak-chat-form input[type="email"],
.merak-chat-form input[type="password"],
.merak-chat-form textarea {
	border: 1px solid var(--merak-chat-borde);
	border-radius: 10px;
	padding: .7rem .9rem;
	font-size: .95rem;
	color: var(--merak-chat-texto);
	background: var(--merak-chat-fondo);
	font-family: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.merak-chat-form input:focus,
.merak-chat-form textarea:focus {
	outline: none;
	border-color: var(--merak-chat-acento);
	box-shadow: 0 0 0 2px rgba(232,100,44,.15);
}
.merak-chat-campo-icono { position: relative; display: flex; align-items: center; }
.merak-chat-campo-icono svg { position: absolute; left: .8rem; opacity: .5; pointer-events: none; }
.merak-chat-campo-icono input { padding-left: 2.4rem !important; width: 100%; }
.merak-chat-campo-icono-clave input { padding-right: 2.6rem !important; }
.merak-chat-toggle-clave { position: absolute; right: .6rem; background: none; border: none; cursor: pointer; opacity: .6; }
.merak-chat-icono-ojo-cerrado { display: none; }
.merak-chat-toggle-clave.activo .merak-chat-icono-ojo { display: none; }
.merak-chat-toggle-clave.activo .merak-chat-icono-ojo-cerrado { display: inline-flex; }

.merak-chat-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .75rem 1.2rem;
	border-radius: 10px;
	border: none;
	font-weight: 700;
	font-size: .92rem;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .15s ease, transform .15s ease;
	font-family: inherit;
}
.merak-chat-btn:hover { opacity: .92; }
.merak-chat-btn-primario { background: var(--merak-chat-gradiente); color: #fff; }
.merak-chat-btn-outline { background: transparent; border: 2px solid var(--merak-chat-texto); color: var(--merak-chat-texto); }
.merak-chat-btn-outline:hover { border-color: var(--merak-chat-acento); color: var(--merak-chat-acento-oscuro); }
.merak-chat-btn-peligro { background: var(--merak-chat-error); color: #fff; }
.merak-chat-nota { font-size: .85rem; color: var(--merak-chat-texto-suave); }

/* ---------------------------------------------------------------------
 * Panel (cliente y vendedor) — mismo lenguaje visual que ".merak-panel"
 * del panel del vendedor de cada plugin de negocio: contenedor gris claro
 * redondeado, sidebar blanca flotante con sombra suave y fija (sticky) al
 * hacer scroll, ítem activo marcado con un punto de acento en vez de un
 * relleno sólido.
 * --------------------------------------------------------------------- */
.merak-chat-panel {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 24px;
	background: var(--merak-chat-fondo-suave);
	border-radius: 24px;
}
.merak-chat-panel-menu-envoltorio { position: relative; }
.merak-chat-panel-menu-hamburguesa {
	display: none;
	width: 100%;
	align-items: center;
	gap: 12px;
	border-radius: var(--merak-chat-radio);
	border: 1px solid var(--merak-chat-borde);
	background: var(--merak-chat-fondo);
	box-shadow: var(--merak-chat-sombra-suave);
	padding: 14px 16px;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	color: var(--merak-chat-texto);
}
.merak-chat-panel-menu-hamburguesa-icono {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 2px solid var(--merak-chat-texto);
	flex-shrink: 0;
	transition: background .2s ease, border-color .2s ease;
}
.merak-chat-panel-menu-hamburguesa-icono span {
	display: block;
	width: 15px;
	height: 2px;
	border-radius: 2px;
	background: var(--merak-chat-texto);
	transition: transform .25s ease, opacity .2s ease, background .2s ease;
}
.merak-chat-panel-menu-hamburguesa.merak-abierto .merak-chat-panel-menu-hamburguesa-icono { background: var(--merak-chat-texto); border-color: var(--merak-chat-texto); }
.merak-chat-panel-menu-hamburguesa.merak-abierto .merak-chat-panel-menu-hamburguesa-icono span { background: #fff; }
.merak-chat-panel-menu-hamburguesa.merak-abierto .merak-chat-panel-menu-hamburguesa-icono span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.merak-chat-panel-menu-hamburguesa.merak-abierto .merak-chat-panel-menu-hamburguesa-icono span:nth-child(2) { opacity: 0; }
.merak-chat-panel-menu-hamburguesa.merak-abierto .merak-chat-panel-menu-hamburguesa-icono span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.merak-chat-panel-menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: sticky;
	top: 20px;
	background: var(--merak-chat-fondo);
	border-radius: var(--merak-chat-radio);
	border: 1px solid var(--merak-chat-borde);
	box-shadow: var(--merak-chat-sombra-suave);
	padding: 14px;
}
/* El HTML trae el atributo "hidden" a propósito (ver
   merak_chat_core_shortcode_panel() en includes/shortcodes.php), pero eso
   SOLO debe ocultar el menú dentro del breakpoint de celular/tablet de más
   abajo — en escritorio debe verse siempre. Algunos temas traen su propia
   regla global "[hidden] { display: none !important; }" que le gana a un
   simple "display: flex" sin "!important" sin importar el origen de la
   regla — mismo bug ya encontrado y resuelto en ".merak-panel-menu" del
   panel del vendedor (assets/css/merak.css de cada plugin de negocio). */
.merak-chat-panel-menu[hidden] { display: flex !important; }
.merak-chat-panel-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--merak-chat-texto);
	text-decoration: none;
	font-weight: 500;
	font-size: 14.5px;
	position: relative;
	transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.merak-chat-panel-menu a.activo,
.merak-chat-panel-menu a:hover { background: var(--merak-chat-fondo-suave); padding-left: 18px; }
.merak-chat-panel-menu a.activo { color: var(--merak-chat-acento-oscuro); font-weight: 700; }
.merak-chat-panel-menu a.activo::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--merak-chat-acento);
}
.merak-chat-panel-menu .merak-chat-cerrar-sesion { color: var(--merak-chat-error); margin-top: 10px; border-top: 1px solid var(--merak-chat-borde); padding-top: 14px; border-radius: 0 0 10px 10px; }
.merak-chat-panel-contenido {
	background: var(--merak-chat-fondo);
	border-radius: var(--merak-chat-radio);
	border: 1px solid var(--merak-chat-borde);
	box-shadow: var(--merak-chat-sombra-suave);
	padding: clamp(20px, 3vw, 34px);
	min-width: 0;
	min-height: 360px;
}

@media (max-width: 900px) {
	.merak-chat-panel { grid-template-columns: 1fr; padding: 16px; border-radius: 18px; }
	.merak-chat-panel-menu-hamburguesa { display: flex; }
	.merak-chat-panel-menu {
		position: fixed;
		top: 16px;
		left: 16px;
		right: 16px;
		bottom: 16px;
		z-index: 202;
		margin-top: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	body.admin-bar .merak-chat-panel-menu { top: 48px; }
	@media screen and (max-width: 782px) {
		body.admin-bar .merak-chat-panel-menu { top: 62px; }
	}
	.merak-chat-panel-menu[hidden] { display: none !important; }
}

.merak-chat-badge-no-leidos {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 .35rem;
	border-radius: 999px;
	background: var(--merak-chat-error);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Bandeja de mensajes
 * --------------------------------------------------------------------- */
.merak-chat-lista-hilos { display: flex; flex-direction: column; gap: .5rem; }
.merak-chat-fila-hilo {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .9rem 1rem;
	border-radius: var(--merak-chat-radio);
	border: 1px solid var(--merak-chat-borde);
	text-decoration: none;
	color: var(--merak-chat-texto);
	transition: border-color .15s ease, background .15s ease;
}
.merak-chat-fila-hilo:hover { border-color: var(--merak-chat-acento); }
.merak-chat-fila-hilo-no-leido { background: rgba(232,100,44,.05); border-color: var(--merak-chat-acento); }
.merak-chat-fila-hilo-avatar {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--merak-chat-fondo-suave);
	display: flex; align-items: center; justify-content: center;
	color: var(--merak-chat-texto-suave);
}
.merak-chat-fila-hilo-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.merak-chat-fila-hilo-linea1 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.merak-chat-fila-hilo-negocio { font-size: .72rem; color: var(--merak-chat-texto-suave); background: var(--merak-chat-fondo-suave); padding: .1rem .5rem; border-radius: 999px; }
.merak-chat-fila-hilo-publicacion { font-size: .82rem; color: var(--merak-chat-texto-suave); display: flex; align-items: center; gap: .3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merak-chat-fila-hilo-preview { font-size: .85rem; color: var(--merak-chat-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merak-chat-fila-hilo-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.merak-chat-fila-hilo-tiempo { font-size: .75rem; color: var(--merak-chat-texto-suave); white-space: nowrap; }

/* ---------------------------------------------------------------------
 * Conversación
 * --------------------------------------------------------------------- */
.merak-chat-conversacion {
	display: flex;
	flex-direction: column;
	height: min(640px, 75vh);
	border: 1px solid var(--merak-chat-borde);
	border-radius: var(--merak-chat-radio);
	overflow: hidden;
}
.merak-chat-conversacion-cabecera {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .9rem 1.1rem;
	border-bottom: 1px solid var(--merak-chat-borde);
	background: var(--merak-chat-fondo-suave);
}
.merak-chat-conversacion-volver { display: flex; align-items: center; gap: .3rem; color: var(--merak-chat-texto-suave); text-decoration: none; font-size: .85rem; }
.merak-chat-conversacion-volver:hover { color: var(--merak-chat-acento-oscuro); }
.merak-chat-conversacion-titulo { display: flex; flex-direction: column; gap: .1rem; }
.merak-chat-conversacion-titulo a, .merak-chat-conversacion-titulo span { font-size: .8rem; color: var(--merak-chat-texto-suave); text-decoration: none; }
.merak-chat-conversacion-titulo a:hover { color: var(--merak-chat-acento-oscuro); }

.merak-chat-conversacion-mensajes {
	flex: 1;
	overflow-y: auto;
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	background: var(--merak-chat-fondo);
}
.merak-chat-burbuja { max-width: 75%; padding: .65rem .9rem; border-radius: 14px; font-size: .9rem; line-height: 1.4; }
.merak-chat-burbuja p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.merak-chat-burbuja-tiempo { display: block; font-size: .68rem; opacity: .6; margin-top: .3rem; }
.merak-chat-burbuja-otro { align-self: flex-start; background: var(--merak-chat-fondo-suave); color: var(--merak-chat-texto); border-bottom-left-radius: 4px; }
.merak-chat-burbuja-mia { align-self: flex-end; background: var(--merak-chat-gradiente); color: #fff; border-bottom-right-radius: 4px; }

.merak-chat-conversacion-form {
	display: flex;
	gap: .6rem;
	padding: .9rem;
	border-top: 1px solid var(--merak-chat-borde);
	background: var(--merak-chat-fondo);
}
.merak-chat-conversacion-form textarea {
	flex: 1;
	resize: none;
	height: 44px;
	max-height: 120px;
	border: 1px solid var(--merak-chat-borde);
	border-radius: 10px;
	padding: .6rem .9rem;
	font-family: inherit;
	font-size: .9rem;
}
.merak-chat-conversacion-form textarea:focus {
	outline: none;
	border-color: var(--merak-chat-acento);
	box-shadow: 0 0 0 2px rgba(232,100,44,.15);
}
.merak-chat-conversacion-form button { align-self: flex-end; }
.merak-chat-conversacion-form button[disabled] { opacity: .6; cursor: default; }

/* ---------------------------------------------------------------------
 * Historial (búsquedas / vistos) y favoritos
 * --------------------------------------------------------------------- */
.merak-chat-lista-historial { display: flex; flex-direction: column; gap: .5rem; }
.merak-chat-fila-historial {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem 1rem;
	border-radius: 10px;
	border: 1px solid var(--merak-chat-borde);
	font-size: .88rem;
	color: var(--merak-chat-texto);
	text-decoration: none;
	flex-wrap: wrap;
}
.merak-chat-fila-historial-link:hover { border-color: var(--merak-chat-acento); }
.merak-chat-fila-historial-negocio { font-size: .72rem; color: var(--merak-chat-texto-suave); background: var(--merak-chat-fondo-suave); padding: .1rem .5rem; border-radius: 999px; flex: 0 0 auto; }
.merak-chat-fila-historial-detalle { flex: 1; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.merak-chat-fila-historial-tiempo { font-size: .75rem; color: var(--merak-chat-texto-suave); flex: 0 0 auto; }
.merak-chat-chip { font-size: .72rem; background: var(--merak-chat-fondo-suave); padding: .1rem .5rem; border-radius: 999px; color: var(--merak-chat-texto-suave); }

.merak-chat-grid-favoritos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.merak-chat-tarjeta-favorito { display: block; border: 1px solid var(--merak-chat-borde); border-radius: var(--merak-chat-radio); overflow: hidden; text-decoration: none; color: var(--merak-chat-texto); transition: border-color .15s ease, box-shadow .15s ease; }
.merak-chat-tarjeta-favorito:hover { border-color: var(--merak-chat-acento); box-shadow: var(--merak-chat-sombra-suave); }
.merak-chat-tarjeta-favorito-imagen { display: block; height: 120px; background-size: cover; background-position: center; background-color: var(--merak-chat-fondo-suave); }
.merak-chat-tarjeta-favorito-imagen-vacia { display: flex; align-items: center; justify-content: center; color: var(--merak-chat-acento); font-size: 1.5rem; }
.merak-chat-tarjeta-favorito-cuerpo { padding: .75rem .9rem; display: flex; flex-direction: column; gap: .3rem; }

.merak-chat-caja-peligro { margin-top: 2rem; padding: 1.2rem; border: 1px solid rgba(179,38,30,.3); border-radius: var(--merak-chat-radio); background: rgba(179,38,30,.05); }
.merak-chat-caja-peligro h3 { margin: 0 0 .5rem; color: var(--merak-chat-error); }
.merak-chat-checkbox { flex-direction: row !important; align-items: center; gap: .5rem !important; }