/* Discussion — bulle et panneau.
 *
 * Relevé de la référence (reference/chat/mesures.json) :
 *   bulle      85 × 46, à 20 px du bas et de la droite
 *   rayon      16 px, sur la bulle comme sur le panneau
 *   fond       blanc à 70 % avec un flou de 6 px derrière
 *   ombre      cinq couches très douces + un liseré d'un pixel
 *   libellé    Fraunces 13 px, noir
 *   panneau    500 × 372 en desktop, quasi pleine largeur en mobile
 *
 * L'ombre de la référence est reprise telle quelle : c'est elle qui
 * détache la bulle d'une photo sans l'assombrir.
 */

:root {
	--baba-chat-marge: 20px;
	--baba-chat-rayon: 16px;
	--baba-chat-ombre:
		0 2px 2px -1px rgba(0, 0, 0, 0.05),
		0 3px 4px -1.5px rgba(0, 0, 0, 0.05),
		0 4px 8px -2px rgba(0, 0, 0, 0.05),
		0 5px 16px -2.5px rgba(0, 0, 0, 0.05),
		0 0 0 1px rgba(0, 0, 0, 0.08);
	--baba-chat-voile: rgba(255, 255, 255, 0.7);
	--baba-chat-encre: #000000;
	--baba-chat-encre-douce: #6b6b6b;
	--baba-chat-filet: rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------------ */
/* Bulle                                                               */
/* ------------------------------------------------------------------ */

/* Préfixés par « button » : base/global.css remet tout bouton du thème à
   plat — « button[class^='baba-'] { box-shadow: none; border-radius: 0 } »
   — et cette règle vaut (0,1,1). Une simple classe passerait derrière, la
   bulle perdrait ses coins ronds et son ombre. */
button.baba-chat__activateur {
	position: fixed;
	right: var(--baba-chat-marge);
	bottom: var(--baba-chat-marge);
	z-index: 1000000;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 16px;
	border: none;
	border-radius: var(--baba-chat-rayon);
	background-color: var(--baba-chat-voile);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: var(--baba-chat-ombre);
	color: var(--baba-chat-encre);
	cursor: pointer;
	font-family: var(--baba-font-body);
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
}

.baba-chat__activateur-icone {
	display: flex;
	width: 16px;
	height: 16px;
}

/* Le tracé de la référence est un contour, pas un aplat. */
.baba-chat__activateur-icone svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
}

.baba-chat__activateur:focus-visible {
	outline: 2px solid var(--baba-chat-encre);
	outline-offset: 2px;
}

/* Panneau ouvert : la bulle s'efface, comme sur la référence. */
.baba-chat--ouvert .baba-chat__activateur {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Panneau                                                             */
/* ------------------------------------------------------------------ */

.baba-chat__panneau {
	position: fixed;
	right: var(--baba-chat-marge);
	bottom: var(--baba-chat-marge);
	z-index: 1000001;
	display: flex;
	flex-direction: column;
	width: 500px;
	max-width: calc(100vw - 2 * var(--baba-chat-marge));
	height: 372px;
	max-height: calc(100vh - 2 * var(--baba-chat-marge));
	border-radius: var(--baba-chat-rayon);

	/* Le panneau de la référence n'est pas d'un blanc plat : il part d'un
	   gris très clair en haut pour rejoindre le blanc en bas. */
	background: linear-gradient(180deg, #f2f1ef 0%, #ffffff 60%);
	box-shadow: var(--baba-chat-ombre);
	color: var(--baba-chat-encre);
	font-family: var(--baba-font-body);
}

.baba-chat__panneau[hidden] {
	display: none;
}

.baba-chat__entete {
	display: flex;
	justify-content: flex-end;
	padding: 12px 12px 0;
}

button.baba-chat__reduire {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: var(--baba-chat-ombre);
	color: var(--baba-chat-encre);
	cursor: pointer;
}

.baba-chat__reduire svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
}

/* Fil de la conversation ------------------------------------------- */

.baba-chat__fil {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 8px 24px 16px;
	overflow-y: auto;
}

.baba-chat__message {
	max-width: 84%;
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
}

.baba-chat__message--baba {
	align-self: flex-start;
}

.baba-chat__message--visiteur {
	align-self: flex-end;
	padding: 10px 16px;
	border-radius: var(--baba-chat-rayon);
	background: #ffffff;
	box-shadow: var(--baba-chat-ombre);
}

.baba-chat__message--erreur {
	align-self: flex-start;
	color: #a8261f;
}

/* Bas du panneau --------------------------------------------------- */

.baba-chat__bas {
	flex: none;
	padding: 0 24px 20px;
}

.baba-chat__mention {
	margin: 0 0 12px;
	color: var(--baba-chat-encre-douce);
	font-size: 13px;
	line-height: 1.35;
}

.baba-chat__mention a {
	color: inherit;
	text-decoration: underline;
}

.baba-chat__rapides {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.baba-chat__rapides[hidden] {
	display: none;
}

button.baba-chat__rapide {
	padding: 8px 16px;
	border: none;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: var(--baba-chat-ombre);
	color: var(--baba-chat-encre);
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.2;
}

.baba-chat__form {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}

/* Champ-piège : hors de vue sans être « display:none », qu'un robot
   remplirait quand même. */
.baba-chat__pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.baba-chat__saisie {
	width: 100%;
	height: 56px;
	padding: 0 56px 0 24px;
	border: 1px solid var(--baba-chat-filet);
	border-radius: 999px;
	background: #ffffff;
	color: var(--baba-chat-encre);
	font-family: inherit;
	font-size: 16px;
}

.baba-chat__saisie::placeholder {
	color: var(--baba-chat-encre-douce);
	opacity: 1;
}

/* Astra pose son propre halo bleu sur les champs actifs. On le remplace
   par le nôtre plutôt que de le supprimer : au clavier, on doit voir où
   l'on est. */
.baba-chat__saisie:focus,
.baba-chat__saisie:focus-visible {
	border-color: var(--baba-chat-encre);
	outline: none;
	box-shadow: 0 0 0 2px var(--baba-chat-encre);
}

.baba-chat__saisie:disabled {
	background: #f4f4f4;
}

button.baba-chat__envoyer {
	position: absolute;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--baba-chat-encre);
	color: #ffffff;
	cursor: pointer;
}

.baba-chat__envoyer svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
}

.baba-chat__envoyer:disabled {
	cursor: default;
	opacity: 0.4;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

/* La référence colle le panneau aux bords et le fait descendre jusqu'en
   bas de l'écran : seuls les coins hauts restent arrondis. */
@media only screen and (max-width: 749px) {
	.baba-chat__panneau {
		right: 8px;
		bottom: 0;
		left: 8px;
		width: auto;
		max-width: none;
		height: 78vh;
		border-radius: var(--baba-chat-rayon) var(--baba-chat-rayon) 0 0;
	}

	.baba-chat__fil,
	.baba-chat__bas {
		padding-right: 16px;
		padding-left: 16px;
	}
}