/**
 * Widget de chat — Afri-Carrières AI Assistant.
 *
 * Les jetons --afc-* viennent du CSS additionnel du Personnaliseur (pas de
 * style.css du thème — voir la note de projet). Certains ne sont pas
 * définis pour tous les cas d'usage (--afc-radius, --afc-focus-ring
 * notamment) : chaque usage porte donc une valeur de repli, pour ne pas
 * reproduire les coins carrés déjà connus ailleurs sur le site.
 *
 * Sombre : le site bascule via la classe #page.theme-dark (voir main.js),
 * pas via [data-theme] — ce sélecteur n'est utilisé que par l'espace
 * candidat, qui n'hérite pas de #page. Le chat s'affiche sur les pages
 * publiques : on suit donc la convention du site public.
 *
 * Position : --afc-ia-cote et --afc-ia-decalage sont posées en style
 * inline sur la racine par le gabarit, depuis les réglages du
 * Personnaliseur (Admin\Customizer). --afc-ia-base absorbe la barre de
 * navigation mobile du thème (.afc-bottom-nav, 66 px + zone sûre) — même
 * valeur que .afc-back-to-top utilise déjà pour le même problème.
 */

.afc-ia {
	--afc-ia-rayon: var(--afc-radius, 14px);
	--afc-ia-rayon-sm: var(--afc-radius-sm, 8px);
	--afc-ia-anneau: var(--afc-focus-ring, rgba(212, 36, 59, .35));
	--afc-ia-cote: 20px;
	--afc-ia-decalage: 0px;
	--afc-ia-base: 20px;
	position: fixed;
	right: var(--afc-ia-cote);
	bottom: calc(var(--afc-ia-base) + var(--afc-ia-decalage));
	z-index: 8000;
	font-family: var(--afc-font-body, inherit);
}

.afc-ia--gauche { right: auto; left: var(--afc-ia-cote); }

@media (max-width: 899px) {
	.afc-ia { --afc-ia-base: calc(82px + env(safe-area-inset-bottom, 0px)); }
}

.afc-ia__lanceur {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	border: none;
	background: var(--afc-accent, #d4243b);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--afc-shadow-md, 0 8px 22px rgba(0, 0, 0, .18));
	transition: transform .15s ease;
}
.afc-ia__lanceur:hover { transform: scale(1.05); }
.afc-ia__lanceur:focus-visible { outline: 3px solid var(--afc-ia-anneau); outline-offset: 2px; }

.afc-ia--ouvert .afc-ia__lanceur { display: none; }

/*
 * Bulle d'invite ("teaser") — attire l'attention une fois par visite avant
 * toute ouverture du chat. Positionnée juste au-dessus du lanceur, sur le
 * même côté que lui : elle suit donc automatiquement --afc-ia-cote et
 * --afc-ia-decalage, sans réglage séparé.
 */
.afc-ia__teaser {
	position: fixed;
	right: var(--afc-ia-cote);
	bottom: calc(var(--afc-ia-base) + var(--afc-ia-decalage) + 68px);
	max-width: min(240px, calc(100vw - 40px));
	display: flex;
	align-items: flex-start;
	gap: 8px;
	background: var(--afc-surface, #fff);
	color: var(--afc-text, #222);
	border: 1px solid var(--afc-border, rgba(0, 0, 0, .08));
	border-radius: var(--afc-ia-rayon-sm);
	box-shadow: var(--afc-shadow-md, 0 8px 22px rgba(0, 0, 0, .18));
	padding: 10px 12px;
	font-size: 13.5px;
	cursor: pointer;
	animation: afc-ia-teaser-entree .25s ease;
}
.afc-ia--gauche .afc-ia__teaser { right: auto; left: var(--afc-ia-cote); }
.afc-ia--ouvert .afc-ia__teaser,
.afc-ia__teaser[hidden] { display: none; }

.afc-ia__teaser-texte { flex: 1 1 auto; }
.afc-ia__teaser-fermer {
	flex: 0 0 auto;
	background: transparent;
	border: none;
	color: inherit;
	opacity: .55;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 2px;
}
.afc-ia__teaser-fermer:hover { opacity: 1; }

@keyframes afc-ia-teaser-entree {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.afc-ia__panneau {
	position: fixed;
	right: var(--afc-ia-cote);
	bottom: calc(var(--afc-ia-base) + var(--afc-ia-decalage));
	width: min(380px, calc(100vw - 32px));
	height: min(600px, calc(100vh - 96px));
	background: var(--afc-surface, #fff);
	color: var(--afc-text, #222);
	border: 1px solid var(--afc-border, rgba(0, 0, 0, .08));
	border-radius: var(--afc-ia-rayon);
	box-shadow: var(--afc-shadow-lg, 0 16px 40px rgba(0, 0, 0, .22));
	flex-direction: column;
	overflow: hidden;
}

/*
 * display:flex ne doit s'appliquer QUE quand le panneau n'est pas [hidden].
 * Une règle d'auteur sur `display` l'emporte toujours sur le display:none
 * par défaut du navigateur pour l'attribut hidden — le mettre sans condition
 * ci-dessus rendait le panneau visible en permanence, quoi que fasse le
 * JavaScript sur `hidden` (bug constaté : la croix ne fermait rien).
 */
.afc-ia__panneau:not([hidden]) {
	display: flex;
}

.afc-ia--gauche .afc-ia__panneau { right: auto; left: var(--afc-ia-cote); }

.afc-ia__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--afc-accent, #d4243b);
	color: #fff;
	flex: 0 0 auto;
}
.afc-ia__entete-texte { display: flex; flex-direction: column; gap: 1px; }
.afc-ia__titre { font-weight: 700; font-size: 15px; line-height: 1.2; }
.afc-ia__sous-titre { font-size: 11px; opacity: .85; line-height: 1.2; }
.afc-ia__fermer {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: var(--afc-ia-rayon-sm);
}
.afc-ia__fermer:hover { background: rgba(255, 255, 255, .15); }
.afc-ia__fermer:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.afc-ia__fil {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.afc-ia__message { display: flex; }
.afc-ia__message--user { justify-content: flex-end; }
.afc-ia__message--assistant { justify-content: flex-start; }

.afc-ia__bulle {
	max-width: 88%;
	padding: 10px 13px;
	border-radius: var(--afc-ia-rayon-sm);
	font-size: 14px;
	line-height: 1.5;
}
.afc-ia__message--user .afc-ia__bulle {
	background: var(--afc-accent, #d4243b);
	color: #fff;
	border-bottom-right-radius: 3px;
}
.afc-ia__message--assistant .afc-ia__bulle {
	background: var(--afc-surface-2, #f4f2ee);
	color: var(--afc-text, #222);
	border-bottom-left-radius: 3px;
}
.afc-ia__bulle p { margin: 0 0 8px; }
.afc-ia__bulle p:last-child { margin-bottom: 0; }
.afc-ia__bulle ul, .afc-ia__bulle ol { margin: 0 0 8px; padding-left: 20px; }
.afc-ia__bulle a { color: inherit; text-decoration: underline; }

.afc-ia__message--attente .afc-ia__bulle {
	font-style: italic;
	opacity: .75;
}

.afc-ia__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
/*
 * Sert à la fois des <a> (actions-liens : site officiel…) et des <button>
 * (confirmer/annuler, lot 6) : les valeurs par défaut du navigateur pour
 * <button> (bordure, fond, police) sont donc réinitialisées ici pour que
 * les deux rendus soient identiques.
 */
.afc-ia__action {
	display: inline-block;
	padding: 7px 12px;
	border-radius: var(--afc-ia-rayon-sm);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.afc-ia__action--principal { background: var(--afc-accent, #d4243b); color: #fff; }
.afc-ia__action--secondaire {
	background: transparent;
	color: var(--afc-text, #222);
	border: 1px solid var(--afc-border-strong, rgba(0, 0, 0, .18));
}
.afc-ia__action:disabled { opacity: .5; cursor: default; }

.afc-ia__feedback {
	display: flex;
	gap: 10px;
	margin-top: 8px;
	font-size: 12px;
	opacity: .8;
}
.afc-ia__feedback-bouton {
	background: transparent;
	border: none;
	padding: 2px 4px;
	cursor: pointer;
	color: inherit;
	text-decoration: underline;
}

.afc-ia__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 16px 10px;
	flex: 0 0 auto;
}
.afc-ia__suggestion {
	background: var(--afc-surface-2, #f4f2ee);
	border: 1px solid var(--afc-border, rgba(0, 0, 0, .08));
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12.5px;
	cursor: pointer;
	color: var(--afc-text, #222);
}
.afc-ia__suggestion:hover { background: var(--afc-border, rgba(0, 0, 0, .08)); }
.afc-ia__suggestion:focus-visible { outline: 2px solid var(--afc-ia-anneau); outline-offset: 1px; }

/*
 * Recommandations maison (Kleva CV, Edumiaa, Premium) — jamais d'AdSense
 * dans ces deux emplacements, décision du projet (voir Monetization\AdSlots).
 * --intro : une carte, une seule fois, sous les suggestions.
 * --footer : une ligne compacte de liens, persistante en bas du panneau.
 */
.afc-ia__maison { padding: 0 16px 10px; flex: 0 0 auto; }

.afc-ia__maison--intro .afc-ia__maison-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--afc-surface-2, #f4f2ee);
	border: 1px dashed var(--afc-border-strong, rgba(0, 0, 0, .18));
	border-radius: var(--afc-ia-rayon-sm);
	padding: 9px 12px;
	text-decoration: none;
	color: var(--afc-text, #222);
}
.afc-ia__maison--intro .afc-ia__maison-label { font-size: 13px; font-weight: 600; }
.afc-ia__maison--intro .afc-ia__maison-description { font-size: 12px; opacity: .75; }

.afc-ia__maison--footer {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}
.afc-ia__maison--footer .afc-ia__maison-item {
	font-size: 11.5px;
	color: var(--afc-accent, #d4243b);
	text-decoration: underline;
}
.afc-ia__maison--footer .afc-ia__maison-description { display: none; }

.afc-ia__maison-item:focus-visible { outline: 2px solid var(--afc-ia-anneau); outline-offset: 1px; }

.afc-ia__formulaire {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid var(--afc-border, rgba(0, 0, 0, .08));
	flex: 0 0 auto;
}
.afc-ia__formulaire textarea {
	flex: 1 1 auto;
	resize: none;
	max-height: 120px;
	border: 1px solid var(--afc-border-strong, rgba(0, 0, 0, .18));
	border-radius: var(--afc-ia-rayon-sm);
	padding: 9px 11px;
	font: inherit;
	font-size: 14px;
	background: var(--afc-input-bg, #fff);
	color: var(--afc-text, #222);
}
.afc-ia__formulaire textarea:focus-visible {
	outline: 2px solid var(--afc-ia-anneau);
	outline-offset: 1px;
}

.afc-ia__envoyer {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: var(--afc-ia-rayon-sm);
	border: none;
	background: var(--afc-accent, #d4243b);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.afc-ia__envoyer:disabled { opacity: .5; cursor: default; }
.afc-ia__envoyer:focus-visible { outline: 2px solid var(--afc-ia-anneau); outline-offset: 1px; }

.afc-ia__pied {
	margin: 0;
	padding: 0 16px 12px;
	font-size: 11px;
	opacity: .6;
	flex: 0 0 auto;
}

/* Mode sombre — même convention que le reste du site public. */
#page.theme-dark .afc-ia__panneau {
	background: var(--afc-surface, #1e1c18);
	border-color: var(--afc-border, rgba(255, 255, 255, .08));
}
#page.theme-dark .afc-ia__message--assistant .afc-ia__bulle {
	background: var(--afc-surface-2, #252320);
}
#page.theme-dark .afc-ia__action--secondaire {
	border-color: var(--afc-border-strong, rgba(255, 255, 255, .18));
}
#page.theme-dark .afc-ia__teaser {
	background: var(--afc-surface, #1e1c18);
	border-color: var(--afc-border, rgba(255, 255, 255, .08));
}

/*
 * Seule la marge HORIZONTALE se resserre sur petit écran : la marge basse
 * reste pilotée par --afc-ia-base (nav mobile) + --afc-ia-decalage (réglage
 * admin). La fixer ici en dur écraserait ces deux variables.
 */
@media (max-width: 480px) {
	.afc-ia { --afc-ia-cote: 12px; }
	.afc-ia__panneau { width: calc(100vw - 24px); height: calc(100vh - 88px); }
}