/**
 * CNX Assistant.
 *
 * Le module hérite des jetons du thème quand ils existent et retombe sur ses
 * propres valeurs sinon : il doit rester présentable si l'habillage change.
 */

.cnx-assist,
.cnx-assist-root {
	--a-accent: var(--cnx-accent, #0c6fff);
	--a-ink: var(--cnx-ink, #08090d);
	--a-ink-soft: var(--cnx-ink-soft, #2c3242);
	--a-muted: var(--cnx-muted, #8a90a0);
	--a-line: var(--cnx-line, #e8eaef);
	--a-line-strong: var(--cnx-line-strong, #dcdfe7);
	--a-surface-2: var(--cnx-surface-2, #f4f5f7);
	--a-surface-3: var(--cnx-surface-3, #fafbfc);
	--a-font: var(--cnx-font, "Plus Jakarta Sans", system-ui, sans-serif);
	--a-r: var(--cnx-r, 14px);
	--a-r-xl: var(--cnx-r-xl, 22px);
	--a-r-pill: var(--cnx-r-pill, 999px);
	--a-shadow: var(--cnx-shadow, 0 18px 50px rgba(8, 9, 13, 0.1));
	--a-ease: var(--cnx-ease, cubic-bezier(0.165, 0.84, 0.44, 1));
	--a-t: var(--cnx-t-fast, 0.25s);
}

/* ==========================================================================
   1. La coquille
   ========================================================================== */
.cnx-assist {
	max-width: 780px;
	margin-inline: auto;
	border: 1px solid var(--a-line);
	border-radius: var(--a-r-xl);
	background: #fff;
	overflow: hidden;
	box-shadow: var(--a-shadow);
}

.cnx-assist-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--a-line);
	background: var(--a-surface-3);
}

.cnx-assist-avatar {
	width: 40px;
	height: 40px;
	flex: none;
}

.cnx-assist-avatar svg {
	width: 40px;
	height: 40px;
	border-radius: 12px;
}

.cnx-assist-mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--a-accent);
	color: #fff;
}

/* Sans base de flex, le bloc de titre tombait à sa largeur minimale et
   coupait « Assistant CNX » mot par mot dans la bulle. */
.cnx-assist-ident {
	flex: 1 1 auto;
	min-width: 0;
}

.cnx-assist-bar strong,
.cnx-assist-bar small {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cnx-assist-bar strong {
	font-family: var(--a-font);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--a-ink);
	line-height: 1.3;
}

.cnx-assist-bar small {
	font-size: 0.8125rem;
	color: var(--a-muted);
}

.cnx-assist-steps {
	margin-left: auto;
	display: flex;
	gap: 5px;
	flex: none;
}

.cnx-assist-steps i {
	width: 16px;
	height: 4px;
	border-radius: 999px;
	background: var(--a-line-strong);
	transition: background-color 0.45s var(--a-ease);
}

.cnx-assist-steps i.is-on {
	background: var(--a-accent);
}

.cnx-assist-close {
	flex: none;
	margin-left: 4px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--a-muted);
	cursor: pointer;
	transition: background-color var(--a-t), color var(--a-t);
}

.cnx-assist-close:hover {
	background: var(--a-surface-2);
	color: var(--a-ink);
}

/* ==========================================================================
   2. Le fil
   ========================================================================== */
.cnx-assist-thread {
	padding: 26px 24px 8px;
	max-height: 420px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-behavior: smooth;
}

.cnx-assist-msg {
	max-width: 84%;
	padding: 14px 18px;
	border-radius: var(--a-r);
	font-size: 0.9375rem;
	line-height: 1.6;
	white-space: pre-line;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.45s var(--a-ease), transform 0.45s var(--a-ease);
}

.cnx-assist-msg.is-in {
	opacity: 1;
	transform: none;
}

.cnx-assist-msg.is-bot {
	background: var(--a-surface-2);
	color: var(--a-ink-soft);
	border-bottom-left-radius: 6px;
	align-self: flex-start;
}

.cnx-assist-msg.is-me {
	background: var(--a-accent);
	color: #fff;
	border-bottom-right-radius: 6px;
	align-self: flex-end;
}

@keyframes cnxTyping {
	0%,
	100% {
		opacity: 0.45;
	}
	50% {
		opacity: 1;
	}
}

.cnx-assist-msg.is-typing {
	animation: cnxTyping 1.3s var(--a-ease) infinite;
}

/* ==========================================================================
   3. Les réponses
   ========================================================================== */
.cnx-assist-input {
	padding: 10px 24px 24px;
}

.cnx-assist-options {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

@keyframes cnxOptIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.cnx-assist-opt {
	border: 1px solid var(--a-line-strong);
	background: #fff;
	border-radius: var(--a-r-pill);
	padding: 11px 18px;
	font-family: var(--a-font);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--a-ink-soft);
	cursor: pointer;
	text-align: left;
	animation: cnxOptIn 0.45s var(--a-ease) both;
	transition: border-color var(--a-t), color var(--a-t),
		background-color var(--a-t), transform 0.45s var(--a-ease);
}

.cnx-assist-opt:hover {
	border-color: var(--a-accent);
	color: var(--a-accent);
	transform: translateY(-2px);
}

.cnx-assist-opt.is-on {
	background: var(--a-accent);
	border-color: var(--a-accent);
	color: #fff;
}

/* Boutons du module : aucune dépendance aux classes du thème. */
.cnx-assist-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--a-line-strong);
	background: #fff;
	color: var(--a-ink);
	border-radius: var(--a-r-pill);
	padding: 12px 22px;
	font-family: var(--a-font);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--a-t), border-color var(--a-t),
		color var(--a-t), transform 0.45s var(--a-ease);
}

.cnx-assist-btn:hover {
	border-color: var(--a-accent);
	color: var(--a-accent);
	transform: translateY(-1px);
}

.cnx-assist-btn-accent {
	background: var(--a-accent);
	border-color: var(--a-accent);
	color: #fff;
}

.cnx-assist-btn-accent:hover {
	background: var(--a-accent);
	color: #fff;
	filter: brightness(0.94);
}

.cnx-assist-send {
	margin-top: 14px;
}

.cnx-assist-btn[disabled] {
	opacity: 0.4;
	pointer-events: none;
}

.cnx-assist-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cnx-assist-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.cnx-assist-grid input:nth-child(3) {
	grid-column: 1 / -1;
}

.cnx-assist-form input,
.cnx-assist-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--a-line-strong);
	border-radius: var(--a-r);
	padding: 12px 15px;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--a-ink);
	background: #fff;
	transition: border-color var(--a-t);
}

.cnx-assist-form input:focus,
.cnx-assist-form textarea:focus {
	outline: none;
	border-color: var(--a-accent);
}

.cnx-assist-form textarea {
	resize: vertical;
	min-height: 84px;
}

.cnx-assist-form.is-invalid input:placeholder-shown {
	border-color: #e03131;
}

.cnx-assist-alert {
	margin: 0;
	font-size: 0.8125rem;
	color: #e03131;
}

.cnx-assist-row {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.cnx-assist-done {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cnx-assist-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 14px 24px;
	border-top: 1px solid var(--a-line);
	background: var(--a-surface-3);
	font-size: 0.8125rem;
	color: var(--a-muted);
}

.cnx-assist-note svg {
	flex: none;
}

/* ==========================================================================
   4. La bulle flottante
   ========================================================================== */
.cnx-assist-root {
	position: fixed;
	right: 28px;
	bottom: 90px; /* au-dessus du bouton d'appel du thème, posé à 28px */
	z-index: 880;
	display: flex;
	/* column-reverse : le bouton, premier dans le balisage, reste en bas et
	   le panneau s'ouvre au-dessus. En column il remontait avec la pile. */
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 14px;
}

.cnx-assist-launcher {
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 52px;
	padding: 0 15px;
	border: 0;
	border-radius: var(--a-r-pill);
	background: var(--a-ink);
	color: #fff;
	font-family: var(--a-font);
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(8, 9, 13, 0.24);
	transition: gap 0.85s var(--a-ease), padding-right 0.85s var(--a-ease),
		background-color 0.4s var(--a-ease), transform 0.85s var(--a-ease);
}

.cnx-assist-launcher-icon {
	display: grid;
	place-items: center;
	flex: none;
}

/* Le libellé se déplie au survol : même grammaire que les boutons du thème,
   mais en deux temps. À la fermeture, le texte s'efface avant que la largeur
   ne se referme — sinon on voit les lettres se faire écraser. */
.cnx-assist-launcher-label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width 0.6s var(--a-ease), opacity 0.22s var(--a-ease);
}

.cnx-assist-launcher:hover {
	background: var(--a-accent);
	transform: translateY(-2px);
	gap: 10px;
	padding-right: 22px;
}

/* À l'ouverture c'est l'inverse : la largeur part la première, le texte
   n'apparaît qu'une fois la place faite. */
.cnx-assist-launcher:hover .cnx-assist-launcher-label,
.cnx-assist-launcher:focus-visible .cnx-assist-launcher-label {
	max-width: 240px;
	opacity: 1;
	transition: max-width 0.85s var(--a-ease), opacity 0.5s var(--a-ease) 0.16s;
}

.cnx-assist-launcher.is-open {
	background: var(--a-accent);
}

.cnx-assist-dock {
	width: min(420px, calc(100vw - 40px));
	animation: cnxDockIn 0.45s var(--a-ease) both;
}

@keyframes cnxDockIn {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.cnx-assist-dock[hidden] {
	display: none;
}

/* Dans la bulle, le fil respire moins : la place est comptée. */
.cnx-assist-dock .cnx-assist-thread {
	max-height: min(46vh, 340px);
	padding: 20px 18px 6px;
}

.cnx-assist-dock .cnx-assist-bar {
	padding: 14px 18px;
	gap: 10px;
}

/* Dans la bulle, le sous-titre serait tronqué quoi qu'on fasse : on le retire
   plutôt que de montrer des points de suspension. Le bloc en pleine largeur,
   lui, a la place de l'afficher en entier. */
.cnx-assist-dock .cnx-assist-bar small {
	display: none;
}

/* 420 px de large : les segments se partagent la place qui reste au lieu
   d'imposer leur largeur fixe et d'écraser le titre. */
.cnx-assist-dock .cnx-assist-steps {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 42%;
	gap: 3px;
}

.cnx-assist-dock .cnx-assist-steps i {
	flex: 1 1 0;
	width: auto;
	min-width: 4px;
}

.cnx-assist-dock .cnx-assist-input {
	padding: 8px 18px 18px;
}

.cnx-assist-dock .cnx-assist-note {
	padding: 12px 18px;
}

.cnx-assist-dock .cnx-assist-avatar,
.cnx-assist-dock .cnx-assist-avatar svg,
.cnx-assist-dock .cnx-assist-mark {
	width: 32px;
	height: 32px;
	border-radius: 10px;
}

/* ==========================================================================
   5. Petits écrans
   ========================================================================== */
@media (max-width: 600px) {
	.cnx-assist-root {
		right: 16px;
		bottom: 84px;
		left: 16px;
		align-items: flex-end;
	}

	.cnx-assist-dock {
		width: 100%;
	}

	.cnx-assist-dock .cnx-assist-thread {
		max-height: 50vh;
	}

	/* Le corps ne défile plus derrière la bulle ouverte. */
	body.cnx-assist-locked {
		overflow: hidden;
	}
}

@media (max-width: 560px) {
	.cnx-assist-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cnx-assist-msg {
		max-width: 92%;
	}

	.cnx-assist-steps {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cnx-assist-msg,
	.cnx-assist-opt,
	.cnx-assist-dock,
	.cnx-assist-launcher,
	.cnx-assist-launcher-label {
		animation: none !important;
		transition: none !important;
	}
}