/* =========================================================================
   GoToGreen · chatbot.css
   Widget de qualification flottant. Réutilise la palette du thème (main.css).
   ====================================================================== */

.gtg-chatbot {
	--bot-size: 64px;
	position: fixed;
	right: clamp(14px, 3vw, 28px);
	bottom: clamp(14px, 3vw, 28px);
	z-index: 9999;
	font-family: var(--font-sans, system-ui, sans-serif);
}

/* --- Lanceur (bulle ronde) ---------------------------------------------- */
.gtg-bot__launcher {
	position: relative;
	width: var(--bot-size);
	height: var(--bot-size);
	border: none;
	border-radius: 50%;
	padding: 0;
	display: grid;
	place-items: center;
	background: linear-gradient(145deg, var(--accent, #19e3d6), var(--accent-2, #0fb3a4));
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08) inset;
	overflow: hidden;
	transition: transform .25s var(--ease, ease), box-shadow .25s;
}
.gtg-bot__launcher:hover { transform: translateY(-2px) scale(1.04); }
.gtg-bot__launcher:active { transform: scale(.97); }
.gtg-chatbot.is-open .gtg-bot__launcher { transform: scale(.9); opacity: .85; }

.gtg-bot__launcher-img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.gtg-bot__launcher-pulse {
	position: absolute; inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(25, 227, 214, .55);
	animation: gtg-bot-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes gtg-bot-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(25, 227, 214, .5); }
	70%  { box-shadow: 0 0 0 16px rgba(25, 227, 214, 0); }
	100% { box-shadow: 0 0 0 0 rgba(25, 227, 214, 0); }
}
.gtg-chatbot.is-open .gtg-bot__launcher-pulse { display: none; }

/* Avatar de secours (feuille) si aucune image fournie ou erreur de chargement */
.gtg-bot__leaf {
	display: grid; place-items: center;
	background: linear-gradient(145deg, var(--accent, #19e3d6), var(--accent-2, #0fb3a4));
	color: #04140f;
	border-radius: 50%;
}

/* --- Panneau de conversation -------------------------------------------- */
.gtg-bot__panel {
	position: absolute;
	right: 0;
	bottom: calc(var(--bot-size) + 14px);
	width: min(92vw, 380px);
	height: min(72vh, 560px);
	display: flex;
	flex-direction: column;
	background: var(--surface, #121922);
	border: 1px solid var(--line, rgba(255, 255, 255, .09));
	border-radius: var(--radius-lg, 24px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
	overflow: hidden;
	transform-origin: bottom right;
	animation: gtg-bot-in .28s var(--ease, ease) both;
}
/* « display: flex » ci-dessus l'emporterait sur l'attribut hidden : panneau fermé = masqué. */
.gtg-bot__panel[hidden] { display: none; }
@keyframes gtg-bot-in {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* En-tête */
.gtg-bot__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: linear-gradient(120deg, var(--blue-deep, #0a2540), var(--bg-3, #11171d));
	border-bottom: 1px solid var(--line, rgba(255, 255, 255, .09));
}
.gtg-bot__head-img {
	width: 40px; height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.gtg-bot__head-id { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.gtg-bot__head-id strong { font-family: var(--font-disp, sans-serif); color: var(--text, #f3f7f8); font-size: .98rem; }
.gtg-bot__head-id span {
	color: var(--accent-3, #5bf2e6);
	font-size: .76rem;
	display: flex; align-items: center; gap: 6px;
}
.gtg-bot__head-id span::before {
	content: ''; width: 7px; height: 7px; border-radius: 50%;
	background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
	animation: gtg-bot-dot 1.8s ease-in-out infinite;
}
@keyframes gtg-bot-dot { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
.gtg-bot__close {
	margin-left: auto;
	background: transparent; border: none;
	color: var(--muted, #9fb0b8);
	font-size: 1.6rem; line-height: 1;
	width: 32px; height: 32px; border-radius: 8px;
	transition: background .2s, color .2s;
}
.gtg-bot__close:hover { background: rgba(255, 255, 255, .08); color: var(--text, #fff); }

/* Fil des messages */
.gtg-bot__log {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background:
		radial-gradient(120% 60% at 100% 0%, rgba(25, 227, 214, .06), transparent 60%),
		var(--bg-2, #0c1014);
}
.gtg-bot__log::-webkit-scrollbar { width: 8px; }
.gtg-bot__log::-webkit-scrollbar-thumb { background: var(--line-2, rgba(255,255,255,.14)); border-radius: 8px; }

.gtg-bot__msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.gtg-bot__msg--user { flex-direction: row-reverse; }
.gtg-bot__msg-av {
	width: 28px; height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.gtg-bot__bubble {
	padding: 10px 14px;
	border-radius: 16px;
	font-size: .92rem;
	line-height: 1.5;
	max-width: 78%;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.gtg-bot__msg--bot .gtg-bot__bubble {
	background: var(--surface-2, #18222c);
	color: var(--text, #f3f7f8);
	border: 1px solid var(--line, rgba(255, 255, 255, .09));
	border-bottom-left-radius: 5px;
}
.gtg-bot__msg--user .gtg-bot__bubble {
	background: linear-gradient(145deg, var(--accent, #19e3d6), var(--accent-2, #0fb3a4));
	color: #04140f;
	font-weight: 500;
	border-bottom-right-radius: 5px;
}
.gtg-bot__bubble a { color: var(--accent-3, #5bf2e6); text-decoration: underline; }
.gtg-bot__msg--user .gtg-bot__bubble a { color: #04140f; }

/* Indicateur « écrit… » */
.gtg-bot__typing .gtg-bot__bubble { display: flex; gap: 4px; align-items: center; }
.gtg-bot__typing .gtg-bot__bubble span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--muted, #9fb0b8);
	animation: gtg-bot-typing 1.2s infinite ease-in-out;
}
.gtg-bot__typing .gtg-bot__bubble span:nth-child(2) { animation-delay: .15s; }
.gtg-bot__typing .gtg-bot__bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes gtg-bot-typing { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Zone de saisie */
.gtg-bot__form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	background: var(--bg-3, #11171d);
	border-top: 1px solid var(--line, rgba(255, 255, 255, .09));
}
.gtg-bot__input {
	flex: 1 1 auto;
	resize: none;
	max-height: 120px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--line-2, rgba(255, 255, 255, .14));
	background: var(--bg, #07090c);
	color: var(--text, #f3f7f8);
	font-family: inherit;
	font-size: .92rem;
	line-height: 1.4;
	outline: none;
	transition: border-color .2s;
}
.gtg-bot__input:focus { border-color: var(--accent, #19e3d6); }
.gtg-bot__input::placeholder { color: var(--muted-2, #6f828c); }
.gtg-bot__send {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	border: none; border-radius: 12px;
	display: grid; place-items: center;
	background: linear-gradient(145deg, var(--accent, #19e3d6), var(--accent-2, #0fb3a4));
	color: #04140f;
	transition: transform .15s, opacity .2s;
}
.gtg-bot__send:hover { transform: scale(1.06); }
.gtg-bot__send:active { transform: scale(.94); }
.gtg-bot__input:disabled + .gtg-bot__send,
.gtg-bot__send:disabled { opacity: .5; pointer-events: none; }

/* Bouton « Recommencer » de l'en-tête */
.gtg-bot__restart {
	margin-left: auto;
	background: transparent; border: none;
	color: var(--muted, #9fb0b8);
	width: 32px; height: 32px; border-radius: 8px;
	display: grid; place-items: center;
	transition: background .2s, color .2s;
}
.gtg-bot__restart:hover { background: rgba(255, 255, 255, .08); color: var(--text, #fff); }
.gtg-bot__restart + .gtg-bot__close { margin-left: 0; }

/* Boutons de réponse rapide */
.gtg-bot__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-left: 36px; /* aligné sur les bulles (avatar 28px + 8px) */
}
.gtg-bot__choice {
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(25, 227, 214, .45);
	background: rgba(25, 227, 214, .06);
	color: var(--accent-3, #5bf2e6);
	font: inherit;
	font-size: .84rem;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
.gtg-bot__choice:hover { background: rgba(25, 227, 214, .16); border-color: var(--accent, #19e3d6); }
.gtg-bot__choice:focus-visible { outline: 2px solid var(--accent, #19e3d6); outline-offset: 2px; }
.gtg-bot__choice[aria-pressed="true"] {
	background: linear-gradient(145deg, var(--accent, #19e3d6), var(--accent-2, #0fb3a4));
	border-color: transparent;
	color: #04140f;
	font-weight: 600;
}
.gtg-bot__choice--validate {
	border-style: dashed;
	color: var(--text, #f3f7f8);
}
.gtg-bot__choice--validate:disabled { opacity: .4; cursor: default; }

/* Réduit les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
	.gtg-bot__launcher-pulse,
	.gtg-bot__head-id span::before,
	.gtg-bot__panel { animation: none; }
}

/* Mobile : panneau plein cadre */
@media (max-width: 480px) {
	.gtg-bot__panel {
		position: fixed;
		right: 8px; left: 8px;
		bottom: calc(var(--bot-size) + 10px);
		width: auto;
		height: min(76vh, 600px);
	}
}