/* Guafutbol — Mensajería interna */

:root { --gl-lima-fallback: #c8f31d; }

/* Botón + formulario en el perfil público */
.gl-mensaje-caja { margin: 16px 0; }

.gl-btn-mensaje {
	display: inline-block;
	background: var(--gl-lima, var(--gl-lima-fallback));
	color: #0b0c0e;
	font-weight: 700;
	font-size: 13px;
	padding: 10px 18px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	text-decoration: none;
}
.gl-btn-mensaje:hover { opacity: .88; }

.gl-form-mensaje {
	display: none;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
	max-width: 420px;
}
.gl-form-mensaje.gl-visible { display: flex; }
.gl-form-mensaje textarea {
	background: #1b1d22;
	border: 1px solid rgba(255,255,255,0.12);
	color: #fff;
	border-radius: 10px;
	padding: 10px 12px;
	min-height: 90px;
	font-size: 13px;
	resize: vertical;
}

.gl-btn-mensaje-enviar {
	background: var(--gl-lima, var(--gl-lima-fallback));
	color: #0b0c0e;
	border: none;
	border-radius: 10px;
	padding: 10px 16px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	align-self: flex-start;
}
.gl-btn-mensaje-enviar:hover { opacity: .88; }

.gl-mensaje-aviso {
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 12px;
}
.gl-mensaje-aviso-ok { background: rgba(200,243,29,0.12); color: var(--gl-lima, var(--gl-lima-fallback)); border: 1px solid rgba(200,243,29,0.3); }
.gl-mensaje-aviso-error { background: rgba(255,76,76,0.08); color: #ff9d9d; border: 1px solid rgba(255,76,76,0.3); }

/* Bandeja del dashboard */
.gl-mensajes-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 20px;
	background: #14161a;
	border: 1px solid rgba(200,243,29,0.12);
	border-radius: 16px;
	overflow: hidden;
	min-height: 420px;
}

.gl-mensajes-lista {
	border-right: 1px solid rgba(255,255,255,0.06);
	overflow-y: auto;
	max-height: 560px;
}
.gl-hilo-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	color: #eaeaea;
}
.gl-hilo-item:hover, .gl-hilo-activo { background: rgba(200,243,29,0.06); }
.gl-hilo-nombre { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.gl-hilo-badge {
	background: var(--gl-lima, var(--gl-lima-fallback));
	color: #0b0c0e;
	font-size: 11px;
	font-weight: 800;
	border-radius: 999px;
	padding: 1px 7px;
}
.gl-hilo-preview { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gl-mensajes-conversacion { padding: 20px 24px; display: flex; flex-direction: column; }

.gl-conversacion-burbujas {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	overflow-y: auto;
	max-height: 420px;
	margin-bottom: 16px;
	padding-right: 6px;
}
.gl-burbuja { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.4; }
.gl-burbuja p { margin: 0; }
.gl-burbuja-fecha { display: block; font-size: 10px; color: rgba(0,0,0,0.4); margin-top: 4px; }
.gl-burbuja-mia { align-self: flex-end; background: var(--gl-lima, var(--gl-lima-fallback)); color: #0b0c0e; }
.gl-burbuja-otro { align-self: flex-start; background: #1f2126; color: #eaeaea; }
.gl-burbuja-otro .gl-burbuja-fecha { color: #888; }

.gl-form-respuesta { display: flex; gap: 10px; align-items: flex-end; }
.gl-form-respuesta textarea {
	flex: 1;
	background: #1b1d22;
	border: 1px solid rgba(255,255,255,0.12);
	color: #fff;
	border-radius: 10px;
	padding: 10px 12px;
	min-height: 48px;
	font-size: 13px;
	resize: vertical;
}

@media (max-width: 700px) {
	.gl-mensajes-layout { grid-template-columns: 1fr; }
	.gl-mensajes-lista { max-height: 220px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
}