.lecremy-ai-chat {
	--lecremy-ai-gradient-start: #4f46e5;
	--lecremy-ai-gradient-end: #7c3aed;
	--lecremy-ai-accent: #4f46e5;

	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	max-width: 480px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e2e4e9;
	border-radius: 14px;
	font-family: inherit;
}

.lecremy-ai-chat *,
.lecremy-ai-chat *::before,
.lecremy-ai-chat *::after {
	box-sizing: inherit;
}

.lecremy-ai-chat__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* En-tête */

.lecremy-ai-chat__header {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
	color: #fff;
}

.lecremy-ai-chat__header-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.18 );
}

.lecremy-ai-chat__header-icon svg {
	width: 18px;
	height: 18px;
	fill: #fff;
}

/* Logo choisi dans les réglages, en remplacement de l'icône par défaut. Il
   occupe toute la pastille, quelle que soit la proportion de l'image fournie. */

.lecremy-ai-chat__logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.lecremy-ai-chat__header-title {
	overflow: hidden;
	flex: 1;
	font-size: 1em;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Fermeture explicite, en plus du clic sur le bouton lanceur. */

.lecremy-ai-chat__close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.2s ease;
}

.lecremy-ai-chat__close:hover {
	background: rgba( 255, 255, 255, 0.22 );
}

.lecremy-ai-chat__close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.85 );
}

.lecremy-ai-chat__close svg {
	width: 18px;
	height: 18px;
}

/* Panneau replié (mode inline uniquement) : seul l'en-tête reste visible, et le
   chevron pivote pour annoncer que le clic suivant rouvre le panneau. */

.lecremy-ai-chat--collapsed .lecremy-ai-chat__messages,
.lecremy-ai-chat--collapsed .lecremy-ai-chat__status,
.lecremy-ai-chat--collapsed .lecremy-ai-chat__form,
.lecremy-ai-chat--collapsed .lecremy-ai-chat__footer {
	display: none;
}

.lecremy-ai-chat--collapsed .lecremy-ai-chat__close {
	transform: rotate( 180deg );
}

/* Messages */

.lecremy-ai-chat__messages {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	max-height: 320px;
	padding: 16px;
	overflow-y: auto;
}

.lecremy-ai-chat__row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	max-width: 100%;
}

.lecremy-ai-chat__row--user {
	justify-content: flex-end;
}

.lecremy-ai-chat__row--assistant {
	justify-content: flex-start;
}

.lecremy-ai-chat__avatar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
}

.lecremy-ai-chat__avatar svg {
	width: 14px;
	height: 14px;
	fill: #fff;
}

.lecremy-ai-chat__message {
	max-width: 78%;
	padding: 10px 14px;
	border-radius: 16px;
	line-height: 1.45;
	white-space: pre-wrap;
	word-wrap: break-word;
	animation: lecremy-ai-message-in 0.2s ease;
}

.lecremy-ai-chat__message--user {
	background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
	color: #fff;
	border-bottom-right-radius: 4px;
}

/* Contenu Markdown rendu dans les réponses de l'assistant. Sans ces règles, les
   marges par défaut du navigateur creuseraient de grands blancs dans une bulle
   de chat, et les listes déborderaient de leur puce. */

.lecremy-ai-chat__message--assistant > :first-child {
	margin-top: 0;
}

.lecremy-ai-chat__message--assistant > :last-child {
	margin-bottom: 0;
}

.lecremy-ai-chat__message--assistant p {
	margin: 0 0 8px;
}

.lecremy-ai-chat__message--assistant ul,
.lecremy-ai-chat__message--assistant ol {
	margin: 0 0 8px;
	padding-left: 20px;
}

.lecremy-ai-chat__message--assistant li {
	margin-bottom: 3px;
}

.lecremy-ai-chat__message--assistant h3,
.lecremy-ai-chat__message--assistant h4 {
	margin: 10px 0 6px;
	font-size: 1em;
	font-weight: 600;
}

.lecremy-ai-chat__message--assistant a {
	color: var( --lecremy-ai-accent, #4f46e5 );
	text-decoration: underline;
}

.lecremy-ai-chat__message--assistant code {
	padding: 1px 4px;
	background: rgba( 0, 0, 0, 0.06 );
	border-radius: 4px;
	font-size: 0.9em;
}

.lecremy-ai-chat__message--assistant pre {
	margin: 0 0 8px;
	padding: 8px 10px;
	overflow-x: auto;
	background: rgba( 0, 0, 0, 0.06 );
	border-radius: 8px;
}

.lecremy-ai-chat__message--assistant pre code {
	padding: 0;
	background: none;
}

.lecremy-ai-chat__message--assistant blockquote {
	margin: 0 0 8px;
	padding-left: 10px;
	border-left: 3px solid rgba( 0, 0, 0, 0.15 );
	color: #4b5160;
}

.lecremy-ai-chat__message--assistant hr {
	margin: 10px 0;
	border: 0;
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );
}

.lecremy-ai-chat__message--assistant {
	background: #f1f2f6;
	color: #1f2430;
	border-bottom-left-radius: 4px;

	/* Le rendu Markdown produit ses propres blocs : conserver les sauts de ligne
	   du texte source ajouterait une ligne vide après chaque paragraphe. */
	white-space: normal;
}

@keyframes lecremy-ai-message-in {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* Indicateur de frappe */

.lecremy-ai-chat__message--typing {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lecremy-ai-chat__typing-label {
	font-size: 0.85em;
	color: #6b7280;
}

.lecremy-ai-chat__typing-dots {
	display: inline-flex;
	gap: 3px;
}

.lecremy-ai-chat__typing-dots i {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9aa0ab;
	font-style: normal;
	animation: lecremy-ai-typing-bounce 1.2s ease-in-out infinite;
}

.lecremy-ai-chat__typing-dots i:nth-child( 2 ) {
	animation-delay: 0.15s;
}

.lecremy-ai-chat__typing-dots i:nth-child( 3 ) {
	animation-delay: 0.3s;
}

@keyframes lecremy-ai-typing-bounce {
	0%,
	60%,
	100% {
		opacity: 0.5;
		transform: translateY( 0 );
	}

	30% {
		opacity: 1;
		transform: translateY( -4px );
	}
}

/* Message d'état (erreurs) */

.lecremy-ai-chat__status {
	flex-shrink: 0;
	margin: 0;
	padding: 0 16px 8px;
	color: #c0392b;
	font-size: 0.85em;
}

/* Formulaire de saisie */

.lecremy-ai-chat__form {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	gap: 8px;
	padding: 12px 16px;
	border-top: 1px solid #eceef2;
}

.lecremy-ai-chat__form-row {
	display: flex;
	align-items: flex-end;
	gap: 6px;
}

.lecremy-ai-chat__attachment-preview {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	background: #f7f7f9;
	border: 1px solid #e2e4e9;
	border-radius: 10px;
}

.lecremy-ai-chat__attachment-preview[hidden] {
	display: none;
}

.lecremy-ai-chat__attachment-thumb {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 6px;
}

.lecremy-ai-chat__attachment-file-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #6b7280;
}

.lecremy-ai-chat__attachment-file-icon svg {
	width: 20px;
	height: 20px;
}

.lecremy-ai-chat__attachment-name {
	overflow: hidden;
	flex: 1;
	color: #4b5160;
	font-size: 0.82em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lecremy-ai-chat__attachment-remove {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #6b7280;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.lecremy-ai-chat__attachment-remove:hover {
	background: #e2e4e9;
}

.lecremy-ai-chat__attachment-wrap {
	flex-shrink: 0;
}

.lecremy-ai-chat__icon-btn {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: #6b7280;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.lecremy-ai-chat__icon-btn:hover {
	background: #f1f2f6;
	color: var( --lecremy-ai-accent, #4f46e5 );
}

.lecremy-ai-chat__icon-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.15 );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --lecremy-ai-accent, #4f46e5 ) 20%, transparent );
}

.lecremy-ai-chat__icon-btn svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.lecremy-ai-chat__input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid #d7dade;
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.95em;
	resize: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lecremy-ai-chat__input:focus-visible {
	border-color: var( --lecremy-ai-accent, #4f46e5 );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.15 );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --lecremy-ai-accent, #4f46e5 ) 15%, transparent );
}

.lecremy-ai-chat__input:disabled {
	background: #f7f7f8;
	cursor: not-allowed;
}

.lecremy-ai-chat__submit {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 10px;
	background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
	color: #fff;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.lecremy-ai-chat__submit svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.lecremy-ai-chat__submit:hover:not( :disabled ) {
	transform: scale( 1.05 );
}

.lecremy-ai-chat__submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.15 );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --lecremy-ai-accent, #4f46e5 ) 35%, transparent );
}

.lecremy-ai-chat__submit:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* Pied de panneau */

.lecremy-ai-chat__footer {
	flex-shrink: 0;
	padding: 8px 16px;
	color: #9aa0ab;
	font-size: 0.72em;
	text-align: center;
	border-top: 1px solid #eceef2;
}

/* Le lien de marque est volontairement discret : couleur héritée du pied de
   page, souligné seulement au survol, pour ne pas concurrencer la conversation. */

.lecremy-ai-chat__footer-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.lecremy-ai-chat__footer-link:hover,
.lecremy-ai-chat__footer-link:focus-visible {
	color: var( --lecremy-ai-accent, #4f46e5 );
	text-decoration: underline;
}

.lecremy-ai-chat__footer strong {
	color: #6b7280;
}

/* Bulle de chat flottante */

/* Le bouton lanceur vit dans la page hôte, hors de l'iframe : il ne peut donc
   pas hériter des variables déclarées sur .lecremy-ai-chat, qui n'existe que
   dans le document isolé. Il porte les siennes, avec les mêmes valeurs par
   défaut, redéfinies par la couleur des réglages (voir
   Lecremy_AI_Widget_Markup::register_core_assets). */

.lecremy-ai-bubble {
	--lecremy-ai-gradient-start: #4f46e5;
	--lecremy-ai-gradient-end: #7c3aed;
	--lecremy-ai-accent: #4f46e5;

	position: fixed;
	z-index: 999999;
	bottom: 20px;
	font-family: inherit;
}

.lecremy-ai-bubble--bottom-right {
	right: 20px;
}

.lecremy-ai-bubble--bottom-left {
	left: 20px;
}

.lecremy-ai-bubble .lecremy-ai-bubble__toggle {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 14px;
	border: none;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
	color: #fff;
	cursor: pointer;

	/* Deux déclarations : la première sert de repli aux navigateurs sans
	   color-mix(), la seconde teinte l'ombre avec la couleur choisie. */
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 );
	box-shadow: 0 4px 16px color-mix( in srgb, var( --lecremy-ai-gradient-start, #4f46e5 ) 35%, transparent );
	transition: transform 0.15s ease, filter 0.15s ease;
}

/* Survol, focus et clic.

   Deux précautions indispensables ici, le bouton vivant dans la page hôte, au
   contact direct du CSS du thème :

   1. Le dégradé est REDÉCLARÉ dans chaque état. Un thème définissant simplement
      `button:hover { background: … }` pèse (0,1,1), soit plus que notre règle de
      base `.lecremy-ai-bubble__toggle` (0,1,0) : sans redéclaration, la couleur
      du thème reprenait la main dès le survol.
   2. Les sélecteurs sont préfixés par `.lecremy-ai-bubble`, ce qui porte les
      états à (0,2,1) et met le bouton hors d'atteinte des règles génériques de
      thème, sans recourir à `!important`.

   L'assombrissement passe par `filter`, qui agit sur le rendu final : l'effet
   suit donc n'importe quelle couleur choisie sans calcul supplémentaire, et ne
   dépend d'aucune fonctionnalité CSS récente. */

.lecremy-ai-bubble .lecremy-ai-bubble__toggle:hover,
.lecremy-ai-bubble .lecremy-ai-bubble__toggle:focus-visible {
	background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
	color: #fff;
	transform: scale( 1.05 );
	filter: brightness( 0.9 );
}

.lecremy-ai-bubble .lecremy-ai-bubble__toggle:active {
	background: linear-gradient( 135deg, var( --lecremy-ai-gradient-start, #4f46e5 ), var( --lecremy-ai-gradient-end, #7c3aed ) );
	color: #fff;
	transform: scale( 0.98 );
	filter: brightness( 0.82 );
}

.lecremy-ai-bubble .lecremy-ai-bubble__toggle:focus-visible {
	outline: none;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 ), 0 0 0 3px rgba( 255, 255, 255, 0.9 );
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 ), 0 0 0 3px color-mix( in srgb, var( --lecremy-ai-gradient-start, #4f46e5 ) 45%, #fff );
}

.lecremy-ai-bubble__toggle svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.lecremy-ai-bubble__panel {
	position: absolute;
	bottom: 68px;
	box-sizing: border-box;
	width: 360px;
	height: 500px;
	max-height: 70vh;
	overflow: hidden;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.2 );
	opacity: 0;
	transform: scale( 0.92 ) translateY( 12px );
	transform-origin: bottom;
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

.lecremy-ai-bubble--bottom-right .lecremy-ai-bubble__panel {
	right: 0;
	transform-origin: bottom right;
}

.lecremy-ai-bubble--bottom-left .lecremy-ai-bubble__panel {
	left: 0;
	transform-origin: bottom left;
}

.lecremy-ai-bubble--open .lecremy-ai-bubble__panel {
	pointer-events: auto;
	opacity: 1;
	transform: scale( 1 ) translateY( 0 );
}

/* Le panneau ne contient plus le chat lui-même mais l'iframe qui le sert : le
   contenu vit dans son propre document, à l'abri du CSS et du JS du thème hôte. */

.lecremy-ai-bubble__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media ( max-width: 480px ) {

	/* Plein écran, comme le font les widgets de chat du marché sur mobile : une
	   fenêtre flottante de taille fixe y est trop à l'étroit. Le bouton lanceur
	   se retrouve recouvert — la fermeture passe donc par le chevron de
	   l'en-tête, ajouté en v1.10.0. */

	.lecremy-ai-bubble__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		height: 100vh;

		/* Unité dynamique : sur mobile, 100vh compte la barre d'adresse, si bien
		   que le bas du panneau passe dessous et devient inatteignable. */
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		transform-origin: center;
	}

	.lecremy-ai-bubble--bottom-right .lecremy-ai-bubble__panel,
	.lecremy-ai-bubble--bottom-left .lecremy-ai-bubble__panel {
		right: 0;
		left: 0;
		transform-origin: center;
	}
}

/* Cibles tactiles : sur pointeur grossier (doigt), les boutons compacts pensés
   pour la souris passent au format recommandé de 44px. La requête porte sur le
   type de pointeur et non sur la largeur — une tablette large se manipule au
   doigt tout autant qu'un téléphone. */

@media ( pointer: coarse ) {

	.lecremy-ai-chat__icon-btn,
	.lecremy-ai-chat__submit {
		width: 44px;
		height: 44px;
	}

	.lecremy-ai-chat__close {
		width: 40px;
		height: 40px;
	}

	.lecremy-ai-chat__attachment-remove {
		width: 32px;
		height: 32px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lecremy-ai-chat__message,
	.lecremy-ai-bubble__toggle,
	.lecremy-ai-bubble__panel,
	.lecremy-ai-chat__submit,
	.lecremy-ai-chat__typing-dots i {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* Thème du sélecteur d'emojis (bibliothèque tierce assets/js/vendor/emoji-button.min.js),
   aligné sur la palette du plugin via les variables CSS que la bibliothèque expose elle-même.
   Spécificité renforcée (body .emoji-picker) pour l'emporter sur le <style> que la bibliothèque
   injecte elle-même au chargement, quel que soit l'ordre d'insertion dans le document. */

body .emoji-picker {
	--blue-color: #4f46e5;
	--focus-indicator-color: #4f46e5;
	--border-color: #e2e4e9;
	--hover-color: #eef0ff;
	--popup-background-color: #fff;
	font-family: inherit;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.18 );
}

/* Le picker calcule sa largeur à partir du nombre d'emojis par ligne :
   8 × 1.8em × 1.5 + 1em ≈ 364px. Un panneau de bulle sur écran de 375px fait
   environ 351px de large, et le panneau déborderait — or un popup ne peut pas
   sortir de son iframe. On resserre donc la grille sur écran étroit. */

@media ( max-width: 420px ) {

	body .emoji-picker {
		--emoji-per-row: 6;
	}
}

body .emoji-picker__search {
	border-radius: 8px;
}

body .emoji-picker__variant-popup {
	border-radius: 10px;
}

/* Document isolé de la bulle flottante : le panneau occupe tout l'iframe, dont le
   cadre arrondi et l'ombre sont portés par le conteneur de la page hôte. */

body.lecremy-ai-frame {
	height: 100%;
	margin: 0;
	background: transparent;
}

html.lecremy-ai-frame {
	height: 100%;
}

body.lecremy-ai-frame .lecremy-ai-chat {
	height: 100%;
	max-width: none;
	border: none;
	border-radius: 0;
}

body.lecremy-ai-frame .lecremy-ai-chat__messages {
	max-height: none;
}

/* Gabarit « inline » du document isolé (shortcode) : la hauteur suit le contenu,
   que le document communique à la page hôte pour qu'elle redimensionne l'iframe.
   La zone de messages ne défile donc pas : c'est la page qui défile. */

html.lecremy-ai-frame--inline,
body.lecremy-ai-frame--inline {
	height: auto;
}

/* `min-height: 100vh` = la hauteur courante de l'iframe : le panneau remplit
   toujours son cadre quand la conversation est courte (pas d'espace vide sous la
   bordure), et le dépasse dès qu'elle s'allonge — auquel cas la hauteur remontée
   à la page hôte augmente, et le cadre suit. Le calcul converge en une passe. */

body.lecremy-ai-frame--inline .lecremy-ai-chat {
	height: auto;
	min-height: 100vh;
	border: 1px solid #e2e4e9;
	border-radius: 14px;
}

body.lecremy-ai-frame--inline .lecremy-ai-chat__messages {
	max-height: none;
	overflow-y: visible;
}

/* Conteneur du shortcode dans la page hôte : l'iframe occupe la largeur
   disponible, sa hauteur étant pilotée par chat-widget.js. La valeur ci-dessous
   n'est qu'un point de départ avant le premier message de hauteur. */

.lecremy-ai-chat-embed {
	width: 100%;
	max-width: 480px;
}

.lecremy-ai-chat-embed__frame {
	display: block;
	width: 100%;
	height: 500px;
	border: 0;
}