/**
 * Chat del evento: burbuja flotante, panel y reestilado de Better Messages.
 * Tokens del sistema de diseño GoSocial (docs/gosocial-design-system.md), con
 * fallback por si el bloque se renderiza fuera del tema.
 */

.gec-root {
	--gec-surface: var(--gosy-surface, #ffffff);
	--gec-border: var(--gosy-border, #d3def0);
	--gec-soft: var(--gosy-soft, #f6f8fb);
	--gec-soft-2: var(--gosy-soft-2, #eef3f8);
	--gec-ink: var(--gosy-ink, #1a2538);
	--gec-text: var(--gosy-text, #2f3f5c);
	--gec-muted: var(--gosy-muted, #637799);
	--gec-brand: var(--gosy-brand, #fe7900);
	--gec-brand-hover: var(--gosy-brand-hover, #e66d00);
	--gec-brand-soft: var(--gosy-brand-soft, #fff3e6);
	--gec-font: var(--gosy-font-ui, "Poppins", system-ui, -apple-system, sans-serif);

	font-family: var(--gec-font);
}

.gec-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gec-hidden {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Burbuja                                                             */
/* ------------------------------------------------------------------ */

/* Fondo atenuado. Solo se enciende en móvil (ver el bloque del final): en
   escritorio el panel es pequeño y una cortina a pantalla completa pesaría. */
.gec-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9996;
	background: rgba(26, 37, 56, 0.5);
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
	display: none;
}

.gec-backdrop[hidden] {
	display: none;
}

.gec-bubble {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9998;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--gec-brand);
	color: #ffffff;
	cursor: pointer;
	/* Halo naranja para que no se pierda sobre fondos claros: en plano se
	   confundía con el resto de la página. */
	box-shadow: var(--gosy-shadow-lg, 0 16px 40px rgba(26, 37, 56, 0.12)),
		0 0 0 6px rgba(254, 121, 0, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Con mensajes sin leer, el halo late. Una sola señal, y discreta. */
.gec-bubble--unread {
	animation: gec-latido 2.4s ease-out infinite;
}

/* Con el panel abierto ya no hay nada que anunciar. */
.gec-root--panel-open .gec-bubble {
	animation: none;
}

@keyframes gec-latido {
	0%, 70%, 100% {
		box-shadow: var(--gosy-shadow-lg, 0 16px 40px rgba(26, 37, 56, 0.12)),
			0 0 0 6px rgba(254, 121, 0, 0.14);
	}
	35% {
		box-shadow: var(--gosy-shadow-lg, 0 16px 40px rgba(26, 37, 56, 0.12)),
			0 0 0 14px rgba(254, 121, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gec-bubble--unread {
		animation: none;
	}
}

.gec-bubble:hover,
.gec-bubble:focus-visible {
	background: var(--gec-brand-hover);
	transform: translateY(-1px);
}

.gec-bubble:focus-visible {
	outline: 3px solid var(--gosy-brand-active, #c95f00);
	outline-offset: 3px;
}

.gec-bubble__icon,
.gec-bubble__close {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.gec-bubble__icon svg { width: 27px; height: 27px; }
.gec-bubble__close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.gec-bubble__close svg { width: 24px; height: 24px; }

.gec-root--panel-open .gec-bubble__icon { opacity: 0; transform: rotate(90deg); }
.gec-root--panel-open .gec-bubble__close { opacity: 1; transform: rotate(0); }

.gec-bubble__badge {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--gosy-danger, #d63638);
	border: 2px solid #ffffff;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gec-root--panel-open .gec-bubble__badge {
	opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Panel                                                               */
/* ------------------------------------------------------------------ */

.gec-dock {
	position: fixed;
	right: 24px;
	bottom: 96px;
	z-index: 9997;
	width: 420px;
	max-width: calc(100vw - 32px);
	max-height: min(700px, calc(100vh - 130px));
	background: var(--gec-surface);
	border: 1px solid var(--gec-border);
	border-radius: var(--gosy-radius-xl, 16px);
	box-shadow: var(--gosy-shadow-lg, 0 16px 40px rgba(26, 37, 56, 0.12));
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.gec-root--panel-open .gec-dock {
	opacity: 1;
	transform: none;
}

.gec-dock[hidden] {
	display: none;
}

.gec-dock__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--gec-border);
}

.gec-dock__icon {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: var(--gosy-radius-md, 10px);
	background: var(--gec-brand-soft);
	color: var(--gec-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gec-dock__icon svg { width: 18px; height: 18px; }

.gec-dock__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--gosy-font-size-lg, 1.0625rem);
	font-weight: var(--gosy-weight-semibold, 600);
	color: var(--gec-ink);
}

/* La insignia explica de qué va el chat al pulsarla. En la cabecera no cabe el
   texto entero —y en móvil menos—, así que se cuenta al pedirlo. */
.gec-badge__wrap {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
}

.gec-badge__tip {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 3;
	width: max-content;
	max-width: 220px;
	padding: 8px 11px;
	border-radius: var(--gosy-radius-md, 10px);
	background: var(--gec-ink, #1a2538);
	color: #ffffff;
	font-size: var(--gosy-font-size-xs, 0.75rem);
	line-height: 1.4;
	box-shadow: var(--gosy-shadow-md, 0 8px 24px rgba(26, 37, 56, 0.08));
}

.gec-badge__tip[hidden] {
	display: none;
}

.gec-badge__tip::before {
	content: "";
	position: absolute;
	top: -4px;
	right: 14px;
	width: 8px;
	height: 8px;
	background: inherit;
	transform: rotate(45deg);
}

.gec-badge {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--gec-soft);
	color: var(--gec-muted);
	font-size: var(--gosy-font-size-xs, 0.6875rem);
	font-weight: var(--gosy-weight-medium, 500);
	white-space: nowrap;
}

.gec-badge svg { width: 13px; height: 13px; }

.gec-badge--closed {
	background: var(--gec-soft-2);
	font-weight: var(--gosy-weight-semibold, 600);
}

.gec-badge--pending {
	background: var(--gosy-warning-soft, #fff7e6);
	color: var(--gosy-warning, #f59e0b);
}

.gec-dock__close {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: var(--gosy-radius-md, 8px);
	background: transparent;
	color: var(--gec-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gec-dock__close:hover { background: var(--gec-soft); }
.gec-dock__close svg { width: 17px; height: 17px; }

.gec-dock__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

/* Con chat dentro, NADA puede recortar: los desplegables de Better Messages —el
   menú del hilo, los emojis— se dibujan fuera del panel y quedaban cortados.
   El chat se desplaza por dentro él solo, así que aquí no hace falta scroll.
   Las esquinas redondeadas se conservan con border-radius en cada pieza, que
   recorta su propio fondo sin recortar lo que cuelga de ella. */
.gec-dock--chat,
.gec-dock--chat .gec-dock__body {
	overflow: visible;
}

/* Altura DEFINIDA cuando lleva chat. Hacen falta dos cosas de ella:
   que el chat pueda calcular su 100% contra algo concreto, y que el panel no
   dé saltos según entren mensajes. */
.gec-dock--chat {
	height: min(700px, calc(100vh - 130px));
}

.gec-dock--chat .gec-dock__head {
	border-radius: var(--gosy-radius-xl, 16px) var(--gosy-radius-xl, 16px) 0 0;
}

/* ------------------------------------------------------------------ */
/* Avisos de estado                                                    */
/* ------------------------------------------------------------------ */

.gec-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 14px 0;
	padding: 10px 12px;
	border-radius: var(--gosy-radius-md, 10px);
	font-size: var(--gosy-font-size-sm, 0.875rem);
	line-height: var(--gosy-line-normal, 1.5);
}

.gec-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }

/* Un aviso suelto (chat programado o cerrado sin conversación debajo) no puede
   quedarse pegado al borde del panel. Cuando le sigue el chat, no hace falta. */
.gec-note:last-child { margin-bottom: 14px; }

.gec-note--waiting {
	background: var(--gosy-warning-soft, #fff7e6);
	color: var(--gec-text);
}
.gec-note--waiting svg { color: var(--gosy-warning, #f59e0b); }

.gec-note--pending,
.gec-note--closed {
	background: var(--gec-soft);
	color: var(--gec-muted);
}

.gec-chat {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* ------------------------------------------------------------------ */
/* Teaser: bienvenida pública + burbujas vacías difuminadas + CTA      */
/* ------------------------------------------------------------------ */

.gec-teaser {
	position: relative;
	padding: 16px;
}

.gec-msg {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.gec-msg__avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: visible;
}

.gec-msg__avatar img {
	width: 40px;
	height: 40px;
	display: block;
}

/* Misma maqueta que el chat de verdad: el nombre va ENCIMA de la burbuja, no
   dentro. Antes las dos vistas no se parecían y la buena era la del chat. */
.gec-msg__col {
	flex: 1 1 auto;
	min-width: 0;
}

.gec-msg__body {
	background: var(--gec-soft);
	border: 1px solid var(--gec-border);
	border-radius: 4px 14px 14px 14px;
	padding: 10px 14px;
}

.gec-msg__author {
	font-size: var(--gosy-font-size-sm, 0.875rem);
	font-weight: var(--gosy-weight-semibold, 600);
	color: var(--gec-brand);
	margin: 0 0 5px 2px;
}

.gec-msg__text {
	font-size: var(--gosy-font-size-sm, 0.875rem);
	line-height: var(--gosy-line-normal, 1.5);
	color: var(--gec-text);
}

.gec-blur {
	margin-top: 12px;
	padding-bottom: 46px;
	pointer-events: none;
	user-select: none;
}

.gec-blur__row { display: flex; margin-bottom: 9px; }
.gec-blur__row--own { justify-content: flex-end; }

.gec-blur__bubble {
	display: block;
	height: 30px;
	border-radius: 14px;
	background: var(--gec-soft-2);
	filter: blur(4px);
}

.gec-blur__row--own .gec-blur__bubble { background: var(--gec-brand-soft); }

.gec-teaser__cta { text-align: center; margin-top: 14px; }

.gec-teaser__cta--over {
	position: relative;
	margin-top: -104px;
	padding-top: 64px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--gec-surface) 58%);
}

.gec-teaser__ctatext {
	margin: 0 0 10px;
	font-size: var(--gosy-font-size-sm, 0.875rem);
	color: var(--gec-muted);
}

.gec-btn {
	display: inline-block;
	padding: 9px 20px;
	border: 0;
	border-radius: 999px;
	background: var(--gec-brand);
	color: #fff;
	font-family: inherit;
	font-size: var(--gosy-font-size-sm, 0.875rem);
	font-weight: var(--gosy-weight-semibold, 600);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.gec-btn:hover,
.gec-btn:focus { background: var(--gec-brand-hover); color: #fff; text-decoration: none; }
.gec-btn:focus-visible { outline: 2px solid var(--gosy-brand-active, #c95f00); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* Better Messages, vestido de GoSocial                                */
/*                                                                     */
/* Se hace con SUS variables de tema (assets/css/variables.css) en vez  */
/* de pisar clases: es lo que el plugin expone para esto y sobrevive a  */
/* sus actualizaciones.                                                 */
/* ------------------------------------------------------------------ */

/* Los mismos tokens para el chat de los eventos y para la página del chat
   general: una sola paleta en todo el sitio. */
.gec-chat,
.gec-chat-page .bp-messages-wrap {
	--gec-font: var(--gosy-font-ui, "Poppins", system-ui, -apple-system, sans-serif);
	--gec-brand: var(--gosy-brand, #fe7900);
	--gec-border: var(--gosy-border, #d3def0);
	--gec-ink: var(--gosy-ink, #1a2538);

	--bm-font-family: var(--gec-font);
	--bm-border-radius: 12px;
	--bm-border-color: 211, 222, 240;
	--bm-border-secondary-color: 238, 243, 248;
	--main-bm-border-color: #d3def0;
	--bm-border-active: 185, 199, 220;

	--bm-bg-color: 255, 255, 255;
	--bm-bg-secondary: 246, 248, 251;
	--bm-hover-bg: 246, 248, 251;
	--bm-text-color: 47, 63, 92;
	--bm-placeholder: 138, 152, 173;

	--main-bm-color: 254, 121, 0;
	--bm-button-bg: 254, 121, 0;
	--bm-button-color: 255, 255, 255;
	--bm-widgets-button-radius: 999px;

	--bm-message-font-size: 13.5px;
	--bm-message-line-height: 20px;
	--bm-message-border-radius: 14px;
	/* 0, no 50%: nuestros avatares YA traen su círculo dibujado dentro del SVG,
	   y redondear el <img> recortaba la esquina donde va la bandera. */
	--bm-avatar-radius: 0;
	--bm-date-radius: 999px;

	--bm-sticky-date-bg: #eef3f8;
	--bm-sticky-date-color: #637799;

	--left-message-bg-color: 246, 248, 251;
	--left-message-text-color: 47, 63, 92;
	--left-message-nickname-color: 254, 121, 0;

	--right-message-bg-color: 255, 243, 230;
	--right-message-text-color: 47, 63, 92;
	--right-message-nickname-color: 254, 121, 0;
}

/* De su cabecera sobra el nombre de la sala y sus avatares: nuestro panel ya
   dice de qué chat se trata. Se ocultan SOLO esos datos.
   
   Nunca la barra entera: en la vista de mensajes lleva el menú (.thread-actions)
   y en la pantalla de información lleva el botón de volver (.back). Ocultarla
   dejaba esa pantalla sin salida. */
.gec-chat .thread-info {
	display: none !important;
}

/* Al ocultar .thread-info desaparece el bloque que empujaba los botones a la
   derecha, y el menú de los tres puntos —que se alinea a su botón— se abría
   hacia la izquierda y se salía del panel. Se devuelven a su sitio. */
.gec-chat .thread-actions {
	margin-left: auto;
}

/* La capa de "Tap to open messages". No basta con desactivar el ajuste: Better
   Messages la pinta SIEMPRE y solo le cambia la opacidad, así que aun invisible
   seguiría tapando el chat y capturando los toques (de ahí que el compositor se
   viera lavado y no respondiera). Aquí sobra: nuestro panel ya se abre solo. */
.gec-chat .bp-messages-mobile-tap {
	display: none !important;
}

/* Su contenedor interior trae borde y esquinas propias (.bp-messages-wrap), y
   dentro de nuestro panel eso se ve como una caja dentro de otra. Se le quitan.
   Va acotado a .gec-chat: los mensajes privados de otras partes del sitio
   conservan su marco. El radio lleva !important porque el suyo también. */
.gec-chat .bp-messages-wrap {
	border: 0;
	border-radius: 0 0 var(--gosy-radius-xl, 15px) var(--gosy-radius-xl, 15px) !important;
	/* Better Messages le calcula la altura por estilo en línea y no siempre cuadra
	   con nuestro panel: sin esto, el compositor se salía por debajo y quedaba
	   suelto sobre la página. Acotar el contenedor EXTERIOR no basta, porque la
	   altura que se desborda es la de este. */
	height: 100% !important;
	max-height: 100% !important;
	display: flex;
	flex-direction: column;
}

/* Lo que crece es la lista de mensajes; el compositor se queda pegado abajo. */
.gec-chat .bp-messages-wrap > .bp-messages-threads-wrapper {
	flex: 1 1 auto;
	min-height: 0;
}

/* A ras del panel: sin borde ni margen propios, y con las esquinas de abajo
   iguales a las suyas para que el compositor no las pise. El border-radius
   recorta el fondo del propio elemento, pero NO lo que cuelga de él: por eso
   los desplegables siguen pudiendo salirse. */
.gec-chat .bp-messages-chat-wrap {
	flex: 1 1 auto;
	min-height: 0;
	border: 0;
	border-radius: 0 0 var(--gosy-radius-xl, 15px) var(--gosy-radius-xl, 15px);
	overflow: visible;
	/* Better Messages se fija su propia altura por estilo en línea. Sin nada que
	   la recorte, el compositor se salía por debajo del panel: aquí se le dice
	   que ocupe justo el hueco disponible, ni más ni menos. */
	height: 100% !important;
	max-height: 100%;
}

/* Las burbujas de la izquierda llevan borde, como en el teaser. */
.gec-chat .bm-message-content {
	border: 1px solid var(--gec-border);
}

/* ------------------------------------------------------------------ */
/* Móvil: el panel sube como hoja                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.gec-bubble {
		right: 16px;
		bottom: 16px;
		width: 58px;
		height: 58px;
	}

	/* Ventana flotante, no hoja pegada al borde: se despega de los cuatro lados
	   y se queda POR ENCIMA de la burbuja, así se lee como un popup sobre la
	   página del evento y no como una pantalla nueva. */
	.gec-dock {
		right: 12px;
		left: 12px;
		bottom: 86px;
		top: auto;
		width: auto;
		max-width: none;
		border-radius: var(--gosy-radius-xl, 16px);
		transform: translateY(10px) scale(0.98);
	}

	/* Alto acotado y ajustado al contenido: el hueco muerto del pie venía de
	   estirar el panel hasta abajo del todo. */
	.gec-dock--chat {
		height: min(520px, calc(100vh - 190px));
		max-height: none;
	}

	.gec-dock--teaser {
		height: auto;
		max-height: calc(100vh - 190px);
	}

	/* La burbuja se queda: con el panel flotando ya no estorba, y su aspa es el
	   gesto natural para cerrarlo. */

	.gec-backdrop {
		display: block;
	}

	.gec-root--panel-open .gec-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	body.gec-dock-open {
		overflow: hidden;
	}
}

/* ------------------------------------------------------------------ */
/* Aviso emergente de mensaje nuevo                                    */
/*                                                                     */
/* No lo pintamos nosotros: es el de Better Messages, que ya salta con  */
/* su propio sondeo. Aquí solo se le cambia la ropa —viene en negro—    */
/* para que pegue con el resto. Se pinta al final del <body>, fuera del */
/* panel, así que se acota con la clase que ponemos en la página.       */
/* ------------------------------------------------------------------ */

.gec-event-page .bm-toast-site-message {
	background: var(--gosy-surface, #ffffff) !important;
	color: var(--gosy-text, #2f3f5c) !important;
	border: 1px solid var(--gosy-border, #d3def0);
	border-left: 4px solid var(--gosy-brand, #fe7900);
	border-radius: var(--gosy-radius-lg, 12px) !important;
	box-shadow: var(--gosy-shadow-lg, 0 16px 40px rgba(26, 37, 56, 0.12));
	font-family: var(--gosy-font-ui, "Poppins", system-ui, sans-serif);
	padding: 12px 14px;
}

.gec-event-page .bm-toast-site-message .bm-toast-site-message-avatar,
.gec-event-page .bm-toast-site-message .bm-toast-site-message-avatar > img {
	min-width: 40px;
	max-width: 40px;
	border-radius: 50%;
}

.gec-event-page .bm-toast-site-message .bm-toast-site-message-title {
	font-size: var(--gosy-font-size-sm, 0.875rem);
	font-weight: var(--gosy-weight-semibold, 600);
	line-height: var(--gosy-line-normal, 1.4);
	color: var(--gosy-ink, #1a2538);
}

/* El «notificación» suelto de debajo no aporta: lo que importa es quién
   escribe y en qué chat, y eso ya está en el título. */
.gec-event-page .bm-toast-site-message .bm-toast-site-message-subject {
	font-size: var(--gosy-font-size-xs, 0.75rem);
	color: var(--gosy-muted, #637799);
	text-transform: lowercase;
}

.gec-event-page .bm-toast-site-message .Toastify__close-button {
	color: var(--gosy-muted, #637799);
	opacity: 0.8;
}

/* Cuánta conversación hay ahí dentro. Es el gancho del teaser: un número, nada
   más — ni quién escribe ni qué dice. */
.gec-count {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 16px 0 0;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--gec-soft, #f6f8fb);
	color: var(--gec-muted, #637799);
	font-size: var(--gosy-font-size-xs, 0.75rem);
	line-height: 1.3;
}

.gec-count svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--gec-brand, #fe7900);
}

.gec-count strong {
	color: var(--gec-ink, #1a2538);
	font-weight: var(--gosy-weight-semibold, 600);
}

/* El globo del gancho: cuántos mensajes hay, para quien todavía no está dentro.
   Blanco con el número en naranja — deliberadamente distinto del rojo, que
   significa "sin leer" y solo lo ve quien participa. Tampoco late: no es una
   novedad, es una invitación. */
.gec-bubble__badge--count {
	background: #ffffff;
	color: var(--gec-brand, #fe7900);
	border-color: #ffffff;
	box-shadow: 0 2px 6px rgba(26, 37, 56, 0.18);
}

/* Cinturón: cualquier regla que redondee el <img> del avatar dentro del chat
   volvería a comerse la bandera. El círculo lo dibuja el propio SVG. */
.gec-chat .avatar,
.gec-chat img.avatar,
.gec-chat-page .avatar,
.gec-chat-page img.avatar {
	border-radius: 0 !important;
}

/* Nombre y avatar del chat no llevan a ninguna parte ni abren nada.
   El enlace ya se quita en servidor (GEC_Identity vacía el campo `url`), pero
   Better Messages deja además un onClick sobre el avatar y el nombre que abre
   su ficha de usuario. Esto lo desactiva sin tocar su código. */
.gec-chat .avatar,
.gec-chat .bm-user,
.gec-chat .bbpm-avatar {
	pointer-events: none;
	cursor: default;
}

/* Y si alguna vista suya los envuelve en un enlace, tampoco navega. */
.gec-chat a:has(> .avatar),
.gec-chat a:has(> .bm-user) {
	pointer-events: none;
	cursor: default;
}

/* El selector de emojis se dibuja con z-index 801 y nuestro panel vive en 9997,
   así que quedaba detrás y no se veía. Better Messages solo lo sube en su modo
   de pantalla completa, que aquí está desactivado a propósito.
   Se pone por encima del panel (9997) y de la burbuja (9998). */
.gec-event-page .bm-emoji-picker-container,
.gec-event-page .bm-stickers-container,
.gec-event-page .bm-gifs-container {
	z-index: 10000 !important;
}