/*
 * Modale "Demande" (chat IA + etapes) — assistant_modal.php, incluse site-wide depuis
 * menu_site.php. Namespace CSS dedie (sf-assist-*) pour ne jamais entrer en conflit avec les
 * popups mairie existantes (.popup-overlay/.popup-content, propres a acceuil.php).
 */

.sf-assist-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(var(--brand-ink-rgb, 25, 25, 29), 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sf-assist-overlay.is-open { display: flex; }

.sf-assist-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: min(88vh, 780px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--brand-ink, #19191d);
  border-radius: var(--radius, 1rem);
  box-shadow: 0 2px 8px rgb(24 24 27 / 0.06), 0 30px 60px -24px rgb(24 24 27 / 0.35);
  animation: sf-assist-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sf-assist-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.sf-assist-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  background: var(--brand-surface, #f6f7f9);
  color: var(--brand-ink, #19191d);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.sf-assist-close:hover { background: var(--brand-border, #e9eaee); }
.sf-assist-close svg { width: 1.05rem; height: 1.05rem; }

/* Empile le bandeau titre puis la bascule de mode en pleine largeur, comme la reference
   (grid-cols-2 sur toute la largeur de la carte, pas des boutons compacts alignes a droite). */
.sf-assist-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  padding: 1.25rem 3rem 0.85rem 1.35rem;
}
/* Bande d'amorce (HeroForm.tsx) : pastille jaune + phrase d'accroche, separee par un filet bas. */
.sf-assist-head-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  min-width: 0;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--brand-border, #e9eaee);
}
.sf-assist-start-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--brand-yellow, #fed530);
  color: var(--brand-ink, #19191d);
  padding: 0.35rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 10px 30px -16px rgb(24 24 27 / 0.14);
}
.sf-assist-head-hint { font-size: 0.75rem; font-weight: 500; color: var(--brand-muted, #6f7280); }

.sf-assist-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--brand-border, #e9eaee);
  background: var(--brand-surface, #f6f7f9);
}
.sf-assist-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--brand-muted, #6f7280);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.sf-assist-mode-btn svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
/* "Discuter avec l'IA" actif : fond jaune. "Étape par étape" actif : fond noir. */
.sf-assist-mode-btn-chat.is-active { background: var(--brand-yellow, #fed530); color: var(--brand-ink, #19191d); }
.sf-assist-mode-btn-steps.is-active { background: var(--brand-ink, #19191d); color: #fff; }
.sf-assist-mode-btn:not(.is-active):hover { color: var(--brand-ink, #19191d); }

/* Progression : pastille compteur "n/6" (AssistantPanel.tsx) au lieu des anciennes barres. */
.sf-assist-progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  padding: 0.9rem 1.35rem;
}
.sf-assist-progress-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  background: var(--brand-surface, #f6f7f9);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-ink-rgb, 25, 25, 29), 0.06);
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink, #19191d);
}
.sf-assist-progress-pill .dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--brand-yellow, #fed530);
}
.sf-assist-progress-caption { margin: 0; font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 500; color: var(--brand-muted, #6f7280); }

.sf-assist-pane { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; border-top: 1px solid var(--brand-border, #e9eaee); }
.sf-assist-pane[hidden] { display: none; }

/* Scrollbar visible/fine pour les zones de contenu debordant (historique de chat, resultats mairie,
   corps du mode etapes) : sans ce style, un overflow-y:auto reste discret/invisible sur certains
   OS/navigateurs et l'utilisateur ne percoit pas qu'il peut faire defiler. */
.sf-assist-messages,
.sf-assist-steps-body,
.sf-assist-mairie-results {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-border, #d8d9de) transparent;
}
.sf-assist-messages::-webkit-scrollbar,
.sf-assist-steps-body::-webkit-scrollbar,
.sf-assist-mairie-results::-webkit-scrollbar {
  width: 8px;
}
.sf-assist-messages::-webkit-scrollbar-track,
.sf-assist-steps-body::-webkit-scrollbar-track,
.sf-assist-mairie-results::-webkit-scrollbar-track {
  background: transparent;
}
.sf-assist-messages::-webkit-scrollbar-thumb,
.sf-assist-steps-body::-webkit-scrollbar-thumb,
.sf-assist-mairie-results::-webkit-scrollbar-thumb {
  background-color: var(--brand-border, #d8d9de);
  border-radius: 999px;
}
.sf-assist-messages::-webkit-scrollbar-thumb:hover,
.sf-assist-steps-body::-webkit-scrollbar-thumb:hover,
.sf-assist-mairie-results::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-muted, #9a9ca6);
}

/* ---------- Ecran d'accueil (premier message, dossier vide) ---------- */
/* Affiche uniquement tant qu'aucune information n'est encore renseignee (classe .is-welcome posee
   par le JS sur .sf-assist-pane-chat) : remplace la bulle assistant habituelle par une mise en
   avant centree, comme AssistantPanel.tsx sur son etat initial. Disparait des le premier message
   envoye (la classe est retiree), pour laisser place au fil de discussion classique. */
.sf-assist-welcome { display: none; }
.sf-assist-pane-chat.is-welcome .sf-assist-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 2.1rem 1.5rem 1.4rem;
}
/* Pastille "Assistant IA" (jaune pale + liseré), a la place de l'ancienne grosse icone ronde. */
.sf-assist-welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  border-radius: 999px;
  background: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.16);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.3);
  color: var(--brand-ink, #19191d);
  font-size: 0.75rem;
  font-weight: 700;
}
.sf-assist-welcome-badge svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.sf-assist-welcome-title { margin: 0.75rem 0 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--brand-ink, #19191d); }
.sf-assist-welcome-sub { margin: 0.375rem 0 0; max-width: 19rem; font-size: 0.8125rem; line-height: 1.5; color: var(--brand-muted, #6f7280); }

.sf-assist-pane-chat.is-welcome .sf-assist-messages,
.sf-assist-pane-chat.is-welcome .sf-assist-quick-replies {
  display: none !important;
}
.sf-assist-pane-chat.is-welcome .sf-assist-input-row {
  flex-direction: column;
  border-top: none;
  padding-top: 0;
}
.sf-assist-send-label { display: none; }
.sf-assist-pane-chat.is-welcome .sf-assist-input-row .sf-assist-btn-primary {
  width: 100%;
  justify-content: center;
  padding: 0.75rem 1.1rem;
}
.sf-assist-pane-chat.is-welcome .sf-assist-input-row .sf-assist-send-label { display: inline; }

/* ---------- Mode chat ---------- */
.sf-assist-messages {
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  padding: 1.1rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.sf-assist-msg { max-width: 84%; padding: 0.65rem 0.95rem; border-radius: 1rem; font-size: 0.9rem; line-height: 1.5; white-space: pre-line; }
.sf-assist-msg-bot { align-self: flex-start; background: var(--brand-surface, #f6f7f9); border: 1px solid var(--brand-border, #e9eaee); border-bottom-left-radius: 0.3rem; color: var(--brand-ink, #19191d); }
.sf-assist-msg-user { align-self: flex-end; background: var(--brand-ink, #19191d); color: #fff; border-bottom-right-radius: 0.3rem; }

/* Ligne "avatar + bulle" pour les messages assistant (AssistantPanel.tsx:317-329). */
.sf-assist-msg-row { display: flex; align-items: flex-start; gap: 0.55rem; align-self: flex-start; max-width: 92%; }
.sf-assist-msg-row .sf-assist-msg-bot { max-width: 100%; }
.sf-assist-avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: var(--brand-yellow, #fed530);
  color: var(--brand-ink, #19191d);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-assist-avatar svg { width: 0.9rem; height: 0.9rem; }

/* Chip "J'ai bien noté : ✓ Label Valeur" au-dessus de la question suivante, dans la meme bulle. */
.sf-assist-captured-label { margin: 0 0 0.4rem; font-size: 0.74rem; font-weight: 600; color: var(--brand-muted, #6f7280); }
/* Question administrative detectee ("delai ?", "combien de temps ?"...) : jamais de regle
   inventee, on affiche un rappel de verification plutot qu'une reponse. */
.sf-assist-warning-note {
  margin: 0 0 0.6rem; padding: 0.55rem 0.75rem; border-radius: 0.75rem;
  border: 1px solid rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.35);
  background: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.08);
  font-size: 0.8rem; line-height: 1.5; color: var(--brand-ink, #19191d);
}
/* Plusieurs chips par tour possibles desormais (moteur texte-libre multi-champs) : conteneur en
   ligne avec retour a la ligne, plutot que la marge basse individuelle d'un chip isole. */
.sf-assist-chips-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.sf-assist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.4);
  background: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.1);
  border-radius: 999px;
  padding: 0.25rem 0.65rem 0.25rem 0.3rem;
  font-size: 0.78rem;
}
.sf-assist-chips-wrap .sf-assist-chip { margin: 0; }
.sf-assist-chip-check {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--brand-yellow, #fed530);
  color: var(--brand-ink, #19191d);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-assist-chip-check svg { width: 0.6rem; height: 0.6rem; }
.sf-assist-chip .lbl { color: var(--brand-muted, #6f7280); }
.sf-assist-chip .val { font-weight: 700; color: var(--brand-ink, #19191d); }
.sf-assist-msg-question { margin: 0; font-weight: 600; }
.sf-assist-msg-bot > *:first-child { margin-top: 0; }
.sf-assist-msg-error { align-self: center; background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; font-size: 0.85rem; }
.sf-assist-msg-success {
  align-self: center;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: linear-gradient(135deg, #eafaf1 0%, #f4fdf7 100%);
  border: 1px solid #b7ebc6;
  border-radius: 1rem;
  padding: 0.9rem 1rem;
}
.sf-assist-msg-success .sf-assist-success-icon {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: #2ecc71; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800;
}
.sf-assist-msg-success strong { display: block; font-size: 0.95rem; margin-bottom: 0.2rem; color: var(--brand-ink, #19191d); }
.sf-assist-msg-success p { margin: 0; font-size: 0.85rem; color: var(--brand-muted, #6f7280); line-height: 1.5; }
.sf-assist-msg-success p.is-warning { color: #9a6b00; }
.sf-assist-typing { align-self: flex-start; color: var(--brand-muted, #6f7280); font-size: 0.8rem; font-style: italic; padding-left: 0.25rem; }

.sf-assist-quick-replies { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.35rem 0.85rem; }
.sf-assist-quick-btn {
  border: 1px solid var(--brand-border, #e9eaee);
  background: var(--brand-surface, #f6f7f9);
  color: var(--brand-ink, #19191d);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.sf-assist-quick-btn:hover { border-color: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.5); background: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.1); }
.sf-assist-quick-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sf-assist-mairie-picker { position: relative; padding: 0 1.35rem 0.85rem; }
.sf-assist-mairie-picker input {
  width: 100%; padding: 0.65rem 1rem; border-radius: 999px; border: 1.5px solid var(--brand-border, #e9eaee);
  font-family: var(--font-sans); font-size: 0.88rem; outline: none; color: var(--brand-ink, #19191d); background: #fff;
}
.sf-assist-mairie-picker input:focus { border-color: var(--brand-yellow, #fed530); }
.sf-assist-mairie-results {
  display: none;
  position: absolute; left: 1.35rem; right: 1.35rem; top: calc(100% - 0.4rem);
  background: #fff; border: 1px solid var(--brand-border, #e9eaee); border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgb(24 24 27 / 0.12); max-height: 220px; overflow-y: auto; z-index: 5;
}
/* Mode chat : le picker est ancre juste au-dessus de la barre de saisie, donc pres du bas de la
   modale — une liste ouverte vers le bas y serait hors-vue. On l'ouvre vers le HAUT la, alors que
   le mode etapes (meme classe, champ generique plus haut dans un formulaire scrollable) garde
   l'ouverture par defaut vers le bas. */
#sfAssistMairiePicker .sf-assist-mairie-results {
  top: auto; bottom: calc(100% + 0.4rem);
  box-shadow: 0 -10px 24px rgb(24 24 27 / 0.12);
}
.sf-assist-mairie-results.is-open { display: block; }
.sf-assist-mairie-option {
  display: flex; justify-content: space-between; gap: 0.75rem; width: 100%; text-align: left;
  padding: 0.6rem 0.85rem; border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans); font-weight: 600; font-size: 0.86rem;
}
.sf-assist-mairie-option:hover { background: var(--brand-surface, #f6f7f9); }
.sf-assist-mairie-option span { color: var(--brand-muted, #6f7280); font-weight: 500; }
.sf-assist-mairie-empty { padding: 0.7rem 0.85rem; color: var(--brand-muted, #6f7280); font-size: 0.82rem; }

.sf-assist-input-row { display: flex; gap: 0.6rem; padding: 0.85rem 1.35rem 1.1rem; border-top: 1px solid var(--brand-border, #e9eaee); }
.sf-assist-input-row input {
  flex: 1 1 auto; padding: 0.7rem 1rem; border-radius: 999px; border: 1.5px solid var(--brand-border, #e9eaee);
  font-family: var(--font-sans); font-size: 0.9rem; outline: none; color: var(--brand-ink, #19191d); background: #fff;
}
.sf-assist-input-row input::placeholder { color: var(--brand-muted, #6f7280); }
.sf-assist-input-row input:focus { border-color: var(--brand-yellow, #fed530); }

/* Input natif type=date reel mais invisible (jamais display:none — certains navigateurs refusent
   d'ouvrir showPicker() sur un element non rendu) : sert uniquement a declencher le calendrier natif
   depuis le bouton calendrier ci-dessous, sans remplacer le champ texte libre principal. */
.sf-assist-date-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  opacity: 0; overflow: hidden; pointer-events: none; border: 0;
}
.sf-assist-date-pick-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 999px; border: 1.5px solid var(--brand-border, #e9eaee);
  background: #fff; color: var(--brand-ink, #19191d); cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.sf-assist-date-pick-btn svg { width: 1.05rem; height: 1.05rem; }
.sf-assist-date-pick-btn:hover { border-color: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.6); background: var(--brand-surface, #f6f7f9); }

.sf-assist-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  border-radius: 999px; border: 1.5px solid transparent; font-family: var(--font-sans);
  font-weight: 700; font-size: 0.88rem; padding: 0.7rem 1.1rem; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.sf-assist-btn svg { width: 1rem; height: 1rem; }
.sf-assist-btn-primary {
  background: var(--brand-yellow, #fed530); color: var(--brand-ink, #19191d);
  box-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 10px 30px -16px rgb(24 24 27 / 0.14);
}
.sf-assist-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgb(24 24 27 / 0.06), 0 30px 60px -24px rgb(24 24 27 / 0.28); }
.sf-assist-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.sf-assist-btn-outline { background: transparent; border-color: var(--brand-border, #e9eaee); color: var(--brand-ink, #19191d); }
.sf-assist-btn-outline:hover { border-color: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.6); background: var(--brand-surface, #f6f7f9); }

.sf-assist-final-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0 1.35rem 1.1rem; }

/* ---------- Reinitialiser le dossier ----------
   Deux declencheurs pour la meme action (assets/js/assistant-modal.js) : une pastille dans
   l'en-tete du panneau, et un bouton sous la liste de la carte de suivi. Les deux sont masques
   tant que rien n'est renseigne. La carte est stylee ici, et non dans acceuil.css, parce que ce
   fichier est charge sur tout le site (menu_site.php) alors que la carte apparait aussi sur les
   pages de services. */
[data-assist-reset][hidden] { display: none !important; }

.sf-assist-reset,
.sf-request-card-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px solid var(--brand-border, #e9eaee);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--brand-muted, #6f7280);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.sf-assist-reset svg,
.sf-request-card-reset svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }

.sf-assist-reset:hover,
.sf-request-card-reset:hover {
  color: var(--brand-ink, #19191d);
  border-color: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.6);
  background: var(--brand-surface, #f6f7f9);
}

/* Etat de confirmation (2e clic) : rouge, pour signaler que l'action efface reellement. */
.sf-assist-reset.is-confirming,
.sf-request-card-reset.is-confirming {
  color: #b3261e;
  border-color: rgba(179, 38, 30, 0.45);
  background: rgba(179, 38, 30, 0.06);
}

/* Pastille de l'en-tete : poussee a droite, sur la meme ligne que "Commencez ici". */
.sf-assist-reset {
  margin-left: auto;
  padding: 0.3rem 0.7rem;
  font-size: 0.7rem;
}

/* Carte de suivi : bouton discret pleine largeur, sous la liste des informations. */
.sf-request-card-reset {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
}

/* ---------- Mode etapes ---------- */
.sf-assist-steps-nav { display: flex; gap: 0.35rem; padding: 1rem 1.35rem 0; }
.sf-assist-steps-dot { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--brand-border, #e9eaee); transition: background-color 0.3s ease; }
.sf-assist-steps-dot.is-done { background: var(--brand-yellow, #fed530); }
.sf-assist-steps-dot.is-current { background: var(--brand-ink, #19191d); }

.sf-assist-steps-body { flex: 1 1 auto; min-height: 220px; overflow-y: auto; padding: 1rem 1.35rem; }
.sf-assist-steps-label { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--brand-ink, #19191d); }

.sf-assist-field { margin-bottom: 1rem; }
.sf-assist-field label { display: block; margin-bottom: 0.35rem; font-family: var(--font-sans); font-size: 0.82rem; font-weight: 600; color: var(--brand-muted, #6f7280); }
.sf-assist-field input,
.sf-assist-field select {
  width: 100%; padding: 0.7rem 1rem; border-radius: 0.65rem; border: 1.5px solid var(--brand-border, #e9eaee);
  font-family: var(--font-sans); font-size: 0.9rem; outline: none; color: var(--brand-ink, #19191d); background: #fff;
}
.sf-assist-field input::placeholder { color: var(--brand-muted, #6f7280); }
.sf-assist-field input:focus,
.sf-assist-field select:focus { border-color: var(--brand-yellow, #fed530); }
.sf-assist-field-error { margin: 0.35rem 0 0; font-size: 0.8rem; color: #b3261e; }

.sf-assist-choice-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf-assist-choice-btn {
  border: 1.5px solid var(--brand-border, #e9eaee); background: #fff; color: var(--brand-ink, #19191d);
  font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; padding: 0.55rem 1rem;
  border-radius: 999px; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease;
}
.sf-assist-choice-btn:hover { border-color: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.6); }
.sf-assist-choice-btn.is-selected { background: var(--brand-ink, #19191d); border-color: var(--brand-ink, #19191d); color: #fff; }

/* Zone fixe (hors de la conversation qui defile) pour la carte "Créer mon espace" au recapitulatif :
   avec un dossier complet, elle serait sinon scrollee hors de vue au milieu de l'historique. */
.sf-assist-save-space { padding: 0 1.35rem 0.85rem; }
.sf-assist-save-space .sf-assist-save-card { margin-bottom: 0; }

/* Carte "Votre demande est prête à être sauvegardée" (SaveSpaceCard de la reference) : affichee
   au recapitulatif, avant meme l'envoi final, pour convertir le compte invite en compte reel. */
.sf-assist-save-card {
  border: 1px solid rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.45);
  background: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.08);
  border-radius: 1rem;
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.85rem;
}
.sf-assist-save-card-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.sf-assist-save-card-icon {
  flex: 0 0 auto; width: 2.15rem; height: 2.15rem; border-radius: 0.65rem;
  background: var(--brand-yellow, #fed530); color: var(--brand-ink, #19191d);
  display: flex; align-items: center; justify-content: center;
}
.sf-assist-save-card-icon svg { width: 1.05rem; height: 1.05rem; }
.sf-assist-save-card-head strong { display: block; font-family: var(--font-display); font-size: 0.92rem; color: var(--brand-ink, #19191d); }
.sf-assist-save-card-head p { margin: 0.2rem 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--brand-muted, #6f7280); }
.sf-assist-save-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.sf-assist-save-card-actions .sf-assist-btn { padding: 0.5rem 0.95rem; font-size: 0.82rem; }
.sf-assist-save-card-dismiss {
  border: none; background: transparent; color: var(--brand-muted, #6f7280);
  font-family: var(--font-sans); font-weight: 600; font-size: 0.82rem; padding: 0.5rem 0.4rem; cursor: pointer;
}
.sf-assist-save-card-dismiss:hover { color: var(--brand-ink, #19191d); }

/* Sous-formulaire mot de passe, affiche a l'interieur de la carte apres clic sur "Créer mon espace". */
.sf-assist-save-form { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.55rem; }
.sf-assist-save-form input {
  width: 100%; padding: 0.6rem 0.85rem; border-radius: 0.6rem; border: 1.5px solid var(--brand-border, #e9eaee);
  font-family: var(--font-sans); font-size: 0.85rem; outline: none; color: var(--brand-ink, #19191d); background: #fff;
}
.sf-assist-save-form input::placeholder { color: var(--brand-muted, #6f7280); }
.sf-assist-save-form input:focus { border-color: var(--brand-yellow, #fed530); }
.sf-assist-save-form-error { margin: 0; font-size: 0.78rem; color: #b3261e; }
.sf-assist-save-form-hint { margin: 0; font-size: 0.74rem; color: var(--brand-muted, #6f7280); }

.sf-assist-save-card.is-synced { background: rgba(46, 204, 113, 0.08); border-color: rgba(46, 204, 113, 0.35); }
.sf-assist-save-card.is-synced .sf-assist-save-card-icon { background: #2ecc71; color: #fff; }
.sf-assist-save-card.is-synced .sf-assist-save-card-head p { margin: 0; }

.sf-assist-recap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sf-assist-recap-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 0.9rem; border-radius: 0.85rem; background: var(--brand-surface, #f6f7f9);
  border: 1px solid var(--brand-border, #e9eaee);
}
.sf-assist-recap-row .sf-assist-recap-info { min-width: 0; }
.sf-assist-recap-row .lbl { display: block; color: var(--brand-muted, #6f7280); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.sf-assist-recap-row .val { display: block; margin-top: 0.15rem; font-weight: 600; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-assist-recap-edit-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--brand-border, #e9eaee); background: #fff; color: var(--brand-ink, #19191d);
  font-family: var(--font-sans); font-weight: 600; font-size: 0.76rem; padding: 0.4rem 0.75rem;
  border-radius: 999px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease;
}
.sf-assist-recap-edit-btn svg { width: 0.75rem; height: 0.75rem; }
.sf-assist-recap-edit-btn:hover { border-color: rgba(var(--brand-yellow-rgb, 254, 213, 48), 0.6); color: var(--brand-ink, #19191d); }

.sf-assist-steps-actions { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 1.35rem 1.1rem; border-top: 1px solid var(--brand-border, #e9eaee); }

@media (max-width: 640px) {
  .sf-assist-modal { max-height: 92vh; border-radius: 1.1rem 1.1rem 0 0; align-self: flex-end; }
  .sf-assist-overlay { align-items: flex-end; padding: 0; }
  .sf-assist-head { padding-right: 3.25rem; }
}

/* ---------- Variante inline (Hero de l'accueil) ---------- */
/* Meme traitement visuel que .sf-assist-modal (fond blanc, coins arrondis, ombre, colonne flex),
   sans position fixed/overlay : le composant reste dans le flux normal du Hero. */
/* Le relief est porte par .focal-2_5d (brand-theme.css), pose sur ce meme element dans
   assistant_inline.php : pas d'ombre propre ici, sinon elle l'emporterait (feuille chargee apres). */
/* min-height : le contenu de la carte arrive apres un aller-retour reseau (chat.status() au
   montage), et sans plancher la page se decalait au premier rendu — c'est la cause du CLS mesure
   sur mobile, ou cette carte est le premier element sous le hero (la carte de suivi, elle, est
   masquee sous 1024px).
   La reservation porte sur la CARTE, jamais sur .sf-assist-pane-chat : ce dernier doit garder son
   min-height:0 (voir plus bas), sans quoi le flex refuse de comprimer la zone de messages et la
   note du bas se superpose au champ de saisie. Le plancher reste sous le plafond max-height. */
.sf-assist-inline {
  position: relative;
  width: 100%;
  max-width: 30rem;
  min-height: 26rem;
  max-height: min(80vh, 700px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--brand-ink, #19191d);
  border-radius: 1.5rem;
}
.sf-assist-inline .sf-assist-head { padding: 1.25rem 1.35rem 0.85rem; }
/* Hauteur bornee (au lieu de "none") pour que le debordement de la conversation scrolle DANS la
   carte plutot que de pousser la carte a grandir indefiniment dans le Hero. */
.sf-assist-inline .sf-assist-pane-chat { min-height: 0; }
/* min-height:0 (au lieu d'un plancher fixe) : sans ca, quand tete+barre de progression+champ de
   saisie+note prennent deja beaucoup de la hauteur bornee du Hero, le flex-box refusait de
   comprimer les messages sous leur plancher et le contenu debordait de sa propre boite —
   visuellement, la note du bas se retrouvait superposee par-dessus le champ de saisie. Seule la
   zone de messages (avec son propre scroll interne) doit absorber le manque de place ; les autres
   blocs (tete, barre, champ, note) gardent toujours leur taille naturelle (flex-shrink:0). */
.sf-assist-inline .sf-assist-messages { max-height: 360px; min-height: 0; }
.sf-assist-inline .sf-assist-head,
.sf-assist-inline .sf-assist-progress,
.sf-assist-inline .sf-assist-quick-replies,
.sf-assist-inline .sf-assist-mairie-picker,
.sf-assist-inline .sf-assist-input-row,
.sf-assist-inline .sf-assist-final-actions,
.sf-assist-inline .sf-assist-save-space,
.sf-assist-inline-note {
  flex-shrink: 0;
}
.sf-assist-inline-note {
  display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 1.35rem 1.1rem;
  padding: 0.65rem 0.85rem; border-radius: 0.85rem; background: var(--brand-surface, #f6f7f9);
  font-size: 0.74rem; line-height: 1.5; color: var(--brand-muted, #6f7280);
}
.sf-assist-inline-note svg { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; margin-top: 0.1rem; }

@media (prefers-reduced-motion: reduce) {
  .sf-assist-modal { animation: none; }
}