/* ==========================================================================
   Naya — Assistant IA
   Widget flottant + page dédiée
   ========================================================================== */

:root {
	--naya-c1: #6d28d9;
	--naya-c2: #db2777;
	--naya-grad: linear-gradient(135deg, var(--naya-c1), var(--naya-c2));
	--naya-bg: #ffffff;
	--naya-surface: #f6f5fa;
	--naya-text: #1c1a27;
	--naya-muted: #7a7690;
	--naya-radius: 20px;
	--naya-shadow: 0 24px 60px -12px rgba(30, 10, 60, 0.35);
	--naya-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Sentinelle : le JavaScript lit cette variable pour vérifier que cette
   feuille est bien chargée. Une extension de cache servant un fichier périmé
   ne la contiendrait pas, et l'avertissement partirait en console. */
#naya-widget, #naya-page { --naya-css: "2.3.0"; }

#naya-widget, #naya-page { font-family: var(--naya-font); }
#naya-widget *, #naya-page * { box-sizing: border-box; }

/* Bouclier anti-thème : beaucoup de thèmes stylent agressivement les boutons
   (position, min-height, texte en majuscules, ombres…). On repart d'une base
   neutre pour tous les boutons du widget, sans toucher à leur apparence
   définie plus bas. */
#naya-widget button,
#naya-page button {
	font-family: var(--naya-font);
	-webkit-appearance: none;
	appearance: none;
	line-height: 1;
	max-width: none;
	text-decoration: none;
	outline-offset: 2px;
	/* Ces quatre-là sont les plus souvent imposées en `!important` par les
	   thèmes (cibles tactiles de 44 px, capitales, espacements) : on les
	   neutralise au même niveau, sinon la mise en page se disloque. */
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
}

/* ==========================================================================
   Barre de conversation en haut de page
   Le champ de saisie est visible en permanence : c'est ce qui déclenche le
   plus d'échanges. Le panneau de conversation se déploie juste en dessous.
   ========================================================================== */

#naya-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99997;
	background: var(--naya-grad);
	color: #fff;
	box-shadow: 0 2px 18px rgba(20, 10, 50, 0.22);
	transform: translateY(0);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
#naya-widget.naya-minimized #naya-bar { transform: translateY(-100%); }

.naya-bar-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 9px 16px;
	min-height: 58px;
}

/* Identité */
.naya-bar-identity { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.naya-bar-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
}
.naya-bar-labels { display: flex; flex-direction: column; line-height: 1.25; }
.naya-bar-labels strong { font-size: 15px; font-weight: 700; }
.naya-bar-status { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.9; }

/* Champ de saisie : l'élément central de la barre. */
.naya-bar-form {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	max-width: 660px;
	margin: 0;
}
.naya-bar-input {
	flex: 1;
	height: 40px;
	padding: 0 16px;
	border: 1.5px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 14.5px;
	font-family: inherit;
	outline: none;
	transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.naya-bar-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.naya-bar-input:focus {
	background: rgba(255, 255, 255, 0.95);
	border-color: #fff;
	color: var(--naya-text);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}
.naya-bar-input:focus::placeholder { color: var(--naya-muted); }

.naya-bar-send {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 18px;
	border: none;
	border-radius: 999px;
	background: #fff;
	color: var(--naya-c1);
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.18s, box-shadow 0.18s;
}
.naya-bar-send:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); }

/* Actions à droite */
.naya-bar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.naya-bar-toggle, .naya-bar-minimize {
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s;
}
.naya-bar-toggle:hover, .naya-bar-minimize:hover { background: rgba(255, 255, 255, 0.32); }

.naya-chevron {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.28s ease;
}
#naya-widget.naya-panel-open .naya-chevron { transform: rotate(-135deg) translate(-3px, -3px); }

/* Compteur de messages non lus sur la barre */
.naya-bar-toggle .naya-bar-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 17px;
	height: 17px;
	border-radius: 9px;
	background: #ef4444;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	padding: 0 4px;
}
.naya-bar-toggle { position: relative; }

/* --------------------------------------------------------------------------
   Fenêtre de conversation : modale centrée sur un voile flouté
   Le site reste perceptible derrière le flou — on ne quitte pas la page —
   mais toute l'attention va à l'échange. Couches au plus haut : rien
   (bandeau cookies, bouton flottant du thème) ne doit passer par-dessus.
   -------------------------------------------------------------------------- */
#naya-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147483645;
	background:
		radial-gradient(900px 500px at 50% 0%, color-mix(in srgb, var(--naya-c1) 22%, transparent), transparent 70%),
		rgba(18, 12, 40, 0.42);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	animation: naya-veil-in 0.3s ease both;
}
#naya-backdrop.naya-hidden { display: none; }
#naya-backdrop.naya-backdrop-out { animation: naya-veil-out 0.26s ease forwards; }
@keyframes naya-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes naya-veil-out { to { opacity: 0; } }

/* Navigateurs sans flou : un voile plus dense garde la lisibilité. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#naya-backdrop { background: rgba(18, 12, 40, 0.72); }
}

/* Le site ne défile plus sous la fenêtre. */
html.naya-modal-open,
html.naya-modal-open body { overflow: hidden !important; }

#naya-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2147483646;
	width: min(820px, calc(100vw - 48px));
	height: min(780px, calc(100vh - 48px));
	height: min(780px, calc(100dvh - 48px));
	background: var(--naya-bg);
	border-radius: 28px;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.5),
		0 40px 100px -20px rgba(15, 8, 40, 0.55);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: naya-modal-in 0.42s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
#naya-panel.naya-hidden { display: none; }
#naya-panel.naya-panel-out { animation: naya-modal-out 0.24s ease-in forwards; }

@keyframes naya-modal-in {
	from { opacity: 0; transform: translate(-50%, -46%) scale(0.94); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes naya-modal-out {
	to { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
}

.naya-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(20, 10, 50, 0.07);
	background: var(--naya-bg);
	flex-shrink: 0;
}
.naya-panel-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.naya-panel-avatar {
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background: var(--naya-grad);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
	box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--naya-c1) 55%, transparent);
}
.naya-panel-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.naya-panel-title { font-size: 15.5px; font-weight: 700; color: var(--naya-text); }
.naya-panel-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--naya-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.naya-panel-status .naya-dot { width: 7px; height: 7px; flex-shrink: 0; animation: naya-live 2.4s ease-in-out infinite; }
@keyframes naya-live {
	0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3); }
	50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.12); }
}

/* --------------------------------------------------------------------------
   Écran d'accueil : centré, avec les questions en grandes cartes
   -------------------------------------------------------------------------- */
.naya-hero {
	margin: auto 0; /* centre verticalement sans rogner si ça déborde */
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 12px 4px;
	width: 100%;
	max-width: 560px;
	align-self: center;
}
.naya-hero-orb {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 24px;
	background: var(--naya-grad);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	box-shadow: 0 16px 36px -10px color-mix(in srgb, var(--naya-c1) 60%, transparent);
	animation: naya-orb-in 0.6s cubic-bezier(0.34, 1.5, 0.5, 1) both, naya-orb-float 5s ease-in-out 0.6s infinite;
}
.naya-hero-orb::after {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 30px;
	border: 2px solid color-mix(in srgb, var(--naya-c1) 30%, transparent);
	animation: naya-orb-ring 2.8s ease-out 0.8s infinite;
}
@keyframes naya-orb-in { from { opacity: 0; transform: scale(0.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes naya-orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes naya-orb-ring { from { opacity: 0.9; transform: scale(0.9); } to { opacity: 0; transform: scale(1.25); } }

.naya-hero-text {
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--naya-text);
	max-width: 440px;
	animation: naya-fade-up 0.5s 0.15s ease both;
}
.naya-hero .naya-start-hint { padding: 0; font-size: 12.5px; }
/* Flex plutôt que grille : une carte orpheline se centre au lieu de
   rester collée à gauche. */
.naya-hero-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 4px;
}
#naya-widget .naya-hero-card,
#naya-page .naya-hero-card {
	position: relative !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: 1 1 220px;
	width: auto !important;
	max-width: calc(50% - 5px) !important;
	padding: 14px 16px !important;
	border: 1px solid rgba(20, 10, 50, 0.08) !important;
	border-radius: 16px !important;
	background: var(--naya-bg) !important;
	color: var(--naya-text) !important;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1.35 !important;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(20, 10, 50, 0.05) !important;
	transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
	animation: naya-sugg-in 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) both;
	-webkit-tap-highlight-color: transparent;
}
.naya-hero-card-go {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--naya-c1) 10%, #fff);
	color: var(--naya-c1);
	font-size: 14px;
	transition: transform 0.18s, background 0.18s, color 0.18s;
}
#naya-widget .naya-hero-card:hover,
#naya-page .naya-hero-card:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--naya-c1) 40%, transparent) !important;
	box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--naya-c1) 35%, transparent) !important;
}
/* Fenêtre flottante étroite : une carte par ligne. */
#naya-widget #naya-window .naya-hero-card { flex-basis: 100%; max-width: 100% !important; }
.naya-hero-card:hover .naya-hero-card-go { background: var(--naya-grad); color: #fff; transform: translateX(2px); }
#naya-widget .naya-hero-card:active,
#naya-page .naya-hero-card:active { transform: scale(0.97); }
.naya-panel-tools { display: flex; align-items: center; gap: 6px; }
.naya-panel-tools button, .naya-panel-tools .naya-expand {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 9px;
	background: var(--naya-surface);
	color: var(--naya-text);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.naya-panel-tools button:hover, .naya-panel-tools .naya-expand:hover {
	background: color-mix(in srgb, var(--naya-c1) 12%, #fff);
	color: var(--naya-c1);
}
.naya-panel-tools .naya-rate-btn { color: #f5b301; }

/* Onglet de réouverture quand la barre est réduite */
#naya-tab {
	position: fixed;
	top: 0;
	right: 24px;
	z-index: 99997;
	padding: 8px 18px;
	border: none;
	border-radius: 0 0 14px 14px;
	background: var(--naya-grad);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 20px -6px rgba(20, 10, 50, 0.45);
	animation: naya-tab-in 0.3s cubic-bezier(0.34, 1.4, 0.5, 1);
	transition: padding 0.2s;
}
#naya-tab.naya-hidden { display: none; }
#naya-tab:hover { padding-bottom: 12px; }
@keyframes naya-tab-in {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Bulle de lancement
   -------------------------------------------------------------------------- */
#naya-launcher {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99998;
	width: 62px;
	height: 62px;
	border: none;
	border-radius: 50%;
	background: var(--naya-grad);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--naya-c1) 55%, transparent);
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
}
#naya-launcher:hover { transform: scale(1.08) rotate(-4deg); box-shadow: 0 16px 40px -6px color-mix(in srgb, var(--naya-c1) 70%, transparent); }
#naya-launcher:active { transform: scale(0.96); }

.naya-launcher-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--naya-grad);
	opacity: 0.45;
	animation: naya-pulse 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes naya-pulse {
	0% { transform: scale(1); opacity: 0.45; }
	70% { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}

#naya-widget.naya-open #naya-launcher { transform: scale(0); pointer-events: none; }

/* Frétillement périodique : attire l'œil sans être agressif. */
#naya-launcher.naya-wiggle { animation: naya-wiggle 0.9s ease-in-out; }
@keyframes naya-wiggle {
	0%, 100% { transform: rotate(0) scale(1); }
	15% { transform: rotate(-14deg) scale(1.1); }
	30% { transform: rotate(12deg) scale(1.1); }
	45% { transform: rotate(-9deg) scale(1.06); }
	60% { transform: rotate(7deg) scale(1.04); }
	75% { transform: rotate(-4deg) scale(1.02); }
}

/* Badge de notification sur la bulle */
.naya-badge {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: #ef4444;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
	transform: scale(0);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}
#naya-widget.naya-nudged .naya-badge { transform: scale(1); }

/* --------------------------------------------------------------------------
   Bulle d'accroche (incitation à la conversation)
   -------------------------------------------------------------------------- */
#naya-widget #naya-teaser {
	position: fixed;
	right: 24px;
	bottom: 102px;
	z-index: 99998;
	width: 300px;
	max-width: calc(100vw - 48px);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--naya-bg);
	border: 1px solid rgba(20, 10, 50, 0.06);
	border-radius: 20px;
	box-shadow: 0 18px 45px -12px rgba(20, 10, 50, 0.28), 0 3px 10px -3px rgba(20, 10, 50, 0.1);
	cursor: pointer;
	transform-origin: bottom right;
	animation: naya-teaser-in 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
#naya-widget #naya-teaser.naya-hidden { display: none; }
#naya-widget #naya-teaser:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 55px -12px rgba(20, 10, 50, 0.34), 0 4px 12px -3px rgba(20, 10, 50, 0.12);
}
#naya-widget #naya-teaser:focus-visible { outline: 2px solid var(--naya-c1); outline-offset: 3px; }
#naya-widget #naya-teaser.naya-teaser-out { animation: naya-teaser-out 0.28s ease-in forwards; }

/* Petite queue orientée vers le bouton, comme une vraie bulle de message. */
#naya-widget #naya-teaser::after {
	content: '';
	position: absolute;
	right: 26px;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: var(--naya-bg);
	border-right: 1px solid rgba(20, 10, 50, 0.06);
	border-bottom: 1px solid rgba(20, 10, 50, 0.06);
	transform: rotate(45deg);
	border-bottom-right-radius: 3px;
}

@keyframes naya-teaser-in {
	0% { opacity: 0; transform: translateY(14px) scale(0.9); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes naya-teaser-out {
	to { opacity: 0; transform: translateY(8px) scale(0.94); }
}

#naya-widget .naya-teaser-avatar {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--naya-grad);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
	box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--naya-c1) 55%, transparent);
}
/* Pastille « en ligne » : signal de disponibilité immédiate. */
#naya-widget .naya-teaser-avatar::after {
	content: '';
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #22c55e;
	border: 2.5px solid var(--naya-bg);
}

#naya-widget .naya-teaser-body { min-width: 0; flex: 1; }
#naya-widget .naya-teaser-body strong {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--naya-muted);
	margin: 0 0 3px;
	text-transform: none;
}
#naya-widget .naya-teaser-body p {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.42;
	color: var(--naya-text);
	font-weight: 500;
}

/* Croix de fermeture : petit rond flottant hors du cadre, discret mais
   toujours atteignable. Sélecteur à forte spécificité — les thèmes WordPress
   repositionnent volontiers les boutons. */
#naya-widget #naya-teaser .naya-teaser-close {
	position: absolute;
	top: -9px;
	right: -9px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid rgba(20, 10, 50, 0.07);
	border-radius: 50%;
	background: var(--naya-bg);
	color: var(--naya-muted);
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(20, 10, 50, 0.16);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s, color 0.15s;
}
#naya-widget #naya-teaser:hover .naya-teaser-close,
#naya-widget #naya-teaser .naya-teaser-close:focus-visible {
	opacity: 1;
	transform: scale(1);
}
#naya-widget #naya-teaser .naya-teaser-close:hover {
	background: #f4f2f8;
	color: var(--naya-text);
}
/* Sur écran tactile, il n'y a pas de survol : la croix reste visible. */
@media (hover: none) {
	#naya-widget #naya-teaser .naya-teaser-close { opacity: 1; transform: scale(1); }
}

#naya-widget.naya-open #naya-teaser { display: none; }

/* Accessibilité : on coupe tout mouvement si l'utilisateur le demande. */
@media (prefers-reduced-motion: reduce) {
	#naya-teaser, #naya-launcher.naya-wiggle, .naya-launcher-pulse { animation: none !important; }
	#naya-teaser { transition: none; }
}

/* --------------------------------------------------------------------------
   Fenêtre flottante
   -------------------------------------------------------------------------- */
#naya-window {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;
	width: 390px;
	max-width: calc(100vw - 32px);
	height: 600px;
	max-height: calc(100vh - 48px);
	background: var(--naya-bg);
	border-radius: var(--naya-radius);
	box-shadow: var(--naya-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	animation: naya-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#naya-window.naya-hidden { display: none; }
@keyframes naya-pop {
	from { transform: scale(0.6) translateY(30px); opacity: 0; }
	to { transform: scale(1) translateY(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.naya-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: var(--naya-grad);
	color: #fff;
	flex-shrink: 0;
}
.naya-avatar {
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}
.naya-header-meta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.naya-header-meta strong { font-size: 16px; }
.naya-status { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
.naya-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3);
}
.naya-close, .naya-expand, .naya-toggle-sidebar {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background 0.2s;
	flex-shrink: 0;
}
.naya-close:hover, .naya-expand:hover, .naya-toggle-sidebar:hover { background: rgba(255, 255, 255, 0.3); }

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */
.naya-messages {
	flex: 1;
	overflow-y: auto;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background:
		radial-gradient(1200px 300px at 50% -100px, color-mix(in srgb, var(--naya-c1) 8%, transparent), transparent),
		var(--naya-surface);
	scroll-behavior: smooth;
}
.naya-msg {
	max-width: 82%;
	padding: 11px 15px;
	border-radius: 18px;
	font-size: 14.5px;
	line-height: 1.55;
	white-space: pre-wrap;
	word-wrap: break-word;
	animation: naya-msg-in 0.25s ease-out;
}
@keyframes naya-msg-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.naya-msg-user {
	align-self: flex-end;
	background: var(--naya-grad);
	color: #fff;
	border-bottom-right-radius: 6px;
}
.naya-msg-assistant {
	align-self: flex-start;
	background: var(--naya-bg);
	color: var(--naya-text);
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 2px 8px rgba(20, 10, 50, 0.05);
	border-bottom-left-radius: 6px;
}
.naya-msg-assistant a {
	color: var(--naya-c1);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--naya-c1) 40%, transparent);
	text-underline-offset: 2px;
	transition: text-decoration-color 0.15s;
}
.naya-msg-assistant a:hover { text-decoration-color: var(--naya-c1); }
.naya-msg-error {
	align-self: center;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 13px;
	border: 1px solid #fecaca;
}

/* Bouton de notation dans l'en-tête */
.naya-rate-btn {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #ffd44d;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, transform 0.2s;
	flex-shrink: 0;
}
.naya-rate-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.08); }

/* Carte de notation (CSAT) */
.naya-rating {
	align-self: center;
	width: 92%;
	background: var(--naya-bg);
	border: 1px solid color-mix(in srgb, var(--naya-c1) 25%, transparent);
	border-radius: 16px;
	padding: 14px 16px;
	text-align: center;
	box-shadow: 0 6px 20px rgba(20, 10, 50, 0.08);
	animation: naya-msg-in 0.25s ease-out;
}
.naya-rating-title { font-size: 13.5px; font-weight: 600; color: var(--naya-text); margin-bottom: 8px; }
.naya-stars { display: flex; justify-content: center; gap: 6px; }
.naya-stars button {
	background: none;
	border: none;
	font-size: 26px;
	color: #d8d4e4;
	cursor: pointer;
	padding: 2px;
	transition: transform 0.15s, color 0.15s;
	line-height: 1;
}
.naya-stars button:hover { transform: scale(1.25); }
.naya-stars button.naya-star-on { color: #f5b301; text-shadow: 0 2px 8px rgba(245, 179, 1, 0.4); }
.naya-rating-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.naya-rating-form textarea {
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 13px;
	font-family: inherit;
	resize: none;
	outline: none;
	background: var(--naya-surface);
	color: var(--naya-text);
}
.naya-rating-form textarea:focus { border-color: var(--naya-c1); }
.naya-rating-form button {
	border: none;
	border-radius: 10px;
	background: var(--naya-grad);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 14px;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.2s;
}
.naya-rating-form button:hover { transform: translateY(-1px); }
.naya-rating-form button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.naya-rating-skip {
	margin-top: 9px;
	border: none;
	background: none;
	color: var(--naya-muted);
	font-size: 12px;
	font-family: inherit;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px 8px;
}
.naya-rating-skip:hover { color: var(--naya-text); }

/* --------------------------------------------------------------------------
   Bouton « Terminer »
   Rouge et distinct de la réduction : le visiteur déclare avoir fini, ce qui
   ouvre naturellement la demande d'avis. Il n'apparaît qu'une fois la
   conversation engagée — proposer de terminer un échange vide n'aurait
   aucun sens.
   -------------------------------------------------------------------------- */
.naya-end-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border: none;
	border-radius: 10px;
	background: linear-gradient(180deg, #ef4444, #dc2626);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
	animation: naya-end-in 0.42s cubic-bezier(0.34, 1.5, 0.5, 1) both,
	           naya-end-pulse 2.8s ease-in-out 1.2s infinite;
	transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
}
.naya-end-btn.naya-hidden { display: none; }
.naya-end-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.07);
	box-shadow: 0 8px 22px rgba(220, 38, 38, 0.48);
}
.naya-end-btn:active { transform: scale(0.96); }

@keyframes naya-end-in {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: scale(1); }
}
/* Respiration discrète : attire l'œil sans clignoter. */
@keyframes naya-end-pulse {
	0%, 100% { box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35); }
	50% { box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35), 0 0 0 7px rgba(239, 68, 68, 0.12); }
}

/* --------------------------------------------------------------------------
   Poignée de glissement (mobile) : signale que le panneau se ferme
   d'un geste vers le bas.
   -------------------------------------------------------------------------- */
.naya-grabber {
	display: none;
	width: 100%;
	padding: 10px 0 4px;
	border: none;
	background: transparent;
	cursor: grab;
	flex-shrink: 0;
	touch-action: none;
}
.naya-grabber::before {
	content: '';
	display: block;
	width: 42px;
	height: 4px;
	margin: 0 auto;
	border-radius: 999px;
	background: rgba(20, 10, 50, 0.18);
	transition: background 0.2s, width 0.2s;
}
.naya-grabber:active { cursor: grabbing; }
.naya-grabber:active::before { background: rgba(20, 10, 50, 0.32); width: 54px; }

/* Invitation au démarrage, sous le message d'accueil */
.naya-start-hint {
	align-self: center;
	font-size: 12px;
	color: var(--naya-muted);
	padding: 2px 0 4px;
	animation: naya-fade-up 0.5s 0.35s ease both;
}
@keyframes naya-fade-up {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Indicateur de frappe */
.naya-typing {
	align-self: flex-start;
	display: flex;
	gap: 5px;
	padding: 14px 18px;
	background: var(--naya-bg);
	border-radius: 18px;
	border-bottom-left-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.05);
}
.naya-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--naya-c1);
	opacity: 0.4;
	animation: naya-bounce 1.2s infinite;
}
.naya-typing span:nth-child(2) { animation-delay: 0.15s; }
.naya-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes naya-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
	30% { transform: translateY(-6px); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Suggestions
   -------------------------------------------------------------------------- */
.naya-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 18px 8px;
	background: var(--naya-surface);
}
.naya-suggestions:empty { display: none; }
.naya-sugg {
	border: 1px solid color-mix(in srgb, var(--naya-c1) 35%, transparent);
	background: color-mix(in srgb, var(--naya-c1) 6%, #fff);
	color: var(--naya-c1);
	font-size: 12.5px;
	padding: 7px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
	/* Arrivée en cascade : le regard suit, et l'envie de cliquer vient. */
	animation: naya-sugg-in 0.42s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
.naya-sugg:nth-child(1) { animation-delay: 0.18s; }
.naya-sugg:nth-child(2) { animation-delay: 0.28s; }
.naya-sugg:nth-child(3) { animation-delay: 0.38s; }
.naya-sugg:nth-child(4) { animation-delay: 0.48s; }
.naya-sugg:nth-child(n+5) { animation-delay: 0.56s; }
.naya-sugg:hover {
	background: var(--naya-c1);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--naya-c1) 35%, transparent);
}
.naya-sugg:active { transform: scale(0.96); }

@keyframes naya-sugg-in {
	from { opacity: 0; transform: translateY(10px) scale(0.92); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   Zone de saisie
   -------------------------------------------------------------------------- */
.naya-input-bar {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 12px 14px;
	background: var(--naya-bg);
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	flex-shrink: 0;
	margin: 0;
}
/* Honeypot anti-bots : invisible pour les humains, rempli par les robots. */
.naya-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}

.naya-input-bar textarea {
	flex: 1;
	border: 1.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 14px;
	padding: 10px 14px;
	font-size: 14.5px;
	font-family: inherit;
	resize: none;
	max-height: 120px;
	outline: none;
	background: var(--naya-surface);
	color: var(--naya-text);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.naya-input-bar textarea:focus {
	border-color: var(--naya-c1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--naya-c1) 15%, transparent);
}
.naya-input-bar button {
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 13px;
	background: var(--naya-grad);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.2s, opacity 0.2s;
}
.naya-input-bar button:hover { transform: scale(1.06); }
.naya-input-bar button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.naya-footer-brand {
	text-align: center;
	font-size: 11px;
	color: var(--naya-muted);
	padding: 6px 0 10px;
	background: var(--naya-bg);
}

/* --------------------------------------------------------------------------
   Page dédiée
   -------------------------------------------------------------------------- */
#naya-page {
	display: flex;
	height: 78vh;
	min-height: 540px;
	border-radius: var(--naya-radius);
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(20, 10, 50, 0.12);
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: var(--naya-bg);
	margin: 8px 0 32px;
}

.naya-sidebar {
	width: 280px;
	flex-shrink: 0;
	background: #16121f;
	color: #e8e5f2;
	display: flex;
	flex-direction: column;
	padding: 16px 12px;
	gap: 12px;
}
.naya-new-chat {
	border: 1px dashed rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	border-radius: 12px;
	padding: 12px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}
.naya-new-chat:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.6); }

.naya-conv-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.naya-conv-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13.5px;
	cursor: pointer;
	color: #bdb7cf;
	transition: background 0.15s, color 0.15s;
}
.naya-conv-item:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.naya-conv-item.naya-active {
	background: color-mix(in srgb, var(--naya-c1) 45%, transparent);
	color: #fff;
}
.naya-conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naya-conv-del {
	background: none; border: none; color: inherit; opacity: 0;
	cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 6px;
	transition: opacity 0.15s, background 0.15s;
}
.naya-conv-item:hover .naya-conv-del { opacity: 0.7; }
.naya-conv-del:hover { opacity: 1 !important; background: rgba(255, 255, 255, 0.15); }
.naya-conv-empty { font-size: 13px; color: #7a7690; text-align: center; padding: 24px 8px; }

.naya-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.naya-header-page .naya-toggle-sidebar { display: none; }

#naya-page .naya-msg { max-width: 70%; font-size: 15px; }

/* --------------------------------------------------------------------------
   Compatibilité thèmes
   Certains thèmes stylent les boutons avec `!important` (position, taille,
   fond, majuscules…), ce qui disloque un widget flottant. On reprend ici la
   main sur les seules propriétés structurelles indispensables, au même
   niveau d'autorité. Tout le reste de la mise en forme vit dans les règles
   normales, plus haut.
   -------------------------------------------------------------------------- */
#naya-widget #naya-launcher {
	position: fixed !important;
	width: 62px !important;
	height: 62px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--naya-grad) !important;
	color: #fff !important;
	box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--naya-c1) 55%, transparent) !important;
}

#naya-widget #naya-teaser {
	position: fixed !important;
	padding: 14px 16px !important;
	background: var(--naya-bg) !important;
	border-radius: 20px !important;
}

#naya-widget #naya-teaser .naya-teaser-close {
	position: absolute !important;
	top: -9px !important;
	right: -9px !important;
	left: auto !important;
	bottom: auto !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	border: 1px solid rgba(20, 10, 50, 0.07) !important;
	border-radius: 50% !important;
	background: var(--naya-bg) !important;
	color: var(--naya-muted) !important;
	font-size: 10px !important;
	box-shadow: 0 3px 10px rgba(20, 10, 50, 0.16) !important;
}

#naya-widget .naya-badge {
	position: absolute !important;
	top: -3px !important;
	right: -3px !important;
	left: auto !important;
	bottom: auto !important;
	padding: 0 6px !important;
	border-radius: 11px !important;
	background: #ef4444 !important;
	color: #fff !important;
	font-size: 12px !important;
}

/* Le bouton « Terminer » porte un libellé : il garde sa largeur naturelle. */
#naya-widget .naya-end-btn,
#naya-page .naya-end-btn {
	position: static !important;
	width: auto !important;
	min-width: 0 !important;
	height: 32px !important;
	padding: 0 12px !important;
	border: none !important;
	border-radius: 10px !important;
	background: linear-gradient(180deg, #ef4444, #dc2626) !important;
	color: #fff !important;
	font-size: 12.5px !important;
	flex-shrink: 0 !important;
}

#naya-widget .naya-header button:not(.naya-end-btn),
#naya-page .naya-header button:not(.naya-end-btn),
#naya-widget .naya-header .naya-expand,
#naya-page .naya-header .naya-expand {
	position: static !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
	font-size: 14px !important;
	box-shadow: none !important;
}
#naya-widget .naya-header .naya-rate-btn,
#naya-page .naya-header .naya-rate-btn { color: #ffd44d !important; font-size: 16px !important; }

#naya-widget .naya-input-bar button[type="submit"],
#naya-page .naya-input-bar button[type="submit"] {
	position: static !important;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 13px !important;
	background: var(--naya-grad) !important;
	color: #fff !important;
	box-shadow: none !important;
}

#naya-widget .naya-sugg,
#naya-page .naya-sugg {
	position: static !important;
	padding: 7px 13px !important;
	border-radius: 999px !important;
	font-size: 12.5px !important;
	background: color-mix(in srgb, var(--naya-c1) 6%, #fff) !important;
	color: var(--naya-c1) !important;
}
#naya-widget .naya-sugg:hover,
#naya-page .naya-sugg:hover { background: var(--naya-c1) !important; color: #fff !important; }

/* Barre : les thèmes ne doivent pas déformer ses contrôles. */
#naya-widget #naya-bar {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--naya-grad) !important;
}
#naya-widget .naya-bar-send,
#naya-widget .naya-bar-toggle,
#naya-widget .naya-bar-minimize,
#naya-widget #naya-tab {
	position: static !important;
	border: none !important;
	box-shadow: none !important;
}
#naya-widget .naya-bar-send { height: 40px !important; padding: 0 18px !important; border-radius: 999px !important; background: #fff !important; color: var(--naya-c1) !important; font-size: 14px !important; }
#naya-widget .naya-bar-toggle,
#naya-widget .naya-bar-minimize { width: 34px !important; height: 34px !important; padding: 0 !important; border-radius: 10px !important; background: rgba(255,255,255,.16) !important; color: #fff !important; font-size: 13px !important; }
#naya-widget .naya-bar-toggle { position: relative !important; }
#naya-widget #naya-tab { position: fixed !important; top: 0 !important; right: 24px !important; padding: 8px 18px !important; border-radius: 0 0 14px 14px !important; background: var(--naya-grad) !important; color: #fff !important; font-size: 13.5px !important; }
#naya-widget .naya-bar-input {
	height: 40px !important;
	padding: 0 16px !important;
	border-radius: 999px !important;
	font-size: 14.5px !important;
	max-width: none !important;
	margin: 0 !important;
}
#naya-widget .naya-panel-tools button:not(.naya-end-btn),
#naya-widget .naya-panel-tools .naya-expand {
	position: static !important;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 9px !important;
	background: var(--naya-surface) !important;
	color: var(--naya-text) !important;
	font-size: 13px !important;
	box-shadow: none !important;
}
#naya-widget .naya-panel-tools .naya-rate-btn { color: #f5b301 !important; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.naya-bar-labels { display: none; }
	.naya-bar-inner { gap: 10px; padding: 8px 12px; }
}
@media (max-width: 600px) {
	.naya-bar-inner { min-height: 52px; }
	.naya-bar-avatar { width: 32px; height: 32px; font-size: 15px; }
	.naya-bar-send-label { display: none; }
	.naya-bar-send { padding: 0 14px !important; }
	.naya-bar-minimize { display: none; }
	.naya-bar-input { font-size: 16px !important; } /* évite le zoom auto iOS */
	/* Feuille plein écran : un liseré du site flouté reste visible en haut,
	   repère rassurant — on n'a pas quitté la page. La hauteur suit la zone
	   réellement visible (--naya-vvh, clavier compris). */
	#naya-panel {
		--naya-gap: max(14px, calc(env(safe-area-inset-top) + 8px));
		top: calc(var(--naya-vvtop, 0px) + var(--naya-gap));
		left: 0;
		right: 0;
		bottom: auto;
		transform: none;
		width: 100%;
		height: calc(100vh - var(--naya-gap));
		height: calc(var(--naya-vvh, 100dvh) - var(--naya-gap));
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -12px 40px -8px rgba(15, 8, 40, 0.45);
		/* « backwards » et non « both » : une fois arrivée, l'animation
		   rend la main au style en ligne qui fait suivre le doigt. */
		animation: naya-sheet-up 0.42s cubic-bezier(0.22, 1.1, 0.36, 1) backwards;
		transition: top 0.2s ease, height 0.2s ease, border-radius 0.2s ease, transform 0.25s ease;
	}
	/* Clavier ouvert : chaque pixel compte, la feuille prend tout. */
	#naya-panel.naya-kbd {
		--naya-gap: 0px;
		border-radius: 0;
	}
	#naya-panel.naya-panel-out { animation: naya-sheet-down 0.26s ease-in forwards; }
	@keyframes naya-sheet-up {
		from { transform: translateY(100%); }
		to { transform: translateY(0); }
	}
	@keyframes naya-sheet-down {
		to { transform: translateY(100%); }
	}

	.naya-panel-head { padding: 4px 14px 10px; }
	.naya-panel-avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 16px; }
	.naya-panel-status { max-width: 42vw; }

	/* Accueil mobile : cartes empilées, pleine largeur, pouce-friendly. */
	.naya-hero { gap: 12px; padding-top: 4px; }
	.naya-hero-orb { width: 60px; height: 60px; border-radius: 20px; font-size: 26px; }
	.naya-hero-text { font-size: 16px; }
	.naya-hero-cards { gap: 8px; }
	#naya-widget .naya-hero-card { flex-basis: 100%; max-width: 100% !important; padding: 15px 16px !important; font-size: 15px !important; }
}
/* --------------------------------------------------------------------------
   Confort mobile
   Feuille de route : plein écran qui suit réellement la hauteur visible
   (clavier compris), poignée de glissement, zones tactiles d'au moins 44 px
   et champ à 16 px pour éviter le zoom automatique d'iOS.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.naya-grabber { display: block; }

	/* 100dvh suit la hauteur réellement visible : la barre d'adresse des
	   navigateurs mobiles ne rogne plus le champ de saisie. */
	#naya-window {
		right: 0; left: 0; bottom: 0;
		width: 100%; height: 100dvh;
		max-width: 100%; max-height: 100dvh;
		border-radius: 0;
		animation: naya-sheet-in 0.34s cubic-bezier(0.32, 1.2, 0.5, 1);
	}
	@supports not (height: 100dvh) {
		#naya-window { height: 100vh; max-height: 100vh; }
	}

	@keyframes naya-sheet-in {
		from { opacity: 0.6; transform: translateY(100%); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* Glissement vers le bas : le panneau suit le doigt. */
	/* Pas de « animation: none » ici : en la retirant au lâcher, le
	   navigateur rejouerait l'animation d'ouverture. */
	#naya-window.naya-dragging,
	#naya-panel.naya-dragging { transition: none; }
	#naya-window.naya-sheet-out,
	#naya-panel.naya-sheet-out {
		animation: naya-sheet-out 0.24s ease-in forwards;
	}
	@keyframes naya-sheet-out {
		to { opacity: 0.5; transform: translateY(100%); }
	}

	/* En-tête épuré : sur un petit écran, « Terminer » et « Réduire » suffisent.
	   L'étoile fait doublon (la notation est proposée à la clôture) et le
	   plein écran n'a aucun sens quand on y est déjà. */
	.naya-header .naya-rate-btn,
	.naya-header .naya-expand,
	.naya-panel-tools .naya-rate-btn,
	.naya-panel-tools .naya-expand {
		display: none !important;
	}

	/* Cibles tactiles confortables */
	.naya-header .naya-close,
	.naya-panel-tools button:not(.naya-end-btn) {
		width: 40px !important;
		height: 40px !important;
	}
	.naya-header { gap: 10px; }
	#naya-widget .naya-end-btn,
	#naya-page .naya-end-btn {
		height: 38px !important;
		padding: 0 14px !important;
		font-size: 13px !important;
		margin-left: auto !important;
	}

	/* La zone de saisie reste au-dessus de la barre système. */
	.naya-input-bar {
		padding-bottom: calc(12px + env(safe-area-inset-bottom));
	}
	.naya-input-bar textarea {
		font-size: 16px; /* en-dessous, iOS zoome automatiquement */
		padding: 12px 14px;
	}
	.naya-input-bar button[type="submit"] {
		width: 46px !important;
		height: 46px !important;
	}

	/* Suggestions : défilement horizontal plutôt qu'un pavé qui pousse le fil. */
	.naya-suggestions {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 10px;
		-webkit-overflow-scrolling: touch;
	}
	.naya-suggestions::-webkit-scrollbar { display: none; }
	.naya-sugg { flex-shrink: 0; font-size: 13.5px; padding: 9px 15px; }

	.naya-msg { max-width: 88%; font-size: 15px; }
	.naya-footer-brand { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
	#naya-launcher { right: 16px; bottom: 16px; }
	#naya-teaser { right: 16px; bottom: 90px; }
}

@media (max-width: 768px) {
	#naya-page { height: 82vh; }
	.naya-sidebar {
		position: absolute;
		z-index: 5;
		height: 100%;
		transform: translateX(-100%);
		transition: transform 0.28s ease;
	}
	#naya-page { position: relative; }
	#naya-page.naya-sidebar-open .naya-sidebar { transform: translateX(0); }
	.naya-header-page .naya-toggle-sidebar { display: flex; }
	#naya-page .naya-msg { max-width: 85%; }
}