/* =====================================================
   Assistant IA (chatbot) — bulle de discussion AFG CAA
   ===================================================== */

.afg-chat {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99998;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

/* Animation subtile du bouton robot.
   Le centrage vertical est assuré par le conteneur .afg-chat : le bouton ne
   doit donc PAS ajouter de translateY, sinon il se décale vers le haut et ne
   s'aligne plus avec le bouton d'accessibilité du bord opposé.
   Le mouvement reste dirigé vers l'intérieur de l'écran pour que le bouton,
   collé au bord droit, ne déborde jamais de la fenêtre. */
@keyframes afg-robot-flotte {
	0%,  100% { transform: translateX(0);    }
	50%       { transform: translateX(-5px); }
}

/* Bouton qui ouvre/ferme le panneau — attaché au bord droit de l'écran */
.afg-chat-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 99px;
	height: 99px;
	border: none;
	border-radius: 18px 0 0 18px;
	background: #1f6f92;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 4px 4px 14px rgba(18, 63, 86, 0.30);
	position: relative;
	isolation: isolate;
	transition: background 0.2s ease;
	animation: afg-robot-flotte 3s ease-in-out infinite;
	/* Le bouton grandit vers l'intérieur de l'écran, jamais vers le bord. */
	transform-origin: right center;
}
.afg-chat-toggle-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.12rem;
}
.afg-chat-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 18px 0 0 18px;
	pointer-events: none;
	animation: afg-chat-ring 2.4s ease-out infinite;
}
.afg-chat-toggle:hover {
	animation: none;
	transform: scale(1.06);
	background: #3a9bbd;
}
.afg-chat-toggle:active {
	animation: none;
	transform: scale(0.94);
}
.afg-chat-toggle:focus-visible {
	outline: 3px solid #3a9bbd;
	outline-offset: 2px;
}
.afg-chat-svg { width: 36px; height: 36px; }
.afg-chat-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; }

/* Sur mobile et petite tablette, un bouton de 99 px recouvre le texte des
   contenus. Même réduction que le bouton d'accessibilité du bord opposé,
   pour que les deux restent strictement jumeaux. */
@media (max-width: 820px) {
	.afg-chat-toggle { width: 68px; height: 68px; }
	.afg-chat-svg { width: 26px; height: 26px; }
	.afg-chat-label { font-size: 0.6rem; }
}

/* Sur téléphone, même réduction que le bouton d'accessibilité du bord opposé.
   Le libellé « IA » reste lu par les lecteurs d'écran : il donne son nom
   accessible au bouton, on ne peut donc pas le supprimer. */
@media (max-width: 560px) {
	.afg-chat-toggle { width: 54px; height: 54px; }
	.afg-chat-svg { width: 26px; height: 26px; }
	.afg-chat-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

@keyframes afg-chat-ring {
	0%   { box-shadow: 0 0 0 0 rgba(58,155,189,0.4); }
	70%  { box-shadow: 0 0 0 18px rgba(58,155,189,0); }
	100% { box-shadow: 0 0 0 0 rgba(58,155,189,0); }
}

/* Fix HTML hidden vs CSS display conflict */
#afg-chat-panneau[hidden] { display: none !important; }

/* Panneau de discussion — s'ouvre vers la gauche depuis le bord droit */
.afg-chat-panneau {
	position: absolute;
	right: 107px;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	width: min(340px, calc(100vw - 116px));
	max-height: 70vh;
	padding: 2px;
	border-radius: 20px;
	background: conic-gradient(from 0deg, #f4c95d, #d1893f, #3a9bbd, #6b4fa0, #f4c95d);
	background-size: 200% 200%;
	box-shadow: 0 12px 32px rgba(18, 63, 86, 0.28);
	overflow: hidden;
	transform-origin: right center;
	animation: afg-chat-apparition 0.38s cubic-bezier(0.34,1.56,0.64,1), afg-chat-bordure 6s linear infinite;
}
.afg-chat-panneau > .afg-chat-entete,
.afg-chat-panneau > .afg-chat-messages,
.afg-chat-panneau > .afg-chat-form,
.afg-chat-panneau > .afg-chat-note {
	position: relative;
}
.afg-chat-panneau::after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 18px;
	background: #ffffff;
	z-index: 0;
}
.afg-chat-entete, .afg-chat-messages, .afg-chat-form, .afg-chat-note { z-index: 1; }

@keyframes afg-chat-bordure {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

@keyframes afg-chat-apparition {
	from { opacity: 0; transform: translateY(-50%) translateX(10px) scale(0.92); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

.afg-chat-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1.1rem;
	background: linear-gradient(135deg, #3a9bbd, #1f6f92);
	color: #ffffff;
}
.afg-chat-titre { margin: 0; font-size: 1rem; font-weight: 700; }
.afg-chat-entete-actions {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}
.afg-chat-voix-toggle,
.afg-chat-fermer {
	border: none;
	background: rgba(255,255,255,0.15);
	color: #ffffff;
	line-height: 1;
	cursor: pointer;
	padding: 0.3rem 0.4rem;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, opacity 0.15s ease;
}
.afg-chat-fermer {
	font-size: 1.4rem;
	padding: 0.1rem 0.4rem;
	background: transparent;
}
.afg-chat-voix-toggle:hover { background: rgba(255,255,255,0.28); }
.afg-chat-fermer:hover { background: rgba(255,255,255,0.2); }
.afg-chat-voix-toggle:focus-visible,
.afg-chat-fermer:focus-visible { outline: 2px solid #f4c95d; outline-offset: 2px; }
.afg-chat-voix-toggle[aria-pressed="false"] { opacity: 0.5; }
.afg-chat-voix-toggle[aria-pressed="true"] svg { animation: afg-chat-voix-pulse 1.8s ease-in-out infinite; }
@keyframes afg-chat-voix-pulse {
	0%, 100% { opacity: 0.85; }
	50%      { opacity: 1; transform: scale(1.08); }
}

.afg-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-height: 180px;
}

.afg-chat-msg {
	max-width: 85%;
	padding: 0.6rem 0.85rem;
	border-radius: 14px;
	font-size: 0.92rem;
	line-height: 1.4;
	animation: afg-chat-msg-in 0.25s ease;
}
@keyframes afg-chat-msg-in {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

.afg-chat-bot {
	align-self: flex-start;
	background: #eef4f7;
	color: #123f56;
	border-bottom-left-radius: 4px;
}
.afg-chat-user {
	align-self: flex-end;
	background: linear-gradient(135deg, #3a9bbd, #1f6f92);
	color: #ffffff;
	border-bottom-right-radius: 4px;
}
.afg-chat-erreur {
	align-self: flex-start;
	background: #fde2e2;
	color: #8a1f1f;
	border-bottom-left-radius: 4px;
}

.afg-chat-orbe-zone {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.9rem 0.5rem 0.5rem;
}

.afg-chat-orbe {
	position: relative;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.afg-chat-orbe-coeur {
	position: absolute;
	inset: 4px;
	border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%;
	background: linear-gradient(135deg, #f4c95d, #d1893f, #3a9bbd, #f4c95d);
	background-size: 300% 300%;
	animation: afg-orbe-forme 2.4s ease-in-out infinite, afg-orbe-couleur 3.2s linear infinite;
	filter: blur(0.2px);
}
.afg-chat-orbe-anneau {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, #f4c95d, #3a9bbd, #d1893f, #f4c95d);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
	animation: afg-orbe-tourne 1.4s linear infinite;
}
@keyframes afg-orbe-forme {
	0%, 100% { border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%; transform: scale(1); }
	50%      { border-radius: 60% 40% 44% 56% / 40% 55% 45% 60%; transform: scale(1.15); }
}
@keyframes afg-orbe-couleur {
	0%   { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}
@keyframes afg-orbe-tourne {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.afg-chat-orbe-texte {
	font-size: 0.82rem;
	font-style: italic;
	color: #6b7280;
	animation: afg-orbe-pulse-texte 1.6s ease-in-out infinite;
}
@keyframes afg-orbe-pulse-texte {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}

.afg-chat-curseur {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 1px;
	vertical-align: text-bottom;
	background: #1f6f92;
	animation: afg-chat-clignote 0.8s step-end infinite;
}
@keyframes afg-chat-clignote {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0; }
}

.afg-chat-form {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.8rem 1rem 0.3rem;
	border-top: 1px solid #e5e9ec;
}
.afg-chat-champ-label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.afg-chat-champ-ligne {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
}
.afg-chat-champ-ligne textarea {
	flex: 1;
	resize: none;
	border: 2px solid #e5e9ec;
	border-radius: 12px;
	padding: 0.55rem 0.75rem;
	font-family: inherit;
	font-size: 0.92rem;
	max-height: 90px;
	transition: border-color 0.2s ease;
}
.afg-chat-champ-ligne textarea:focus-visible {
	outline: none;
	border-color: #3a9bbd;
}
.afg-chat-envoyer,
.afg-chat-micro {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(135deg, #3a9bbd, #1f6f92);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.afg-chat-envoyer:hover,
.afg-chat-micro:hover { transform: scale(1.08); }
.afg-chat-envoyer:active,
.afg-chat-micro:active { transform: scale(0.94); }
.afg-chat-envoyer:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.afg-chat-envoyer:focus-visible,
.afg-chat-micro:focus-visible { outline: 3px solid #f4c95d; outline-offset: 2px; }

.afg-chat-micro { background: linear-gradient(135deg, #8069c2, #6b4fa0); position: relative; }
.afg-chat-micro-actif {
	background: linear-gradient(135deg, #e0554f, #b5342e) !important;
	animation: afg-chat-micro-pulse 1.1s ease-in-out infinite;
}
.afg-chat-micro-actif::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 14px;
	border: 2px solid rgba(224,85,79,0.6);
	animation: afg-chat-micro-ring 1.1s ease-out infinite;
}
@keyframes afg-chat-micro-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
@keyframes afg-chat-micro-ring {
	0%   { transform: scale(0.9); opacity: 1; }
	100% { transform: scale(1.3); opacity: 0; }
}

.afg-chat-note {
	margin: 0.4rem 1rem 0.9rem;
	font-size: 0.72rem;
	color: #6b7280;
	text-align: center;
}

/* Waveform micro */
.afg-chat-waveform {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 32px;
	padding: 0 0.5rem;
	margin: 0 0 0.3rem;
}
.afg-chat-waveform-barre {
	width: 4px;
	border-radius: 3px;
	background: linear-gradient(180deg, #8069c2, #6b4fa0);
	transition: height 0.05s ease;
	min-height: 4px;
	max-height: 28px;
	height: 4px;
}

/* Fallback CSS quand getUserMedia est bloqué (HTTP, refus permissions…) */
.afg-chat-waveform-fallback .afg-chat-waveform-barre:nth-child(1) { animation: afg-waveform-anim 1.1s ease-in-out 0.0s infinite; }
.afg-chat-waveform-fallback .afg-chat-waveform-barre:nth-child(2) { animation: afg-waveform-anim 1.1s ease-in-out 0.18s infinite; }
.afg-chat-waveform-fallback .afg-chat-waveform-barre:nth-child(3) { animation: afg-waveform-anim 1.1s ease-in-out 0.36s infinite; }
.afg-chat-waveform-fallback .afg-chat-waveform-barre:nth-child(4) { animation: afg-waveform-anim 1.1s ease-in-out 0.27s infinite; }
.afg-chat-waveform-fallback .afg-chat-waveform-barre:nth-child(5) { animation: afg-waveform-anim 1.1s ease-in-out 0.09s infinite; }
.afg-chat-waveform-fallback .afg-chat-waveform-barre:nth-child(6) { animation: afg-waveform-anim 1.1s ease-in-out 0.45s infinite; }
@keyframes afg-waveform-anim {
	0%, 100% { height: 4px; }
	50%      { height: 22px; }
}

/* Countdown écoute */
.afg-chat-countdown {
	text-align: center;
	font-size: 0.76rem;
	color: #6b4fa0;
	font-weight: 600;
	margin-bottom: 0.3rem;
	animation: afg-orbe-pulse-texte 1s ease-in-out infinite;
}

/* Mode contraste élevé */
html.afg-contraste .afg-chat-panneau {
	background: #000000 !important;
	border: 2px solid #ffff00;
}
html.afg-contraste .afg-chat-entete { background: #000000 !important; border-bottom: 2px solid #ffff00; }
html.afg-contraste .afg-chat-bot { background: #000000 !important; color: #ffff00 !important; border: 1px solid #ffff00; }
html.afg-contraste .afg-chat-user { background: #ffff00 !important; color: #000000 !important; }
html.afg-contraste .afg-chat-note { color: #ffff00 !important; }

@media (max-width: 600px) {
	/* Le bouton reste à 99px pour rester cohérent avec le bouton
	   d'accessibilité (même taille), on adapte juste le panneau. */
	.afg-chat-panneau {
		width: calc(100vw - 116px);
		max-height: 65vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.afg-chat-toggle,
	.afg-chat-toggle::after,
	.afg-chat-panneau, .afg-chat-msg,
	.afg-chat-orbe-coeur, .afg-chat-orbe-anneau, .afg-chat-orbe-texte, .afg-chat-curseur,
	.afg-chat-voix-toggle[aria-pressed="true"] svg,
	.afg-chat-micro-actif, .afg-chat-micro-actif::after,
	.afg-chat-countdown, .afg-chat-waveform-barre {
		animation: none;
		transition: none;
	}
}