/**
 * Elio — Assistant Gastronomaniak
 * Palette alignée sur le site : terracotta, safran, crème, cacao.
 */

#elio-root {
	--elio-terracotta: var(--g-primary, #C4562A);
	--elio-safran:     var(--g-accent, #D48608);
	--elio-creme:      #FAF6F0;
	--elio-cacao:      #2C2013;
	--elio-ardoise:    #5B5147;
	--elio-serif:      var(--g-font-serif, Georgia, "Times New Roman", serif);

	position: fixed;
	right: 1.25em;
	bottom: 1.25em;
	z-index: 99999;
	font-size: 16px;
	line-height: 1.5;
}

#elio-root *,
#elio-root *::before,
#elio-root *::after { box-sizing: border-box; }

/* ---------- Lanceur ---------- */

.elio-lanceur {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .75em 1.25em .75em .9em;
	border: 0;
	border-radius: 999px;
	background: var(--elio-terracotta);
	color: #FFFFFF;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 .5em 1.5em rgba(44, 32, 19, .28);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.elio-lanceur:hover,
.elio-lanceur:focus-visible {
	background: #B34A22;
	transform: translateY(-2px);
	box-shadow: 0 .75em 1.75em rgba(44, 32, 19, .34);
}
.elio-lanceur:focus-visible { outline: 3px solid var(--elio-safran); outline-offset: 3px; }
.elio-lanceur svg { width: 1.5em; height: 1.5em; fill: var(--elio-safran); }
.elio--ouvert .elio-lanceur { display: none; }

/* ---------- Panneau ---------- */

/* Fermé par défaut : le visiteur choisit d'ouvrir Elio.
   Cette règle doit précéder .elio-panneau, sinon `display: flex` l'emporte
   sur l'attribut `hidden` et le panneau reste visible au chargement. */
.elio-panneau[hidden] { display: none !important; }

.elio-panneau {
	display: flex;
	flex-direction: column;
	width: min(340px, calc(100vw - 32px));
	height: min(520px, calc(100vh - 96px));
	background: var(--elio-creme);
	border-radius: 1.125em;
	overflow: hidden;
	box-shadow: 0 1.5em 3em rgba(44, 32, 19, .32);
	animation: elio-apparait .18s ease-out;
}
@keyframes elio-apparait {
	from { opacity: 0; transform: translateY(.75em); }
	to   { opacity: 1; transform: none; }
}

/* ---------- En-tête ---------- */

.elio-entete {
	display: flex;
	align-items: center;
	gap: .75em;
	padding: .875em 1em;
	background: var(--elio-terracotta);
	color: #FFFFFF;
	flex: none;
}
.elio-avatar {
	display: grid;
	place-items: center;
	width: 2.25em;
	height: 2.25em;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	flex: none;
}
.elio-avatar svg { width: 1.375em; height: 1.375em; fill: var(--elio-safran); }
.elio-entete__txt { display: flex; flex-direction: column; line-height: 1.25; }
.elio-entete__txt strong { font-family: var(--elio-serif); font-size: 1.0625em; }
.elio-entete__txt span { font-size: .75em; color: rgba(255, 255, 255, .78); }

.elio-fermer {
	margin-left: auto;
	width: 2em;
	height: 2em;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #FFFFFF;
	cursor: pointer;
	flex: none;
}
.elio-fermer:hover { background: rgba(255, 255, 255, .16); }
.elio-fermer:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.elio-fermer svg { width: 1.125em; height: 1.125em; }

/* ---------- Fil de discussion ---------- */

.elio-flux {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: .625em;
}

.elio-msg {
	max-width: 88%;
	padding: .75em .9em;
	border-radius: 1em;
	font-size: .9375em;
	word-wrap: break-word;
}
.elio-msg p { margin: 0 0 .625em; }
.elio-msg p:last-child { margin-bottom: 0; }
.elio-msg ul { margin: 0 0 .625em; padding-left: 1.1em; }
.elio-msg li { margin-bottom: .3em; }
.elio-msg a { color: var(--elio-terracotta); font-weight: 600; }
.elio-msg a:hover { text-decoration: underline; }

.elio-msg--elio {
	align-self: flex-start;
	background: #FFFFFF;
	color: var(--elio-cacao);
	border-bottom-left-radius: .3em;
	box-shadow: 0 1px 2px rgba(44, 32, 19, .08);
}
.elio-msg--visiteur {
	align-self: flex-end;
	background: var(--elio-terracotta);
	color: #FFFFFF;
	border-bottom-right-radius: .3em;
}

/* ---------- Puces de suggestion ---------- */

.elio-puces { margin-top: .25em; }
.elio-puces__titre {
	margin: 0 0 .4em;
	font-size: .6875em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--elio-ardoise);
}
.elio-puces__liste { display: flex; flex-wrap: wrap; gap: .375em; }
.elio-puce {
	padding: .45em .75em;
	border: 1px solid rgba(196, 86, 42, .35);
	border-radius: 999px;
	background: transparent;
	color: var(--elio-terracotta);
	font: inherit;
	font-size: .8125em;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.elio-puce:hover,
.elio-puce:focus-visible { background: var(--elio-terracotta); color: #FFFFFF; }
.elio-puce:focus-visible { outline: 2px solid var(--elio-safran); outline-offset: 2px; }

/* ---------- Saisie ---------- */

.elio-saisie {
	display: flex;
	gap: .5em;
	padding: .75em;
	border-top: 1px solid rgba(44, 32, 19, .1);
	background: #FFFFFF;
	flex: none;
}
.elio-saisie input {
	flex: 1;
	min-width: 0;
	padding: .625em .875em;
	border: 1px solid rgba(44, 32, 19, .18);
	border-radius: 999px;
	background: var(--elio-creme);
	color: var(--elio-cacao);
	font: inherit;
	font-size: .9375em;
}
.elio-saisie input:focus-visible {
	outline: 2px solid var(--elio-terracotta);
	outline-offset: 1px;
}
.elio-envoyer {
	display: grid;
	place-items: center;
	width: 2.5em;
	height: 2.5em;
	border: 0;
	border-radius: 50%;
	background: var(--elio-safran);
	color: var(--elio-cacao);
	cursor: pointer;
	flex: none;
	transition: background-color .15s ease;
}
.elio-envoyer:hover { background: #E39A18; }
.elio-envoyer:focus-visible { outline: 2px solid var(--elio-terracotta); outline-offset: 2px; }
.elio-envoyer svg { width: 1.125em; height: 1.125em; fill: currentColor; }

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
	#elio-root { right: .75em; bottom: .75em; left: .75em; }
	.elio-lanceur { float: right; }
	.elio-panneau {
		width: 100%;
		height: min(72vh, 480px);
	}
	.elio-lanceur__txt { display: none; }
	.elio-lanceur { padding: .8em; }
}

/* ---------- Préférences d'accessibilité ---------- */

@media (prefers-reduced-motion: reduce) {
	.elio-lanceur, .elio-puce, .elio-envoyer { transition: none; }
	.elio-lanceur:hover { transform: none; }
	.elio-panneau { animation: none; }
}