/**
 * GIRAFE — supplément de style des liens pilotes.
 *
 * L'apparence vient de `girafe-chatbot.css` : même coquille, mêmes classes,
 * même design system `--g-*`, mêmes réglages d'accessibilité déjà validés.
 * Une seule apparence à maintenir pour les deux chatbots.
 *
 * Ce fichier n'ajoute QUE ce qui n'existe pas là-bas : les rangées de liste
 * éditables du récapitulatif, ce qui manque au gabarit `.wizard` pour être
 * un vrai dialogue, et l'étape « lieu du projet ». Rien d'autre. S'il
 * grossit, c'est le signe qu'une règle a sa place dans la feuille principale.
 */

/* Réservé aux lecteurs d'écran. Jamais display:none — un contenu masqué
   ainsi n'est pas annoncé du tout. */
.gpilot-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Rangée d'un axe éditable (besoins / offres / intention). */
.gchat .recap-list .gpilot-item {
  display: flex;
  gap: var(--g-space-2);
  align-items: center;
  margin: var(--g-space-1) 0;
}
.gchat .recap-list .gpilot-item::marker { content: ""; }

/* min-width:0 : sans cela, un champ dans une rangée flex refuse de se
   réduire sous sa largeur intrinsèque et déborde du conteneur. */
.gchat .recap-list .gpilot-item input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: var(--g-space-2) var(--g-space-3);
  border: 1px solid var(--g-line-strong);
  border-radius: var(--g-radius-md);
  background: var(--g-surface);
  font-family: inherit;
  font-size: var(--g-text-base);
  color: var(--g-ink);
}
.gchat .recap-list .gpilot-item input[type="text"]:focus-visible {
  outline: none;
  border-color: var(--g-coral-500);
  box-shadow: var(--g-ring);
}

/* Retrait d'un élément. 44 px de cible tactile via la zone étendue, comme
   le bouton d'envoi (`.ctrl-send::before`). */
.gchat .recap-list .gpilot-rm {
  position: relative;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-pill);
  background: var(--g-surface-2);
  color: var(--g-ink-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.gchat .recap-list .gpilot-rm::before { content: ""; position: absolute; inset: -4px; }
.gchat .recap-list .gpilot-rm:hover { color: var(--g-error-ink); border-color: var(--g-error-ink); }
.gchat .recap-list .gpilot-rm:focus-visible {
  outline: none;
  border-color: var(--g-coral-500);
  box-shadow: var(--g-ring);
}

/* Le bouton « Ajouter » est une action secondaire : il ne doit pas occuper
   toute la largeur, ce qui lui donnerait le poids d'une action principale. */
.gchat .wiz-row > .g-suggestion { align-self: flex-start; margin-top: var(--g-space-2); }

/* Le récapitulatif remplace le composeur : la rangée de saisie est retirée
   du flux ET du parcours de tabulation. */
.gchat .ctrl-wrap[hidden] { display: none; }

/* ------------------------------------------------------------------
   Fenêtre d'envoi — gabarit `.wizard` du chatbot principal, sans AUCUNE
   taille propre : seulement les tokens de son design system (--g-text-*,
   --g-ink*). Une version antérieure de ces écrans posait ses propres
   valeurs (13px, puis 14px, et une opacity) : trois échelles
   typographiques cohabitaient et le texte le plus petit perdait son
   contraste. Les consentements reprennent `.gcb-consent-row`, la classe
   du chatbot principal, plutôt qu'une variante maison.
   ------------------------------------------------------------------ */

/* Mention sous un champ. Même niveau que les libellés du formulaire
   (`.wiz-row > label`). La couleur porte seule l'atténuation : jamais
   d'opacity, qui dégraderait le contraste. */
.gchat .wiz-hint {
  margin: var(--g-space-2) 0 0;
  font-size: var(--g-text-sm);
  line-height: var(--g-lh-body);
  color: var(--g-ink-muted);
}

/* Bouton de fermeture. Le chatbot principal ne ferme qu'au clic hors du
   panneau — un geste invisible au clavier comme au lecteur d'écran.
   44 px de cible via la zone étendue, comme `.ctrl-send`. */
.gchat .wiz-step { position: relative; }
.gchat .wiz-step > .wiz-title { padding-right: 44px; }
.gchat .gpilot-wiz-close {
  position: absolute;
  top: var(--g-space-3);
  right: var(--g-space-3);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-pill);
  background: var(--g-surface-2);
  color: var(--g-ink-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.gchat .gpilot-wiz-close::before { content: ""; position: absolute; inset: -4px; }
.gchat .gpilot-wiz-close:hover { color: var(--g-ink); }
.gchat .gpilot-wiz-close:focus-visible {
  outline: none;
  border-color: var(--g-coral-500);
  box-shadow: var(--g-ring);
}

/* Lieu du projet : un groupe de choix, donc un vrai <fieldset> et sa
   <legend> — un lecteur d'écran annonce la question avant chaque option.
   Remis à plat pour se fondre dans le gabarit ; la légende reprend le style
   des libellés de champ. */
.gchat .gpilot-place {
  border: 0;
  margin: 0 0 var(--g-space-4);
  padding: 0;
  min-width: 0;
}
.gchat .gpilot-place > legend {
  padding: 0;
  margin: 0 0 var(--g-space-2);
  font-size: var(--g-text-sm);
  color: var(--g-ink-muted);
  font-weight: 500;
}
.gchat .gpilot-place > .gcb-consent-row:first-of-type { margin-top: 0; }
.gchat .gcb-consent-row input[type="radio"] {
  accent-color: var(--g-coral-500);
  margin-top: 2px;
  flex: 0 0 auto;
}
/* Aide d'une option, alignée sur son texte et non sous le bouton radio. */
.gchat .gpilot-place .gpilot-option-hint {
  margin: var(--g-space-1) 0 0;
  padding-left: calc(13px + var(--g-space-2));
}
.gchat .gpilot-place-custom { margin-top: var(--g-space-3); }
.gchat .gpilot-place-custom[hidden] { display: none; }
.gchat .gpilot-field-label {
  margin: 0 0 var(--g-space-2);
  font-size: var(--g-text-sm);
  color: var(--g-ink-muted);
  font-weight: 500;
}

/* Compte d'équipe connecté : prévenir avant la saisie, pas après une
   attente vaine. Couple de tokens « warning » du design system (AA). */
.gchat .gpilot-staff {
  margin: 0 0 var(--g-space-4);
  padding: var(--g-space-2) var(--g-space-3);
  border-radius: var(--g-radius-md);
  background: var(--g-warning-bg);
  color: var(--g-warning-ink);
  font-size: var(--g-text-sm);
  line-height: var(--g-lh-body);
}

/* Écran d'attente : paragraphes aérés, statut détaché pour se lire comme un
   état et non comme une suite de phrase. */
.gchat .gpilot-check > p { margin: 0 0 var(--g-space-3); line-height: var(--g-lh-body); }
.gchat .gpilot-check > .typing { display: flex; margin: var(--g-space-2) 0 var(--g-space-3); }
.gchat .gpilot-status { margin-top: var(--g-space-4); font-weight: 500; }

/* Lien présenté comme un bouton (« Voir mon espace »). */
.gchat .gpilot-link-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}