/*
 * La bulle de l'assistant.
 *
 * Aucune couleur n'est ecrite en dur dans les regles : tout passe par des
 * variables posees sur .cbot. Un site qui reprend ce plugin redefinit ces
 * variables dans sa propre feuille et l'assistant prend ses couleurs, sans
 * toucher a ce fichier. Les variables portent le ROLE, jamais la teinte :
 * « --cbot-accent », pas « --cbot-bleu » — une variable nommee par sa couleur
 * rend le theme impossible a redecliner.
 *
 * La position aussi : --cbot-bas et --cbot-droite (au-dessus d'une barre
 * d'appel collee en bas d'ecran, par exemple), --cbot-plan pour l'empilement
 * (sous une fenetre de consentement).
 *
 * Les valeurs par defaut sont posees sur :where(.cbot), de specificite nulle :
 * la moindre regle « .cbot { --cbot-accent: … } » du site l'emporte, meme
 * quand cette feuille est imprimee APRES celle du site (bulle chargee par un
 * widget, en pied de page).
 */

:where(.cbot) {
	--cbot-fond: #ffffff;
	--cbot-encre: #12213a;
	--cbot-encre-douce: #5a6b85;
	--cbot-accent: #1f5fe0;
	--cbot-accent-encre: #ffffff;
	--cbot-bulle: rgba(18, 33, 58, .05);
	--cbot-bord: rgba(18, 33, 58, .14);
	--cbot-ombre: 0 18px 44px rgba(10, 25, 47, .18);
	--cbot-rayon: 16px;
	--cbot-bas: 20px;
	--cbot-droite: 20px;
	--cbot-plan: 9000;
}

.cbot {
	position: fixed;
	right: var(--cbot-droite);
	bottom: var(--cbot-bas);
	z-index: var(--cbot-plan);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cbot-encre);
	text-align: left;
}

/*
 * Tant que le script n'a pas arme la bulle, on ne la montre pas : une pastille
 * qui ne repond pas au clic est pire que pas de pastille. C'est le cas sans
 * JavaScript, et avec les optimiseurs qui retardent les scripts jusqu'au
 * premier geste du visiteur.
 */
.cbot:not(.est-pret) { display: none; }

/* ------------------------------------------------------------------ */
/* Le bouclier                                                         */
/* ------------------------------------------------------------------ */

/*
 * Le kit Elementor et la plupart des themes stylent TOUS les boutons et tous
 * les champs de la page, avec des selecteurs plus lourds qu'une classe seule :
 *
 *   .elementor-kit-N button                                   (0,1,1)
 *   .elementor-kit-N button:hover                             (0,2,1)
 *   .elementor-kit-N input:not([type=button]):not([type=submit])  (0,3,1)
 *   button:hover — reset du theme Hello                       (0,1,1)
 *
 * Une regle « .cbot-pastille » (0,1,0) perd contre chacun : au survol, la
 * pastille prenait la couleur des boutons du site, les suggestions ne
 * passaient plus a la ligne (white-space: nowrap). D'ou des selecteurs
 * ancres sur .cbot, les etats ecrits explicitement, et le champ ancre deux
 * fois. On monte la specificite plutot que d'empiler des !important.
 */
.cbot .cbot-pastille,
.cbot .cbot-fermer,
.cbot .cbot-envoyer,
.cbot .cbot-suggestion,
.cbot .cbot-verdict-bouton {
	box-sizing: border-box;
	width: auto;
	height: auto;
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	white-space: normal;
	-webkit-appearance: none;
	appearance: none;
}

/* ------------------------------------------------------------------ */
/* La pastille                                                         */
/* ------------------------------------------------------------------ */

.cbot .cbot-pastille {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	/* 44 px au moins : c'est la cible tactile minimale sous laquelle un doigt
	   manque le bouton une fois sur trois. */
	min-height: 52px;
	padding: .7rem 1.1rem;
	border: 1px solid var(--cbot-bord);
	border-radius: 999px;
	background: var(--cbot-fond);
	color: var(--cbot-encre);
	box-shadow: var(--cbot-ombre);
	cursor: pointer;
	text-align: left;
	transition: transform .18s ease, box-shadow .18s ease;
}

.cbot .cbot-pastille:hover,
.cbot .cbot-pastille:focus,
.cbot .cbot-pastille:active {
	border-color: var(--cbot-bord);
	background: var(--cbot-fond);
	color: var(--cbot-encre);
	box-shadow: var(--cbot-ombre);
}

.cbot .cbot-pastille:hover { transform: translateY(-1px); }

.cbot-pastille-texte { display: flex; flex-direction: column; }
.cbot .cbot-titre { font-weight: 700; }
.cbot .cbot-sous { color: var(--cbot-encre-douce); font-size: 13px; }

.cbot.est-ouvert .cbot-pastille { display: none; }

/* ------------------------------------------------------------------ */
/* Le panneau                                                          */
/* ------------------------------------------------------------------ */

.cbot-panneau {
	display: flex;
	flex-direction: column;
	/* Jamais plus haut que l'ecran, jamais plus large que lui : c'est la regle
	   qui evite le debordement horizontal sur telephone, celui qui fait
	   apparaitre une barre de defilement sur toute la page. dvh : la hauteur
	   reellement visible, barre d'adresse et clavier deduits. */
	width: min(370px, calc(100vw - 32px));
	max-height: min(560px, calc(100vh - 40px));
	max-height: min(560px, calc(100dvh - 40px));
	border: 1px solid var(--cbot-bord);
	border-radius: var(--cbot-rayon);
	background: var(--cbot-fond);
	color: var(--cbot-encre);
	box-shadow: var(--cbot-ombre);
	overflow: hidden;
}

.cbot-panneau[hidden] { display: none; }
.cbot-panneau:focus { outline: none; }

.cbot-tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .9rem 1.1rem;
	border-bottom: 1px solid var(--cbot-bord);
}

.cbot .cbot-tete-titre { margin: 0; font-weight: 700; }

.cbot .cbot-fermer {
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--cbot-encre-douce);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.cbot .cbot-fermer:hover,
.cbot .cbot-fermer:focus,
.cbot .cbot-fermer:active {
	border: 0;
	background: var(--cbot-bulle);
	color: var(--cbot-encre);
}

/* ------------------------------------------------------------------ */
/* Le fil                                                              */
/* ------------------------------------------------------------------ */

.cbot-fil {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.cbot-bulle {
	max-width: 92%;
	padding: .7rem .9rem;
	border-radius: 12px;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.cbot-bulle.est-assistant {
	align-self: flex-start;
	background: var(--cbot-bulle);
}

.cbot-bulle.est-visiteur {
	align-self: flex-end;
	background: var(--cbot-accent);
	color: var(--cbot-accent-encre);
}

.cbot-bulle.est-attente { color: var(--cbot-encre-douce); font-style: italic; }
.cbot-bulle.est-suggestions { background: none; padding: 0; max-width: 100%; }

.cbot-suggestions { display: flex; flex-wrap: wrap; gap: .4rem; white-space: normal; }
.cbot-bulle .cbot-suggestions { margin-top: .6rem; }

.cbot .cbot-suggestion {
	min-height: 36px;
	padding: .45rem .8rem;
	border: 1px solid var(--cbot-bord);
	border-radius: 999px;
	background: var(--cbot-fond);
	color: var(--cbot-encre);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
}

.cbot .cbot-suggestion:hover,
.cbot .cbot-suggestion:focus,
.cbot .cbot-suggestion:active {
	border-color: var(--cbot-accent);
	background: var(--cbot-fond);
	color: var(--cbot-accent);
}

.cbot .cbot-lien { color: var(--cbot-accent); text-decoration: underline; }
.cbot .cbot-lien:hover,
.cbot .cbot-lien:focus { color: var(--cbot-accent); text-decoration: none; }

.cbot-sources { margin-top: .6rem; border-top: 1px solid var(--cbot-bord); padding-top: .6rem; white-space: normal; }
.cbot .cbot-sources-titre { margin: 0 0 .3rem; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cbot-encre-douce); }
.cbot .cbot-source { margin: 0 0 .5rem; font-size: 14px; }

.cbot-verdict {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .6rem;
	font-size: 13px;
	color: var(--cbot-encre-douce);
	white-space: normal;
}

.cbot .cbot-verdict-bouton {
	min-height: 32px;
	padding: .2rem .7rem;
	border: 1px solid var(--cbot-bord);
	border-radius: 999px;
	background: var(--cbot-fond);
	color: var(--cbot-encre);
	font-size: 13px;
	cursor: pointer;
}

.cbot .cbot-verdict-bouton:hover,
.cbot .cbot-verdict-bouton:focus,
.cbot .cbot-verdict-bouton:active {
	border-color: var(--cbot-accent);
	background: var(--cbot-fond);
	color: var(--cbot-encre);
}

/* ------------------------------------------------------------------ */
/* Le formulaire                                                       */
/* ------------------------------------------------------------------ */

.cbot-forme {
	display: flex;
	gap: .5rem;
	margin: 0;
	padding: .8rem 1.1rem;
	border-top: 1px solid var(--cbot-bord);
}

/* Ancre deux fois : les champs du kit pesent (0,3,1), leur focus (0,4,1). */
.cbot.cbot .cbot-forme input[name="question"] {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: .5rem .8rem;
	border: 1px solid var(--cbot-bord);
	border-radius: 999px;
	background: var(--cbot-fond);
	color: var(--cbot-encre);
	box-shadow: none;
	font-family: inherit;
	line-height: 1.3;
	/* 16 px : en dessous, iOS agrandit la page a la mise au point du champ, et
	   la mise en page saute sous les doigts du visiteur. */
	font-size: 16px;
}

.cbot.cbot .cbot-forme input[name="question"]:focus {
	border-color: var(--cbot-accent);
	background: var(--cbot-fond);
	color: var(--cbot-encre);
	box-shadow: none;
	outline: 2px solid var(--cbot-accent);
	outline-offset: 1px;
}

.cbot.cbot .cbot-forme input[name="question"]::placeholder { color: var(--cbot-encre-douce); opacity: 1; }

.cbot .cbot-envoyer {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--cbot-accent);
	color: var(--cbot-accent-encre);
	font-size: 18px;
	cursor: pointer;
}

.cbot .cbot-envoyer:hover,
.cbot .cbot-envoyer:focus,
.cbot .cbot-envoyer:active {
	border: 0;
	background: var(--cbot-accent);
	color: var(--cbot-accent-encre);
}

.cbot .cbot-pied {
	margin: 0;
	padding: 0 1.1rem .9rem;
	font-size: 13px;
}

.cbot .cbot-pied a,
.cbot .cbot-pied a:hover,
.cbot .cbot-pied a:focus { color: var(--cbot-encre-douce); }

/* ------------------------------------------------------------------ */
/* Accessibilite                                                       */
/* ------------------------------------------------------------------ */

/*
 * Un indicateur de focus visible sur TOUT ce qui se focalise.
 *
 * C'est le defaut le plus repandu et le plus handicapant : sans lui, qui
 * navigue au clavier ne sait plus ou il se trouve. Deux anneaux plutot qu'un,
 * pour rester visible aussi bien sur fond clair que sur fond colore. Place en
 * dernier, et ancre deux fois, pour l'emporter sur les etats ci-dessus.
 */
.cbot.cbot :focus-visible {
	outline: 2px solid var(--cbot-accent);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--cbot-fond);
}

.cbot.cbot .cbot-panneau:focus-visible { outline: none; box-shadow: var(--cbot-ombre); }

/* Le libelle reserve aux lecteurs d'ecran, si le theme ne le definit pas. */
.cbot .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cbot .cbot-pastille { transition: none; }
	.cbot .cbot-pastille:hover { transform: none; }
}

/* Sur telephone, la pastille se reduit a son titre : le sous-titre ferait
   deborder le bouton sur la moitie de l'ecran. */
@media (max-width: 480px) {
	:where(.cbot) { --cbot-bas: 12px; --cbot-droite: 12px; }
	.cbot .cbot-sous { display: none; }
}

/* Au doigt, 44 px au moins pour toute cible : les suggestions, les
   propositions et le verdict aussi. A la souris, elles restent compactes. */
@media (pointer: coarse) {
	.cbot .cbot-suggestion,
	.cbot .cbot-verdict-bouton { min-height: 44px; }
}

@media print {
	.cbot { display: none; }
}

/* Pose dans le flux de la page par le widget : l'assistant n'est plus flottant,
   il occupe sa place comme n'importe quel bloc, panneau ouvert. */
.cbot.est-pose {
	position: static;
	right: auto;
	bottom: auto;
}

.cbot.est-pose .cbot-pastille { display: none; }
.cbot.est-pose .cbot-fermer { display: none; }

.cbot.est-pose .cbot-panneau {
	width: 100%;
	max-height: none;
}

.cbot.est-pose .cbot-fil { min-height: 220px; }