/*
 * Dids ChatBot — habillage du conteneur du widget.
 * Le widget rend un panneau ~420x520 px dans #chatbot-container-widget.
 *
 * Couleurs par défaut = celles du module dids (générique). Le branding par
 * boutique (ex. Vinotrip) se fait via le champ BO DIDSCHATBOT_CUSTOM_CSS,
 * pas en modifiant ce fichier.
 */

/* --- Mode flottant : wrapper positionné bas-droite --- */
.didschatbot-wrapper--floating {
	position: fixed;
	right: 24px;
	bottom: 96px; /* au-dessus du lanceur */
	z-index: 99999;
	width: 420px;
	max-width: calc(100vw - 32px);
}

.didschatbot-wrapper--floating[hidden] {
	display: none;
}

/* --- Mode inline : flux normal de la page --- */
.didschatbot-wrapper--inline {
	margin: 16px 0;
}

/* Animation d'appel : léger rebond (zoom jusqu'à 1.25) toutes les 10 s. */
@keyframes didschatbot-attn {
	0%   { transform: scale(1); }
	3%   { transform: scale(1.25); }
	6%   { transform: scale(0.95); }
	9%   { transform: scale(1.08); }
	12%  { transform: scale(1); }
	100% { transform: scale(1); }
}

/* --- Lanceur ouvrir/fermer (modes flottant et panneau) --- */
.didschatbot-launcher {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100000;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/*border: 2px solid #000;*/
	background: #f88925;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	font-size: 26px;
	line-height: 1;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: transform 0.12s ease;
	animation: didschatbot-attn 5s ease-in-out infinite;
	transform-origin: center center;
}

/* Au survol : zoom à 1.25 (animation en pause ; !important pour primer sur l'animation). */
.didschatbot-launcher:hover {
	transform: scale(1.05) !important;
	animation-play-state: paused;
}

/* Panneau ouvert : pas de rebond. */
.didschatbot-launcher.is-open {
	animation: none;
}

/* Respect de la préférence "réduire les animations". */
@media (prefers-reduced-motion: reduce) {
	.didschatbot-launcher {
		animation: none;
	}
}

.didschatbot-launcher:focus {
	outline: none;
}

.didschatbot-launcher__close {
	display: none;
	font-size: 30px;
}

.didschatbot-launcher.is-open .didschatbot-launcher__open {
	display: none;
}

.didschatbot-launcher.is-open .didschatbot-launcher__close {
	display: inline;
}

@media (max-width: 480px) {
	.didschatbot-wrapper--floating {
		right: 8px;
		left: 8px;
		bottom: 84px;
		width: auto;
	}

	.didschatbot-launcher {
		right: 16px;
		bottom: 16px;
	}
}

/* --- Mode panneau latéral droit (drawer) : 1/3 de l'écran, pleine hauteur,  --- */
/* --- plein écran sur mobile, glisse depuis la droite (pas de popup).         --- */
.didschatbot-wrapper--panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	width: 33.333vw;
	min-width: 360px;
	max-width: 100vw;
	z-index: 99999;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
	transform: translateX(100%); /* fermé = glissé hors écran à droite */
	transition: transform 0.3s ease-out;
	pointer-events: none;
}

/* Ouvert : glisse en place. L'état est piloté par la classe .is-open (et NON par
   l'attribut [hidden]) : le thème vinotrip3 place sa remise à zéro Bootstrap dans
   un @layer, or pour les déclarations !important une règle EN COUCHE l'emporte sur
   une règle HORS COUCHE — donc [hidden]{display:none!important} (couche bs-base)
   masquerait le panneau (display:none) et casserait l'animation de slide. */
.didschatbot-wrapper--panel.is-open {
	transform: translateX(0);
	pointer-events: auto;
}

.didschatbot-wrapper--panel #chatbot-container-widget {
	height: 100%;
}

/* En mode panneau, le lanceur passe en haut-droite (bouton fermer) une fois ouvert. */
.didschatbot-launcher--panel.is-open {
	top: 3rem;
	right: 14px;
	bottom: auto;
}

@media (max-width: 768px) {
	.didschatbot-wrapper--panel {
		width: 100vw;
		min-width: 0;
	}
}