/* ============================================================================
   WIZARD CONVERSATIONNEL — styles COMMUNS au wizard d'onboarding
   (Views/Onboarding/Index.cshtml) et à la landing /essai (Views/Home/Essai.cshtml).
   Source de vérité : l'ancien bloc <style> d'Onboarding (les deux vues avaient
   la même copie). Les règles SPÉCIFIQUES à une vue restent dans son <style>
   (Onboarding : logo uploader, alias pill, récap, gob-loader… ; Essai :
   .wiz-points, sa variante .wiz-error). Charger ce fichier AVANT le <style>
   local pour que les surcharges de la vue gardent la main.
   ============================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #0f172a;
	min-height: 100vh;
	overflow-x: hidden;
}

.wiz-background { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; background: #f7f7f4; }

.wiz-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 28px;
	border-bottom: 1px solid rgba(15,23,42,.06);
	background: rgba(255,255,255,.7);
	backdrop-filter: blur(8px);
	position: fixed;
	top: 0;
	z-index: 10;
	width: 100vw;
}

.wiz-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; }

.wiz-brand .spark {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg,#1D9E75,#85d192);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
}

.wiz-progress { flex: 1; max-width: 280px; margin: 0 24px; height: 6px; border-radius: 99px; background: rgba(29,158,117,.12); overflow: hidden; }

.wiz-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg,#1D9E75,#85d192); border-radius: 99px; transition: width .5s cubic-bezier(.25,.46,.45,.94); }

.wiz-back { display: inline-flex; align-items: center; gap: 8px; color: #64748b; font-size: 13px; text-decoration: none; transition: color .15s; padding: 8px 12px; border-radius: 6px; }
.wiz-back:hover { color: #0f172a; background: rgba(15,23,42,.04); }

.wiz-chat { max-width: 760px; margin: 0 auto; padding: 130px 24px 200px; min-height: calc(100vh - 70px); }

.wiz-bubble {
	display: flex;
	gap: 16px;
	margin-bottom: 28px;
	align-items: flex-start;
	opacity: 0;
	transform: translateY(8px);
	animation: bubbleIn .45s cubic-bezier(.22,1,.36,1) forwards;
}
.wiz-bubble.from-user { flex-direction: row-reverse; }

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

.wiz-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.wiz-bubble.from-ai .wiz-avatar { background: linear-gradient(135deg,#1D9E75,#85d192); color: #fff; box-shadow: 0 6px 20px rgba(29,158,117,.25); }
.wiz-bubble.from-user .wiz-avatar { background: #f1f5f9; color: #475569; }

.wiz-bubble-content { background: #fff; border: 1px solid rgba(15,23,42,.06); padding: 16px 20px; border-radius: 18px; max-width: calc(100% - 56px); box-shadow: 0 1px 3px rgba(15,23,42,.04); }
.wiz-bubble.from-ai .wiz-bubble-content { border-top-left-radius: 4px; }
.wiz-bubble.from-user .wiz-bubble-content { border-top-right-radius: 4px; background: linear-gradient(135deg,#0f172a,#1e293b); color: #fff; border-color: transparent; }
.wiz-bubble-content h3 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; line-height: 1.3; margin-bottom: 6px; letter-spacing: -.01em; }
.wiz-bubble-content p { font-size: 14px; line-height: 1.55; color: #475569; }
.wiz-bubble.from-user .wiz-bubble-content p { color: rgba(255,255,255,.92); font-size: 14px; white-space: pre-wrap; }

/* RC-20260824 Apparition ANIMÉE de la zone de saisie et des grilles de choix (demande Romain) :
   même vocabulaire de mouvement que les bulles (glissement + fondu), cartes en léger décalé. */
.wiz-input-area { margin-top: 12px; padding-left: 56px; display: flex; flex-direction: column; gap: 10px; animation: wizAreaIn .32s cubic-bezier(.22,1,.36,1) both; }

@keyframes wizAreaIn {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.wiz-da-grid .wiz-da-card { animation: wizAreaIn .34s cubic-bezier(.22,1,.36,1) both; }
.wiz-da-grid .wiz-da-card:nth-child(2) { animation-delay: .04s; }
.wiz-da-grid .wiz-da-card:nth-child(3) { animation-delay: .08s; }
.wiz-da-grid .wiz-da-card:nth-child(4) { animation-delay: .12s; }
.wiz-da-grid .wiz-da-card:nth-child(5) { animation-delay: .16s; }
.wiz-da-grid .wiz-da-card:nth-child(6) { animation-delay: .20s; }
.wiz-da-grid .wiz-da-card:nth-child(7) { animation-delay: .24s; }
.wiz-da-grid .wiz-da-card:nth-child(8) { animation-delay: .28s; }

.wiz-input {
	width: 100%;
	padding: 16px 20px;
	border: 2px solid rgba(15,23,42,.08);
	border-radius: 14px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
	outline: none;
	resize: none;
}
.wiz-input:focus { border-color: #1D9E75; box-shadow: 0 0 0 4px rgba(29,158,117,.1); }
.wiz-input::placeholder { color: #94a3b8; font-style: italic; }
.wiz-input.wiz-textarea { min-height: 120px; line-height: 1.55; }

.wiz-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}

.wiz-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

.wiz-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 10px;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
}
.wiz-btn.primary { background: linear-gradient(135deg,#1D9E75,#85d192); color: #fff; box-shadow: 0 4px 12px rgba(29,158,117,.3); }
.wiz-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,158,117,.4); }
.wiz-btn.primary:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.wiz-btn.ghost { background: transparent; color: #64748b; }
.wiz-btn.ghost:hover { color: #0f172a; background: rgba(15,23,42,.04); }
.wiz-btn.secondary { background: #f1f5f9; color: #0f172a; border: 1px solid rgba(15,23,42,.06); }
.wiz-btn.secondary:hover { background: #e2e8f0; }

.wiz-da-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; margin-top: 4px; }

.wiz-da-card {
	background: #fff;
	border: 2px solid rgba(15,23,42,.08);
	border-radius: 14px;
	padding: 14px;
	cursor: pointer;
	text-align: left;
	transition: all .18s;
	font-family: inherit;
	position: relative;
}
.wiz-da-card:hover { border-color: rgba(29,158,117,.4); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(29,158,117,.08); }
.wiz-da-card.is-active { border-color: #1D9E75; box-shadow: 0 0 0 3px rgba(29,158,117,.15); }
.wiz-da-card .da-icon { font-size: 20px; color: #1D9E75; margin-bottom: 8px; }
.wiz-da-card .da-name { font-size: 14px; font-weight: 600; color: #0f172a; margin-bottom: 4px; }
.wiz-da-card .da-desc { font-size: 13px; color: #64748b; line-height: 1.45; }
.wiz-da-card .da-check { position: absolute; top: 10px; right: 12px; color: #1D9E75; opacity: 0; }
.wiz-da-card.is-active .da-check { opacity: 1; }

/* RC-20260824 Mode EMBARQUÉ (body.wiz-embedded — la page vit dans la WebView de la caisse mobile,
   qui affiche déjà son propre en-tête natif avec retour) : la topbar de la page ferait doublon. */
.wiz-embedded .wiz-topbar { display: none; }
.wiz-embedded .wiz-chat { padding-top: 24px; }

@media (max-width: 640px) {
	.wiz-chat { padding: 100px 16px 140px; }
	.wiz-embedded .wiz-chat { padding-top: 24px; }
	.wiz-input-area { padding-left: 0; }
	.wiz-progress { display: none; }

	/* RC-20260824 iOS ZOOME automatiquement tout champ dont la police est < 16px (retour Romain
	   depuis la caisse mobile) : 16px en mobile neutralise le zoom sans changer le rendu desktop. */
	.wiz-input { font-size: 16px; }

	/* RC-20260824 BARRE DE SAISIE EN BAS en mobile (demande Romain), pattern messagerie — VERSION
	   LAYOUT D'APP (2e itération) : la 1re version (position:fixed + scripts visualViewport) partait
	   en vrille avec le clavier iOS (barre qui saute, scroll impossible — retour Romain). Désormais :
	   page à hauteur FIXE, fil défilant EN INTERNE, barre en flux normal en bas du flex — aucun
	   fixed, aucun script de viewport. Dans la caisse, c'est l'app NATIVE qui rétrécit la WebView à
	   l'ouverture du clavier : la page se compacte, la barre reste au-dessus du clavier, le scroll
	   reste sain. env(safe-area-inset-bottom) n'est effectif qu'avec viewport-fit=cover (meta de la
	   vue) : c'est lui qui surélève le bouton au-dessus du bord arrondi de l'iPhone.
	   OPT-IN par body.wiz-dock (la landing /essai). */
	body.wiz-dock {
		height: 100vh;
		height: 100dvh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	body.wiz-dock .wiz-chat {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 92px 16px 24px;
	}
	body.wiz-dock.wiz-embedded .wiz-chat { padding-top: 20px; }
	body.wiz-dock .wiz-input-area {
		flex: 0 0 auto;
		margin: 0;
		padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		background: rgba(255,255,255,.96);
		border-top: 1px solid rgba(15,23,42,.08);
		max-height: 62vh;
		overflow-y: auto;
	}
}