/* Mirage Assistant — styles isolés du thème (Divi, Elementor…)
 * Tout le visuel passe par les variables ci-dessous ; les classes mia-shape-*, mia-size-*,
 * mia-theme-*, mia-head-*, mia-launch-* et mia-font-* posées sur .mia-root les font varier.
 */
.mia-root {
	/* Couleurs */
	--mia-color: #1e5bd8;
	--mia-on-color: #ffffff;
	--mia-accent: var(--mia-color);
	--mia-ink: #1b1f24;
	--mia-muted: #5f6670;
	--mia-bg: #ffffff;
	--mia-soft: #f2f4f7;
	--mia-line: #e3e6ea;
	--mia-field: #ffffff;
	--mia-shadow: rgba(15, 23, 42, .28);
	/* Formes (très arrondi par défaut) */
	--mia-r-panel: 20px;
	--mia-r-bubble: 18px;
	--mia-r-tail: 5px;
	--mia-r-btn: 999px;
	--mia-r-input: 12px;
	--mia-r-launch: 999px;
	/* Taille (standard par défaut) */
	--mia-w: 370px;
	--mia-h: 580px;
	--mia-fs: 15px;
	--mia-launch: 62px;
	--mia-avatar: 40px;

	position: fixed;
	bottom: 20px;
	z-index: 2147483000;
	font: var(--mia-fs)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--mia-ink);
	-webkit-font-smoothing: antialiased;
}
.mia-root.mia-font-theme { font-family: inherit; }
.mia-root.mia-pos-right { right: 20px; }
.mia-root.mia-pos-left { left: 20px; }
.mia-root *, .mia-root *::before, .mia-root *::after { box-sizing: border-box; }
.mia-root [hidden] { display: none !important; }
.mia-root button, .mia-root input, .mia-root textarea {
	font: inherit; color: inherit; letter-spacing: normal; text-transform: none; margin: 0;
}
.mia-root button { cursor: pointer; background: none; border: 0; padding: 0; line-height: inherit; box-shadow: none; min-height: 0; }
.mia-root a { color: var(--mia-accent); }

/* ---------- Variantes ---------- */

.mia-root.mia-shape-soft { --mia-r-panel: 12px; --mia-r-bubble: 10px; --mia-r-tail: 3px; --mia-r-btn: 8px; --mia-r-input: 8px; }
.mia-root.mia-shape-square { --mia-r-panel: 4px; --mia-r-bubble: 4px; --mia-r-tail: 4px; --mia-r-btn: 3px; --mia-r-input: 3px; --mia-r-launch: 6px; }

.mia-root.mia-size-compact { --mia-w: 330px; --mia-h: 500px; --mia-fs: 14px; --mia-launch: 54px; --mia-avatar: 34px; }

.mia-root.mia-theme-dark {
	--mia-ink: #eef0f3; --mia-muted: #a3a9b3; --mia-bg: #22262c; --mia-soft: #16191d;
	--mia-line: #3a4048; --mia-field: #2b3037; --mia-shadow: rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
	.mia-root.mia-theme-auto {
		--mia-ink: #eef0f3; --mia-muted: #a3a9b3; --mia-bg: #22262c; --mia-soft: #16191d;
		--mia-line: #3a4048; --mia-field: #2b3037; --mia-shadow: rgba(0, 0, 0, .55);
	}
}

/* ---------- Bouton flottant ---------- */

.mia-launcher {
	position: relative; display: flex !important; align-items: center; gap: 10px;
	height: var(--mia-launch); min-width: var(--mia-launch);
	border-radius: var(--mia-r-launch) !important;
	background: var(--mia-bg) !important; padding: 3px !important;
	box-shadow: 0 6px 20px var(--mia-shadow), 0 0 0 3px var(--mia-color) !important;
	transition: transform .18s ease;
}
.mia-launcher:hover { transform: translateY(-2px); }
.mia-launcher:focus-visible { outline: 3px solid var(--mia-accent); outline-offset: 4px; }
.mia-pos-right .mia-launcher { margin-left: auto; }
.mia-launch-avatar .mia-launcher { width: var(--mia-launch); }
.mia-launcher .mia-avatar { height: 100%; width: auto; aspect-ratio: 1; }
.mia-launch-text { display: none; }
.mia-launch-pill .mia-launcher { padding: 4px 20px 4px 4px !important; background: var(--mia-color) !important; box-shadow: 0 6px 20px var(--mia-shadow) !important; }
.mia-launch-pill .mia-launch-text { display: block; color: var(--mia-on-color); font-weight: 650; font-size: 1em; white-space: nowrap; }
.mia-launch-pill .mia-launcher .mia-avatar { box-shadow: 0 0 0 2px var(--mia-on-color); }
.mia-launch-pill .mia-online { left: calc(var(--mia-launch) - 18px); right: auto; }
.mia-online {
	position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%;
	background: #22c55e; border: 2px solid var(--mia-bg);
}

.mia-avatar {
	display: flex; align-items: center; justify-content: center; flex: none;
	border-radius: 50%; background: var(--mia-color) center / cover no-repeat;
	color: var(--mia-on-color); font-weight: 700; overflow: hidden;
}
.mia-launcher .mia-avatar { font-size: calc(var(--mia-launch) * .38); }
.mia-avatar-md { width: var(--mia-avatar); height: var(--mia-avatar); font-size: calc(var(--mia-avatar) * .42); }

/* ---------- Accroche ---------- */

.mia-teaser {
	position: absolute; bottom: calc(var(--mia-launch) + 14px); width: max-content; max-width: 250px;
	display: flex; align-items: flex-start; gap: 4px;
	background: var(--mia-bg); border-radius: var(--mia-r-bubble); padding: 10px 8px 10px 14px;
	box-shadow: 0 8px 28px var(--mia-shadow);
	animation: mia-pop .25s ease-out;
}
.mia-pos-right .mia-teaser { right: 4px; border-bottom-right-radius: var(--mia-r-tail); }
.mia-pos-left .mia-teaser { left: 4px; border-bottom-left-radius: var(--mia-r-tail); }
.mia-teaser-text { text-align: left; font-size: .94em !important; color: var(--mia-ink) !important; }
.mia-teaser-close {
	width: 22px; height: 22px; border-radius: 50%; flex: none;
	color: var(--mia-muted) !important; font-size: 18px !important; line-height: 22px !important; text-align: center;
}
.mia-teaser-close:hover { background: var(--mia-soft) !important; }

/* ---------- Fenêtre ---------- */

.mia-panel {
	position: absolute; bottom: calc(var(--mia-launch) + 16px);
	width: var(--mia-w); height: min(var(--mia-h), calc(100vh - 120px));
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--mia-bg); border-radius: var(--mia-r-panel);
	box-shadow: 0 18px 50px var(--mia-shadow);
	opacity: 0; transform: translateY(12px) scale(.98);
	transition: opacity .2s ease, transform .2s ease;
}
.mia-pos-right .mia-panel { right: 0; transform-origin: bottom right; }
.mia-pos-left .mia-panel { left: 0; transform-origin: bottom left; }
.mia-root.is-open .mia-panel { opacity: 1; transform: none; }

.mia-head {
	display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px;
	background: var(--mia-color); color: var(--mia-c-head-text, var(--mia-on-color));
}
.mia-head-gradient .mia-head {
	background: linear-gradient(135deg, var(--mia-color) 0%, color-mix(in srgb, var(--mia-color) 55%, #000) 100%);
}
.mia-head-light .mia-head {
	background: var(--mia-bg); color: var(--mia-c-head-text, var(--mia-ink));
	border-bottom: 1px solid var(--mia-line); border-top: 4px solid var(--mia-color);
}
.mia-head .mia-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--mia-on-color) 70%, transparent); }
.mia-head-light .mia-head .mia-avatar { box-shadow: none; }
.mia-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mia-head-text strong { font-size: 1.07em; font-weight: 650; color: inherit; }
.mia-head-text span { font-size: .84em; opacity: .85; }
.mia-head-light .mia-head-text span { color: var(--mia-muted); opacity: 1; }
.mia-icon-btn {
	width: 34px; height: 34px; border-radius: var(--mia-r-input) !important; color: inherit !important;
	display: inline-flex !important; align-items: center; justify-content: center; opacity: .9;
}
.mia-icon-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent) !important; opacity: 1; }
.mia-icon-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }

.mia-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--mia-c-window, var(--mia-soft)); }
.mia-log { flex: 1; overflow-y: auto; padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }

.mia-msg { display: flex; animation: mia-in .22s ease-out; }
.mia-bot { justify-content: flex-start; }
.mia-user { justify-content: flex-end; }
.mia-bubble { max-width: 85%; padding: 10px 14px; border-radius: var(--mia-r-bubble); overflow-wrap: anywhere; }
.mia-bot .mia-bubble { background: var(--mia-c-bot-bg, var(--mia-bg)); color: var(--mia-c-bot-text, var(--mia-ink)); border-bottom-left-radius: var(--mia-r-tail); box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.mia-user .mia-bubble { background: var(--mia-c-user-bg, var(--mia-color)); color: var(--mia-c-user-text, var(--mia-on-color)); border-bottom-right-radius: var(--mia-r-tail); }
.mia-bubble a.mia-strong-link { font-weight: 650; white-space: nowrap; }
.mia-msg-form .mia-bubble { width: 100%; max-width: 100%; }

.mia-typing .mia-bubble { display: inline-flex; gap: 4px; padding: 13px 14px; }
.mia-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mia-muted); animation: mia-dot 1s infinite ease-in-out; }
.mia-typing i:nth-child(2) { animation-delay: .15s; }
.mia-typing i:nth-child(3) { animation-delay: .3s; }

/* ---------- Choix ---------- */

.mia-choices { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 6px 14px 16px; }
.mia-choices:empty { padding: 0 0 8px; }
.mia-choice {
	padding: 9px 14px !important; border-radius: var(--mia-r-btn) !important;
	background: var(--mia-bg) !important; color: var(--mia-c-btn, var(--mia-accent)) !important;
	border: 1.5px solid var(--mia-c-btn, var(--mia-accent)) !important; font-weight: 550; font-size: .94em !important;
	text-align: left; transition: background .15s, color .15s;
	animation: mia-in .22s ease-out both;
}
.mia-theme-dark .mia-choice { color: var(--mia-c-btn, var(--mia-ink)) !important; border-color: var(--mia-c-btn, var(--mia-color)) !important; }
.mia-theme-dark a { color: var(--mia-color); }
@media (prefers-color-scheme: dark) { .mia-theme-auto .mia-choice { color: var(--mia-c-btn, var(--mia-ink)) !important; border-color: var(--mia-c-btn, var(--mia-color)) !important; } .mia-theme-auto a { color: var(--mia-color); } }
.mia-choice:hover { background: var(--mia-c-btn, var(--mia-color)) !important; color: var(--mia-c-btn-on, var(--mia-on-color)) !important; }
.mia-choice:focus-visible { outline: 2px solid var(--mia-accent); outline-offset: 2px; }

/* ---------- Formulaires ---------- */

.mia-form { display: grid; gap: 10px; }
.mia-f label { display: block; font-size: .87em; font-weight: 600; margin-bottom: 4px; color: var(--mia-ink); }
.mia-f input, .mia-f textarea {
	display: block; width: 100% !important; padding: 9px 11px !important; border-radius: var(--mia-r-input) !important;
	border: 1px solid var(--mia-line) !important; background: var(--mia-field) !important; color: var(--mia-ink) !important;
	font-size: 1em !important; box-shadow: none !important; height: auto !important;
}
.mia-f input::placeholder, .mia-f textarea::placeholder { color: var(--mia-muted); opacity: .8; }
.mia-f input:focus, .mia-f textarea:focus { border-color: var(--mia-color) !important; outline: 2px solid color-mix(in srgb, var(--mia-color) 25%, transparent); outline-offset: 0; }
.mia-f textarea { resize: vertical; min-height: 76px; }
.mia-consent { display: flex; gap: 8px; align-items: flex-start; font-size: .84em; line-height: 1.4; color: var(--mia-ink); cursor: pointer; }
.mia-consent input { flex: none; width: 17px; height: 17px; margin: 1px 0 0 !important; accent-color: var(--mia-color); }
.mia-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mia-form-foot { display: flex; align-items: center; gap: 10px; }
.mia-submit {
	padding: 10px 18px !important; border-radius: var(--mia-r-btn) !important; background: var(--mia-color) !important;
	color: var(--mia-on-color) !important; font-weight: 650;
}
.mia-submit:disabled { opacity: .6; cursor: wait; }
.mia-cancel { color: var(--mia-muted) !important; font-size: .94em !important; text-decoration: underline; }
.mia-form-error { margin: 0; color: #d92d20; font-size: .9em; }
.mia-privacy { margin: 0; color: var(--mia-muted); font-size: .8em; line-height: 1.4; }

@keyframes mia-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes mia-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mia-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- Aperçu dans les Réglages ---------- */

.mia-root.mia-preview { position: absolute; bottom: 16px; z-index: 1; }
.mia-root.mia-preview.mia-pos-right { right: 16px; }
.mia-root.mia-preview.mia-pos-left { left: 16px; }
.mia-root.mia-preview .mia-panel { height: min(var(--mia-h), 520px); }

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

@media (max-width: 480px) {
	.mia-root:not(.mia-preview) { bottom: 14px; }
	.mia-root:not(.mia-preview).mia-pos-right { right: 14px; }
	.mia-root:not(.mia-preview).mia-pos-left { left: 14px; }
	.mia-root:not(.mia-preview) { --mia-launch: 56px; }
	.mia-root:not(.mia-preview) .mia-panel {
		position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto;
		height: min(640px, calc(100dvh - 16px));
	}
	.mia-root.is-open:not(.mia-preview) .mia-launcher, .mia-root.is-open:not(.mia-preview) .mia-teaser { display: none !important; }
	.mia-launch-pill .mia-launch-text { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
	.mia-f input, .mia-f textarea { font-size: 16px !important; } /* évite le zoom iOS */
}
@media (max-width: 640px) {
	.mia-root.mia-hide-mobile:not(.mia-preview) { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.mia-root *, .mia-root *::before, .mia-root *::after { animation: none !important; transition: none !important; }
}
@media print { .mia-root { display: none !important; } }

/* Mention « Propulsé par » */
.mia-credit { display: block; flex: none; text-align: center; font-size: 11.5px !important; line-height: 1.3; color: var(--mia-muted) !important; opacity: .8; padding: 0 12px 10px; text-decoration: none !important; }
.mia-credit b { font-weight: 600; }
.mia-credit:hover { opacity: 1; }
.mia-credit:hover b { color: var(--mia-accent); }
.mia-credit[hidden] { display: none !important; }

/* ---------- Liste déroulante ---------- */

.mia-select { width: 100%; display: flex; flex-direction: column; gap: 6px; animation: mia-in .22s ease-out both; }
.mia-select-btn {
	display: flex !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
	padding: 11px 14px !important; border-radius: var(--mia-r-input) !important;
	background: var(--mia-bg) !important; color: var(--mia-ink) !important; text-align: left;
	border: 1.5px solid var(--mia-accent) !important; font-weight: 550; font-size: .94em !important;
}
.mia-select-btn i { display: inline-flex; color: var(--mia-accent); transition: transform .18s ease; }
.mia-select.is-open .mia-select-btn i { transform: rotate(180deg); }
.mia-select-btn:focus-visible { outline: 2px solid var(--mia-accent); outline-offset: 2px; }
.mia-select-pop {
	background: var(--mia-bg); border: 1px solid var(--mia-line); border-radius: var(--mia-r-input);
	box-shadow: 0 6px 18px rgba(15, 23, 42, .1); overflow: hidden; animation: mia-in .16s ease-out both;
}
.mia-root .mia-select-search {
	display: block; width: 100% !important; padding: 10px 12px !important; border: 0 !important; height: auto !important;
	border-bottom: 1px solid var(--mia-line) !important; background: var(--mia-field) !important; color: var(--mia-ink) !important;
	font-size: .94em !important; box-shadow: none !important; outline: none; border-radius: 0 !important;
}
.mia-select-list { max-height: 210px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; }
.mia-root .mia-select-opt {
	display: block; flex: none; width: 100%; text-align: left; padding: 9px 10px !important; border-radius: calc(var(--mia-r-input) - 4px) !important; line-height: 1.35 !important;
	color: var(--mia-ink) !important; font-size: .94em !important;
}
.mia-root .mia-select-opt:hover, .mia-root .mia-select-opt:focus-visible { background: color-mix(in srgb, var(--mia-color) 12%, var(--mia-bg)) !important; outline: none; }
.mia-select-empty { margin: 0; padding: 10px 12px; color: var(--mia-muted); font-size: .9em; }

/* ---------- Passage à un collègue ---------- */

.mia-sys { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--mia-muted); font-size: .8em; animation: mia-in .22s ease-out; }
.mia-sys::before, .mia-sys::after { content: ""; flex: 1; height: 1px; background: var(--mia-line); }
.mia-sys span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.mia-root .mia-choice-back { border-style: dashed !important; border-color: var(--mia-line) !important; color: var(--mia-muted) !important; font-weight: 500; }
.mia-root .mia-choice-back:hover { background: var(--mia-soft) !important; color: var(--mia-ink) !important; }
.mia-head .mia-avatar, .mia-head-text { transition: opacity .2s ease; }

@media (max-width: 480px) { .mia-root .mia-select-search { font-size: 16px !important; } }

/* ---------- Horaires ---------- */
.mia-head-status { display: inline-flex; align-items: center; gap: 5px; font-size: .78em !important; opacity: .95 !important; margin-top: 2px; }
.mia-head-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: none; }
.mia-head-status.is-closed::before { background: #9ca3af; }
.mia-root.is-closed .mia-online { background: #9ca3af; }
.mia-closed-note { align-self: stretch; margin: 0 0 4px; padding: 9px 12px; border-radius: var(--mia-r-input); background: color-mix(in srgb, #f59e0b 14%, var(--mia-bg)); color: var(--mia-ink); font-size: .86em; line-height: 1.4; border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent); animation: mia-in .22s ease-out; }

/* ---------- Style des boutons de choix ---------- */
.mia-root .mia-choice { display: inline-flex; align-items: center; gap: 6px; }
.mia-root .mia-choice svg { flex: none; }
.mia-root .mia-choice.mia-tone-primary { background: var(--mia-c-btn, var(--mia-color)) !important; color: var(--mia-c-btn-on, var(--mia-on-color)) !important; border-color: var(--mia-c-btn, var(--mia-color)) !important; }
.mia-root .mia-choice.mia-tone-primary:hover { filter: brightness(.92); }
.mia-root .mia-choice.mia-tone-urgent { background: #dc2626 !important; color: #fff !important; border-color: #dc2626 !important; font-weight: 650; }
.mia-root .mia-choice.mia-tone-urgent:hover { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
.mia-root .mia-choice.mia-tone-soft { background: var(--mia-soft) !important; color: var(--mia-muted) !important; border-color: var(--mia-line) !important; font-weight: 500; }
.mia-root .mia-choice.mia-tone-soft:hover { background: var(--mia-line) !important; color: var(--mia-ink) !important; }
.mia-root .mia-choice.mia-tone-custom { color: var(--mia-tone) !important; border-color: var(--mia-tone) !important; }
.mia-root .mia-choice.mia-tone-custom:hover, .mia-root .mia-choice.mia-tone-custom.is-fill { background: var(--mia-tone) !important; color: var(--mia-tone-on) !important; }
.mia-root .mia-choice.mia-tone-custom.is-fill:hover { filter: brightness(.92); }
.mia-opt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--mia-color); }
.mia-select-opt.mia-tone-urgent .mia-opt-dot { background: #dc2626; }
.mia-select-opt.mia-tone-soft .mia-opt-dot { background: var(--mia-line); }
.mia-root .mia-select-opt.mia-tone-urgent { font-weight: 650; }

/* Bouton d'appel sur téléphone */
.mia-root .mia-call-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 12px 16px; border-radius: var(--mia-r-btn); background: #16a34a; color: #fff !important; font-weight: 650; text-decoration: none !important; }
.mia-root .mia-call-btn:hover, .mia-root .mia-call-btn:focus-visible { background: #15803d; outline: none; }

/* Styles de la mention */
.mia-root .mia-credit img { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; vertical-align: -3px; margin-right: 5px; display: inline-block; }
.mia-root .mia-credit-color b { color: var(--mia-accent); }
.mia-root .mia-credit-color { opacity: 1; }
.mia-root .mia-credit-badge { display: table; margin: 0 auto 10px; padding: 3px 11px; border-radius: 99px; background: color-mix(in srgb, var(--mia-ink) 6%, transparent); opacity: 1; }
.mia-root .mia-credit-badge:hover { background: color-mix(in srgb, var(--mia-color) 12%, transparent); }
.mia-root .mia-credit-logo { opacity: .9; }
/* Mention personnalisée : fond, couleur, police */
.mia-root .mia-credit.has-bg { display: table; margin: 0 auto 10px; padding: 3px 11px; border-radius: 99px; background: var(--mia-credit-bg); opacity: 1; }
.mia-root .mia-credit.has-color, .mia-root .mia-credit.has-color b { color: var(--mia-credit-ink) !important; opacity: 1; }

/* Faire préciser */
.mia-text-form { display: flex; gap: 8px; width: 100%; animation: mia-in .22s ease-out both; }
.mia-root .mia-text-input { flex: 1; min-width: 0; padding: 10px 14px !important; border-radius: var(--mia-r-btn) !important; border: 1.5px solid var(--mia-accent) !important; background: var(--mia-field) !important; color: var(--mia-ink) !important; font-size: .95em !important; height: auto !important; box-shadow: none !important; }
.mia-root .mia-text-input:focus { outline: 2px solid color-mix(in srgb, var(--mia-color) 25%, transparent); }
.mia-root .mia-text-send { flex: none; width: 42px; height: 42px; border-radius: 50% !important; background: var(--mia-color) !important; color: var(--mia-on-color) !important; display: inline-flex !important; align-items: center; justify-content: center; }
@media (max-width: 480px) { .mia-root .mia-text-input { font-size: 16px !important; } }