/*
 * Chatbot contextuel : bulle du pied de page, formulaire (meme structure que
 * css/demande-support.css, volontairement pas fusionne : fonctionnalites
 * independantes, groupes de visibilite differents).
 */

/* Bouton du pied de page : style commun dans css/statusbar.css. */

/* Fenetre de tchat (kendoChat, cf. js/chatbot.js) */
.chatbot-form {
	/* Toute la largeur de la fenetre (fwDialog, ~720 px) : 560 px fixes
	   laissaient ~140 px vides a droite. */
	width: 100%;
	min-width: 480px;
	max-width: 90vw;
	box-sizing: border-box;
}
.chatbot-form .chatbot-chat {
	height: 60vh;
	min-height: 320px;
	max-height: 560px;
	width: 100%;
	box-sizing: border-box;
}
.chatbot-contexte {
	margin: 8px 0 0 0;
	font-size: 0.85em;
	color: #6b7280;
}

/* La zone de saisie du tchat a son propre indicateur de focus (cadre bleu du
   widget) : sans ceci, le contour jaune global de css/accessibility.css
   (textarea:focus-visible, !important) apparaissait rogne en « ligne jaune ». */
.chatbot-form .chatbot-chat textarea:focus-visible,
.chatbot-form .chatbot-chat .k-input:focus-visible,
.chatbot-form .chatbot-chat input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Capture jointe a la premiere question : miniature + retrait avant envoi */
.chatbot-capture-barre {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0 0;
	padding: 6px 8px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fafbfc;
}
.chatbot-capture-miniature {
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	background: #fff;
	cursor: zoom-in;
	line-height: 0;
}
.chatbot-capture-miniature img {
	width: 120px;
	height: auto;
	max-height: 80px;
	object-fit: cover;
	object-position: top left;
	border-radius: 3px;
}
.chatbot-capture-libelle {
	flex: 1 1 auto;
	font-size: 0.9em;
	color: #4b5563;
}
.chatbot-capture-retirer {
	flex: 0 0 auto;
	font-size: 1.3em;
	line-height: 1;
}
.chatbot-capture-grande {
	margin: 6px 0 0 0;
	max-height: 45vh;
	overflow: auto;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	cursor: zoom-out;
}
.chatbot-capture-grande img {
	display: block;
	width: 100%;
	height: auto;
}

/* Avancement de la question en attente (compteur + etape) */
/* Zone d'attente : points « en train d'ecrire », compteur, phrase en
   rotation (config/chatbot_attente_*.ini) et barre fine vers la limite de
   reponse (visuelle, pas un pourcentage d'avancement). */
.chatbot-avancement {
	position: relative;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 6px 0 0 0;
	padding: 0 0 6px 0;
	font-size: 0.9em;
	color: var(--color-text-muted, #4b5563);
}
.chatbot-avancement-compteur {
	font-variant-numeric: tabular-nums;
	font-weight: bold;
	min-width: 4.5em;
}
.chatbot-avancement-etape {
	flex: 1 1 60%;
	min-height: 1.3em;
}
.chatbot-avancement-points {
	display: inline-flex;
	gap: 3px;
}
.chatbot-avancement-points i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--synapsy-purple, #221B48);
	opacity: .25;
	animation: chatbot-point 1.2s infinite ease-in-out;
}
.chatbot-avancement-points i:nth-child(2) { animation-delay: .2s; }
.chatbot-avancement-points i:nth-child(3) { animation-delay: .4s; }
@keyframes chatbot-point {
	0%, 80%, 100% { opacity: .25; transform: translateY(0); }
	40%           { opacity: 1;   transform: translateY(-3px); }
}
.chatbot-avancement-fini .chatbot-avancement-points { visibility: hidden; }
.chatbot-avancement-barre {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background-color: var(--color-bg-muted, #eef1f5);
	overflow: hidden;
}
.chatbot-avancement-barre > span {
	display: block;
	height: 100%;
	width: 0;
	background-color: color-mix(in srgb, var(--synapsy-purple, #221B48) 55%, #fff);
	transition: width 1s linear;
}
/* Annonce aux lecteurs d'ecran seulement (changement d'etape). */
.chatbot-sr {
	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) {
	.chatbot-avancement-points i { animation: none; opacity: .6; }
	.chatbot-avancement-barre > span { transition: none; }
}

/* Reponse de l'equipe disponible apres une escalade (fwChatbot._majBadge). */
.chatbot-bulle .chatbot-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--radius-pill, 999px);
	background-color: var(--color-danger);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	box-sizing: border-box;
}
.chatbot-bulle .k-link,
.chatbot-bulle .k-menu-link {
	position: relative;
}