/* =========================================================================
   Hallucide — front de chat DSFR.
   Le DSFR (CDN) fournit composants et tokens ; ce fichier ne contient que :
     1. le layout chatbox (en-tête / fil / composer / panneau latéral) ;
     2. les classes hd-* partagées avec mock/index.html (couleurs de statut,
        prose annotée, donut, barre de confiance).
   Une seule source de couleur par bande : verifie #18753C, trace #000091,
   prudence #B34000, risque #CE0500 (alignées sur le mock).
   ========================================================================= */

/* --- Layout général ------------------------------------------------------ */
html, body { height: 100%; }
body { margin: 0; }

.hd-app {
  display: flex; flex-direction: column; height: 100vh;
  max-width: 60rem; margin: 0 auto; padding: 0 1rem;
}

.hd-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 0; border-bottom: 1px solid var(--border-default-grey);
}
.hd-header__logo { height: 3rem; width: auto; }
.hd-header__brand { display: flex; align-items: center; gap: .9rem; }
.hd-header__title { font-size: 1.375rem; font-weight: 700; margin: 0; }
.hd-header__tagline { font-size: .75rem; color: var(--text-mention-grey); margin: 0; }
.hd-header__controls { margin-left: auto; display: flex; gap: .5rem; }
.hd-header__controls .fr-select { width: auto; font-size: .875rem; padding-top: .25rem; padding-bottom: .25rem; }

.hd-thread { flex: 1; overflow-y: auto; padding: 1.5rem 0; }

/* --- Messages ------------------------------------------------------------ */
.hd-msg { margin-bottom: 1.25rem; }
.hd-msg__who { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
               color: var(--text-mention-grey); margin-bottom: .25rem; }

.hd-msg--user { display: flex; flex-direction: column; align-items: flex-end; }
.hd-msg--user .hd-msg__bubble {
  max-width: 80%; background: var(--background-alt-grey);
  border: 1px solid var(--border-default-grey); border-radius: .25rem;
  padding: .75rem 1rem;
}
.hd-msg--user p { margin: 0; }

.hd-msg--bot .hd-msg__bubble {
  background: var(--background-default-grey);
  border: 1px solid var(--border-default-grey); border-radius: .25rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

/* Indicateur de génération */
.hd-typing i { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%;
               background: var(--text-mention-grey); margin-right: .25rem;
               animation: hd-typing 1.2s infinite ease-in-out; }
.hd-typing i:nth-child(2) { animation-delay: .2s; }
.hd-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes hd-typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* --- Prose annotée (identique au mock) ------------------------------------ */
.hd-response { font-size: 1.05rem; line-height: 1.8; margin: 0 0 1rem; }
.hd-mark { text-decoration: underline; text-decoration-thickness: 2px;
           text-underline-offset: 3px; cursor: pointer; }
.hd-mark--verifie  { text-decoration-color: #18753C; }
.hd-mark--trace    { text-decoration-color: #000091; }
.hd-mark--prudence { text-decoration-color: #B34000; }
.hd-mark--risque   { text-decoration-color: #CE0500; text-decoration-style: wavy; }
.hd-mark:hover, .hd-mark:focus { background: var(--background-contrast-grey); outline: none; }
.hd-flash { animation: hd-flash 1.2s ease-out; }
@keyframes hd-flash { 0% { background: #FCEEAC; } 100% { background: transparent; } }

/* --- Résumé global : donut + badges --------------------------------------- */
.hd-summary { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
              padding: 1rem 1.25rem; border: 1px solid var(--border-default-grey);
              border-radius: .25rem; margin-bottom: 1rem;
              background: var(--background-alt-grey); }
.hd-summary__detail { flex: 1 1 260px; }
.hd-breakdown { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }

/* Badges par bande (une seule source de couleur, alignée mock) */
.hd-b--verifie  { color: #18753C; background-color: #B8FEC9; }
.hd-b--trace    { color: #000091; background-color: #E3E3FD; }
.hd-b--prudence { color: #B34000; background-color: #FFE9A8; }
.hd-b--risque   { color: #CE0500; background-color: #FFE9E9; }

/* --- Accordéons de vérification (markup DSFR, comportement app.js) -------- */
.fr-accordion.hd-claim--verifie  { box-shadow: inset .25rem 0 0 0 #18753C; }
.fr-accordion.hd-claim--trace    { box-shadow: inset .25rem 0 0 0 #000091; }
.fr-accordion.hd-claim--prudence { box-shadow: inset .25rem 0 0 0 #B34000; }
.fr-accordion.hd-claim--risque   { box-shadow: inset .25rem 0 0 0 #CE0500; }
.fr-accordion__btn .fr-badge { margin-right: .75rem; flex: 0 0 auto; }
/* Corps d'accordéon maison (fr-collapse DSFR impose max-height:0 sans son JS). */
.hd-acc__body { display: none; padding: 0 1rem 0.5rem; }
.hd-acc__body.hd-open { display: block; }

.hd-claim__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.hd-detail__key { display: inline-block; min-width: 5.5rem; font-size: .75rem;
                  text-transform: uppercase; letter-spacing: .03em;
                  color: var(--text-mention-grey); }
.hd-correction { font-size: .9rem; color: #CE0500; }

/* Barre de confiance du modèle (stabilité interne, PAS la vérité → fill neutre) */
.hd-bar { display: flex; align-items: center; gap: .6rem; font-size: .8rem;
          color: var(--text-mention-grey); }
.hd-bar__track { display: inline-block; width: 130px; height: 8px; border-radius: 4px;
                 background: #EEEEEE; overflow: hidden; flex: 0 0 auto; }
.hd-bar__fill { display: block; height: 100%; background: #000091; border-radius: 4px; }

/* --- Composer -------------------------------------------------------------- */
.hd-composer { border-top: 1px solid var(--border-default-grey); padding: 1rem 0 .75rem; }
.hd-composer__row { display: flex; gap: .5rem; align-items: flex-end; }
.hd-composer__row .fr-input { flex: 1; resize: none; max-height: 10rem; }
.hd-composer__hint { margin: .5rem 0 0; }

/* Formulaire de route (candidats parlement / identifiants data.gouv) */
.hd-route { border: 1px solid var(--border-default-grey); border-radius: .25rem;
            padding: 1rem; margin-bottom: .75rem; background: var(--background-alt-grey); }
.hd-route label { display: block; font-size: .875rem; margin-bottom: .5rem; }
.hd-route .fr-input { margin-top: .25rem; }
.hd-cands { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }

.hd-raw pre { font-size: .7rem; max-height: 20rem; overflow: auto;
              background: var(--background-alt-grey); padding: .75rem; border-radius: .25rem; }

/* Masquage générique (réponse brute, accordéons au-delà de « Voir plus ») */
.hd-hidden { display: none; }

/* Ligne plate pour une donnée tracée datée (pas de liste déroulante) */
.hd-flat { border: 1px solid var(--border-default-grey); border-radius: .25rem;
           padding: .6rem .9rem; margin-bottom: .5rem; font-size: .95rem;
           background: var(--background-default-grey); }
.hd-flat.hd-claim--verifie  { box-shadow: inset .25rem 0 0 0 #18753C; }
.hd-flat.hd-claim--trace    { box-shadow: inset .25rem 0 0 0 #000091; }
.hd-flat.hd-claim--prudence { box-shadow: inset .25rem 0 0 0 #B34000; }
.hd-flat.hd-claim--risque   { box-shadow: inset .25rem 0 0 0 #CE0500; }
.hd-flat .fr-badge { margin-right: .5rem; }
.hd-flat .fr-link { margin-left: .5rem; white-space: nowrap; }

/* Popup d'accueil fermable */
.hd-welcome { display: flex; gap: 1rem; align-items: flex-start;
              border: 1px solid #000091; border-left-width: .25rem; border-radius: .25rem;
              padding: 1rem 1.25rem; margin-bottom: 1.25rem;
              background: var(--background-alt-grey); }
.hd-welcome p { flex: 1; margin: 0; }
.hd-welcome__close { flex: 0 0 auto; }