/**
 * ChatKit – styles du widget public.
 *
 * Remplace les classes utilitaires Tailwind (qui n'étaient plus chargées)
 * par du CSS sur-mesure. Les valeurs reprennent fidèlement les utilitaires
 * Tailwind d'origine.
 */

/* -------------------------------------------------------------------------
 * Bouton flottant
 * ---------------------------------------------------------------------- */
.chat-kit-button {
	z-index: 50; /* z-50 */
	position: fixed;
	bottom: 0; /* bottom-5 */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5rem;
	padding: 1rem; /* p-4 */
	border: none;
	border-radius: 9999px; /* rounded-full */
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
	line-height: 0;
	cursor: pointer;
	transition: all 150ms ease; /* transition-all */
}

.chat-kit-button:hover:not(:disabled) {
	transform: scale(1.05); /* hover:scale-105 */
}

.chat-kit-button:disabled {
	cursor: default;
}

/* Position */
.chat-kit-button--left {
	left: 0; /* left-5 */
}

.chat-kit-button--right {
	right: 0; /* right-5 */
}

/* Thème sombre */
.chat-kit-button--dark {
	background-color: #000; /* bg-black */
	color: #fff; /* text-white */
}

.chat-kit-button--dark:hover:not(:disabled) {
	background-color: #1f2937; /* hover:bg-gray-800 */
}

/* Thème clair */
.chat-kit-button--light {
	background-color: #fff; /* bg-white */
	color: #000; /* text-black */
	border: 1px solid #e5e7eb; /* border border-gray-200 */
}

.chat-kit-button--light:hover:not(:disabled) {
	background-color: #f3f4f6; /* hover:bg-gray-100 */
}

/* État masqué (bouton caché lorsque le panneau est ouvert) */
.chat-kit-is-hidden {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Panneau de chat
 * ---------------------------------------------------------------------- */
.chat-kit-panel {
	z-index: 1060;
	display: none; /* hidden par défaut */
	position: fixed;
	top: 0; /* top-0 */
	box-sizing: border-box;
	width: 100%; /* w-full */
	height: 100%; /* h-full */
	padding: 0.5rem; /* p-2 */
	padding-top: var(--height-top);
}

.chat-kit-panel.is-open {
	display: flex;
	align-items: center; /* items-center */
	justify-content: center; /* justify-center */
}

/* Largeurs responsives */
@media (min-width: 800px) {
	.chat-kit-panel {
		width: 376px; /* min-[800px]:w-[376px] */
	}
}

@media (min-width: 1200px) {
	.chat-kit-panel {
		width: 416px; /* min-[1200px]:w-[416px] */
	}
}

@media (min-width: 1600px) {
	.chat-kit-panel {
		width: 456px; /* min-[1600px]:w-[456px] */
	}
}

/* Position */
.chat-kit-panel--left {
	left: 0; /* left-0 */
}

.chat-kit-panel--right {
	right: 0; /* right-0 */
}

/* Conteneur de contenu du panneau */
.chat-kit-panel__content {
	position: relative;
	box-sizing: border-box;
	width: 100%; /* w-full */
	height: 100%; /* h-full */
	border-radius: 20px; /* rounded-[20px] */
	box-shadow: 0px 8px 16px -4px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.chat-kit-panel__content--dark {
	background-color: #111827; /* bg-gray-900 */
	border: 1px solid #374151; /* border border-gray-700 */
}

.chat-kit-panel__content--light {
	background-color: #fff; /* bg-white */
}

.chat-kit-panel__inner {
	width: 100%; /* w-full */
	height: 100%; /* h-full */
}

/* Contenu d'attente */
.chat-kit-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%; /* h-full */
	opacity: 0.5; /* opacity-50 */
}

/* -------------------------------------------------------------------------
 * Icônes
 * ---------------------------------------------------------------------- */
.chat-kit-spinner {
	width: 1.5rem; /* w-6 */
	height: 1.5rem; /* h-6 */
	animation: chat-kit-spin 1s linear infinite; /* animate-spin */
}

.chat-kit-spinner__track {
	opacity: 0.25; /* opacity-25 */
}

.chat-kit-spinner__head {
	opacity: 0.75; /* opacity-75 */
}

@keyframes chat-kit-spin {
	to {
		transform: rotate(360deg);
	}
}

.chat-kit-icon-warning {
	color: #eab308; /* text-yellow-500 */
}