/**
 * Skin "Onyx" — oscuro, translúcido, con halo de color.
 * Panel de cristal esmerilado sobre fondo casi negro; el color de marca
 * envuelve el botón flotante con un resplandor suave y da degradado a las
 * burbujas del visitante. Para marcas tech y premium.
 */

.acw--onyx {
	--acw-surface: rgba(19, 19, 26, 0.92);
	--acw-text: #ececf1;
	--acw-muted: #8b8b96;
	--acw-border: rgba(255, 255, 255, 0.1);
	--acw-header-bg: rgba(255, 255, 255, 0.03);
	--acw-header-text: #ececf1;
	--acw-bot-bg: rgba(255, 255, 255, 0.07);
	--acw-bot-text: #ececf1;
	--acw-input-bg: rgba(255, 255, 255, 0.03);
	--acw-field-bg: rgba(255, 255, 255, 0.05);
	--acw-radius-panel: 18px;
	--acw-radius-bubble: 14px;
	--acw-launcher-bg: #16161d;
	--acw-launcher-color: #ffffff;
	--acw-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);

	/* Degradado derivado del color de marca (con fallback plano) */
	--acw-user-bg: var(--acw-primary);
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
	.acw--onyx {
		--acw-user-bg: linear-gradient(
			135deg,
			var(--acw-primary),
			color-mix(in srgb, var(--acw-primary) 55%, #0b0b10)
		);
	}
}

.acw--onyx .acw-panel {
	border: 1px solid var(--acw-border);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.acw--onyx .acw-header {
	border-bottom: 1px solid var(--acw-border);
}

.acw--onyx .acw-avatar {
	background: rgba(255, 255, 255, 0.08);
}


/* Firma del diseño: anillo luminoso alrededor del botón flotante */
.acw--onyx .acw-launcher {
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 0 0 0 transparent, 0 10px 34px rgba(0, 0, 0, 0.5);
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
	.acw--onyx .acw-launcher {
		box-shadow:
			0 0 22px color-mix(in srgb, var(--acw-primary) 55%, transparent),
			0 10px 34px rgba(0, 0, 0, 0.5);
	}

	.acw--onyx .acw-launcher:hover {
		box-shadow:
			0 0 32px color-mix(in srgb, var(--acw-primary) 75%, transparent),
			0 10px 34px rgba(0, 0, 0, 0.5);
	}

	.acw--onyx .acw-ico--chat {
		color: color-mix(in srgb, var(--acw-primary) 70%, #ffffff);
	}
}


.acw--onyx .acw-typing span {
	background: var(--acw-primary);
}