/*
 * Assistant Zarboutan — widget conversationnel. Réutilise les variables de
 * palette déjà définies globalement dans color-palette.css (--zb-surface-*,
 * --zb-text-*, --zb-accent*, --zb-border-subtle), même logique que
 * newsletter-popup.css. Chargé uniquement sur les pages autorisées (voir
 * inc/assistant-zarboutan/bootstrap.php, enqueue conditionnel).
 */

.zb-assist {
	position: fixed;
	right: 20px;
	bottom: 20px;
	/* Sous le popup newsletter (999999) : les deux ne doivent normalement
	   jamais être ouverts en même temps (le popup se ferme sur saisie/autre
	   modal), mais le bouton flottant lui-même reste toujours cliquable. */
	z-index: 99999;
	font-size: 15px;
}

.zb-assist[hidden] {
	display: none;
}

.zb-assist__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 56px;
	min-height: 56px;
	padding: 0 18px 0 8px;
	border: none;
	border-radius: 999px;
	background: var(--zb-accent, #39a751);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	cursor: pointer;
	box-shadow: 0 10px 26px rgba(35, 38, 31, 0.22);
	transition: transform 0.15s ease, background-color 0.15s ease;
}

/* V3 Phase 9 : Zako, visage de l'assistant — mouvement léger (transform
   uniquement), jamais d'animation lourde, désactivé sous prefers-reduced-
   motion. */
.zb-assist__toggle-avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	object-fit: cover;
	background: #fff;
	animation: zb-assist-avatar-bob 4s ease-in-out infinite;
}

.zb-assist__header-avatar {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	object-fit: cover;
}

@keyframes zb-assist-avatar-bob {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-2px) rotate(-3deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zb-assist__toggle-avatar {
		animation: none;
	}
}

.zb-assist__toggle:hover {
	background: var(--zb-accent-bright, #277f42);
	transform: translateY(-1px);
}

.zb-assist__toggle:focus-visible {
	outline: 2px solid var(--zb-accent-deep, #237a3d);
	outline-offset: 2px;
}

.zb-assist.is-open .zb-assist__toggle {
	box-shadow: 0 6px 16px rgba(35, 38, 31, 0.18);
}

.zb-assist__panel {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: 400px;
	max-width: calc(100vw - 32px);
	max-height: 74vh;
	display: flex;
	flex-direction: column;
	background: var(--zb-surface-card, #fff);
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(35, 38, 31, 0.22);
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.zb-assist__panel[hidden] {
	display: none;
}

.zb-assist.is-open .zb-assist__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.zb-assist__header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--zb-border-subtle, #e6e0d3);
	flex: 0 0 auto;
}

.zb-assist__title {
	margin: 0;
	flex: 1 1 auto;
	font-size: 1rem;
	color: var(--zb-text-heading, #23261f);
}

.zb-assist__close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--zb-text-secondary, #5f6259);
	cursor: pointer;
}

.zb-assist__close:hover {
	background: var(--zb-surface-alt, #f1ece3);
	color: var(--zb-text-heading, #23261f);
}

.zb-assist__close:focus-visible {
	outline: 2px solid var(--zb-accent, #39a751);
	outline-offset: 2px;
}

.zb-assist__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px;
}

.zb-assist__welcome p {
	margin: 0 0 10px;
	color: var(--zb-text-body, #40433c);
	line-height: 1.5;
}

.zb-assist__welcome ul {
	margin: 0 0 14px;
	padding-left: 20px;
	color: var(--zb-text-body, #40433c);
	line-height: 1.6;
}

.zb-assist__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zb-assist__suggestion {
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 999px;
	background: var(--zb-surface-alt, #f1ece3);
	color: var(--zb-text-heading, #23261f);
	font-size: 0.85rem;
	cursor: pointer;
}

.zb-assist__suggestion:hover {
	background: rgba(57, 167, 81, 0.12);
	border-color: var(--zb-accent, #39a751);
}

.zb-assist__suggestion:focus-visible {
	outline: 2px solid var(--zb-accent, #39a751);
	outline-offset: 2px;
}

.zb-assist__messages {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zb-assist__message {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 14px;
	line-height: 1.5;
	white-space: pre-line;
	font-size: 0.92rem;
}

.zb-assist__message--user {
	align-self: flex-end;
	background: var(--zb-accent, #39a751);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.zb-assist__message--assistant {
	align-self: flex-start;
	background: var(--zb-surface-alt, #f1ece3);
	color: var(--zb-text-heading, #23261f);
	border-bottom-left-radius: 4px;
}

/* V2 Phase 8 : le texte de l'assistant peut désormais contenir de vrais
   éléments <p>/<ul>/<ol>/<strong> (rendus via createElement/textContent,
   jamais innerHTML — voir assistant-zarboutan.js) plutôt qu'un simple bloc
   de texte : neutralise les marges par défaut du navigateur pour un rendu
   compact cohérent avec le reste du widget. */
.zb-assist__message--assistant p {
	margin: 0 0 8px;
}

.zb-assist__message--assistant p:last-child {
	margin-bottom: 0;
}

.zb-assist__message--assistant ul,
.zb-assist__message--assistant ol {
	margin: 0 0 8px;
	padding-left: 20px;
}

.zb-assist__message--assistant li {
	margin-bottom: 2px;
}

.zb-assist__message--assistant strong {
	color: var(--zb-text-heading, #23261f);
}

/* V2 Phase 1 : indicateur d'attente — trois points, animation légère
   (transform/opacity uniquement), jamais affichée si l'utilisateur préfère
   un mouvement réduit. */
.zb-assist__typing {
	display: flex;
	align-items: center;
	gap: 8px;
}

.zb-assist__typing-dots {
	display: inline-flex;
	gap: 3px;
}

.zb-assist__typing-dots i {
	display: block;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.35;
	animation: zb-assist-typing-blink 1.1s ease-in-out infinite;
}

.zb-assist__typing-dots i:nth-child(2) {
	animation-delay: 0.15s;
}

.zb-assist__typing-dots i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes zb-assist-typing-blink {
	0%, 80%, 100% {
		opacity: 0.35;
		transform: translateY(0);
	}
	40% {
		opacity: 1;
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.zb-assist__typing-dots i {
		animation: none;
		opacity: 0.7;
	}
}

.zb-assist__extras {
	align-self: flex-start;
	max-width: 85%;
	font-size: 0.82rem;
}

.zb-assist__sources-title {
	margin: 6px 0 4px;
	color: var(--zb-text-secondary, #5f6259);
}

.zb-assist__sources {
	margin: 0 0 8px;
	padding-left: 18px;
}

.zb-assist__sources a {
	color: var(--zb-accent-deep, #237a3d);
}

.zb-assist__sources a:hover {
	color: var(--zb-accent-bright, #277f42);
}

.zb-assist__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zb-assist__action {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(57, 167, 81, 0.12);
	color: var(--zb-accent-deep, #237a3d);
	font-size: 0.82rem;
	text-decoration: none;
}

.zb-assist__action:hover {
	background: rgba(57, 167, 81, 0.2);
}

.zb-assist__action:focus-visible {
	outline: 2px solid var(--zb-accent, #39a751);
	outline-offset: 2px;
}

/* V3 Phase 3/7 : le bouton panier est un vrai <button>, pas un lien — même
   apparence que les autres actions pour rester cohérent visuellement. */
.zb-assist__action--cart {
	border: none;
	cursor: pointer;
	font: inherit;
}

.zb-assist__action--cart:disabled {
	opacity: 0.6;
	cursor: default;
}

/* V3 Phase 10 : cartes produit — image, nom, catégorie, prix, lien. Grille
   responsive à l'intérieur du panneau déjà étroit (1 colonne en dessous de
   340px de large disponible, 2 au-delà). */
.zb-assist__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-bottom: 8px;
}

@media (max-width: 380px) {
	.zb-assist__cards {
		grid-template-columns: 1fr;
	}
}

.zb-assist__card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 10px;
	background: var(--zb-surface-card, #fff);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.zb-assist__card:hover {
	border-color: var(--zb-accent, #39a751);
}

.zb-assist__card:focus-visible {
	outline: 2px solid var(--zb-accent, #39a751);
	outline-offset: 2px;
}

.zb-assist__card-image {
	width: 100%;
	height: 72px;
	object-fit: cover;
	background: var(--zb-surface-alt, #f1ece3);
}

.zb-assist__card-body {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.zb-assist__card-title {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--zb-text-heading, #23261f);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zb-assist__card-category {
	margin: 0;
	font-size: 0.7rem;
	color: var(--zb-text-secondary, #5f6259);
}

.zb-assist__card-price {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--zb-accent-deep, #237a3d);
}

.zb-assist__card-link {
	margin-top: 2px;
	font-size: 0.72rem;
	color: var(--zb-accent-deep, #237a3d);
	text-decoration: underline;
}

.zb-assist__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--zb-border-subtle, #e6e0d3);
	flex: 0 0 auto;
}

.zb-assist__form textarea {
	flex: 1 1 auto;
	resize: none;
	min-height: 44px;
	max-height: 96px;
	padding: 10px 12px;
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 10px;
	font: inherit;
	font-size: 0.9rem;
	color: var(--zb-text-heading, #23261f);
}

.zb-assist__form textarea:focus-visible {
	outline: 2px solid var(--zb-accent, #39a751);
	outline-offset: 1px;
}

.zb-assist__send {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	border: none;
	border-radius: 10px;
	background: var(--zb-accent, #39a751);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.zb-assist__send:hover {
	background: var(--zb-accent-bright, #277f42);
}

.zb-assist__send:focus-visible {
	outline: 2px solid var(--zb-accent-deep, #237a3d);
	outline-offset: 2px;
}

.zb-assist__send:disabled {
	opacity: 0.6;
	cursor: default;
}

.zb-assist__status {
	margin: 0;
	padding: 0 16px 10px;
	min-height: 1em;
	font-size: 0.8rem;
	color: #b3261e;
}

/* --- Mobile : panneau bas maîtrisé, jamais plein écran --- */
@media (max-width: 480px) {
	.zb-assist {
		right: 12px;
		bottom: 12px;
	}

	/* Bouton icône seule (sans le libellé "Zako") sous 480px : réduit
	   l'empreinte au sol du bouton flottant de ~108×56px à ~48×48px, pour
	   la même raison et de la même façon que .zb-whatsapp-float à ce palier
	   (voir whatsapp-float-button.css) — les deux boutons flottants
	   partagent le même bas d'écran sur mobile, et leur empreinte combinée
	   pouvait chevaucher un CTA ou un prix atterrissant dans cette zone au
	   premier chargement de certaines pages (Livraison, fiches produit,
	   Devis — signalé 01/08/2026). Réduire leur empreinte au sol reste la
	   correction la plus simple : impossible de garantir qu'aucun contenu
	   ne croisera jamais cette bande en bas d'écran (les boutons sont en
	   position fixed, le contenu défile sous eux), mais un bouton deux fois
	   plus petit réduit fortement la probabilité et la gravité d'un
	   chevauchement, sans toucher au comportement ni à la position des
	   boutons. */
	.zb-assist__toggle {
		min-width: 48px;
		min-height: 48px;
		padding: 0;
		gap: 0;
	}

	.zb-assist__toggle-label {
		display: none;
	}

	.zb-assist__toggle-avatar {
		width: 32px;
		height: 32px;
	}

	.zb-assist__panel {
		right: -8px;
		bottom: 64px;
		width: calc(100vw - 24px);
		max-height: 78vh;
	}
}

/* --- Mouvement réduit : apparition directe --- */
@media (prefers-reduced-motion: reduce) {
	.zb-assist__toggle,
	.zb-assist__panel {
		transition: none;
	}

	.zb-assist__panel {
		transform: none;
	}
}