/* ============================================================================
   CAPA DE AJUSTES DEL CHAT — se carga DESPUÉS de css/chat.css, que no se toca.
   Aquí van dos cosas y solo dos:
     1) los colores del chat, tomados de las variables del tema del cliente
        (chat.css lleva incrustados los de Vitoria: verde #5bac26 y olivas
        #b8c6ab / #cfd5c4);
     2) la alineación del panel, para que sus piezas queden simétricas y
        encajen en cualquier ancho (chat.css las coloca con anchos fijos en
        píxeles y 47 media queries calculados para el layout antiguo).

   Las piezas se alinean a una rejilla común para que el panel se vea IGUAL
   antes y durante la llamada:
     · etiqueta "Chat"            arriba
     · caja de conversación       (.chat1 sin llamada / .chat-content en llamada)
     · etiqueta "Introduce..."
     · caja de escritura          (.consulta1 sin llamada / textarea en llamada)
     · botón Enviar               a su derecha
   ========================================================================== */

/* Hueco que se reserva a la derecha para el botón Enviar. Gobierna a la vez
   la caja de escritura de los dos estados (sin llamada y en llamada), así que
   basta cambiar este número para estrecharlas o ensancharlas sin que se
   descuadren entre sí. Se puede ajustar por cliente desde su css/tema.css. */
:root {
	--chat-hueco-boton: 125px;
}

/* --- Colores ------------------------------------------------------------- */

.converse-container {
	background-color: var(--color-panel-chat, #b8c6ab);
}

#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body {
	background-color: var(--color-panel-chat, #cfd5c4) !important;
}

/* --- Marco del panel ------------------------------------------------------ */

/* El panel conserva su margen interior en todos los anchos: chat.css lo
   reduce a 3px por debajo de cierto tamaño y eso descuadraba las cajas
   blancas (que cuelgan del panel) respecto al resto de piezas. */
.jumbotron2 {
	padding: 10px !important;
}

/* Ocupa todo el interior del panel: así el margen gris es igual a ambos lados
   (chat.css le da un ancho fijo de 898px que dejaba 22px de más a la derecha) */
.converse-container {
	position: relative;
	width: 100% !important;
	box-sizing: border-box;
}

/* --- Piezas del estado SIN llamada ---------------------------------------- */

.tit_chat,
.introduce {
	position: absolute !important;
	left: 25px !important;
	margin: 0 !important;
}

.tit_chat {
	top: 0 !important;
}

.introduce {
	top: 152px !important;
}

/* .chat1 y .consulta1 cuelgan del panel, no del contenedor del chat: sus
   coordenadas llevan sumado el padding de 10px del panel para caer justo
   donde el widget pone sus cajas durante la llamada. */
.chat1,
.consulta1 {
	position: absolute !important;
	left: 35px !important;
	margin: 0 !important;
	width: auto !important;
	box-sizing: border-box;
}

.chat1 {
	top: 37px !important;
	right: 35px !important;
	height: 120px !important;
}

/* +10px: estas cajas cuelgan del panel, que tiene 10px de margen interior */
.consulta1 {
	top: 187px !important;
	right: calc(var(--chat-hueco-boton, 125px) + 10px) !important;
	height: 90px !important;
}

/* --- Piezas del estado EN llamada (widget de Converse) --------------------- */

/* El widget se alinea con el contenedor del panel: en pantallas pequeñas
   aparecía desplazado unos píxeles a la derecha y arrastraba con él la caja
   de escritura y el botón. */
#conversejs#conversejs {
	position: relative !important;
	left: 0 !important;
	right: auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Caja de conversación: mismo hueco que .chat1. La altura es fija (no solo
   máxima) para que la caja de escritura no suba cuando hay pocos mensajes. */
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
	width: auto !important;
	margin-left: 25px !important;
	margin-right: 25px !important;
	margin-top: 27px !important;
	height: 120px !important;
	max-height: 120px !important;
	box-sizing: border-box !important;
}

/* Caja de escritura: mismo hueco que .consulta1 (25px a la izquierda y 125
   a la derecha, donde va el botón).
   El id va repetido a propósito: chat.css trae reglas para estas piezas con
   !important y selectores muy largos (7-8 clases) que, si no, ganarían en
   ciertos anchos y descuadrarían el panel. */
#conversejs#conversejs .chat-textarea,
#conversejs#conversejs .sendXMPPMessage .chat-textarea {
	display: block !important;
	position: absolute !important;
	top: 30px !important;
	left: 25px !important;
	/* El ancho se calcula (25 de margen izquierdo + el hueco del botón): en un
	   textarea, anclarlo con left+right no funciona porque el navegador usa su
	   ancho propio y se sale del panel en pantallas pequeñas. */
	right: auto !important;
	width: calc(100% - 25px - var(--chat-hueco-boton, 125px)) !important;
	max-width: none !important;
	height: 90px !important;
	max-height: 90px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* El bloque de envío conserva su altura aunque sus hijos estén posicionados */
#conversejs#conversejs .sendXMPPMessage {
	min-height: 150px !important;
}

/* --- Botón Enviar: idéntico en ambos estados ------------------------------ */

.buttonOff,
#conversejs#conversejs .send-button {
	position: absolute !important;
	left: auto !important;
	right: 25px !important;
	margin: 0 !important;
	width: 100px !important;
	height: 50px !important;
	background-color: var(--color-boton-enviar, #5bac26) !important;
	border: 1px solid var(--color-boton-enviar, #5bac26) !important;
	border-radius: 24px !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	font-size: 1rem !important;
}

/* Sin llamada: centrado con .consulta1, que empieza en 177 y mide 90 */
.buttonOff {
	top: 197px !important;
}

/* En llamada el botón lo pinta Converse dentro de su propio bloque de envío,
   así que se ancla A ESE BLOQUE (no al panel): si se le dan coordenadas del
   panel, se suman a la posición del bloque y el botón acaba fuera de la vista.
   position:relative aquí garantiza que el bloque sea siempre la referencia,
   dependa o no de lo que traiga converse.css. */
#conversejs#conversejs .sendXMPPMessage {
	position: relative !important;
	/* left/width: el original desplaza este bloque unos píxeles a la derecha,
	   lo que descuadraba el botón respecto a las cajas */
	left: 0 !important;
	right: auto !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* 30px de margen del textarea + (90 - 50) / 2 para centrarlo con él */
#conversejs#conversejs .send-button {
	top: 50px !important;
	bottom: auto !important;
}

/* Durante la llamada manda el botón real de Converse: el decorativo se
   oculta para que no queden dos superpuestos. */
#conversejs:has(.chatroom) ~ .buttonOff {
	display: none !important;
}