/* =============================================================================
 * cn-assistant — Widget flottant Coalition Nationale
 *
 * v0.1.1 — Drag libre sur tout l'écran, pas de snap aux coins. Marge minimale
 * anti-collage 16px sur tous les bords. Grip SVG 3 dots empilés (reproduit
 * le ⠇ de KeepInMind FAB). Ancrage dynamique du panneau selon position du FAB.
 *
 * Inspiration UX : keepinmind-dashboard-notes (Elchanan Levavi, GPL-3).
 * Re-implémentation maison, ne partage aucun code avec l'original.
 *
 * Palette : Coalition Nationale (cn-theme v0.10.4)
 *   - Bleu nuit  #0F2845  --cn-blue-night
 *   - Ivoire     #FAF7F0  --cn-ivory
 *   - Or sourd   #C4A052  --cn-gold
 *   - Papier     #F5EFE0  --cn-paper (ivoire-95)
 * ============================================================================= */

.cn-assistant-root {
	--cn-blue-night: #0F2845;
	--cn-blue-night-hover: #1a3a5e;
	--cn-blue-night-hover-rgb: 26, 58, 94; /* v0.8.7 — pour rgba() au hover du FAB (préserve l'opacité réglée) */
	--cn-ivory: #FAF7F0;
	--cn-paper: #F5EFE0;
	--cn-gold: #C4A052;
	--cn-gold-soft: #d9bd7e;
	--cn-text: #1a1a1a;
	--cn-text-muted: #5a5a5a;
	--cn-border: rgba(15, 40, 69, 0.12);
	--cn-border-strong: rgba(15, 40, 69, 0.22);
	--cn-danger: #c62828;

	/* v0.2.0 — variables design (surchargeables via wp_add_inline_style) */
	--cn-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--cn-font-heading: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	--cn-panel-radius: 14px;

	/* v0.2.0 — Triplets RGB pour rgba() avec opacité variable.
	 * Doivent rester synchronisés avec les hex ci-dessus. Le serveur les
	 * recalcule depuis les couleurs admin via hex_to_rgb_triplet() et les
	 * réinjecte via wp_add_inline_style(). */
	--cn-blue-night-rgb: 15, 40, 69;
	--cn-ivory-rgb: 250, 247, 240;
	--cn-fab-secondary-bg-rgb: 255, 255, 255;

	/* v0.2.0 — Opacités configurables (0.0 à 1.0).
	 * - FAB principal : pleinement opaque par défaut.
	 * - FAB secondaire : 0.85 par défaut pour conserver l'effet glassmorphism
	 *   (fond blanc semi-transparent + backdrop-filter blur).
	 * - Panneau : pleinement opaque par défaut. */
	--cn-opacity-fab-primary: 1;
	--cn-opacity-fab-secondary: 0.85;
	--cn-opacity-panel: 1;

	--cn-shadow-fab:
		0 1px 3px rgba(15, 40, 69, 0.12),
		0 4px 14px rgba(15, 40, 69, 0.10),
		0 0 0 1px rgba(196, 160, 82, 0.22),
		0 0 24px rgba(196, 160, 82, 0.18);
	--cn-shadow-fab-hover:
		0 2px 6px rgba(15, 40, 69, 0.16),
		0 10px 26px rgba(15, 40, 69, 0.14),
		0 0 0 1.5px rgba(196, 160, 82, 0.45),
		0 0 32px rgba(196, 160, 82, 0.32);
	--cn-shadow-panel:
		0 2px 8px rgba(15, 40, 69, 0.10),
		0 16px 48px rgba(15, 40, 69, 0.16),
		0 0 0 1px rgba(196, 160, 82, 0.22),
		0 0 28px rgba(196, 160, 82, 0.18);

	--cn-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--cn-ease: cubic-bezier(0.22, 1, 0.36, 1);

	font-family: var(--cn-font-body);
	font-size: 14px;
	color: var(--cn-text);
}

/* ============================================================================
 * FAB (état replié) — pilule draggable libre
 * Position en left/top uniquement, jamais bottom/right.
 * Pas de classes is-corner-*, tracking direct du pointeur.
 * ============================================================================ */

.cn-assistant-fab {
	position: fixed;
	z-index: 99998;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	transition: transform 0.18s var(--cn-ease), filter 0.18s var(--cn-ease);
	/* Pendant le drag, le navigateur peut interpréter certains gestes
	   tactiles comme du scroll ; on annule pour fluidité. */
	touch-action: none;
}

/* Pendant le drag : annulation de TOUTE transition pour suivre le pointeur
   à 1:1 sans aucun lag. Pas de rotation — le bouton reste droit.
   Scale ultra-léger (1.01) pour éviter tout débordement aux bords. */
.cn-assistant-fab.is-dragging {
	transform: scale(1.01);
	/* v0.8.10 — blur réduit (était 40px). Un drop-shadow large est recomposé
	   à chaque frame pendant le déplacement → latence propre au FAB. */
	filter: drop-shadow(0 8px 14px rgba(15, 40, 69, 0.30));
	transition: none !important;
}

/* Pendant un resize du panneau, le FAB suit le coin du panneau auquel il est
   ancré. On désactive toute transition pour que le suivi soit instantané. */
.cn-assistant-fab.is-following-resize {
	transition: none !important;
}

/* Animation douce uniquement pour le retour automatique (resize, dblclick) */
.cn-assistant-fab.is-snapping {
	/* v0.7.24 — top/left passent de --cn-spring (cubic-bezier(.34,1.56,.64,1),
	   qui DÉPASSE la cible) à --cn-ease (décélération SANS overshoot). Avec le
	   ressort, un grand trajet (ex. header → bas-droite) faisait dépasser `top`
	   sous le bord de la fenêtre : le FAB sortait visiblement de l'écran puis
	   remontait. Le ressort reste OK sur transform/filter (pas d'impact hors
	   écran). */
	transition: top 0.42s var(--cn-ease), left 0.42s var(--cn-ease),
	            transform 0.32s var(--cn-ease), filter 0.32s var(--cn-ease);
}

/* --- Grip (poignée triple dot SVG) ---
 * Calquée sur KeepInMind : pas de fond, pas de border-radius, pas d'ombre
 * de container. Juste les 3 dots flottants à côté du bouton.
 * Couleur or sourd avec drop-shadow pour visibilité sur fonds clairs ET sombres. */

.cn-assistant-fab-grip {
	cursor: grab;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cn-gold);
	user-select: none;
	padding: 8px 4px;
	opacity: 0.6;
	transition: opacity 0.18s var(--cn-ease), color 0.18s, transform 0.18s, filter 0.18s;
	-webkit-tap-highlight-color: transparent;
	background: transparent;
	border-radius: 0;
	filter: drop-shadow(0 0 3px rgba(196, 160, 82, 0.45));
}

.cn-assistant-fab-grip svg {
	width: 4px;
	height: 14px;
	display: block;
}

.cn-assistant-fab:hover .cn-assistant-fab-grip,
.cn-assistant-fab.is-dragging .cn-assistant-fab-grip,
.cn-assistant-fab-grip:hover,
.cn-assistant-fab-grip:focus-visible {
	opacity: 1;
	filter: drop-shadow(0 0 5px rgba(196, 160, 82, 0.7));
}

.cn-assistant-fab-grip:hover {
	transform: scale(1.15);
}

.cn-assistant-fab.is-dragging .cn-assistant-fab-grip {
	cursor: grabbing;
	filter: none; /* v0.8.10 — pas de halo recomposé pendant le déplacement */
}

.cn-assistant-fab-grip:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px var(--cn-gold);
	border-radius: 4px;
}

/* --- Bouton principal --- */

.cn-assistant-fab-btn {
	height: 44px;
	border: none;
	/* v0.8.22 — rayon porté par une variable contextuelle : la pilule (22px)
	   sur desktop bascule en cercle (50%) en mode compact. Le garde-fou de
	   survol (voir bloc « rectangle au survol ») ré-applique var(--cn-fab-btn-r)
	   et suit donc automatiquement la forme du moment. */
	--cn-fab-btn-r: 22px;
	border-radius: var(--cn-fab-btn-r);
	background: rgba(var(--cn-blue-night-rgb), var(--cn-opacity-fab-primary));
	color: var(--cn-ivory);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 20px 0 16px;
	box-shadow: var(--cn-shadow-fab);
	transition:
		background 0.2s var(--cn-ease),
		box-shadow 0.2s var(--cn-ease);
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

/* Le bouton ne fait pas de translateY au hover quand il est draggable :
   éviterait le décalage visuel lors d'un click+drag. Le hover se contente
   d'un changement de couleur et d'ombre, plus discret mais sans piège. */
.cn-assistant-fab-btn:hover {
	/* v0.8.7 — Préserve l'opacité réglée au hover (le pointeur est sur le FAB
	   juste après un drop) : on éclaircit la teinte via rgba SANS forcer
	   l'opacité à 1, ce qui rendait le FAB « 100% opaque » au repos survolé. */
	background: rgba(var(--cn-blue-night-hover-rgb), var(--cn-opacity-fab-primary));
	box-shadow: var(--cn-shadow-fab-hover);
}

.cn-assistant-fab-btn:active {
	transform: scale(0.98);
}

.cn-assistant-fab-btn:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px var(--cn-gold);
}

/* Pas de transform sur le bouton pendant le drag — c'est le FAB parent
   qui porte le scale/rotate. */
.cn-assistant-fab.is-dragging .cn-assistant-fab-btn {
	transform: none;
}

.cn-assistant-fab-icon {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cn-gold);
	flex-shrink: 0;
}

.cn-assistant-fab-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* --- Bouton secondaire (Connexion / Déconnexion) ---
 * Style glassmorphism inspiré KeepInMind : fond translucide avec backdrop-blur,
 * lisible sur tous types de fonds (clair, sombre, image).
 * Plus petit que le bouton principal, à droite. */

.cn-assistant-fab-secondary {
	height: 38px;
	padding: 0 14px;
	/* v0.8.22 — rayon contextuel (19px pilule / 50% cercle en compact+mobile),
	   ré-appliqué au survol par le garde-fou anti-rectangle. */
	--cn-fab-sec-r: 19px;
	border-radius: var(--cn-fab-sec-r);
	border: 1px solid rgba(196, 160, 82, 0.35);
	background: rgba(var(--cn-fab-secondary-bg-rgb), var(--cn-opacity-fab-secondary));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--cn-blue-night);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow:
		0 1px 3px rgba(15, 40, 69, 0.10),
		0 4px 12px rgba(15, 40, 69, 0.08),
		0 0 0 1px rgba(196, 160, 82, 0.18),
		0 0 18px rgba(196, 160, 82, 0.16);
	transition: background 0.18s, box-shadow 0.18s, transform 0.15s, color 0.18s, border-color 0.18s;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.cn-assistant-fab-secondary:hover {
	/* v0.8.7 — Garde l'opacité réglée (plus de +0.11 qui réduisait la
	   transparence au survol) ; le feedback hover passe par la bordure,
	   l'ombre et le translateY ci-dessous. */
	background: rgba(var(--cn-fab-secondary-bg-rgb), var(--cn-opacity-fab-secondary));
	border-color: rgba(196, 160, 82, 0.6);
	box-shadow:
		0 2px 5px rgba(15, 40, 69, 0.14),
		0 8px 20px rgba(15, 40, 69, 0.12),
		0 0 0 1.5px rgba(196, 160, 82, 0.5),
		0 0 24px rgba(196, 160, 82, 0.28);
	transform: translateY(-1px);
}

.cn-assistant-fab-secondary:active {
	transform: translateY(0) scale(0.97);
}

.cn-assistant-fab-secondary:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px var(--cn-gold);
}

.cn-assistant-fab.is-dragging .cn-assistant-fab-secondary {
	transform: none;
	/* v0.8.10 — coupe le backdrop-blur (glassmorphism) pendant le drag : il est
	   recomposé à chaque frame quand le FAB bouge, cause majeure de latence.
	   Le fond translucide (rgba) reste ; le blur revient au repos. */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* État "confirmation déconnexion" : couleur d'alerte douce */
.cn-assistant-fab-secondary.is-confirming {
	background: rgba(255, 235, 230, 0.96);
	border-color: rgba(198, 100, 70, 0.55);
	color: #8b3a1f;
	box-shadow:
		0 2px 5px rgba(139, 58, 31, 0.14),
		0 8px 20px rgba(139, 58, 31, 0.12),
		0 0 0 1.5px rgba(198, 100, 70, 0.45),
		0 0 24px rgba(198, 100, 70, 0.25);
}

.cn-assistant-fab-secondary-icon {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cn-assistant-fab-secondary-icon svg {
	width: 100%;
	height: 100%;
}

/* Pulse d'apparition au premier chargement */
@keyframes cn-fab-entry {
	0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
	60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cn-assistant-fab.is-entering .cn-assistant-fab-btn {
	animation: cn-fab-entry 0.5s var(--cn-spring);
}

/* ============================================================================
 * Panneau ouvert (gate email OU chat) — ancrage dynamique
 *
 * 4 combinaisons d'ancrage selon la position du FAB :
 *   .is-anchor-top    : panneau s'ouvre VERS LE BAS depuis le FAB
 *   .is-anchor-bottom : panneau s'ouvre VERS LE HAUT depuis le FAB
 *   .is-anchor-left   : aligné à gauche du FAB, s'ouvre vers la droite
 *   .is-anchor-right  : aligné à droite du FAB, s'ouvre vers la gauche
 *
 * transform-origin combiné de ces deux axes pour une animation d'ouverture
 * qui semble jaillir du FAB.
 * ============================================================================ */

.cn-assistant-panel {
	position: fixed;
	z-index: 99999;
	width: 380px;
	min-width: 340px;
	min-height: 380px;
	max-width: calc(100vw - 96px);
	max-height: calc(100vh - 96px);
	background: rgba(var(--cn-ivory-rgb), var(--cn-opacity-panel));
	border-radius: var(--cn-panel-radius);
	box-shadow: var(--cn-shadow-panel);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: top left;
	animation: cn-panel-in 0.3s var(--cn-spring);
	/* Fix flash/liseret gris au pointerdown sur les bords/handles : */
	outline: none;
	border: none;
	-webkit-tap-highlight-color: transparent;
	/* Pas de transition par défaut sur dimensions/position pour éviter
	   l'animation interpolée pendant le resize/drag du panneau. */
	transition: none;
}

/* v0.8.0 — Mode panneau détachable : le FAB passe AU-DESSUS du panneau
   (z-index 100000 > 99999) pour n'être jamais couvert quand ils se
   chevauchent, leurs positions étant indépendantes. */
.cn-assistant-detachable .cn-assistant-fab {
	z-index: 100000;
}

.cn-assistant-panel:focus,
.cn-assistant-panel:focus-visible {
	outline: none;
}

.cn-assistant-panel.is-anchor-top.is-anchor-left     { transform-origin: top left; }
.cn-assistant-panel.is-anchor-top.is-anchor-right    { transform-origin: top right; }
.cn-assistant-panel.is-anchor-bottom.is-anchor-left  { transform-origin: bottom left; }
.cn-assistant-panel.is-anchor-bottom.is-anchor-right { transform-origin: bottom right; }

@keyframes cn-panel-in {
	0%   { opacity: 0; transform: scale(0.85) translateY(8px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

.cn-assistant-panel.is-leaving {
	animation: cn-panel-out 0.18s var(--cn-ease) forwards;
}

@keyframes cn-panel-out {
	to { opacity: 0; transform: scale(0.92); }
}

/* Resize handles — 8 directions (4 coins + 4 bords) comme une fenêtre OS native.
   Les bords sont fonctionnels mais invisibles (curseur = seul indicateur).
   Le coin bas-droite garde son marker visible (deux traits diagonaux) pour
   suggérer la fonction. Tous les autres handles sont silencieux mais actifs.
   
   FIX BUG VISUEL v0.1.6 :
   - outline: none + tap-highlight transparent partout pour éviter le flash gris
   - background transparent (jamais de couleur de fond, sinon liseret au pointerdown)
   - touch-action: none pour éviter le double-tap zoom mobile */

.cn-assistant-panel-resize-handle {
	position: absolute;
	z-index: 2;
	background: transparent;
	border: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	touch-action: none;
}

.cn-assistant-panel-resize-handle:focus,
.cn-assistant-panel-resize-handle:focus-visible,
.cn-assistant-panel-resize-handle:active {
	outline: none;
	background: transparent;
}

/* Bords — bandes fines, curseur de redimensionnement directionnel */

.cn-assistant-panel-resize-handle.is-n {
	top: -5px; left: 12px; right: 12px; height: 10px;
	cursor: ns-resize;
}
.cn-assistant-panel-resize-handle.is-s {
	bottom: -5px; left: 12px; right: 12px; height: 10px;
	cursor: ns-resize;
}
.cn-assistant-panel-resize-handle.is-e {
	top: 12px; bottom: 12px; right: -5px; width: 10px;
	cursor: ew-resize;
}
.cn-assistant-panel-resize-handle.is-w {
	top: 12px; bottom: 12px; left: -5px; width: 10px;
	cursor: ew-resize;
}

/* Coins — carrés, curseur diagonal */

.cn-assistant-panel-resize-handle.is-nw {
	top: -5px; left: -5px; width: 16px; height: 16px;
	cursor: nwse-resize;
}
.cn-assistant-panel-resize-handle.is-ne {
	top: -5px; right: -5px; width: 16px; height: 16px;
	cursor: nesw-resize;
}
.cn-assistant-panel-resize-handle.is-sw {
	bottom: -5px; left: -5px; width: 16px; height: 16px;
	cursor: nesw-resize;
}
.cn-assistant-panel-resize-handle.is-se {
	bottom: -5px; right: -5px; width: 18px; height: 18px;
	cursor: nwse-resize;
}

/* Marker visuel UNIQUEMENT sur le coin bas-droite (suggère la fonction) */

.cn-assistant-panel-resize-handle.is-se {
	opacity: 0.55;
	transition: opacity 0.15s;
}

.cn-assistant-panel-resize-handle.is-se:hover,
.cn-assistant-panel.is-resizing .cn-assistant-panel-resize-handle.is-se {
	opacity: 1;
}

.cn-assistant-panel-resize-handle.is-se::before,
.cn-assistant-panel-resize-handle.is-se::after {
	content: '';
	position: absolute;
	background: var(--cn-blue-night);
	border-radius: 1px;
	transform: rotate(-45deg);
	transform-origin: center;
	pointer-events: none;
}

/* v0.7.13 — Tous les 8 handles restent fonctionnels quel que soit
 * l'ancrage. Le bug "FAB qui dégage à gauche" pendant un resize east
 * est désormais corrigé côté JS en désactivant le SUIVI du FAB pendant
 * le resize (le FAB reste fixe au viewport, seul le panneau bouge).
 *
 * v0.7.11 avait tenté un fix CSS en masquant les handles côté ancré,
 * mais ça privait l'utilisateur des handles east / se / etc. pour
 * redimensionner. Approche abandonnée — le fix est désormais
 * uniquement dans buildResizeHandle() côté JS.
 */

.cn-assistant-panel-resize-handle.is-se::before {
	width: 9px;
	height: 1.5px;
	right: 2px;
	bottom: 5px;
}

.cn-assistant-panel-resize-handle.is-se::after {
	width: 5px;
	height: 1.5px;
	right: 2px;
	bottom: 9px;
}

/* État pendant resize : aucune transition pour suivre le pointeur 1:1 */

.cn-assistant-panel.is-resizing {
	transition: none !important;
	user-select: none;
	-webkit-user-select: none;
}

.cn-assistant-panel.is-resizing * {
	user-select: none;
	-webkit-user-select: none;
}

/* Header */

.cn-assistant-panel-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 12px 12px 18px;
	background: var(--cn-blue-night);
	color: var(--cn-ivory);
	cursor: grab;
	user-select: none;
	flex-shrink: 0;
	border-bottom: 1px solid rgba(196, 160, 82, 0.25);
	touch-action: none;
	/* v0.5.1 — Permet d'ancrer le right-cluster en absolute */
	position: relative;
	/* v0.7.31 — Hauteur minimale pour contenir le badge d'identité (2 rangées
	   d'icônes) sans qu'il déborde de la bande, le cluster étant hors flux. */
	min-height: 76px;
	box-sizing: border-box;
}

/* v0.5.1 — Cluster top-right : badge identité + bouton X collés au coin
   supérieur droit du header, indépendamment de la hauteur du titre. */
.cn-assistant-panel-header-right {
	position: absolute;
	/* v0.7.31 — Centré verticalement dans la bande (au lieu d'ancré en haut) :
	   le bloc identité reste propre quel que soit le nombre de lignes/la taille
	   des icônes. align-items:center co-aligne le X avec le badge. */
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 6px; /* v0.8.8 — resserré (était 8px) : X plus proche des icônes edit/password */
	z-index: 1;
}

.cn-assistant-panel-header.is-dragging { cursor: grabbing; }

.cn-assistant-panel-title-wrap {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	/* v0.5.1 — Réservation de la place pour le cluster top-right (badge +
	   X). 240px couvre largement le badge "Olivier identifié" + crayon +
	   X (~200px en pratique avec un email moyen) avec marge pour respirer. */
	padding-right: 240px;
}

/* v0.7.29 — Panneau de connexion / déconnecté : pas de badge d'identité, le
   cluster top-right ne contient que le X. On rend au titre la quasi-totalité
   de la largeur du header pour qu'il tienne proprement sur 2 lignes
   (« Guide et assistant IA en français » / « VISION FRANCE 2050 »). */
.cn-assistant-panel-header--no-identity .cn-assistant-panel-title-wrap {
	padding-right: 52px;
}
/* v0.7.31 — Pas de badge en mode connexion : le header s'adapte au titre
   (pas besoin de la hauteur réservée au badge d'identité). */
.cn-assistant-panel-header--no-identity {
	min-height: 0;
}

.cn-assistant-panel-title {
	font-family: var(--cn-font-heading);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--cn-ivory);
}

.cn-assistant-panel-subtitle {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cn-gold-soft);
	margin-top: 2px;
}

.cn-assistant-panel-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.cn-assistant-panel-action {
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: rgba(250, 247, 240, 0.7);
	cursor: pointer;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
	-webkit-tap-highlight-color: transparent;
}

.cn-assistant-panel-action:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--cn-ivory);
}

.cn-assistant-panel-action:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px var(--cn-gold);
}

.cn-assistant-panel-action svg {
	width: 16px;
	height: 16px;
}

/* Body */

.cn-assistant-panel-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	background: var(--cn-paper);
}

.cn-assistant-panel-body::-webkit-scrollbar { width: 6px; }
.cn-assistant-panel-body::-webkit-scrollbar-thumb { background: var(--cn-border-strong); border-radius: 3px; }
.cn-assistant-panel-body::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
 * Gate email (utilisateur non authentifié)
 * ============================================================================ */

.cn-assistant-gate {
	padding: 24px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cn-assistant-gate-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--cn-gold) 0%, var(--cn-gold-soft) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4px auto 4px;
	color: var(--cn-blue-night);
	box-shadow:
		0 1px 3px rgba(15, 40, 69, 0.10),
		0 6px 18px rgba(196, 160, 82, 0.30);
}

.cn-assistant-gate-icon svg { width: 28px; height: 28px; }

.cn-assistant-gate-title {
	font-family: var(--cn-font-heading);
	font-size: 18px;
	font-weight: 500;
	color: var(--cn-blue-night);
	text-align: center;
	margin: 0;
	line-height: 1.3;
}

.cn-assistant-gate-intro {
	font-size: 13px;
	line-height: 1.55;
	color: var(--cn-text-muted);
	text-align: center;
	margin: 0;
}

.cn-assistant-gate-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}

/* v0.7.11 — Disposition prénom + nom de famille côte à côte sur la même
 * ligne. Bascule en colonne sur viewport étroit (< 480px) pour préserver
 * la lisibilité sur mobile.
 *
 * .cn-assistant-gate-name-row : conteneur flex 2 colonnes (gap 10px)
 * .cn-assistant-gate-field    : un (label + input) empilé verticalement,
 *                               flex:1 pour partage équitable des deux
 *                               champs.
 */
.cn-assistant-gate-name-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.cn-assistant-gate-field {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

@media (max-width: 480px) {
	.cn-assistant-gate-name-row {
		flex-direction: column;
	}
}

/* v0.8.11 — Champ email du gate (étape « email ») réduit à 70 % de la largeur
   du panneau et centré (demande Olivier). Le label et l'input sont solidaires
   dans .cn-assistant-gate-field : on contraint le conteneur entier pour que le
   label reste aligné avec son champ. Repasse pleine largeur sous 480px afin de
   préserver le confort de saisie tactile (le panneau y est déjà étroit). */
/* v0.8.13 — La largeur 70 % était neutralisée par la règle de la section
   profil « .cn-assistant-gate-field { width: 100% } » (même spécificité, mais
   déclarée plus bas dans le fichier → elle l'emportait). On double la classe
   pour gagner en spécificité (0,2,0 > 0,1,0) sans !important. */
.cn-assistant-gate-field.cn-assistant-gate-field--email,
.cn-assistant-gate-field.cn-assistant-gate-field--narrow {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 480px) {
	.cn-assistant-gate-field.cn-assistant-gate-field--email,
	.cn-assistant-gate-field.cn-assistant-gate-field--narrow {
		width: 100%;
	}
}

.cn-assistant-gate-label {
	font-size: 12px;
	font-weight: 500;
	color: var(--cn-blue-night);
	letter-spacing: 0.02em;
}

.cn-assistant-gate-input {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--cn-border-strong);
	border-radius: 10px;
	background: var(--cn-ivory);
	font-family: inherit;
	font-size: 14px;
	color: var(--cn-text);
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	/* v0.7.16 — Désactivation explicite de l'apparence native du navigateur
	   pour qu'il ne dessine pas son propre rendu (focus ring rectangulaire
	   par défaut sur certains navigateurs/OS, fond système, etc.). */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.cn-assistant-gate-input:focus,
.cn-assistant-gate-input:focus-visible,
.cn-assistant-gate-input:active {
	/* v0.7.16 — Maintien explicite du border-radius en focus/active.
	   Bug reporté Olivier (S22) : le focus rendait l'input rectangulaire.
	   Cause probable : un CSS global du thème WP ou un style natif du
	   navigateur (focus ring rectangulaire UA, autofill, etc.) surchargeait
	   l'apparence sans hériter du border-radius. La règle est re-déclarée
	   explicitement ici, avec outline: 0 (au lieu de outline: none qui
	   peut être surchargé par certaines règles UA) et appearance: none. */
	outline: 0 !important;
	border-radius: 10px !important;
	border-color: var(--cn-blue-night);
	box-shadow: 0 0 0 3px rgba(15, 40, 69, 0.12);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* v0.7.16 — État autofill (navigateur a rempli automatiquement) : sur
   Chrome/Edge, un fond jaune ou bleu CSS UA s'applique et peut casser
   le rendu arrondi. On le neutralise. */
.cn-assistant-gate-input:-webkit-autofill,
.cn-assistant-gate-input:-webkit-autofill:hover,
.cn-assistant-gate-input:-webkit-autofill:focus {
	border-radius: 10px !important;
	-webkit-box-shadow: 0 0 0 1000px var(--cn-ivory) inset !important;
	box-shadow: 0 0 0 1000px var(--cn-ivory) inset !important;
	-webkit-text-fill-color: var(--cn-text) !important;
}

.cn-assistant-gate-input.is-error {
	border-color: var(--cn-danger);
	box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.cn-assistant-gate-submit {
	/* v0.6.0 — largeur intrinsèque + centré horizontalement (au lieu de
	   width:100%). Padding horizontal généreux pour le confort de clic.
	   min-width pour les boutons à libellé court ("Commencer", "Envoi…"). */
	display: block;
	margin: 4px auto 0;
	min-width: 200px;
	max-width: 100%;
	height: 44px;
	padding: 0 32px;
	border: none;
	border-radius: 22px;
	background: var(--cn-blue-night);
	color: var(--cn-ivory);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
	box-shadow: var(--cn-shadow-fab);
	letter-spacing: 0.01em;
	box-sizing: border-box;
}

.cn-assistant-gate-submit:hover:not(:disabled) {
	background: var(--cn-blue-night-hover);
	box-shadow: var(--cn-shadow-fab-hover);
	transform: translateY(-1px);
}

.cn-assistant-gate-submit:active:not(:disabled) {
	transform: translateY(0) scale(0.98);
}

.cn-assistant-gate-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.cn-assistant-gate-submit:focus-visible {
	/* v0.8.18 — anneau de focus via box-shadow (suit toujours le border-radius)
	   plutôt qu'outline + offset, qui se rendait en rectangle dans certains
	   navigateurs et cassait les bords arrondis du bouton. Même apparence
	   (anneau doré détaché), sans changement de design. */
	outline: none;
	box-shadow:
		0 0 0 2px var(--cn-ivory),
		0 0 0 4px var(--cn-gold),
		var(--cn-shadow-fab);
}

/* v0.8.20 — Firefox dessine un liseré rectangulaire en pointillés À
   L'INTÉRIEUR des <button> au focus clavier (pseudo ::-moz-focus-inner).
   Il contredisait l'anneau de focus arrondi (box-shadow, v0.8.18) : sous
   Firefox, tabuler sur « Se connecter » faisait apparaître un rectangle.
   On neutralise ce liseré sur tous les boutons de l'assistant → seul
   l'anneau doré arrondi reste visible. */
.cn-assistant-fab-btn::-moz-focus-inner,
.cn-assistant-fab-secondary::-moz-focus-inner,
.cn-assistant-gate-submit::-moz-focus-inner,
.cn-assistant-panel-action::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* v0.8.22 — GARDE-FOU « rectangle au survol ».
   Symptôme : « Se connecter » (et d'autres boutons) redevenaient
   rectangulaires au SURVOL — distinct du rectangle au focus déjà traité en
   v0.8.18/0.8.20. Cause : le thème hôte déclare une règle globale d'état
   (button:hover/:active/:focus) qui écrase le border-radius de repos du
   bouton — une règle d'ÉTAT du thème l'emporte sur la déclaration de REPOS
   du plugin, qui ne re-déclarait pas le rayon dans ces états.
   Correctif : on ré-affirme le rayon de chaque bouton dans tous les états
   interactifs, en !important pour rester robuste quelle que soit la
   spécificité du thème. Les boutons à forme variable (FAB principal et
   secondaire, pilule → cercle en compact/mobile) suivent via la variable
   contextuelle --cn-fab-*-r, donc le survol garde toujours la bonne forme. */
.cn-assistant-gate-submit,
.cn-assistant-gate-submit:hover,
.cn-assistant-gate-submit:active,
.cn-assistant-gate-submit:focus,
.cn-assistant-gate-submit:focus-visible {
	border-radius: 22px !important;
}

.cn-assistant-composer-send,
.cn-assistant-composer-send:hover,
.cn-assistant-composer-send:active,
.cn-assistant-composer-send:focus,
.cn-assistant-composer-send:focus-visible {
	border-radius: 12px !important;
}

.cn-assistant-panel-action,
.cn-assistant-panel-action:hover,
.cn-assistant-panel-action:active,
.cn-assistant-panel-action:focus,
.cn-assistant-panel-action:focus-visible {
	border-radius: 8px !important;
}

.cn-assistant-fab-btn,
.cn-assistant-fab-btn:hover,
.cn-assistant-fab-btn:active,
.cn-assistant-fab-btn:focus,
.cn-assistant-fab-btn:focus-visible {
	border-radius: var(--cn-fab-btn-r) !important;
}

.cn-assistant-fab-secondary,
.cn-assistant-fab-secondary:hover,
.cn-assistant-fab-secondary:active,
.cn-assistant-fab-secondary:focus,
.cn-assistant-fab-secondary:focus-visible {
	border-radius: var(--cn-fab-sec-r) !important;
}

/* v0.8.23 — RECTANGLE AU FOCUS CLAVIER (Tab), correctif définitif.
   Le rectangle vu en tabulant n'est PAS la forme du bouton (préservée depuis
   v0.8.22) mais son ANNEAU DE FOCUS : plusieurs boutons le dessinaient encore
   via `outline`, et `outline` ne suit pas le border-radius dans certains
   navigateurs (Safari < 16.4) — ou la règle de focus du thème hôte
   (button:focus-visible { outline … }), rectangulaire, l'emportait.
   Correctif : on supprime tout `outline` au focus sur les boutons de
   l'assistant (!important → bat le thème) et on rend l'anneau via `box-shadow`,
   qui suit TOUJOURS le border-radius, dans tous les navigateurs. Même
   apparence (anneau doré détaché), désormais arrondi partout. */
.cn-assistant-fab-btn:focus,
.cn-assistant-fab-btn:focus-visible,
.cn-assistant-fab-secondary:focus,
.cn-assistant-fab-secondary:focus-visible,
.cn-assistant-gate-submit:focus,
.cn-assistant-gate-submit:focus-visible,
.cn-assistant-composer-send:focus,
.cn-assistant-composer-send:focus-visible,
.cn-assistant-panel-action:focus,
.cn-assistant-panel-action:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
}

/* Anneau doré arrondi (box-shadow) — uniquement au focus clavier */
.cn-assistant-fab-btn:focus-visible,
.cn-assistant-gate-submit:focus-visible {
	box-shadow:
		0 0 0 2px var(--cn-ivory),
		0 0 0 4px var(--cn-gold),
		var(--cn-shadow-fab) !important;
}

.cn-assistant-fab-secondary:focus-visible,
.cn-assistant-composer-send:focus-visible {
	box-shadow:
		0 0 0 2px var(--cn-ivory),
		0 0 0 4px var(--cn-gold) !important;
}

/* panel-action vit sur le header bleu nuit : anneau doré simple, sans liseré
   ivoire (qui jurerait sur fond sombre). */
.cn-assistant-panel-action:focus-visible {
	box-shadow: 0 0 0 2px var(--cn-gold) !important;
}

/* v0.8.24 — même traitement pour les autres contrôles ARRONDIS de l'assistant
   (poignée, sélecteur de genre, badge identité, icônes rondes, avatar, crayon
   d'édition email). Le rectangle doré sur « Madame » venait du focus SIMPLE
   (:focus, déclenché au CLIC souris) — pas seulement de :focus-visible : le
   thème hôte dessine un outline rectangulaire sur button:focus. On neutralise
   donc l'outline sur :focus ET :focus-visible. L'anneau doré arrondi (box-
   shadow, qui suit le border-radius) n'est rendu qu'au focus CLAVIER
   (:focus-visible) — au clic souris, l'état sélectionné (fond bleu) suffit.
   Les LIENS textuels (« Mot de passe oublié », « Annuler ») conservent
   volontairement leur outline natif (accessibilité). */
.cn-assistant-fab-grip:focus,
.cn-assistant-fab-grip:focus-visible,
.cn-assistant-gender-option:focus,
.cn-assistant-gender-option:focus-visible,
.cn-assistant-gender-pictogram:focus,
.cn-assistant-gender-pictogram:focus-visible,
.cn-assistant-identity-badge[role="button"]:focus,
.cn-assistant-identity-badge[role="button"]:focus-visible,
.cn-assistant-identity-lock-icon:focus,
.cn-assistant-identity-lock-icon:focus-visible,
.cn-assistant-identity-reset-icon:focus,
.cn-assistant-identity-reset-icon:focus-visible,
.cn-assistant-avatar-circle:focus,
.cn-assistant-avatar-circle:focus-visible,
.cn-assistant-gate-email-edit:focus,
.cn-assistant-gate-email-edit:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
}

.cn-assistant-fab-grip:focus-visible,
.cn-assistant-gender-option:focus-visible,
.cn-assistant-gender-pictogram:focus-visible,
.cn-assistant-identity-badge[role="button"]:focus-visible,
.cn-assistant-identity-lock-icon:focus-visible,
.cn-assistant-identity-reset-icon:focus-visible,
.cn-assistant-avatar-circle:focus-visible,
.cn-assistant-gate-email-edit:focus-visible {
	box-shadow: 0 0 0 2px var(--cn-gold) !important;
}

.cn-assistant-gate-rgpd {
	font-size: 11px;
	line-height: 1.45;
	color: var(--cn-text-muted);
	text-align: center;
	margin-top: 4px;
}

.cn-assistant-gate-success {
	background: rgba(196, 160, 82, 0.10);
	border: 1px solid rgba(196, 160, 82, 0.35);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cn-blue-night);
}

.cn-assistant-gate-error {
	font-size: 12px;
	color: var(--cn-danger);
	margin-top: 2px;
}

/* v0.2.0 — feedback inline du gate prénom (et tout autre gate avec retour user). */
.cn-assistant-gate-feedback {
	font-size: 12px;
	margin-top: 6px;
	min-height: 16px;
	color: var(--cn-text-muted);
	/* v0.6.0 — centré horizontalement comme les autres feedback du widget */
	text-align: center;
}

.cn-assistant-gate-feedback.is-error {
	color: var(--cn-danger);
}

.cn-assistant-gate-feedback.is-success {
	color: var(--cn-blue-night);
}

/* Le gate prénom partage les classes du gate auth (icône or sourd, titre,
   intro, input, bouton, note RGPD). La classe modifier ci-dessous permet
   simplement d'identifier le contexte si besoin de surcharges futures. */
.cn-assistant-gate-firstname { }

/* ============================================================================
 * Chat (utilisateur authentifié)
 * ============================================================================ */

.cn-assistant-chat {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cn-assistant-messages {
	flex: 1;
	min-height: 0;
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	overflow-y: auto;
}

.cn-assistant-message {
	display: flex;
	flex-direction: column;
	max-width: 85%;
	animation: cn-msg-in 0.28s var(--cn-spring);
}

@keyframes cn-msg-in {
	0%   { opacity: 0; transform: translateY(6px); }
	100% { opacity: 1; transform: translateY(0); }
}

.cn-assistant-message.is-user { align-self: flex-end; }
.cn-assistant-message.is-assistant { align-self: flex-start; }

.cn-assistant-message-bubble {
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.cn-assistant-message.is-user .cn-assistant-message-bubble {
	/* v0.8.3 — Or DOUX (--cn-gold-soft, plus clair) : l'or sourd (v0.8.2) était
	   jugé trop foncé. Texte bleu nuit, contraste encore meilleur sur ce fond
	   plus clair. */
	background: var(--cn-gold-soft);
	color: var(--cn-blue-night);
	border-bottom-right-radius: 4px;
}

.cn-assistant-message.is-assistant .cn-assistant-message-bubble {
	background: var(--cn-ivory);
	color: var(--cn-text);
	border: 1px solid var(--cn-border);
	border-bottom-left-radius: 4px;
}

/*
 * v0.7.18 — Style des liens dans les bulles assistant.
 * Le parseur markdown léger (renderAssistantText) génère des <a> pour
 * les liens markdown [titre](url) et les URLs en clair. On les
 * souligne et on les colore en cn-blue-night pour cohérence avec
 * l'identité du widget (les bulles user sont sur fond cn-blue-night,
 * pas de surcharge nécessaire — les liens markdown n'apparaissent
 * que dans les réponses assistant).
 *
 * word-break: break-word permet aux URLs très longues de wrapper
 * proprement sans déborder de la bulle (qui a une max-width).
 *
 * Pas de :visited spécifique : le navigateur garde son indication
 * native (souvent atténuée), ce qui aide l'utilisateur à savoir
 * quelles fiches il a déjà consultées dans la session.
 */
.cn-assistant-message.is-assistant .cn-assistant-message-bubble a {
	color: var(--cn-blue-night);
	text-decoration: underline;
	text-underline-offset: 2px;
	word-break: break-word;
	transition: opacity 0.15s ease;
}

.cn-assistant-message.is-assistant .cn-assistant-message-bubble a:hover,
.cn-assistant-message.is-assistant .cn-assistant-message-bubble a:focus {
	opacity: 0.72;
	text-decoration: underline;
}

.cn-assistant-message.is-assistant .cn-assistant-message-bubble strong {
	font-weight: 600;
}

.cn-assistant-message.is-assistant .cn-assistant-message-bubble em {
	font-style: italic;
}

.cn-assistant-typing {
	align-self: flex-start;
	display: inline-flex;
	gap: 4px;
	padding: 12px 16px;
	background: var(--cn-ivory);
	border: 1px solid var(--cn-border);
	border-radius: 14px;
	border-bottom-left-radius: 4px;
}

.cn-assistant-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cn-blue-night);
	opacity: 0.4;
	animation: cn-typing 1.2s infinite;
}
.cn-assistant-typing span:nth-child(2) { animation-delay: 0.18s; }
.cn-assistant-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes cn-typing {
	0%, 60%, 100% { opacity: 0.4; transform: scale(1); }
	30%           { opacity: 1;   transform: scale(1.2); }
}

/* Footer (zone de saisie) */

.cn-assistant-composer {
	flex-shrink: 0;
	padding: 12px 12px 14px;
	background: var(--cn-ivory);
	border-top: 1px solid var(--cn-border);
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.cn-assistant-composer-textarea {
	flex: 1;
	min-height: 42px;
	max-height: 200px;
	padding: 10px 14px;
	/* v0.7.2 — Border explicite (style + width + color + radius) pour qu'aucune
	   règle CSS du thème WP ne puisse les "perdre" au focus. */
	border-style: solid;
	border-width: 1px;
	border-color: var(--cn-border-strong);
	border-radius: 21px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.45;
	color: var(--cn-text);
	background: var(--cn-paper);
	resize: none;
	outline: none;
	/* v0.7.2 — Désactiver le styling natif iOS/Android qui réintroduit un focus ring */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.15s, background 0.15s;
	box-sizing: border-box;
	/* Auto-resize via JS jusqu'à max-height ; pas de scrollbar visible
	   tant qu'on n'a pas dépassé. Au-delà, scrollbar discrète. */
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--cn-border-strong) transparent;
}

.cn-assistant-composer-textarea.is-overflow {
	overflow-y: auto;
}

.cn-assistant-composer-textarea::-webkit-scrollbar {
	width: 6px;
}
.cn-assistant-composer-textarea::-webkit-scrollbar-thumb {
	background: var(--cn-border-strong);
	border-radius: 3px;
}
.cn-assistant-composer-textarea::-webkit-scrollbar-track {
	background: transparent;
}

/* v0.7.2 — Fix DÉFINITIF du focus textarea rectangulaire.
   ============================================================
   Symptôme : au clic, le textarea perd son border-radius arrondi
   et affiche une bordure rectangulaire fine (typique de l'outline
   natif browser ou d'un :focus global du thème WordPress).
   
   Cause probable : un thème WP injecte une règle plus spécifique
   genre `textarea:focus { outline: 1px solid; border-radius: 0; }`
   qui battait notre v0.6.1 `.cn-assistant-composer-textarea:focus`.
   
   Stratégie : spécificité maximale (panel > composer > textarea[class]
   chainé) + force explicite de TOUTES les propriétés de bordure
   (style/width/color/radius) au focus pour qu'aucune règle externe
   ne puisse rien casser. !important partout en garantie ultime.
   ============================================================ */
.cn-assistant-panel .cn-assistant-composer textarea.cn-assistant-composer-textarea:focus,
.cn-assistant-panel .cn-assistant-composer textarea.cn-assistant-composer-textarea:focus-visible,
.cn-assistant-panel .cn-assistant-composer textarea.cn-assistant-composer-textarea:active,
.cn-assistant-composer-textarea:focus,
.cn-assistant-composer-textarea:focus-visible {
	/* Préserver la forme arrondie envers et contre tout */
	border-radius: 21px !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--cn-blue-night) !important;

	/* Annuler tout indicateur de focus rectangulaire (outline, ring système, box-shadow) */
	outline: none !important;
	outline-style: none !important;
	outline-width: 0 !important;
	outline-offset: 0 !important;
	box-shadow: none !important;

	/* Désactiver le focus ring natif des navigateurs récents */
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;

	/* Background discret pour signaler l'état actif */
	background: var(--cn-ivory) !important;
}

.cn-assistant-composer-send {
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 12px;
	background: var(--cn-gold);
	color: var(--cn-blue-night);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.18s var(--cn-ease), transform 0.15s, opacity 0.15s, box-shadow 0.18s;
	box-shadow:
		0 1px 3px rgba(196, 160, 82, 0.28),
		0 4px 14px rgba(196, 160, 82, 0.22);
}

.cn-assistant-composer-send:hover:not(:disabled) {
	background: #d4b25e;
	transform: translateY(-1px);
	box-shadow:
		0 2px 5px rgba(196, 160, 82, 0.34),
		0 8px 20px rgba(196, 160, 82, 0.30);
}

.cn-assistant-composer-send:active:not(:disabled) {
	transform: translateY(0) scale(0.96);
}

.cn-assistant-composer-send:disabled {
	background: rgba(196, 160, 82, 0.35);
	color: rgba(15, 40, 69, 0.5);
	box-shadow: 0 1px 2px rgba(15, 40, 69, 0.06);
	cursor: not-allowed;
}

.cn-assistant-composer-send:focus-visible {
	outline: 2px solid var(--cn-blue-night);
	outline-offset: 2px;
}

.cn-assistant-composer-send svg {
	width: 19px;
	height: 19px;
	display: block;
	transform: translate(-1px, 1px);
}

/* ============================================================================
 * Responsive — sur mobile, le panneau prend une largeur quasi-totale
 * ============================================================================ */

@media (max-width: 480px) {
	.cn-assistant-panel {
		width: calc(100vw - 24px);
		max-height: calc(100vh - 90px);
	}

	.cn-assistant-fab-btn {
		height: 42px;
		padding: 0 16px 0 14px;
		font-size: 13px;
	}

	/* Sur mobile, le bouton secondaire devient icon-only pour économiser l'espace */
	.cn-assistant-fab-secondary {
		height: 36px;
		padding: 0;
		width: 36px;
		justify-content: center;
		--cn-fab-sec-r: 50%;
		border-radius: 50%;
	}
	.cn-assistant-fab-secondary-label {
		display: none;
	}
}

/* Reduce motion : on respecte la préférence accessibilité */

@media (prefers-reduced-motion: reduce) {
	.cn-assistant-fab,
	.cn-assistant-panel,
	.cn-assistant-message,
	.cn-assistant-fab-btn,
	.cn-assistant-fab-grip {
		animation: none !important;
		transition: none !important;
	}
}

/* ===========================================================================
 * v0.4.0 — Mode compact (toggle simple-clic sur grip)
 *
 * Cache les labels textuels des boutons principal et secondaire pour ne
 * laisser que les icônes. Le widget devient un cluster compact et discret.
 * Bascule par .is-compact sur le fab.
 *
 * v0.4.1 — Refonte radicale après bug visuel : les labels fuitaient avec
 * max-width:0+opacity:0 (le contenu transparent restait dans le flux
 * de layout et débordait). Maintenant : display:none franc + reset gap +
 * boutons forme circulaire + justify-content:center pour centrer l'icône
 * dans la bulle. Pas d'animation (les transitions max-width sur du
 * display-none créent des artefacts).
 *
 * v0.4.4 — Fix critique : la classe du label du bouton principal est
 * .cn-assistant-fab-text (PAS .cn-assistant-fab-label). C'est pour ça
 * que le label restait affiché en mode compact malgré le display:none
 * — il ciblait une classe qui n'existait pas. Le bouton secondaire reste
 * bien sur .cn-assistant-fab-secondary-label (correct).
 * ======================================================================== */

.cn-assistant-fab.is-compact .cn-assistant-fab-text,
.cn-assistant-fab.is-compact .cn-assistant-fab-secondary-label {
	display: none;
}

/* Bouton principal en mode compact : forme circulaire 44×44, icône centrée */
.cn-assistant-fab.is-compact .cn-assistant-fab-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	gap: 0;
	justify-content: center;
	--cn-fab-btn-r: 50%;
	border-radius: 50%;
}

/* Bouton secondaire en mode compact : forme circulaire 38×38, icône centrée */
.cn-assistant-fab.is-compact .cn-assistant-fab-secondary {
	width: 38px;
	height: 38px;
	padding: 0;
	gap: 0;
	justify-content: center;
	--cn-fab-sec-r: 50%;
	border-radius: 50%;
}

/* L'icône s'aligne au centre du bouton sans flex-shrink potentiel */
.cn-assistant-fab.is-compact .cn-assistant-fab-icon,
.cn-assistant-fab.is-compact .cn-assistant-fab-secondary-icon {
	margin: 0;
	flex-shrink: 0;
}

/* ===========================================================================
 * v0.4.0 — Indicateur d'identité dans le header du panel
 *
 * Affiche en haut à droite (juste avant le bouton fermer) :
 *   - Anonyme avec prénom : "Marie connectée" (1 ligne)
 *   - Authentifié : "Marie identifiée" + "marie@example.com" (2 lignes)
 *
 * Les libellés sont accordés en m/f/neutre selon state.gender.
 * ======================================================================== */

.cn-assistant-identity-badge {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	margin-right: 0; /* v0.8.8 — l'espacement badge↔X est porté par le gap du cluster header-right */
	max-width: 220px;
	overflow: hidden;
	text-align: right;
	pointer-events: none; /* purement informatif */
}

.cn-assistant-identity-line {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 100%;
}

.cn-assistant-identity-line1 {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.01em;
}

.cn-assistant-identity-line2 {
	font-size: 10.5px;
	color: rgba(255, 255, 255, 0.65);
	/* v0.4.13 — Padding-right égal à la largeur de l'icône stylo (18px) +
	   le gap entre line1 et l'icône (8px). L'email s'aligne ainsi avec le
	   bord droit du texte "identifié" et non avec le bord droit du crayon. */
	padding-right: 26px;
}

/* Sur petit écran on cache l'email pour gagner de la place */
@media (max-width: 480px) {
	.cn-assistant-identity-line2 {
		display: none;
	}
	.cn-assistant-identity-badge {
		max-width: 140px;
	}
}

/* ===========================================================================
 * v0.4.2 — Gender Gate
 *
 * Panel posé après le FirstNameGate quand l'inférence n'a pas atteint le
 * seuil de confiance (< 0.7). 3 options : Madame / Monsieur / Préfère ne
 * pas dire. La 3e option est rendue plus discrète visuellement (texte
 * souligné, couleur estompée) car c'est un fallback "neutre".
 * ======================================================================== */

.cn-assistant-gender-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 320px;
	margin: 16px auto 0 auto;
}

.cn-assistant-gender-option {
	width: 100%;
	padding: 12px 18px;
	border: 1px solid rgba(15, 40, 69, 0.18);
	border-radius: 10px;
	background: var(--cn-ivory, #f7f3e9);
	color: var(--cn-blue-night, #0f2845);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.cn-assistant-gender-option:hover {
	background: #fff;
	border-color: rgba(15, 40, 69, 0.45);
	box-shadow: 0 2px 8px rgba(15, 40, 69, 0.10);
}

.cn-assistant-gender-option:active {
	transform: scale(0.98);
}

.cn-assistant-gender-option:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px rgba(196, 160, 82, 0.6);
}

.cn-assistant-gender-option:disabled {
	opacity: 0.6;
	cursor: default;
}

/* La 3e option (préfère ne pas dire) reste plus discrète */
.cn-assistant-gender-option.is-neutral {
	background: transparent;
	border: 1px dashed rgba(15, 40, 69, 0.25);
	color: rgba(15, 40, 69, 0.7);
	font-size: 13px;
	font-weight: 400;
}

.cn-assistant-gender-option.is-neutral:hover {
	background: rgba(15, 40, 69, 0.04);
	border-color: rgba(15, 40, 69, 0.4);
	color: var(--cn-blue-night, #0f2845);
}

/* ===========================================================================
 * v0.4.7 — Badge cliquable + Profile Panel
 * ======================================================================== */

/* Badge identité : devient cliquable, change le curseur, hover discret */
.cn-assistant-identity-badge[role="button"] {
	pointer-events: auto;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background 0.15s ease;
}

.cn-assistant-identity-badge[role="button"]:hover {
	background: rgba(255, 255, 255, 0.08);
}

.cn-assistant-identity-badge[role="button"]:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px rgba(196, 160, 82, 0.6);
}

/* Profile panel : grouper les champs avec un peu d'espace */
.cn-assistant-gate-field {
	margin-bottom: 14px;
	width: 100%;
}

/* Sur la page profil, les boutons de gender sont plus serrés et un seul est sélectionné */
.cn-assistant-profile-gender-options {
	margin-top: 8px;
	gap: 6px;
}

.cn-assistant-gender-option.is-selected {
	background: var(--cn-blue-night, #0f2845);
	color: var(--cn-ivory, #f7f3e9);
	border-color: var(--cn-blue-night, #0f2845);
}

.cn-assistant-gender-option.is-selected:hover {
	background: var(--cn-blue-night-hover, #1a3556);
	color: var(--cn-ivory, #f7f3e9);
	border-color: var(--cn-blue-night-hover, #1a3556);
}

/* Email read-only : visuellement signalé comme non éditable */
.cn-assistant-gate-input.is-readonly {
	background: rgba(15, 40, 69, 0.04);
	color: rgba(15, 40, 69, 0.6);
	cursor: not-allowed;
}

/* Actions Save/Cancel côte à côte */
.cn-assistant-profile-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.cn-assistant-profile-actions .cn-assistant-gate-submit {
	flex: 1;
	margin: 0;
}

.cn-assistant-profile-actions .cn-assistant-gender-option {
	flex: 0 0 auto;
	width: auto;
	padding: 12px 18px;
}

/* ===========================================================================
 * v0.4.9 — Affordance du badge identité cliquable
 * Petite icône stylo à droite de la PREMIÈRE LIGNE du badge pour signaler
 * visuellement que le badge est interactif. Devient plus visible au hover.
 *
 * v0.4.10 — Restructuration : l'icône est dans une rangée flex avec line1
 * (au lieu d'être un troisième enfant flex column en bas). Layout final :
 *   ┌─────────────────────────────┐
 *   │ Olivier identifié      ✏    │  ← line1 + icon (flex row)
 *   │ olivier@rimmel.fr           │  ← line2 (sous la rangée 1)
 *   └─────────────────────────────┘
 * ======================================================================== */

.cn-assistant-identity-badge {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
}

.cn-assistant-identity-line1-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cn-assistant-identity-edit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.4);
	transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
	flex-shrink: 0;
}

/* v0.7.30 — Le halo du crayon ne réagit qu'au survol de SA rangée (line1-row),
   plus au survol du badge entier : sinon survoler le cadenas (rangée 2)
   allumait aussi le crayon → deux halos en même temps. Désormais halo crayon
   OU halo cadenas, jamais les deux. */
.cn-assistant-identity-line1-row:hover .cn-assistant-identity-edit-icon {
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.10);
}

/* v0.8.17 — Bug halo double : l'icône de réinitialisation (anonyme) vit dans la
   MÊME rangée que le crayon ; sans cette règle, survoler le reset allumait aussi
   le crayon via line1-row:hover → deux cercles en surbrillance. On éteint le
   crayon dès que le reset est survolé (un seul halo à la fois). */
.cn-assistant-identity-line1-row:has(.cn-assistant-identity-reset-icon:hover) .cn-assistant-identity-edit-icon {
	color: rgba(255, 255, 255, 0.4);
	background: transparent;
}

.cn-assistant-identity-badge:focus-visible .cn-assistant-identity-edit-icon {
	color: rgba(255, 255, 255, 0.95);
}

/* v0.7.28 — Ligne 2 du badge (email) groupée avec le cadenas, pour aligner
   ce dernier exactement SOUS le stylo (les deux rangées sont alignées à droite
   par le badge en flex-end ; leurs derniers enfants — stylo et cadenas, 18px
   chacun — partagent donc le même bord droit). Le padding-right de line2 (qui
   servait à aligner l'email seul) est neutralisé ici car l'alignement est
   désormais porté par la rangée. */
.cn-assistant-identity-line2-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}
.cn-assistant-identity-line2-row .cn-assistant-identity-line2 {
	padding-right: 0;
}
.cn-assistant-identity-lock-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	pointer-events: auto;
	transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
	flex-shrink: 0;
}
.cn-assistant-identity-lock-icon:hover,
.cn-assistant-identity-lock-icon:focus-visible {
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.10);
	outline: none;
}

/* v0.8.13 — Icône de réinitialisation (visiteur anonyme avec prénom local).
   Même gabarit que les autres icônes du badge ; teinte de survol légèrement
   chaude pour signaler une action de sortie/oubli sans être alarmante. */
.cn-assistant-identity-reset-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	pointer-events: auto;
	transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
	flex-shrink: 0;
}
.cn-assistant-identity-reset-icon:hover,
.cn-assistant-identity-reset-icon:focus-visible {
	color: rgba(255, 255, 255, 0.95);
	background: rgba(255, 255, 255, 0.12);
	outline: none;
}

/* ===========================================================================
 * v0.5.0 — Profile panel compact + avatar upload + pictogrammes gender
 * ======================================================================== */

/* Layout général compact : padding réduit, gap entre champs minimal */
.cn-assistant-profile-compact {
	padding: 16px 18px 18px 18px;
	gap: 14px;
}

.cn-assistant-profile-compact > .cn-assistant-profile-field {
	margin: 0;
	width: 100%;
}

.cn-assistant-profile-compact .cn-assistant-gate-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	color: rgba(15, 40, 69, 0.7);
	font-weight: 500;
}

.cn-assistant-profile-compact .cn-assistant-gate-input {
	margin-top: 0;
}

.cn-assistant-profile-note-tight {
	margin: 6px 0 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: rgba(15, 40, 69, 0.55);
}

/* === ZONE AVATAR === */

.cn-assistant-avatar-zone {
	display: flex;
	justify-content: center;
	margin-bottom: 4px;
}

.cn-assistant-avatar-circle {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--cn-gold, #c4a052);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cn-blue-night, #0f2845);
	font-family: var(--cn-font-serif, 'Source Serif 4', serif);
	font-size: 32px;
	font-weight: 600;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(15, 40, 69, 0.12);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.cn-assistant-avatar-circle.has-photo {
	background-color: rgba(15, 40, 69, 0.08); /* fallback si l'image ne charge pas */
	color: transparent; /* cache l'initiale si encore présente */
}

/* v0.7.29 — Placeholder appareil photo (cercle sans photo), centré, en bleu
   nuit sur le rond doré. Remplace l'ancienne initiale « ? ». L'overlay caméra
   (au hover) reste géré séparément et passe par-dessus. */
.cn-assistant-avatar-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cn-blue-night, #0f2845);
	opacity: 0.85;
	pointer-events: none;
}

.cn-assistant-avatar-circle:hover {
	transform: scale(1.03);
	box-shadow: 0 4px 14px rgba(15, 40, 69, 0.18);
}

.cn-assistant-avatar-circle:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px rgba(196, 160, 82, 0.7);
}

/* Overlay au hover : icône caméra qui apparaît */
.cn-assistant-avatar-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 40, 69, 0);
	color: rgba(255, 255, 255, 0);
	border-radius: 50%;
	transition: background 0.15s ease, color 0.15s ease;
	pointer-events: none;
}

.cn-assistant-avatar-circle:hover .cn-assistant-avatar-overlay,
.cn-assistant-avatar-circle:focus-visible .cn-assistant-avatar-overlay {
	background: rgba(15, 40, 69, 0.55);
	color: rgba(255, 255, 255, 0.95);
}

.cn-assistant-avatar-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* === PICTOGRAMMES GENRE === */

.cn-assistant-gender-pictograms {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.cn-assistant-gender-pictogram {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 4px;
	border: 1.5px solid rgba(15, 40, 69, 0.18);
	border-radius: 10px;
	background: var(--cn-ivory, #f7f3e9);
	color: var(--cn-blue-night, #0f2845);
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.cn-assistant-gender-pictogram:hover {
	background: #fff;
	border-color: rgba(15, 40, 69, 0.45);
}

.cn-assistant-gender-pictogram:active {
	transform: scale(0.98);
}

.cn-assistant-gender-pictogram:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px rgba(196, 160, 82, 0.6);
}

.cn-assistant-gender-pictogram.is-selected {
	background: var(--cn-blue-night, #0f2845);
	color: var(--cn-ivory, #f7f3e9);
	border-color: var(--cn-blue-night, #0f2845);
}

.cn-assistant-gender-pictogram.is-selected:hover {
	background: var(--cn-blue-night-hover, #1a3556);
	border-color: var(--cn-blue-night-hover, #1a3556);
	color: var(--cn-ivory, #f7f3e9);
}

.cn-assistant-gender-pictogram-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cn-assistant-gender-pictogram-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* === ACTIONS Save/Cancel compactes === */

.cn-assistant-profile-compact .cn-assistant-profile-actions {
	display: flex;
	align-items: center;
	justify-content: center; /* v0.5.2 — centre le bloc au milieu du panneau */
	gap: 12px;
	margin-top: 4px;
}

.cn-assistant-profile-compact .cn-assistant-profile-actions .cn-assistant-gate-submit {
	/* v0.5.2 — largeur intrinsèque (pas flex:1) pour ne pas étendre sur toute
	   la largeur du conteneur. min-width pour rester confortable au clic.
	   v0.5.3 — width:auto explicite pour surcharger le width:100% défini
	   sur .cn-assistant-gate-submit (utilisé dans le panel auth gate). */
	flex: 0 0 auto;
	width: auto;
	min-width: 160px;
	margin: 0;
}

/* "Annuler" devient un lien texte discret (pas un bouton encadré) */
.cn-assistant-profile-cancel-link {
	background: transparent;
	border: none;
	color: rgba(15, 40, 69, 0.6);
	font-family: inherit;
	font-size: 13px;
	cursor: pointer;
	padding: 8px 12px;
	transition: color 0.15s ease;
}

.cn-assistant-profile-cancel-link:hover {
	color: var(--cn-blue-night, #0f2845);
	text-decoration: underline;
}

.cn-assistant-profile-cancel-link:focus-visible {
	outline: none; /* v0.8.26 — focus arrondi : box-shadow au lieu
	   d'outline (qui ne suit pas le border-radius dans certains
	   navigateurs / était rendu rectangulaire). */
	box-shadow: 0 0 0 2px rgba(196, 160, 82, 0.6);
	border-radius: 4px;
}

.cn-assistant-profile-cancel-link:disabled {
	opacity: 0.5;
	cursor: default;
}

/* =========================================================================
   v0.7.0 — Auth email + password (gate refondu en step-by-step)
   ========================================================================= */

/* Wrapper interne du gate qui swap entre les steps sans détruire le panel */
.cn-assistant-gate-form-wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0;
}

/* Email affiché en readonly sur step 2 (login) */
.cn-assistant-gate-email-display {
	font-family: var(--cn-font-sans, 'Inter', system-ui, sans-serif);
	font-size: 13px;
	color: rgba(15, 40, 69, 0.65);
	text-align: center;
	margin: 4px 0 16px;
	padding: 8px 14px;
	background: rgba(15, 40, 69, 0.04);
	border-radius: 8px;
	border: 1px solid rgba(15, 40, 69, 0.08);
	letter-spacing: 0.01em;
}

/* Liens d'action discrets dans le gate (oublié, retour, modifier) */
.cn-assistant-gate-link {
	display: block;
	text-align: center;
	margin-top: 14px;
	color: var(--cn-blue-night, #0f2845);
	font-family: var(--cn-font-sans, 'Inter', system-ui, sans-serif);
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 4px 8px;
	transition: color 0.15s ease;
}

.cn-assistant-gate-link:hover {
	color: var(--cn-gold, #c4a052);
	text-decoration: underline;
}

.cn-assistant-gate-link-back {
	color: rgba(15, 40, 69, 0.55);
	font-size: 12px;
	margin-top: 8px;
}

.cn-assistant-gate-link-back:hover {
	color: var(--cn-blue-night, #0f2845);
}

/* Feedback (succès/erreur) dans les steps gate */
.cn-assistant-gate-feedback {
	font-size: 13px;
	font-family: var(--cn-font-sans, 'Inter', system-ui, sans-serif);
	text-align: center;
	margin: 12px 0;
	padding: 10px 14px;
	border-radius: 8px;
	min-height: 0;
	transition: opacity 0.15s ease;
}

.cn-assistant-gate-feedback:empty {
	display: none;
}

.cn-assistant-gate-feedback.is-success {
	background: rgba(46, 125, 50, 0.08);
	color: #2e7d32;
}

.cn-assistant-gate-feedback.is-error {
	background: rgba(198, 40, 40, 0.08);
	color: #c62828;
}

/* =========================================================================
   v0.7.1 — Section "Mot de passe" dans le profil
   v0.7.3 — Refonte UI : utilisation des classes gate-label/gate-input
            pour cohérence visuelle avec les autres champs (Prénom, Email).
   ========================================================================= */

.cn-assistant-profile-pwd-section {
	/* v0.7.32 — Séparateur (border-top) retiré : la section est désormais
	   seule dans son panneau dédié, plus besoin de la démarquer du profil. */
	margin-top: 4px;
}

.cn-assistant-profile-section-title {
	font-family: var(--cn-font-sans, 'Inter', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(15, 40, 69, 0.55);
	margin-bottom: 16px;
}

/* v0.7.3 — Espace entre les champs de la section password (cohérent avec
   l'espacement des champs Prénom/Email plus haut dans le profil). */
.cn-assistant-profile-pwd-section .cn-assistant-profile-field {
	margin-bottom: 14px;
}

.cn-assistant-profile-pwd-section .cn-assistant-profile-field:last-of-type {
	margin-bottom: 0;
}

/* v0.7.3 — Police monospace sur les inputs password pour bien voir
   les caractères au moment de la saisie (le visuel "code" rassure
   l'utilisateur que le champ est bien un password input). */
.cn-assistant-profile-pwd-section .cn-assistant-gate-input[type="password"] {
	font-family: 'Courier New', 'Courier', monospace;
	letter-spacing: 0.08em;
	font-size: 14px;
}

/* v0.7.30 — Le bouton « Mettre à jour » du mot de passe utilise désormais la
   classe .cn-assistant-gate-submit (même taille que « Enregistrer »). L'ancien
   style réduit .cn-assistant-profile-pwd-submit a été retiré. */

/* ===========================================================================
 * v0.7.0 — Gate panel step-by-step (email, login, register-sent, forgot)
 * ======================================================================== */

/* Pill affichant l'email courant entre les steps (read-only, design subtil) */
.cn-assistant-gate-email-pill {
	display: inline-block;
	margin: 4px auto 12px;
	padding: 6px 14px;
	background: var(--cn-ivory, #f7f3e9);
	border: 1px solid var(--cn-border, rgba(15, 40, 69, 0.12));
	border-radius: 16px;
	color: var(--cn-blue-night, #0f2845);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Wrapper pour aligner gate-email-pill au centre quand utilisé seul */
.cn-assistant-gate-form > .cn-assistant-gate-email-pill {
	align-self: center;
}

/* v0.8.15 — Rappel email + icône d'édition accolée (étape login).
   Le pill et l'icône crayon sont groupés et centrés ; cliquer l'icône ramène
   à l'étape de saisie de l'email. */
.cn-assistant-gate-email-recall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 4px 0 12px;
}
.cn-assistant-gate-email-recall .cn-assistant-gate-email-pill {
	margin: 0; /* l'espacement est porté par le wrapper recall */
}
.cn-assistant-gate-email-edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--cn-blue-night, #0f2845);
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
	opacity: 0.6;
	transition: opacity 0.15s ease, background 0.15s ease;
}
.cn-assistant-gate-email-edit:hover,
.cn-assistant-gate-email-edit:focus-visible {
	opacity: 1;
	background: rgba(15, 40, 69, 0.07);
	outline: none;
}

/* v0.8.15 — "Mot de passe oublié ?" sous le champ, aligné à droite (dans le
   conteneur du champ, donc calé sur le bord droit du champ à 70 %). */
.cn-assistant-gate-forgot {
	text-align: right;
	margin-top: 2px;
}
.cn-assistant-gate-forgot-link {
	display: inline;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--cn-text-muted, rgba(15, 40, 69, 0.6));
	font-family: var(--cn-font-sans, 'Inter', system-ui, sans-serif);
	font-size: 12px;
	text-decoration: none;
	transition: color 0.15s ease;
}
.cn-assistant-gate-forgot-link:hover,
.cn-assistant-gate-forgot-link:focus-visible {
	color: var(--cn-blue-night, #0f2845);
	outline: none;
}

/* Row des liens secondaires sous le bouton principal (ex : "Modifier l'email"
   à gauche et "Mot de passe oublié" à droite) */
.cn-assistant-gate-links-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.cn-assistant-gate-links-center {
	justify-content: center;
}

/* ===========================================================================
 * v0.7.4 — Fixes visuels & layout (lot 1)
 *
 *   Demandes Olivier :
 *   #6  Bug arobase qui décroche pendant la saisie (input email)
 *   #9  Email long superpose le titre du panel-header
 *   #10 Boutons baladés à droite quand le panneau est étroit (résolu côté JS
 *       par suppression du wrapper .cn-assistant-profile-actions)
 *   #11 Layout profil : Enregistrer sous email, section password séparée
 * ======================================================================== */

/*
 * #6 — Stabilisation du rendu des inputs.
 *
 * Symptôme : pendant la saisie d'un email, à l'arrivée du caractère @,
 * le glyph @ apparaît correctement aligné. Mais dès qu'un autre caractère
 * est tapé, le @ se décale légèrement vers le bas (sous la baseline).
 *
 * Cause probable : ligatures contextuelles activées par la police Inter
 * qui détectent la combinaison @lettre et altèrent le rendu du @. Ou
 * font-feature-settings qui réévalue à chaque caractère.
 *
 * Fix : désactiver toutes les ligatures et features contextuelles, et
 * forcer un line-height fixe qui s'aligne sur la hauteur de la box.
 */
.cn-assistant-gate-input {
	font-variant-ligatures: none;
	font-feature-settings: "kern" 1, "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
	line-height: 1.2; /* hauteur stable, indépendante du contenu */
	font-variant-numeric: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * #9 — Tronquer l'email long dans le badge identité du header.
 *
 * Symptôme : un email comme "coalition-nationale.fr-test@rimmel.fr" déborde
 * sur le titre "Guide et assistant IA en français" qui passe alors à la ligne
 * et se chevauche avec l'email.
 *
 * Le cluster header-right est en position:absolute avec une largeur libre.
 * On contraint la ligne 2 (email) à un max-width raisonnable avec ellipsis.
 * Le titre complet reste accessible au survol (attribut title sur la line2,
 * ajouté côté JS).
 */
.cn-assistant-identity-line2 {
	max-width: 220px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

/* En mode panneau étroit (< 380px), on resserre la troncature pour ne pas
   amputer le titre principal côté gauche. */
@media (max-width: 480px) {
	.cn-assistant-identity-line2 {
		max-width: 160px;
	}
}

/*
 * #11 — Layout profil 2 blocs séparés.
 *
 * Le bouton "Enregistrer" est maintenant placé directement après le bloc 1
 * (Avatar + Prénom + Genre + Email + Feedback). Il garde sa classe
 * `cn-assistant-gate-submit` qui le centre horizontalement et lui donne sa
 * largeur intrinsèque (min-width: 200px). Pas de changement CSS requis ici.
 *
 * En revanche on ajoute une marge verticale plus généreuse SOUS le saveBtn
 * pour bien séparer visuellement le bloc 1 du bloc 2 (passwordSection).
 *
 * On harmonise aussi le rendu du passwordSection qui commence maintenant
 * juste après le saveBtn (pas après un wrapper actionsRow).
 */
.cn-assistant-profile-compact > .cn-assistant-gate-submit {
	margin-bottom: 8px;
}

/* Le passwordSection arrive directement après saveBtn → harmoniser le
   séparateur visuel (margin-top + border-top sur le passwordSection) */
.cn-assistant-profile-compact > .cn-assistant-gate-submit + .cn-assistant-profile-pwd-section {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(15, 40, 69, 0.12);
}

/*
 * Bonus #4 — Le step gender gate anonyme (avant connexion) a maintenant
 * des icônes SVG + label, comme le panneau profil. On harmonise le styling
 * des options : flex centered avec icône au-dessus du label.
 */
.cn-assistant-gender-option {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
}
.cn-assistant-gender-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
	flex-shrink: 0;
}
.cn-assistant-gender-option-icon svg {
	display: block;
}
.cn-assistant-gender-option-label {
	font-family: inherit;
	font-weight: 500;
}

/* ===========================================================================
 * v0.7.17 (S22) — Auto-compact sur viewport intermédiaire 1024-1279px
 *
 * Quand le viewport est entre 1024 et 1279.98px, le header cn-theme se
 * trouve à l'étroit (voir cn-theme v0.11.17 : zone responsive
 * intermédiaire qui bascule sur logo hexagone + items menu sans
 * compteurs). Le FAB cn-assistant + cn-accounts y prennent toute la
 * place restante avec leurs labels « La Voix de la Coalition » et
 * « Connexion ».
 *
 * Sur cette tranche, on force automatiquement le comportement
 * .is-compact (déjà existant — voir bloc v0.4.0/v0.4.4) :
 *   - Les labels textuels disparaissent
 *   - Les boutons deviennent circulaires (44×44 pour le principal,
 *     38×38 pour le secondaire)
 *   - Seules les icônes restent visibles
 *
 * Gain de place : ~250px sur le bouton principal, ~80px sur le
 * secondaire. Le FAB occupe alors environ 100px de large au total
 * (grip + 2 cercles), ce qui laisse toute la place au menu.
 *
 * Au-dessus de 1280px, le FAB reprend sa forme pleine avec labels
 * « La Voix de la Coalition » + « Connexion » (comportement existant
 * inchangé).
 *
 * Le toggle manuel via simple-clic sur le grip (state.is-compact)
 * reste fonctionnel à toutes les largeurs : l'utilisateur peut
 * toujours basculer manuellement, et au-dessus de 1280px sa
 * préférence est respectée.
 *
 * Mécanique : on duplique les règles du bloc .is-compact mais on les
 * applique sans la classe (cible directe .cn-assistant-fab) dans la
 * media query. C'est plus simple que de gérer dynamiquement la classe
 * en JS et ça évite un re-render au moindre resize.
 *
 * Note ResizeObserver : le JS du plugin observe la taille du FAB et
 * recalcule sa position au resize (cf. fabObserver dans cn-assistant.js
 * v0.3.8). Le changement de taille induit par cette media query est
 * donc capté automatiquement, le FAB se repositionne au centre du
 * header tout seul.
 * ======================================================================== */

@media (min-width: 1024px) and (max-width: 1279.98px) {

	/* Labels masqués (mêmes cibles que .is-compact, sans le préfixe) */
	.cn-assistant-fab .cn-assistant-fab-text,
	.cn-assistant-fab .cn-assistant-fab-secondary-label {
		display: none;
	}

	/* Bouton principal circulaire 44×44 */
	.cn-assistant-fab .cn-assistant-fab-btn {
		width: 44px;
		height: 44px;
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 50%;
	}

	/* Bouton secondaire circulaire 38×38 */
	.cn-assistant-fab .cn-assistant-fab-secondary {
		width: 38px;
		height: 38px;
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 50%;
	}

	/* Icônes : marge nulle, pas de flex-shrink douteux */
	.cn-assistant-fab .cn-assistant-fab-icon,
	.cn-assistant-fab .cn-assistant-fab-secondary-icon {
		margin: 0;
		flex-shrink: 0;
	}

	/* Le grip reste visible pour permettre le drag/dblclick reset.
	   Hauteur réduite pour mieux s'intégrer avec les 2 cercles. */
	.cn-assistant-fab-grip {
		padding: 6px 3px;
	}
}

/* ===========================================================================
 * FIN v0.7.17
 * ======================================================================== */

/* ===========================================================================
 * v0.8.25 — ANTI-RECTANGLE AU FOCUS : override autoritaire (forte spécificité)
 *
 * Symptôme persistant (v0.8.22→0.8.24) : un anneau doré RECTANGULAIRE autour
 * des boutons au focus/clic (ex. « Madame » dans le sélecteur de genre), alors
 * que le bouton est arrondi.
 *
 * Diagnostic : la règle de focus du thème hôte (button:focus { outline … },
 * dessinée aussi au CLIC) a une spécificité supérieure à nos overrides à
 * sélecteur plat (.cn-assistant-gender-option:focus = 0-2-0). Tant qu'on ne
 * la bat pas en spécificité, l'outline rectangulaire réapparaît.
 *
 * Correctif : on scope sous les conteneurs racine (.cn-assistant-fab /
 * .cn-assistant-panel) → spécificité 0-3-0, qui bat les règles de thème
 * usuelles, + !important + placement en FIN de feuille (gagne aussi les
 * égalités d'ordre source). On tue outline ET box-shadow parasites sur :focus
 * et :focus-visible ; l'anneau doré ARRONDI (box-shadow, suit le border-radius
 * dans tous les navigateurs) n'est rendu qu'au focus CLAVIER (:focus-visible).
 * Au clic souris, l'état actif (fond bleu / hover) suffit.
 * ======================================================================== */

/* 1) Neutralisation : tout indicateur de focus rectangulaire, scopé conteneur */
.cn-assistant-fab button:focus,
.cn-assistant-fab button:focus-visible,
.cn-assistant-fab [role="button"]:focus,
.cn-assistant-fab [role="button"]:focus-visible,
.cn-assistant-panel button:focus,
.cn-assistant-panel button:focus-visible,
.cn-assistant-panel [role="button"]:focus,
.cn-assistant-panel [role="button"]:focus-visible {
	outline: 0 !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

/* 2) Anneau doré ARRONDI, focus clavier uniquement.
   Boutons à fond clair → liseré ivoire + anneau doré. */
.cn-assistant-panel .cn-assistant-gate-submit:focus-visible,
.cn-assistant-panel .cn-assistant-composer-send:focus-visible,
.cn-assistant-panel .cn-assistant-gender-option:focus-visible,
.cn-assistant-panel .cn-assistant-gender-pictogram:focus-visible,
.cn-assistant-panel .cn-assistant-gate-email-edit:focus-visible,
.cn-assistant-fab .cn-assistant-fab-btn:focus-visible,
.cn-assistant-fab .cn-assistant-fab-secondary:focus-visible {
	box-shadow:
		0 0 0 2px var(--cn-ivory),
		0 0 0 4px var(--cn-gold) !important;
}

/* Boutons/icônes sur fond sombre (header) ou ronds → anneau doré simple. */
.cn-assistant-panel .cn-assistant-panel-action:focus-visible,
.cn-assistant-panel .cn-assistant-identity-badge[role="button"]:focus-visible,
.cn-assistant-panel .cn-assistant-identity-lock-icon:focus-visible,
.cn-assistant-panel .cn-assistant-identity-reset-icon:focus-visible,
.cn-assistant-panel .cn-assistant-avatar-circle:focus-visible,
.cn-assistant-fab .cn-assistant-fab-grip:focus-visible {
	box-shadow: 0 0 0 2px var(--cn-gold) !important;
}

/* ===========================================================================
 * FIN v0.8.25
 * ======================================================================== */