/* ── L'HISTORIQUE (24/09 — planches ChatGPT, nimzou-site c3ae77e) ──
     Le socle (position, fond, marges, barre de tête, ✕) vient des règles
     groupées plus haut ; ici, ce qui lui est propre. Téléphone d'abord
     (planche ④) : « Nouvelle conversation » en pleine largeur sous le
     titre ; le bureau la remonte en haut à droite (planche ③). */
  #historique { gap: var(--e-2); overflow-y: auto; }
  .hi-titres { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
  .hi-titre { font-size: var(--t-question); font-weight: 700; }
  .hi-sous { font-size: var(--t-corps); color: var(--muted); }
  .hi-nouvelle {
    order: 5; flex-basis: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: var(--cible); padding: 0 var(--e-4);
    background: var(--accent); color: var(--on-accent);
    border: 0; border-radius: var(--r-objet);
    font: inherit; font-size: var(--t-lu); font-weight: 600; cursor: pointer;
  }
  .hi-nouvelle svg { width: 20px; height: 20px; }
  .hi-prive {
    display: flex; align-items: center; gap: var(--e-2); margin: 0;
    font-size: var(--t-note); color: var(--muted);
  }
  .hi-prive svg { width: 16px; height: 16px; flex: none; }
  .hi-recherche {
    display: flex; align-items: center; gap: var(--e-2);
    min-height: var(--cible); padding: 0 var(--e-3);
    background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-objet);
  }
  .hi-recherche:focus-within { border-color: var(--accent); }
  .hi-recherche svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
  .hi-recherche input {
    flex: 1; min-width: 0; background: none; border: 0; outline: none;
    color: var(--text); font: inherit; font-size: var(--t-lu);
  }
  .hi-note, .hi-pied { margin: 0; font-size: var(--t-note); color: var(--muted); }
  .hi-liste { display: flex; flex-direction: column; gap: var(--e-1); }
  .hi-groupe { margin: var(--e-3) 0 var(--e-1); font-size: var(--t-corps); font-weight: 600; }
  .hi-ligne {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: var(--e-1) var(--e-3);
    width: 100%; padding: var(--e-3); text-align: left;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--r-objet);
    font: inherit; cursor: pointer;
  }
  .hi-ligne:hover { border-color: var(--line2); }
  .hi-ligne[aria-current="true"] {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  }
  .hi-ligne > svg { width: 20px; height: 20px; color: var(--muted); grid-row: span 2; align-self: start; }
  .hi-l-titre {
    font-size: var(--t-corps); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hi-l-heure { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-note); color: var(--muted); white-space: nowrap; }
  .hi-l-heure svg { width: 14px; height: 14px; color: var(--accent); }
  .hi-l-extrait {
    grid-column: 2 / 4; font-size: var(--t-note); color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .hi-etat { margin: var(--e-4) 0; font-size: var(--t-corps); color: var(--muted); text-align: center; }
  .hi-etat[hidden] { display: none; }
  /* La relecture reste dans cette carte ; le fil courant garde sa place. */
  #historique.hi-relit > .hi-recherche,
  #historique.hi-relit > .hi-note,
  #historique.hi-relit > .hi-pied,
  #historique.hi-relit > .hi-liste { display: none; }
  .hi-relecture { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
  .hi-relecture[hidden] { display: none; }
  .hi-relire-titre { margin: 0; font-size: var(--t-chiffre); overflow-wrap: anywhere; }
  .hi-bulles { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
  .hi-bulles .msg { cursor: text; overflow-wrap: anywhere; }
  .hi-bulles .encart-produit { cursor: text; }
  .hi-entree { min-width: 0; }
  .hi-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }
  .hi-action { min-height: var(--cible); padding: var(--e-2) var(--e-3); align-self: flex-start;
    border: 1px solid var(--line); border-radius: var(--r-objet); background: var(--panel);
    color: var(--text); font: inherit; font-size: var(--t-corps); cursor: pointer; }
  .hi-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hi-action:disabled { opacity: .6; cursor: wait; }