/* =========================================================
 * GIRAFE Chatbot — Design system v2 (Phase 2.2bis Phase B)
 * Réf : docs/design-system-proposal.md (validé 2026-05-12)
 *
 * Palette : coral Girafe #ff7979 + neutres chauds (jamais
 * de blanc pur #fff, jamais de noir pur #000). Le bleu
 * primaire historique (--pri, --ring-pri, #598aff) est
 * supprimé. Variables sémantiques préfixées `--g-*` pour
 * permettre un mode sombre futur sans refactor (D5).
 * ========================================================= */

:root{
  /* === Marque & coral === */
  --g-coral-50:  #fff5f6;
  --g-coral-100: #ffe7eb;
  --g-coral-200: #ffd1d9;
  --g-coral-500: #ff7979;    /* Couleur de marque, héritée site */
  --g-coral-600: #ff5e5e;
  --g-coral-700: #b83b3b;   /* Task A (audit-260701) : d94545 -> b83b3b, 4.5:1 WCAG AA sur fonds clairs (validé Jules) */
  --g-coral-900: #7a1224;    /* Encre user bubble (AAA sur coral-50) */

  /* === Neutres chauds === */
  --g-ink:           #1f2330;
  --g-ink-muted:     #5b6172;
  --g-ink-disabled:  #a8aebc;
  --g-surface:       #fefcfa;    /* Crème léger — jamais #fff pur */
  --g-surface-2:     #faf6f3;
  --g-surface-3:     #f3eeeb;
  --g-line:          rgba(31,35,48,0.08);
  --g-line-strong:   rgba(31,35,48,0.16);

  /* === Sémantiques === */
  --g-success-bg:  #e8f5ec;  --g-success-ink: #0d6e3c;
  --g-error-bg:    #fdecee;  --g-error-ink:   #9a1c2a;
  --g-warning-bg:  #fff4e5;  --g-warning-ink: #8a4f00;
  --g-info-bg:     #eef4fb;  --g-info-ink:    #1e4670;

  /* === Espacements (4px base) === */
  --g-space-1: 4px;
  --g-space-2: 8px;
  --g-space-3: 12px;
  --g-space-4: 16px;
  --g-space-5: 20px;
  --g-space-6: 24px;
  --g-space-8: 32px;
  --g-space-10: 40px;

  /* === Typographie === */
  --g-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --g-text-xs:   12px;
  --g-text-sm:   13px;
  --g-text-base: 15px;
  --g-text-md:   16px;
  --g-text-lg:   18px;
  --g-text-xl:   22px;
  --g-lh-tight:  1.4;
  --g-lh-body:   1.6;

  /* === Radius === */
  --g-radius-sm:   8px;
  --g-radius-md:   12px;
  --g-radius-lg:   16px;
  --g-radius-xl:   20px;
  --g-radius-pill: 999px;

  /* === Ombres (non bleutées) === */
  --g-shadow-sm: 0 2px 8px  rgba(31,35,48,0.05);
  --g-shadow-md: 0 8px 24px rgba(31,35,48,0.08);
  --g-shadow-lg: 0 16px 40px rgba(31,35,48,0.12);

  /* === Halo focus (coral, pas bleu) === */
  --g-ring: 0 0 0 3px rgba(255,121,121,0.22);
}

/* =========================================================
 * Wrapper externe (.gchat)
 * ========================================================= */
.gchat{
  max-width: min(820px, 100% - 24px);
  margin: 0 auto;
  padding: var(--g-space-3) var(--g-space-3) var(--g-space-8);
  font-family: var(--g-font-body);
  color: var(--g-ink);
}
.gchat *, .gchat *::before, .gchat *::after{ box-sizing: border-box; }

/* =========================================================
 * Shell
 * ========================================================= */
.gchat .chat-shell{
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-xl);
  box-shadow: var(--g-shadow-md);
  display: flex;
  flex-direction: column;
  height: clamp(520px, 70vh, 80vh);
  overflow: hidden;
}

/* Topbar : supprimée visuellement, ne sert plus aux chips.
   Si un module Phase 2.3+ veut y poser un nom user, restyler. */
.gchat .chat-topbar{
  display: none;
}

/* =========================================================
 * Stream
 * ========================================================= */
.gchat .chat-stream{
  flex: 1 1 auto;
  /* Phase 2bis-C Fix 6 — fond unifié avec controls (--g-surface), pas de
     surface-2 plus sombre. La séparation visuelle se fait via padding. */
  background: var(--g-surface);
  padding: var(--g-space-5) var(--g-space-4) var(--g-space-3);
  overflow: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  font-size: var(--g-text-base);
  line-height: var(--g-lh-body);
}

.gchat .msg{
  display: flex;
  width: 100%;
  margin: var(--g-space-3) 0;
}
.gchat .msg.bot{ justify-content: flex-start; }
.gchat .msg.me {  justify-content: flex-end;  }

.gchat .msg .bubble{
  display: block;
  max-width: 75%;
  padding: var(--g-space-3) var(--g-space-4);
  border-radius: var(--g-radius-lg);
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: var(--g-text-base);
  line-height: var(--g-lh-body);
  animation: gFadeUp 160ms ease-out both;
}
.gchat .msg.bot .bubble{
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  color: var(--g-ink);
}
.gchat .msg.me .bubble{
  background: var(--g-coral-50);
  border: 1px solid var(--g-coral-200);
  color: var(--g-coral-900);
}

.gchat .msg .bubble p{ margin: 0 0 var(--g-space-2); }
.gchat .msg .bubble p:last-child{ margin-bottom: 0; }
.gchat .msg .bubble ul,
.gchat .msg .bubble ol{ margin: var(--g-space-2) 0 var(--g-space-2) var(--g-space-4); padding-left: var(--g-space-4); }
.gchat .msg .bubble li{ margin: var(--g-space-1) 0; }
.gchat .msg .bubble strong{ font-weight: 600; }
.gchat .msg .bubble a{
  color: var(--g-coral-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gchat .msg .bubble a:hover{ color: var(--g-coral-600); }
.gchat .msg .bubble h3{ margin: 0 0 var(--g-space-2); font-size: var(--g-text-md); font-weight: 600; line-height: var(--g-lh-tight); }

/* Animation d'apparition douce */
@keyframes gFadeUp{
  from{ opacity: 0; transform: translateY(4px); }
  to  { opacity: 1; transform: translateY(0);   }
}

/* =========================================================
 * Typing indicator
 * ========================================================= */
.gchat .typing{
  display: inline-flex;
  gap: var(--g-space-1);
  align-items: center;
  padding: var(--g-space-1) 0;
}
.gchat .typing i{
  width: 6px; height: 6px;
  border-radius: var(--g-radius-pill);
  background: var(--g-ink-muted);
  opacity: 0.5;
  display: inline-block;
  animation: gTyping 1.4s infinite ease-in-out;
}
.gchat .typing i:nth-child(2){ animation-delay: 0.15s; }
.gchat .typing i:nth-child(3){ animation-delay: 0.30s; }
@keyframes gTyping{
  0%, 80%, 100% { transform: scale(1);   opacity: 0.5; }
  40%           { transform: scale(1.4); opacity: 1;   }
}

/* =========================================================
 * États sémantiques (success/error/warning/info)
 * ========================================================= */
.gchat .state-success,
.gchat .state-error,
.gchat .state-warning,
.gchat .state-info{
  padding: var(--g-space-3) var(--g-space-4);
  border-radius: var(--g-radius-md);
  font-size: var(--g-text-sm);
  line-height: var(--g-lh-body);
  display: inline-flex;
  gap: var(--g-space-2);
  align-items: flex-start;
}
.gchat .state-success{ background: var(--g-success-bg); color: var(--g-success-ink); border: 1px solid rgba(13,110,60,0.25); }
.gchat .state-error  { background: var(--g-error-bg);   color: var(--g-error-ink);   border: 1px solid rgba(154,28,42,0.25); }
.gchat .state-warning{ background: var(--g-warning-bg); color: var(--g-warning-ink); border: 1px solid rgba(138,79,0,0.25); }
.gchat .state-info   { background: var(--g-info-bg);    color: var(--g-info-ink);    border: 1px solid rgba(30,70,112,0.25); }

/* Legacy aliases utilisés par le JS ; on les redirige sur les nouvelles classes
   pour rétro-compat sans toucher au JS. */
.gchat .note   { background: var(--g-warning-bg); color: var(--g-warning-ink); padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-sm); border: 1px solid rgba(138,79,0,0.20); }
.gchat .error  { background: var(--g-error-bg);   color: var(--g-error-ink);   padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-sm); border: 1px solid rgba(154,28,42,0.25); }
.gchat .success{ background: var(--g-success-bg); color: var(--g-success-ink); padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-sm); border: 1px solid rgba(13,110,60,0.25); }
.gchat .welcome{ color: var(--g-ink-muted); }
.gchat .muted  { color: var(--g-ink-muted); opacity: 0.9; }

/* =========================================================
 * Zone de saisie + Send button intégré
 * ========================================================= */
.gchat .chat-controls{
  display: block;
  padding: var(--g-space-3) var(--g-space-4);
  background: var(--g-surface);
  /* Phase 2bis-C Fix 6 — bordure dure supprimée, fond unifié avec stream.
     Ombre interne très subtile pour distinguer la zone d'action sans
     cassure visuelle. */
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(31, 35, 48, 0.04);
}

/* ADR-173/179 #1 — bar « Finaliser » déterministe (au-dessus du composer). Masquée
   tant qu'aucun axe n'est rempli ; visible dès ≥1 axe (voie sûre de finalisation). */
/* Révision B-070 — barre récap = PAIRE de pills historique (.g-suggestion),
   plus de gros bouton plein. Deux pills sobres alignés à DROITE, au-dessus du composer. */
.gchat .chat-finalize{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--g-space-2);
  margin-bottom: var(--g-space-3);
}
.gchat .chat-finalize[hidden]{ display: none; }

.gchat .ctrl-wrap{
  position: relative;
  display: block;
}

.gchat .ctrl-input{
  width: 100%;
  /* Une `<textarea>` est de niveau ligne : elle se pose sur la ligne de base et
     laisse sous elle la place des jambages, ~7px. `.ctrl-wrap` mesurait donc 57px
     pour un champ de 50, et le bouton d'envoi — centré sur le conteneur par
     `top: 50%` — tombait 3,5px trop bas, contre la bordure basse du champ.
     `display: block` supprime cet écart : le conteneur épouse le champ, et le
     centrage existant redevient juste. Même correction que sur le `svg` du
     bouton, plus bas. */
  display: block;
  min-height: 44px;
  max-height: 160px;
  resize: none;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-md);
  /* Phase 2bis-C Fix 5 — padding-right bumpé à 56px pour laisser
     respirer la flèche du send button (36px button + 8px right offset
     + 12px de marge interne). */
  padding: var(--g-space-3) 56px var(--g-space-3) var(--g-space-4);
  font-size: var(--g-text-base);
  font-family: inherit;
  line-height: var(--g-lh-body);
  color: var(--g-ink);
  background: var(--g-surface);
  outline: none;
  transition: border-color 160ms ease-out, box-shadow 80ms ease-out;
}
.gchat .ctrl-input::placeholder{ color: var(--g-ink-disabled); }
/* Phase 2bis-C Fix 7 — focus coral via box-shadow (suit le border-radius).
   `outline: none` explicite pour bloquer le rendu navigateur par défaut
   (Brave/Safari) qui dessine un outline rouge rectangulaire. */
.gchat .ctrl-input:focus,
.gchat .ctrl-input:focus-visible{
  outline: none;
  border-color: var(--g-coral-500);
  box-shadow: 0 0 0 3px rgba(255, 121, 121, 0.22);
}

/* Send button = positioné absolu dans le wrap, in-input */
.gchat .ctrl-send{
  position: absolute;
  right: 8px;
  /* Phase 2bis-C Fix 4 — centrage vertical robuste via top:50% + translate
     (vs bottom:6px qui dépendait du min-height de l'input). */
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--g-radius-pill);
  border: none;
  background: var(--g-ink-disabled);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease-out;
  padding: 0;
  line-height: 0;  /* évite tout decalage du SVG par baseline */
}
.gchat .ctrl-send::before{
  /* Hit area 44×44 (étendu à -4px de chaque côté = 44px hit zone) */
  content: "";
  position: absolute;
  inset: -4px;
}
.gchat .ctrl-send.is-active{
  background: var(--g-coral-500);
}
.gchat .ctrl-send.is-active:hover{ background: var(--g-coral-600); }
.gchat .ctrl-send.is-loading{ pointer-events: none; }
.gchat .ctrl-send.is-loading svg{ animation: gSpin 800ms linear infinite; }
@keyframes gSpin{ to{ transform: rotate(360deg); } }
.gchat .ctrl-send svg{
  /* Phase 2bis-C Fix 4 — display:block pour éliminer la baseline gap. */
  width: 18px;
  height: 18px;
  display: block;
}

/* =========================================================
 * Suggestions contextuelles (au-dessus de l'input)
 * ========================================================= */
.gchat .g-suggestions{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--g-space-2);
  padding: 0 var(--g-space-4) var(--g-space-3);
  background: var(--g-surface);
  /* Phase 2bis-C Fix 6 — bordure dure supprimée pour continuité visuelle
     stream → suggestions → controls. */
  border-top: none;
  /* Si vide, prend zéro espace visuel */
}
.gchat .g-suggestions:empty{ display: none; }

/* Phase 3.1bis — chip plus généreuse (taille profile_orientation 3.1)
   pour unifier toutes les actions cliquables. Hover coral conservé. */
.gchat .g-suggestion{
  background: var(--g-surface-2);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-pill);
  padding: var(--g-space-3) var(--g-space-4);
  font-size: var(--g-text-base);
  line-height: var(--g-lh-tight, 1.2);
  font-family: inherit;
  color: var(--g-ink);
  cursor: pointer;
  font-weight: 500;
  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
  animation: gFadeUp 160ms ease-out both;
}
.gchat .g-suggestion:hover{
  background: var(--g-coral-100);
  border-color: var(--g-coral-200);
  color: var(--g-coral-700);
}
.gchat .g-suggestion:active{
  background: var(--g-coral-200);
}
.gchat .g-suggestion.is-leaving{
  animation: gFadeOut 120ms ease-in forwards;
}
@keyframes gFadeOut{
  to{ opacity: 0; transform: scale(0.95); }
}

/* =========================================================
 * Wizard (modal bottom-sheet centré)
 * ========================================================= */
.gchat .wizard-backdrop{
  position: sticky;
  bottom: 0;
  height: 0;
}
/* Phase 2bis-C Fix 2 — backdrop opacité bumpée à 0.96 + blur 8px pour
   réellement masquer la conversation derrière (le 0.86 + blur 4px laissait
   passer le texte en filigrane). */
.gchat .wizard-backdrop::before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(254, 252, 250, 0.96);
  backdrop-filter: saturate(1.05) blur(8px);
  -webkit-backdrop-filter: saturate(1.05) blur(8px);
  z-index: 28;
  /* B-085 — ce voile est `fixed; inset: 0` : il couvre TOUTE la page, header
     compris, pas seulement le chat. Sans cette ligne il interceptait les clics
     du site : après un échec de connexion, « Se connecter » devenait
     inatteignable et il fallait recharger. `.wizard` a la même précaution
     (pointer-events: none) et rend ses events au panel `.wiz-step` ; le voile,
     purement décoratif, ne doit jamais en recevoir. */
  pointer-events: none;
}
/* Phase 2bis-D Fix 1 — centrage par flex viewport-fullscreen.
   `.wizard` devient un conteneur fixed plein écran avec flex centrage.
   Le `.wiz-step` à l'intérieur est le panel visible, max-width 560px.
   Le conteneur a `pointer-events: none` pour laisser passer les clics
   sur le backdrop (close), tandis que `.wiz-step` reprend les events.
   Approche la plus défensive : aucune dépendance à un containing block
   parent, aucun risque de mauvais calcul margin-auto.
   Phase C avait tenté `inset + margin auto`, validé en local mais
   Jules observait toujours un décentrage — fallback flex éliminé. */
.gchat .wizard{
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: var(--g-space-5) var(--g-space-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}
.gchat .wizard.is-open{
  opacity: 1;
  pointer-events: auto;
}

.gchat .wiz-step{
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-xl);
  padding: var(--g-space-6) var(--g-space-5);
  box-shadow: var(--g-shadow-md);
  /* Phase 2bis-D — flex child autonome dans le wizard fullscreen */
  width: 100%;
  max-width: 560px;
  pointer-events: auto;
  transform: translateY(12px);
  transition: transform 200ms ease-out;
}
.gchat .wizard.is-open .wiz-step{
  transform: translateY(0);
}

/* Phase 2bis-D Fix 2 — slot d'erreur intégré au wizard step.
   Affiché sous les champs, juste avant les actions. Caché si vide.
   La règle :empty masque le slot tant qu'aucun message n'y est posé. */
.gchat .wiz-error{
  background: var(--g-error-bg);
  color: var(--g-error-ink);
  border: 1px solid rgba(154, 28, 42, 0.25);
  border-radius: var(--g-radius-md);
  padding: var(--g-space-2) var(--g-space-3);
  font-size: var(--g-text-sm);
  line-height: var(--g-lh-body);
  margin-top: var(--g-space-3);
  margin-bottom: 0;
}
.gchat .wiz-error:empty{ display: none; }
.gchat .wiz-title{
  font-weight: 600;
  color: var(--g-ink);
  margin: 0 0 var(--g-space-4);
  font-size: var(--g-text-md);
  line-height: var(--g-lh-tight);
}
.gchat .wiz-row{
  display: block;
  margin-bottom: var(--g-space-4);
}
.gchat .wiz-row > label,
.gchat .field span{
  display: block;
  font-size: var(--g-text-sm);
  color: var(--g-ink-muted);
  margin: 0 0 var(--g-space-2);
  font-weight: 500;
}
.gchat .wiz-row input[type="text"],
.gchat .wiz-row input[type="email"],
.gchat .wiz-row textarea,
.gchat .field input,
.gchat .field textarea{
  width: 100%;
  min-height: 44px;
  padding: var(--g-space-3) var(--g-space-4);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-md);
  font-family: inherit;
  font-size: var(--g-text-base);
  background: var(--g-surface);
  color: var(--g-ink);
  outline: none;
  transition: border-color 160ms ease-out, box-shadow 80ms ease-out;
}
/* Phase 2bis-C Fix 7 — focus coral via box-shadow (suit border-radius) au lieu
   d'outline qui rendait un rectangle rouge sur Brave/Safari. */
.gchat .wiz-row input:focus,
.gchat .wiz-row input:focus-visible,
.gchat .wiz-row textarea:focus,
.gchat .wiz-row textarea:focus-visible,
.gchat .field input:focus,
.gchat .field input:focus-visible,
.gchat .field textarea:focus,
.gchat .field textarea:focus-visible{
  outline: none;
  border-color: var(--g-coral-500);
  box-shadow: 0 0 0 3px rgba(255, 121, 121, 0.22);
}

.gchat .grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--g-space-3);
}

/* Switch / petite case à cocher textuelle */
.gchat .switch{
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  font-size: var(--g-text-sm);
  color: var(--g-ink-muted);
  margin-top: var(--g-space-2);
}
.gchat .switch input[type="checkbox"]{
  accent-color: var(--g-coral-500);
}

/* C — étape consentement : lignes case à cocher + libellé (CGU / mise en relation) */
.gchat .gcb-consent-row{
  display: flex;
  align-items: flex-start;
  gap: var(--g-space-2);
  margin-top: var(--g-space-3);
  font-size: var(--g-text-sm);
  color: var(--g-ink);
  line-height: 1.4;
  cursor: pointer;
}
.gchat .gcb-consent-row input[type="checkbox"]{
  accent-color: var(--g-coral-500);
  margin-top: 2px;
  flex: 0 0 auto;
}
.gchat .gcb-consent-row a{
  color: var(--g-coral-700, #b83b3b);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mini-map dans le wizard location */
.gchat .mini-map{
  width: 100%;
  height: 240px;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-md);
  overflow: hidden;
  background: var(--g-surface-3);
  margin-top: var(--g-space-2);
}

/* =========================================================
 * Boutons wizard (primaire / secondaire) + progress
 * ========================================================= */
.gchat .wiz-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--g-space-2);
  margin-top: var(--g-space-5);
}

.gchat .btn-primary,
.gchat .btn-secondary{
  border: none;
  border-radius: var(--g-radius-md);
  padding: var(--g-space-3) var(--g-space-5);
  font-family: inherit;
  font-size: var(--g-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
  min-height: 44px;
}
.gchat .btn-primary{
  background: var(--g-coral-500);
  color: #fff;
}
.gchat .btn-primary:hover{ background: var(--g-coral-600); }
.gchat .btn-primary:disabled,
.gchat .btn-primary.is-disabled{
  background: var(--g-ink-disabled);
  cursor: not-allowed;
}
.gchat .btn-secondary{
  background: transparent;
  color: var(--g-ink-muted);
  border: 1px solid var(--g-line);
}
.gchat .btn-secondary:hover{
  background: var(--g-surface-3);
  color: var(--g-ink);
}

/* Progress (fil + fraction) — Option A du proposal §5.6 */
.gchat .wiz-progress{
  display: flex;
  align-items: center;
  gap: var(--g-space-3);
  margin: var(--g-space-4) 0 var(--g-space-2);
  font-size: var(--g-text-xs);
  color: var(--g-ink-muted);
}
.gchat .wiz-progress-bar{
  flex: 1;
  height: 3px;
  background: var(--g-line);
  border-radius: var(--g-radius-pill);
  overflow: hidden;
}
.gchat .wiz-progress-fill{
  height: 100%;
  background: var(--g-coral-500);
  border-radius: var(--g-radius-pill);
  transition: width 240ms ease-out;
}

/* =========================================================
 * Recap card (Phase 2bis-C Fix 8 — aligné proposal §8.5)
 * Labels au-dessus, valeurs en dessous, type de fiche en pills coral.
 * ========================================================= */
.gchat .recap-bubble{
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  background: var(--g-surface);
  padding: var(--g-space-5) var(--g-space-4);
  box-shadow: var(--g-shadow-sm);
}
.gchat .recap-title{
  margin: 0 0 var(--g-space-4);
  font-size: var(--g-text-md);
  font-weight: 700;
  color: var(--g-ink);
  border-bottom: 1px solid var(--g-line);
  padding-bottom: var(--g-space-3);
}
.gchat .recap-section{
  margin-bottom: var(--g-space-4);
}
.gchat .recap-section:last-of-type{
  margin-bottom: 0;
}
.gchat .recap-label{
  display: block;
  font-size: var(--g-text-sm);
  color: var(--g-ink-muted);
  font-weight: 500;
  margin-bottom: var(--g-space-2);
}
.gchat .recap-value{
  font-size: var(--g-text-base);
  color: var(--g-ink);
  line-height: var(--g-lh-body);
}
.gchat .recap-list{
  /* list-style explicite : le thème beaucoup applique un reset list-style:none
     qui empêchait les bullets de s'afficher. */
  list-style: disc outside;
  margin: 0 0 0 var(--g-space-5);
  padding-left: var(--g-space-3);
  color: var(--g-ink);
  font-size: var(--g-text-base);
}
.gchat .recap-list li{
  margin: var(--g-space-1) 0;
  line-height: var(--g-lh-body);
  display: list-item;
  color: var(--g-ink);
}
.gchat .recap-list li::marker{
  color: var(--g-coral-500);
}
.gchat .recap-actions{
  display: flex;
  justify-content: flex-end;
  gap: var(--g-space-2);
  margin-top: var(--g-space-5);
  padding-top: var(--g-space-4);
  border-top: 1px solid var(--g-line);
}
.gchat .recap-actions .btn-primary,
.gchat .recap-actions .btn-secondary{
  min-height: 40px;
}

/* Phase 4.3.1 — `.toggle-pin-type` (switch Portrait/Projet du recap) supprimé :
   le pin_type est désormais forcé par le contexte, plus de choix utilisateur. */

/* =========================================================
 * Review block (cartes recap + preview)
 * ========================================================= */
.gchat .review-block,
.gchat .card-bubble{
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  background: var(--g-surface);
  padding: var(--g-space-4);
  box-shadow: var(--g-shadow-sm);
}
.gchat .rev-head,
.gchat .rev-title{
  font-weight: 700;
  margin: 0 0 var(--g-space-3);
  color: var(--g-ink);
  font-size: var(--g-text-md);
}
.gchat .rev-sec{ margin-bottom: var(--g-space-3); }
.gchat .rev-label{ font-weight: 600; color: var(--g-ink); }
.gchat .rev-text { color: var(--g-ink); }
.gchat .rev-actions{
  display: flex;
  gap: var(--g-space-2);
  flex-wrap: wrap;
  margin-top: var(--g-space-4);
}
.gchat .rev-title-wrap{
  display: flex;
  align-items: center;
  gap: var(--g-space-2);
  flex-wrap: wrap;
  margin: var(--g-space-2) 0 var(--g-space-3);
}

/* Cards preview */
.gchat .card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-2);
}
.gchat .card-type{
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-1);
  font-size: var(--g-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--g-coral-700);
  padding: var(--g-space-1) var(--g-space-3);
  border-radius: var(--g-radius-pill);
  background: var(--g-coral-100);
  border: 1px solid var(--g-coral-200);
}
.gchat .card-excerpt{
  margin: 0 0 var(--g-space-2);
  color: var(--g-ink);
  font-size: var(--g-text-sm);
}
.gchat .card-actions{
  display: flex;
  gap: var(--g-space-2);
  flex-wrap: wrap;
}
.gchat .card-hint{
  margin: var(--g-space-3) 0 0;
  font-size: var(--g-text-xs);
  color: var(--g-ink-muted);
}

/* Chip "public" affiché dans une fiche review */
.gchat .chip.pub{
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-1);
  padding: 2px var(--g-space-2);
  margin-right: var(--g-space-1);
  background: var(--g-coral-100);
  border: 1px solid var(--g-coral-200);
  border-radius: var(--g-radius-pill);
  font-size: var(--g-text-xs);
  font-weight: 600;
  color: var(--g-coral-700);
}

/* =========================================================
 * Liens / CTA externes au shell
 * ========================================================= */
.gchat .chat-cta-planet{
  margin-top: var(--g-space-4);
  text-align: center;
}
.gchat .cta-pill{
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  padding: var(--g-space-2) var(--g-space-4);
  border-radius: var(--g-radius-pill);
  background: var(--g-coral-100);
  border: 1px solid var(--g-coral-200);
  color: var(--g-coral-700);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--g-text-sm);
  transition: background 160ms ease-out;
}
.gchat .cta-pill:hover{
  background: var(--g-coral-200);
  color: var(--g-coral-700);
}

/* =========================================================
 * Alias legacy — mapping vers le nouveau système
 * Les modules JS génèrent encore `.ctrl-btn`, `.ctrl-btn.primary`,
 * `.review-choices`, `.choices.only-two`, etc. Au lieu de réécrire
 * leurs renders, on alias ces classes sur le nouveau visuel.
 * ========================================================= */

/* P3 — chips de catégorie de projet (confirmation au récap). */
.gchat .recap-cat-chips{
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-space-2);
}
.gchat .gp-cat-chip{
  border: 1px solid var(--g-line);
  background: transparent;
  color: var(--g-ink-muted);
  border-radius: var(--g-radius-md);
  padding: var(--g-space-2) var(--g-space-4);
  font-family: inherit;
  font-size: var(--g-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.gchat .gp-cat-chip:hover{ background: var(--g-surface-3); color: var(--g-ink); }
.gchat .gp-cat-chip.is-active{
  background: var(--g-coral-500);
  color: #fff;
  border-color: var(--g-coral-500);
  font-weight: 600;
}

.gchat .ctrl-btn{
  border: 1px solid var(--g-line);
  background: transparent;
  color: var(--g-ink-muted);
  border-radius: var(--g-radius-md);
  padding: var(--g-space-3) var(--g-space-4);
  font-family: inherit;
  font-size: var(--g-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
  min-height: 40px;
}
.gchat .ctrl-btn:hover{
  background: var(--g-surface-3);
  color: var(--g-ink);
}
.gchat .ctrl-btn.primary{
  background: var(--g-coral-500);
  color: #fff;
  border-color: var(--g-coral-500);
  font-weight: 600;
}
.gchat .ctrl-btn.primary:hover{
  background: var(--g-coral-600);
  border-color: var(--g-coral-600);
  color: #fff;
}
.gchat .ctrl-btn:disabled,
.gchat .ctrl-btn.is-disabled{
  background: var(--g-surface-3);
  color: var(--g-ink-disabled);
  cursor: not-allowed;
}

/* Review choices (rewrite / discuss) */
.gchat .review-choices{
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-md);
  padding: var(--g-space-3) var(--g-space-4);
  margin-top: var(--g-space-2);
}
.gchat .review-choices .rev-head{
  font-weight: 600;
  margin: 0 0 var(--g-space-3);
  font-size: var(--g-text-sm);
  color: var(--g-ink);
}
.gchat .choices{
  display: flex;
  gap: var(--g-space-2);
  flex-wrap: wrap;
}
.gchat .choices.only-two{ justify-content: flex-start; }

/* Listes recap */
.gchat .rev-list,
.gchat .card-list{
  /* P4-fix #2 — list-style explicite : le thème beaucoup applique un reset
     `list-style:none` sur ul → les puces des listes Intention/Besoin/Offre
     du récap disparaissaient. On rétablit comme pour .recap-list. ADR-117. */
  list-style: disc outside;
  margin: var(--g-space-1) 0 var(--g-space-3) var(--g-space-5);
  padding-left: var(--g-space-3);
  color: var(--g-ink);
  font-size: var(--g-text-sm);
}
.gchat .rev-list li,
.gchat .card-list li{ margin: var(--g-space-1) 0; display: list-item; }
.gchat .rev-list li::marker,
.gchat .card-list li::marker{ color: var(--g-coral-500); }

.gchat .rev-subtitle{
  margin: 0;
  font-size: var(--g-text-xs);
  color: var(--g-ink-muted);
}

/* Toggle pin_type rendu avec <input type="radio"> dans recap */
.gchat .card-pintype{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-space-3);
  margin: var(--g-space-3) 0;
  font-size: var(--g-text-sm);
  color: var(--g-ink);
}
.gchat .card-pintype label{
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-1);
  cursor: pointer;
}
.gchat .card-pintype input[type="radio"]{
  accent-color: var(--g-coral-500);
}

.gchat .after-submit{
  margin-top: var(--g-space-3);
  text-align: center;
}

/* =========================================================
 * Focus visible (clavier-only, pas de halo au clic souris)
 * ========================================================= */
/* Phase 2bis-C Fix 7 — focus-visible global pour boutons/liens. Les inputs
   et textareas ont leur propre règle box-shadow (qui suit le border-radius).
   On exclut ces éléments pour ne pas leur poser un outline rectangulaire. */
.gchat button:focus-visible,
.gchat a:focus-visible,
.gchat [role="button"]:focus-visible,
.gchat .g-suggestion:focus-visible{
  outline: 2px solid var(--g-coral-500);
  outline-offset: 2px;
  border-radius: inherit;
}

/* =========================================================
 * Utilitaires
 * ========================================================= */
*{ accent-color: var(--g-coral-500); }
.gchat .hidden{ display: none !important; }

/* =========================================================
 * Responsive — desktop ≥ 1024 (mineure)
 * ========================================================= */
@media (min-width: 1024px){
  .gchat .chat-shell{ height: clamp(560px, 72vh, 82vh); }
  .gchat .msg .bubble{ max-width: 75%; }
  .gchat .mini-map{ height: 280px; }
}

/* =========================================================
 * Responsive — mobile ≤ 720
 * ========================================================= */
@media (max-width: 720px){
  .content{ padding: 15% 0 0 0; }
  .gchat{ padding: var(--g-space-2) var(--g-space-2) var(--g-space-6); }
  .gchat .grid-2{ grid-template-columns: 1fr; }
  .gchat .msg .bubble{
    max-width: 85%;
    font-size: var(--g-text-md);   /* 16px sur mobile pour lisibilité */
  }
  .gchat .chat-stream{ font-size: var(--g-text-md); }
  .gchat .ctrl-input{ font-size: var(--g-text-md); }
  .gchat .g-suggestions{ padding-bottom: var(--g-space-2); }
  .gchat .g-suggestion{ font-size: var(--g-text-sm); }
  .gchat .wizard{ width: calc(100% - 16px); }
  .gchat .wiz-step{ padding: var(--g-space-5) var(--g-space-4); }
  .gchat .wiz-actions{ flex-wrap: wrap; justify-content: stretch; }
  .gchat .wiz-actions .btn-primary,
  .gchat .wiz-actions .btn-secondary{ flex: 1 1 100%; }
}

/* =========================================================
 * Reduced motion (a11y)
 * Animations désactivées sauf typing indicator → statique 0.7
 * ========================================================= */
@media (prefers-reduced-motion: reduce){
  .gchat *,
  .gchat *::before,
  .gchat *::after{
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .gchat .typing i{
    animation: none !important;
    opacity: 0.7 !important;
    transform: none !important;
  }
}


/* =========================================================
 * Phase 4.3.2 — étape photo optionnelle (fin flow projet)
 * Tache 1 (audit-260701) : l'input <input type=file> rendait natif/brut à
 * l'intérieur même de la zone censée le déclencher (non stylable en CSS).
 * .gp-cb-photo-drop devient .gp-cb-photo-btn, appliqué à un vrai <button>
 * (l'input réel reste caché, cf. girafe-chatbot.js) — même look coral en
 * pointillés qu'avant, juste plus l'input natif visible dedans. Le bouton
 * "Ne pas publier" (.gp-cb-photo-skip) utilisait .gp-btn/.gp-btn-secondary,
 * des classes qui ne chargent pas sur /girafe-et-vous/ (girafe-profile.css
 * non enqueue ici) : rendait donc en texte brut non stylé. Stylé ici en
 * pilule secondaire (mêmes tokens que .g-suggestion) pour rester cohérent
 * avec le nouveau bouton "Choisir" dans la même bulle.
 * ========================================================= */
.gchat .gp-cb-photo-step { display: flex; flex-direction: column; gap: var(--g-space-3); }
.gchat .gp-cb-photo-zone { display: flex; }
.gchat .gp-cb-photo-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 14px; border: 2px dashed var(--g-coral-200);
  border-radius: var(--g-radius-md); background: var(--g-coral-50);
  color: var(--g-coral-700); font-size: var(--g-text-sm); font-weight: 600;
  font-family: inherit; cursor: pointer; text-align: center;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.gchat .gp-cb-photo-btn:hover { background: var(--g-coral-100); }
.gchat .gp-cb-photo-btn:disabled { opacity: .6; cursor: default; background: var(--g-coral-50); }
.gchat .gp-cb-photo-actions { display: flex; gap: var(--g-space-2); flex-wrap: wrap; }
.gchat .gp-cb-photo-status { font-size: var(--g-text-xs); }
.gchat .gp-cb-photo-skip {
  background: var(--g-surface-2); border: 1px solid var(--g-line);
  border-radius: var(--g-radius-pill); padding: var(--g-space-2) var(--g-space-4);
  font-size: var(--g-text-sm); font-family: inherit; color: var(--g-ink);
  cursor: pointer; font-weight: 500;
  transition: background 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.gchat .gp-cb-photo-skip:hover { background: var(--g-coral-100); border-color: var(--g-coral-200); color: var(--g-coral-700); }
.gchat .gp-cb-photo-skip:disabled { opacity: .6; cursor: default; background: var(--g-surface-2); color: var(--g-ink); }

/* 8-ter Étape 4 — écran pré-chat (information IA, avant le chatbot/géocodage) */
.cb-prechat { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(28, 22, 20, .55); backdrop-filter: blur(2px); }
.cb-prechat-card { max-width: 520px; width: 100%; background: var(--g-surface, #fefcfa); border-radius: 16px; padding: 24px 26px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.cb-prechat-title { margin: 0 0 12px; font-size: 19px; font-weight: 700; color: var(--g-ink, #1c1614); }
.cb-prechat-text { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--g-ink, #1c1614); }
.cb-prechat-note { margin: 0 0 18px; font-size: 12px; font-style: italic; color: var(--g-ink-muted, #5b6172); }
/* 8-ter B — bouton d'acquittement : specificité renforcée + !important car le thème
   beaucoup applique `background:transparent` aux <button> (bouton sinon blanc sur blanc,
   invisible → blocage perçu de l'écran pré-chat). */
#girafe-chatbot .cb-prechat-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 28px; border: 0 !important; border-radius: 999px; background: #ff7979 !important; color: #fff !important; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; box-shadow: none; }
#girafe-chatbot .cb-prechat-btn:hover { filter: brightness(.96); background: #ff7979 !important; }