/* ==========================================================================
   TheriansHub — Mensajería (Better Messages) re-vestida con la paleta de la app.
   Better Messages cablea TODA su UI con custom properties --bm-* (color en
   TRIPLETES RGB, porque las compone con rgb()/rgba()). En vez de pelear con
   cientos de clases .bm-*, redefinimos ~10 variables → la interfaz entera adopta
   el oscuro + verde de la app.

   - Scope: body.th-bp-internal .bp-messages-wrap-main → preciso (solo el chat) y
     con especificidad (0,2,1) para vencer los defaults de BM (≤ :root) sin
     !important.
   - Base oscura FORZADA con los valores directos → independiente del ajuste de
     tema (light/dark) del panel de Better Messages.
   - Los tripletes reflejan los tokens de theme.css (opción A, inline):
       19, 24, 22   = --color-surface     (#131816)
       26, 33, 29   = --color-surface-2   (#1A211D)
       31, 42, 38   = --color-border      (#1F2A26)
       236, 237, 238= --color-text        (#ECEDEE)
       29, 158, 117 = --color-brand       (#1D9E75)
   Markup/clases: plugin bp-better-messages (no se tocan).
   ========================================================================== */

body.th-bp-internal .bp-messages-wrap-main {
	/* Superficies */
	--bm-bg-color: 19, 24, 22;        /* = --color-surface  */
	--bm-bg-secondary: 26, 33, 29;    /* = --color-surface-2 */

	/* Bordes */
	--bm-border-color: 31, 42, 38;            /* = --color-border */
	--bm-border-secondary-color: 31, 42, 38;  /* = --color-border */

	/* Texto */
	--bm-text-color: 236, 237, 238;   /* = --color-text */

	/* Acento de marca (botón Send, iconos, estados): verde */
	--bm-button-bg: 29, 158, 117;     /* = --color-brand */
	--bm-button-color: 255, 255, 255; /* texto/icono sobre verde */
	--bm-border-active: 29, 158, 117; /* = --color-brand */

	/* Overlays de hover/active (hex+alpha): variante oscura forzada, va bien
	   sobre el verde y sobre las superficies oscuras. */
	--bm-button-hover: #ffffff24;
	--bm-button-active: #ffffff45;

	/* Burbujas de mensaje (también tripletes RGB): ajena en superficie oscura,
	   propia en verde marca con texto blanco. !important para vencer al modo
	   body.bm-messages-dark, que fija estas variantes con !important (CSS:6286+). */
	--left-message-bg-color: 26, 33, 29 !important;        /* = --color-surface-2 (ajena) */
	--left-message-text-color: 236, 237, 238 !important;   /* = --color-text */
	--right-message-bg-color: 29, 158, 117 !important;     /* = --color-brand (propia) */
	--right-message-text-color: 255, 255, 255 !important;  /* blanco sobre verde */
	--right-message-nickname-color: 29, 158, 117 !important; /* = --color-brand */
}

/* ==========================================================================
   Separación elegante entre zonas (no toca el mapeo --bm-* de arriba).
   Columnas reales de Better Messages: .bp-messages-side-threads (lista, izq) y
   .bp-messages-column (chat, der), dispuestas con --bm-side-width.
   Solo tokens del theme; especificidad body.th-bp-internal … para ganar al core
   sin !important (salvo el radio, que el core fija con !important).
   ========================================================================== */

/* 1. Tarjeta: el borde+bg ya vienen por variables; refinamos el radio y la
   despegamos del fondo con una sombra sutil. */
body.th-bp-internal .bp-messages-wrap {
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-md);
}

/* 2 + 3. Divisoria fina entre columnas + profundidad por tono:
   lista (izq) en surface-2 con línea a su derecha; chat (der) en surface base. */
body.th-bp-internal .bp-messages-wrap .bp-messages-side-threads {
	background: var(--color-surface-2);
	border-right: 1px solid var(--color-border);
}
body.th-bp-internal .bp-messages-wrap .bp-messages-column {
	background: var(--color-surface);
}

/* 4. Limpiar "encajonado": el contenedor externo llena la columna central. */
body.th-bp-internal .bp-messages-wrap-main {
	width: 100%;
	margin: 0;
}

/* ==========================================================================
   Iconos de acción en verde de marca.
   Sus enlaces llevan .bm-no-link-style → escapan a la regla de color de Better
   Messages y heredan el azul de enlace por defecto de Astra. Como los SVG usan
   stroke="currentColor", basta fijar el COLOR del contenedor; no se toca fill/stroke.
   Acotado al header del chat (no a la lista de conversaciones) para teñir solo
   los iconos de acción: lápiz "nuevo mensaje", atrás (<), expandir (⤢), 3 puntos.
   ========================================================================== */
body.th-bp-internal .bp-messages-wrap a.new-message,
body.th-bp-internal .bp-messages-wrap .chat-header .bm-svg {
	color: var(--color-brand);
}