/*
 * Polmar Chatbot — widget frontend
 *
 * Variables scopées au plugin (--pc-*), même choix que polmar-vehicules
 * (--vo-*) et polmar-leads (--pm-*) plutôt que de lire les variables du
 * thème directement : ça isole le plugin d'un changement de nom côté thème.
 * Mêmes valeurs de couleur que la charte (polmar-theme/assets/css/main.css).
 */
:root {
	--pc-navy: #0F314C;
	--pc-navy-dark: #0C2030;
	--pc-pink: #C17FB5;
	--pc-pink-dark: #A5629A;
	--pc-pink-link: #8B4C80; /* --pc-pink-dark plafonne à 4,4:1 sur blanc */
	--pc-white: #FFFFFF;
	--pc-g50: #F5F7FA;
	--pc-g100: #E8EDF4;
	--pc-g200: #CBD5E1;
	--pc-g400: #8FA3B8;
	--pc-g600: #64748B; /* gris de texte : #8FA3B8 ne passe pas le contraste sur blanc */
	--pc-text: #1A2D3D;

	--pc-radius-lg: 24px;
	--pc-radius-xl: 32px;
	--pc-radius-pill: 100px;

	--pc-shadow-md: 0 12px 32px rgba(15, 49, 76, .12);
	--pc-shadow-lg: 0 24px 70px rgba(15, 49, 76, .18);

	/* Sous la popup véhicule existante (z-index:1000, vehicules.css) : si une
	   fiche véhicule s'ouvre par-dessus le chat, elle doit passer devant. */
	--pc-z: 900;
}

/* ── Bulle flottante ────────────────────────────────────────────────────── */
.pc-launcher {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: var(--pc-z);
	height: 60px;
	padding: 0 22px 0 12px;
	border-radius: var(--pc-radius-pill);
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--pc-navy) 0%, var(--pc-navy-dark) 100%);
	box-shadow: var(--pc-shadow-lg);
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--pc-white);
	font: inherit;
	transition: transform .2s ease, box-shadow .2s ease;
}
.pc-launcher:hover { transform: translateY(-2px); }
.pc-launcher__face { position: relative; flex-shrink: 0; display: block; }
.pc-launcher__avatar { width: 36px; height: 36px; border-radius: 50%; display: block; }
.pc-launcher__dot,
.pc-header__dot {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #22C55E;
	box-shadow: 0 0 0 2px var(--pc-navy);
}
.pc-launcher__label { font-size: .88rem; font-weight: 700; white-space: nowrap; color: var(--pc-white); }
.pc-launcher__close-icon { width: 22px; height: 22px; display: none; }
/* Une fois ouvert, le libellé n'a plus de raison d'être : le lanceur
   redevient un simple bouton de fermeture. */
.pc-launcher.is-open { padding: 0; width: 60px; justify-content: center; }
.pc-launcher.is-open .pc-launcher__face,
.pc-launcher.is-open .pc-launcher__label { display: none; }
.pc-launcher.is-open .pc-launcher__close-icon { display: block; }

/* ── Accroche proactive ── */
.pc-teaser {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
	z-index: var(--pc-z);
	width: 300px;
	max-width: calc(100vw - 40px);
	padding: 16px 40px 16px 20px;
	background: var(--pc-white);
	border-left: 4px solid var(--pc-pink);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-lg);
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.pc-teaser.is-visible { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.pc-teaser__title {
	margin: 0 0 6px;
	font-size: .9rem;
	font-weight: 700;
	color: var(--pc-navy);
}
.pc-teaser__text { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--pc-g600); }
.pc-teaser__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--pc-g600);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pc-teaser__close:hover { background: var(--pc-g100); }
.pc-teaser__close svg { width: 13px; height: 13px; }

/* ── Fenêtre de chat — desktop/tablette (>600px) ───────────────────────── */
.pc-window {
	position: fixed;
	z-index: var(--pc-z);
	right: max(20px, env(safe-area-inset-right));
	bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
	width: 400px;
	max-width: calc(100vw - 40px);
	height: min(620px, 80vh);
	background: var(--pc-white);
	border-radius: var(--pc-radius-xl);
	box-shadow: var(--pc-shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(.98);
	pointer-events: none;
	transition: opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1);
}
.pc-window.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.pc-header {
	flex-shrink: 0;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--pc-navy) 0%, var(--pc-navy-dark) 100%);
	color: var(--pc-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.pc-header__face { position: relative; flex-shrink: 0; }
.pc-header__face img { width: 42px; height: 42px; border-radius: 50%; display: block; }
.pc-header__id { flex: 1; min-width: 0; }
.pc-header__title { font-weight: 700; font-size: .95rem; margin: 0; color: var(--pc-white); }
.pc-header__subtitle { font-size: .75rem; color: rgba(255,255,255,.65); margin: 2px 0 0; }
.pc-header__close {
	background: rgba(255,255,255,.12);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pc-white);
	cursor: pointer;
	transition: background .15s ease;
}
.pc-header__close:hover { background: rgba(255,255,255,.22); }
.pc-header__close svg { width: 16px; height: 16px; }

/* ── Corps : messages ───────────────────────────────────────────────────── */
.pc-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--pc-g50);
}

.pc-msg { max-width: 85%; font-size: .875rem; line-height: 1.45; }
/* color: inherit obligatoire — sans lui, le `p { color: var(--g600) }` du
   thème l'emporte sur la couleur portée par la bulle (spécificité 0,0,1
   contre un simple héritage), et le texte blanc des bulles visiteur passait
   en gris-bleu sur fond navy. */
.pc-msg p { margin: 0; color: inherit; }
.pc-msg--user {
	align-self: flex-end;
	background: var(--pc-navy);
	color: var(--pc-white);
	padding: 10px 14px;
	border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 4px var(--pc-radius-lg);
}
.pc-msg--bot {
	align-self: flex-start;
	background: var(--pc-white);
	color: var(--pc-text);
	padding: 10px 14px;
	border-radius: var(--pc-radius-lg) var(--pc-radius-lg) var(--pc-radius-lg) 4px;
	box-shadow: 0 1px 2px rgba(15,49,76,.08);
}
.pc-msg--error {
	align-self: flex-start;
	color: #B0142B;
	background: #FFF1F1;
	padding: 10px 14px;
	border-radius: var(--pc-radius-lg);
	font-size: .8rem;
}

/* Cartes véhicule injectées (.vo-grid/.vo-card, polmar-vehicules) : pas de
   marge propre, on la gère depuis le conteneur du message pour rester
   cohérent avec l'espacement des bulles de texte. */
.pc-msg--bot .vo-grid { margin-top: 8px; }

@media (max-width: 600px) {
	.pc-teaser { bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px)); }
	.pc-launcher__label { display: none; }
	.pc-launcher { padding: 0; width: 60px; justify-content: center; }
}

.pc-typing { align-self: flex-start; display: flex; align-items: center; gap: 4px; padding: 10px 14px; }
.pc-typing span {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--pc-g400);
	animation: pc-typing-bounce 1.1s infinite ease-in-out;
}
.pc-typing span:nth-child(2) { animation-delay: .15s; }
.pc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes pc-typing-bounce {
	0%, 60%, 100% { transform: translateY(0); opacity: .5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Menu ⋮ ─────────────────────────────────────────────────────────────
   Le consentement n'occupe plus un écran bloquant : l'information reste
   accessible en permanence ici, et le serveur horodate le consentement au
   moment où la personne laisse ses coordonnées (inc/lead-bridge.php). */
.pc-header__menu {
	background: rgba(255,255,255,.12);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pc-white);
	cursor: pointer;
	transition: background .15s ease;
}
.pc-header__menu:hover { background: rgba(255,255,255,.22); }
.pc-header__menu svg { width: 16px; height: 16px; }

.pc-menu {
	position: absolute;
	top: 62px;
	right: 14px;
	z-index: 2;
	width: 250px;
	padding: 6px;
	background: var(--pc-white);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-lg);
}
.pc-menu[hidden] { display: none; }
.pc-menu__item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: none;
	border-radius: 12px;
	background: transparent;
	font: inherit;
	font-size: .82rem;
	color: var(--pc-text);
	text-decoration: none;
	cursor: pointer;
}
.pc-menu__item:hover { background: var(--pc-g50); color: var(--pc-text); }
.pc-menu__note {
	margin: 6px 0 2px;
	padding: 8px 12px 4px;
	border-top: 1px solid var(--pc-g100);
	font-size: .7rem;
	line-height: 1.45;
	color: var(--pc-g600);
}

/* ── Zone de saisie ─────────────────────────────────────────────────────── */
.pc-input {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px;
	background: var(--pc-white);
	border-top: 1px solid var(--pc-g100);
	/* Pousse la barre au-dessus de la home indicator iOS quand la fenêtre est
	   en plein écran (mobile) sans dépendre du clavier virtuel. */
	padding-bottom: max(12px, env(safe-area-inset-bottom));
}
/* Déclarée APRÈS la règle .pc-input ci-dessus, sinon son `display: flex`
   l'emporterait et la saisie resterait visible avant consentement. */
.pc-input:not(.is-enabled) { display: none; }

.pc-input textarea {
	flex: 1;
	resize: none;
	max-height: 100px;
	border: 1px solid var(--pc-g200);
	border-radius: var(--pc-radius-lg);
	padding: 10px 14px;
	font: inherit;
	font-size: .875rem;
	color: var(--pc-text);
	background: var(--pc-g50);
}
.pc-input textarea:focus {
	outline: none;
	border-color: var(--pc-pink-dark);
	background: var(--pc-white);
}
.pc-input button {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--pc-navy);
	color: var(--pc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}
.pc-input button:hover { background: var(--pc-navy-dark); }
.pc-input button:disabled { opacity: .4; cursor: default; }
.pc-input button svg { width: 17px; height: 17px; }

/* ── Mobile (≤600px) : bottom-sheet plein écran ─────────────────────────
   Même seuil que la popup véhicule existante (vehicules.css:600). */
@media (max-width: 600px) {
	.pc-window {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		/* 100dvh plutôt que 100vh : évite le décalage lié à la barre
		   d'adresse mobile qui apparaît/disparaît au scroll (iOS Safari). */
		height: 100dvh;
		border-radius: var(--pc-radius-xl) var(--pc-radius-xl) 0 0;
	}
	.pc-header { padding-top: max(16px, env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
	.pc-window, .pc-launcher, .pc-typing span { transition: none; animation: none; }
}