/* L'assistant (BO-26) — le bouton du bandeau, le panneau latéral, ses bulles et ses cartes.

   TOUT VIENT DES JETONS DE :root (app.css) : les deux thèmes suivent sans règle dédiée.

   LE PANNEAU NE COUVRE NI LES MESSAGES NI LES FENÊTRES. Il est sous les modales (z 60), sous les
   messages (z 80) et sous la palette (z 90) : une confirmation d'écran ou un « Enregistré » restent
   lisibles par-dessus. Sur grand écran il POUSSE le contenu au lieu de le masquer — c'est ce qui
   permet de voir l'écran se mettre à jour quand l'assistant vient d'y écrire — et les messages se
   rangent à sa gauche. En dessous, il se pose par-dessus ; sur téléphone, il prend toute la largeur. */

:root { --largeur-assistant: 420px; }

/* ------------------------------------------------------------ bouton du bandeau */

.bouton-assistant {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 9px 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--accent-doux); color: var(--accent-texte);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.bouton-assistant:hover:not(:disabled) { background: var(--accent-doux); border-color: var(--accent); color: var(--accent-texte); }
.bouton-assistant .icone { color: var(--accent); }
.bouton-assistant kbd { font-size: 10.5px; opacity: .8; }
.bouton-assistant[aria-expanded="true"] { background: var(--degrade); color: #fff; border-color: transparent; }
.bouton-assistant[aria-expanded="true"] .icone { color: #fff; }
.bouton-assistant[aria-expanded="true"] kbd { color: inherit; background: rgba(255, 255, 255, .18); border-color: transparent; }
body.sans-session .bouton-assistant, body.sans-session .assistant { display: none !important; }

/* ------------------------------------------------------------------ le panneau */

.assistant {
  position: fixed; top: 56px; right: 0; bottom: 0; z-index: 40;
  width: var(--largeur-assistant); max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--fond-carte); border-left: 1px solid var(--bord);
  box-shadow: var(--ombre-haute);
  animation: assistantEntre .28s var(--sortie) both;
}
.assistant[hidden] { display: none; }
@keyframes assistantEntre { from { opacity: 0; transform: translateX(24px); } }

/* Grand écran : le contenu se range à gauche du panneau, les messages aussi. */
@media (min-width: 1200px) {
  body.assistant-ouvert .corps { margin-right: var(--largeur-assistant); }
  body.assistant-ouvert #toasts { right: calc(var(--largeur-assistant) + 18px); }
}

.assistant-tete {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--bord);
}
.assistant-tete h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.assistant-tete button { font-size: 12.5px; }
.assistant-logo { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; }
.assistant-logo img { width: 28px; height: 28px; }

.assistant-fil {
  flex: 1; overflow-y: auto; padding: 16px; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 12px;
}
.assistant-fil:focus { outline: none; }
.assistant-fil > * { animation: monte .25s var(--sortie) both; }

/* ---------------------------------------------------------------- l'accueil */

.assistant-accueil { margin: auto 0; text-align: center; color: var(--texte-doux); font-size: 13.5px; padding: 8px; }
.assistant-accueil p { margin: 6px 0; }
.assistant-accueil-icone { width: 56px; height: 56px; display: inline-grid; place-items: center; margin-bottom: 6px; }
.assistant-accueil-icone img { width: 56px; height: 56px; }
.assistant-accueil-titre { color: var(--texte); font-weight: 650; font-size: 16px; }
.assistant-suggestions { display: grid; gap: 8px; margin-top: 16px; }
.assistant-suggestion {
  text-align: left; padding: 10px 12px; border-radius: 11px; font-size: 13.5px; font-weight: 500;
  background: var(--fond-creux); border: 1px solid var(--bord); color: var(--texte);
}
.assistant-suggestion:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-doux); color: var(--accent-texte); }

/* ------------------------------------------------------------------ le fil */

.assistant-bulle.moi {
  align-self: flex-end; max-width: 85%;
  padding: 9px 13px; border-radius: 14px 14px 4px 14px;
  background: var(--degrade); color: #fff; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.assistant-reponse { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.assistant-reponse p { margin: 0 0 8px; }
.assistant-reponse p:last-child { margin-bottom: 0; }
.assistant-reponse ul, .assistant-reponse ol { margin: 0 0 8px; padding-left: 20px; }
.assistant-reponse li { margin: 2px 0; }
.assistant-reponse code { background: var(--fond-creux); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.assistant-reponse pre { background: var(--fond-creux); padding: 10px 12px; border-radius: 9px; overflow-x: auto; margin: 0 0 8px; }
.assistant-reponse pre code { background: none; padding: 0; }
.assistant-reponse a { color: var(--accent-texte); font-weight: 550; }
.assistant-reponse.refus { color: var(--texte-doux); font-style: italic; }
.assistant-titre-md { margin-top: 4px !important; }

.assistant-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant-puce {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 500;
  background: var(--fond-creux); color: var(--texte-doux); border: 1px solid var(--bord);
}
.assistant-puce.ecriture { background: var(--succes-doux); color: var(--succes); border-color: color-mix(in srgb, var(--succes) 30%, transparent); }
.assistant-puce.echec { background: var(--erreur-doux); color: var(--erreur); border-color: color-mix(in srgb, var(--erreur) 30%, transparent); }

.assistant-info, .assistant-limite {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--texte-doux);
}
.assistant-limite { padding: 10px 12px; border-radius: 11px; background: var(--alerte-doux); color: var(--texte); }
.assistant-limite .icone { color: var(--alerte); }
.assistant-limite span { flex: 1; min-width: 160px; }
.assistant-erreur { margin: 0; font-size: 13px; }
.assistant-erreur a.bouton { padding: 6px 12px; }

/* --------------------------------------------------------- les confirmations */

.assistant-confirmations {
  display: grid; gap: 10px; padding: 12px; border-radius: 13px;
  background: var(--fond-creux); border: 1px solid var(--bord);
}
.assistant-confirmations-tete {
  display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux);
}
.assistant-carte {
  padding: 12px 13px; border-radius: 11px; background: var(--fond-carte);
  border: 1px solid var(--bord); border-left: 3px solid var(--accent);
  box-shadow: var(--ombre);
}
.assistant-carte.destructive { border-left-color: var(--erreur); background: color-mix(in srgb, var(--erreur-doux) 55%, var(--fond-carte)); }
.assistant-carte-titre { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.assistant-carte-titre .icone { color: var(--accent); flex: none; }
.assistant-carte.destructive .assistant-carte-titre .icone { color: var(--erreur); }
.assistant-carte-titre .pastille { margin-left: auto; }
.assistant-carte-resume { margin: 6px 0 0; font-size: 13px; color: var(--texte); }
.assistant-carte-alerte { margin: 6px 0 0; font-size: 12.5px; font-weight: 650; color: var(--erreur); }
.assistant-carte .rangee-boutons { margin-top: 10px; }
.assistant-carte .rangee-boutons button { padding: 6px 12px; font-size: 13px; }
.assistant-toutes { justify-content: flex-end; }

.assistant-entree {
  display: grid; grid-template-columns: minmax(70px, max-content) 1fr; gap: 3px 12px;
  margin: 9px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--fond-creux); font-size: 12.5px;
}
.assistant-entree dt { font-family: var(--mono); font-size: 11.5px; color: var(--texte-doux); }
.assistant-entree dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.assistant-entree code { font-size: 11.5px; }
.assistant-vide { display: inline-flex; align-items: center; gap: 4px; color: var(--alerte); font-weight: 650; }
.assistant-detail summary { cursor: pointer; color: var(--accent-texte); }
.assistant-detail pre {
  margin: 6px 0 0; padding: 8px; border-radius: 6px; background: var(--fond-carte);
  font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 280px; overflow-y: auto;
}

/* --------------------------------------------------------------- l'attente */

.assistant-attente {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 13px; color: var(--texte-doux); border-top: 1px solid var(--bord);
}
.assistant-attente[hidden] { display: none; }
.assistant-attente button { margin-left: auto; font-size: 12.5px; padding: 4px 9px; }
.assistant-points { display: inline-flex; gap: 4px; }
.assistant-points span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: assistantPoint 1.2s ease-in-out infinite;
}
.assistant-points span:nth-child(2) { animation-delay: .15s; }
.assistant-points span:nth-child(3) { animation-delay: .3s; }
@keyframes assistantPoint { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------------------------------------------------------------- la saisie */

.assistant-pied { padding: 10px 12px 12px; border-top: 1px solid var(--bord); }
.assistant-saisie {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 13px;
  border: 1px solid var(--bord-fort); background: var(--fond-carte);
}
.assistant-saisie:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.assistant-saisie textarea {
  flex: 1; resize: none; border: 0; background: transparent; padding: 7px 0; min-height: 22px; max-height: 160px;
  font: inherit; font-size: 14px; line-height: 1.45; color: var(--texte); box-shadow: none; outline: none;
}
.assistant-saisie textarea:disabled { cursor: not-allowed; opacity: .6; }
.assistant-saisie button { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; flex: none; }
.assistant-note { font-size: 12px; color: var(--alerte); margin-top: 6px; }
.assistant-note:empty { display: none; }
.assistant-aide { font-size: 11px; color: var(--texte-doux); margin-top: 7px; }
.assistant-aide kbd { font-size: 10px; }

/* ------------------------------------------------------- l'écran de réglages */

.assistant-statut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.assistant-statut .aide { width: 100%; color: var(--texte-doux); font-size: 12.5px; }
.assistant-titres { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.assistant-modele-actif { font-size: 11.5px; color: var(--texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.assistant-modele-actif:empty { display: none; }
.assistant-cles { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; gap: 4px; font-size: 13.5px; }
.assistant-cles li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assistant-cles-nom { min-width: 90px; font-weight: 600; }
.assistant-fournisseurs { border: 0; padding: 0; margin: 0 0 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.assistant-fournisseurs legend { font-weight: 600; font-size: 13px; margin-bottom: 8px; padding: 0; }
.assistant-fournisseur {
  flex: 1; min-width: 160px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--bord); border-radius: 11px; background: var(--fond-creux);
}
.assistant-fournisseur:has(input:checked) { border-color: var(--accent); background: var(--accent-doux); }
.assistant-fournisseur span { display: flex; flex-direction: column; }
.assistant-fournisseur small { color: var(--texte-doux); font-size: 12px; }
.assistant-fournisseur input { width: auto; margin: 0; }
.assistant-bloc-titre { font-weight: 650; font-size: 13px; margin: 18px 0 4px; }
.assistant-cle { display: flex; align-items: flex-end; gap: 8px; }
.assistant-cle .champ { flex: 1; margin-bottom: 10px; }
.assistant-cle button { margin-bottom: 10px; }
.assistant-modele { display: flex; gap: 8px; flex-wrap: wrap; }
.assistant-modele select { flex: 1; min-width: 200px; }
form > input[hidden] + p, .assistant-modele + input { margin-top: 8px; }
.assistant-a-savoir { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.5; }

/* ----------------------------------------------------------- petits écrans */

@media (max-width: 1100px) {
  .bouton-assistant kbd { display: none; }
}
@media (max-width: 860px) {
  .assistant { width: 100vw; border-left: 0; }
  .bouton-assistant { padding: 7px; }
  .bouton-assistant .texte { display: none; }
  .assistant-nouvelle { display: none; }
  .assistant-aide { display: none; }
}
/* LE BOUTON DE PLUS FAISAIT DÉBORDER LE BANDEAU : mesuré à 390 px, 400 px de bandeau, donc une page
   qui défile de côté et un panneau décalé d'autant. Sur téléphone, la marque perd son « backoffice ». */
@media (max-width: 480px) {
  .marque > span:not(.logo) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant, .assistant-fil > *, .assistant-points span { animation: none !important; }
}

/* ------------------------------------------------- suites, historique, coûts (BO-29) */

.assistant-suites { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant-suite {
  display: inline-flex; align-items: center; gap: 6px; text-align: left;
  padding: 6px 11px; border-radius: 16px; font-size: 12.5px; font-weight: 500;
  background: var(--accent-doux); color: var(--accent-texte);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.assistant-suite:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-doux); }
.assistant-suite.lecture { background: var(--fond-creux); color: var(--texte-doux); border-color: var(--bord); }

/* En historique, la saisie et l'attente s'effacent : on relit, on ne parle pas. */
.assistant.en-historique .assistant-pied, .assistant.en-historique .assistant-attente { display: none; }
.assistant.en-historique .assistant-bouton-historique { background: var(--accent-doux); color: var(--accent-texte); }
.assistant-histo-tete { display: flex; align-items: center; gap: 10px; }
.assistant-histo-tete strong { margin-left: auto; font-size: 13px; color: var(--texte-doux); }
.assistant-histo-filtres { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.assistant-histo-filtres select { flex: 1; min-width: 160px; width: auto; }
.assistant-histo-toutes { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.assistant-histo-toutes input { width: auto; margin: 0; }
.assistant-histo-liste { display: grid; gap: 6px; }
.assistant-histo-ligne {
  display: grid; gap: 3px; text-align: left; padding: 10px 12px; border-radius: 11px;
  width: 100%; min-width: 0; justify-items: start; white-space: normal;
  background: var(--fond-carte); border: 1px solid var(--bord); font-weight: 500;
}
.assistant-histo-ligne:hover:not(:disabled) { border-color: var(--accent); }
.assistant-histo-titre { font-size: 13.5px; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.assistant-histo-meta { font-size: 11.5px; color: var(--texte-doux); white-space: normal; overflow-wrap: anywhere; }
.assistant-histo-auteur { display: block; color: var(--accent-texte); }
.assistant-histo-fiche { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--fond-creux); border: 1px solid var(--bord); }
.assistant-relecture { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 1px dashed var(--bord); }

.assistant-couts-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.assistant-couts-perso { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.assistant-couts-perso input { width: auto; }
.assistant-couts-tuiles { margin-bottom: 14px; }
.assistant-couts-graphique { margin: 6px 0 10px; }
.assistant-tarif-modele { min-width: 160px; }
.assistant-tarif-prix { width: 90px; }