/* ═══════════════════════════════════════════════════════════════════════
   Accueil (chat) — retouches ponctuelles, sur le markup EXISTANT.
   ═══════════════════════════════════════════════════════════════════════
   [b2342] Ce fichier ne rejoue PAS la refonte revertee en b2338. Il porte
   des points precis, demandes un par un. Revert = delier ce fichier.

   Specificite : nos regles vivent en `.ak-scope .ak-*` (0,2,0) et
   certaines visent l'ELEMENT (`.ak-scope .ak-hero h1` = (0,2,1)). C'est ce
   que j'avais rate en b2331 — une feuille chargee sans effet visible. On
   passe donc par #page-accueil, qui porte deja .ak-scope
   (accueil-page.js l.2177), soit (1,2,x), et pour ce qui doit valoir dans
   les TROIS surfaces (accueil + dock + popup) on repete `.ak-scope`, ce qui
   ne change QUE le poids du selecteur.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fond blanc ─────────────────────────────────────────────────────── */
body.ak-on-accueil .shellv2-main,
#page-accueil.ak-scope{ background:#fff !important; }

/* ── Bulles de chat ──────────────────────────────────────────────────
   [b2345] JE STYLAIS LA MAUVAISE CLASSE DEPUIS TROIS PASSES, et c'est la
   seule raison pour laquelle « c'est identique a avant ».
   La bulle d'un message est `.ak-um` (accueil-page.js, _msgHtml). `.ak-bubble`
   n'est emis QU'UNE FOIS dans tout le fichier : a l'interieur du bloc
   WhatsApp (_blocWa l.1166). Mes regles etaient donc correctes, chargees,
   plus specifiques que les notres — et appliquees a un element absent de
   l'ecran.
   J'ai deduit le nom de mon PROPRE handoff au lieu de lire le code qui
   emet le markup. C'est la meme erreur que le `timeRange` de b2339 : la
   documentation decrit, le code fait foi.

   Cible reelle : `.ak-um`. Aplat gris, coins tres arrondis, aucun contour
   ni ombre — ce que montre sa capture. On CONSERVE ce qui compte dans la
   regle d'origine : align-self (la bulle reste a droite), max-width, et
   surtout `white-space:pre-wrap`, qui preserve les sauts de ligne (v1965b).
   La regle porte sur .ak-scope : le dock et la popup partagent le corps du
   chat, s'arreter a #page-accueil les ferait diverger en silence. */
.ak-scope.ak-scope.ak-scope .ak-um,
#page-accueil.ak-scope .ak-um{
  background:var(--s3, #eaedf3);
  border:0;
  border-radius:19px;
  padding:12px 19px;
  box-shadow:none;
  color:var(--text);
}

/* ── Titre : un seul ton, et plus petit (2e passe) ───────────────────
   [b2342] Le clamp de b2340 (23-30px) restait trop haut a l'ecran large :
   c'est la borne HAUTE qui s'applique sur un grand ecran, pas la basse. */
#page-accueil.ak-scope .ak-hero h1,
#page-accueil.ak-scope #ak-h1{
  font-size:clamp(19px, 1.9vw, 24px);
  color:var(--text);
  letter-spacing:-.028em;
  line-height:1.2;
}
#page-accueil.ak-scope .ak-g{ color:inherit; font-weight:inherit; }

/* ── Bandeau bas en conversation ─────────────────────────────────────
   [b2342] En mode conversation le composer est colle en bas, et la page
   garde son padding-bottom de 40px : une bande vide sous le composer, que
   le fond de la page dessine. On la retire — uniquement en conversation,
   le mode hero a besoin de sa respiration. */
/* [b2357] Dernier :has() retire : il visait notre squelette, aujourd'hui
   masque derriere AQH, donc il ne servait plus a rien. */
body.aqh-on #page-accueil.ak-scope{ padding-bottom:0 !important; }
#page-accueil.ak-scope .ak-mode-conv .ak-dockw{ padding-bottom:6px; }

/* [b2352] Le bandeau bas est revenu parce que ma regle de b2342 ciblait
   `.ak-mode-conv` — notre squelette, aujourd'hui MASQUE derriere AQH. La
   page garde son padding-bottom de 40px sous le composer du kit. On le
   retire des qu'AQH est monte : son composant gere sa propre respiration. */

#aqh-host{ height:100%; }

/* [b2354] LE PADDING VENAIT DE .shellv2-main, pas de #page-accueil — la
   capture DevTools d'Anthony le montrait noir sur blanc (« Padding
   0px 0px 40px » sur main#shellv2-main). Mes deux tentatives ciblaient donc
   un element qui ne le portait pas. On le retire la ou il est, et
   uniquement sur l'accueil quand AQH est monte. */
/* [b2355] TROISIEME TENTATIVE, ET CETTE FOIS PAR LE BON LEVIER. Le padding
   vient de layout-tokens.css, en `!important` — donc ma regle, meme
   `!important`, perdait sur l'egalite de specificite selon l'ordre de
   chargement. Mais cette feuille le pose via une VARIABLE
   (--shellv2-main-pb) : on surcharge la variable sur l'accueil, et la regle
   d'origine calcule 0 d'elle-meme. On ne se bat pas contre la cascade, on
   lui donne une autre valeur — exactement ce que je demande a Margot pour
   ses z-index. */
body.aqh-on{ --shellv2-main-pb: 0px; }

/* [b2354] Le menu des conversations defile SUR LUI-MEME. Sans hauteur
   bornee il pousse la page entiere : on scrolle le fond au lieu de la
   liste, et le pied « Toutes les conversations » devient inatteignable. */
#aqh-host .aqh-menu{ max-height:min(62vh, 520px); overflow-y:auto; overscroll-behavior:contain; }

/* [b2354] Corbeille par conversation : discrete, elle n'apparait qu'au
   survol de sa ligne — une liste constellee d'icones de suppression invite
   a l'accident. */
#aqh-host .aqh-mi{ position:relative; }
#aqh-host .aqh-del{ margin-left:auto; opacity:0; color:var(--muted);
  padding:2px 4px; border-radius:6px; display:inline-flex; align-items:center;
  transition:opacity .12s, color .12s; flex-shrink:0; }
#aqh-host .aqh-del svg{ width:14px; height:14px; }
#aqh-host .aqh-mi:hover .aqh-del{ opacity:1; }
#aqh-host .aqh-del:hover{ color:var(--chaud); background:color-mix(in srgb, var(--chaud) 10%, transparent); }

/* [b2355] L'entree destructrice du menu se distingue : rouge au survol,
   separee du reste. Elle detruit tout, elle ne peut pas avoir l'air d'une
   entree ordinaire. */
#aqh-host .aqh-mi.aqh-danger{ color:var(--chaud); border-top:1px solid var(--border); margin-top:4px; padding-top:9px; }
#aqh-host .aqh-mi.aqh-danger:hover{ background:color-mix(in srgb, var(--chaud) 9%, transparent); }

/* [b2355] Le retour au hero (bouton +) etait instantane : l'ecran changeait
   d'un coup, sans qu'on comprenne d'ou venait le nouveau. On reprend la
   duree et la courbe de sa transition ALLER (260 ms), pour que les deux
   sens se repondent. */
#aqh-host .aqh-hero{ transition:opacity .26s cubic-bezier(.2,.7,.2,1), transform .26s cubic-bezier(.2,.7,.2,1); }
#aqh-host:not(.aqh-chatting) .aqh-hero{ opacity:1; transform:none; }
#aqh-host .aqh-thread{ transition:opacity .2s; }
#aqh-host:not(.aqh-chatting) .aqh-thread{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  #aqh-host .aqh-hero, #aqh-host .aqh-thread{ transition:none; }
}


/* [b2357] Sortie de conversation : la classe est posee 200 ms avant l'appel
   a son reset(), le temps que le fil s'efface. Sans ce sas, son
   `display:none` sur le hero rendait toute transition impossible. */
#aqh-host .aqh-sortie .aqh-thread,
#aqh-host.aqh-sortie .aqh-thread{ opacity:0; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease; }
#aqh-host .aqh-sortie .aqh-dock,
#aqh-host.aqh-sortie .aqh-dock{ opacity:0; transition:opacity .18s ease; }
@media (prefers-reduced-motion: reduce){
  #aqh-host .aqh-sortie .aqh-thread, #aqh-host.aqh-sortie .aqh-thread,
  #aqh-host .aqh-sortie .aqh-dock, #aqh-host.aqh-sortie .aqh-dock{ transition:none; }
}

/* [b2358] La pastille « Voir ton briefing » est retiree (Anthony) : le
   briefing est juste dessous, un bouton pour y descendre n'apporte rien. */
#aqh-host .aqh-peek{ display:none !important; }

/* [b2358] Suggestions de suite, greffees SOUS le message d'Arpe qu'elles
   prolongent — alignees sur son texte, pas sur le bord de la carte. */
#aqh-host .aqh-suites{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#aqh-host .aqh-suite{ font:inherit; font-size:12.5px; padding:7px 13px;
  border:1px solid var(--border); border-radius:999px; background:var(--surface);
  color:var(--text); cursor:pointer; transition:border-color .12s, background .12s; }
#aqh-host .aqh-suite:hover{ border-color:var(--border-hi); background:var(--s2); }

/* ═══════════════════════════════════════════════════════════════════════
   [b2359] LA « BANDE EN BAS » N'A JAMAIS ETE UN PADDING.
   ═══════════════════════════════════════════════════════════════════════
   J'ai cherche quatre fois du cote des paddings — c'etait une histoire de
   HAUTEUR. `#page-accueil` est en `display:block` avec
   `min-height:calc(100vh - 40px)`. Le composant de Margot demande
   `height:100%`, or un pourcentage ne resout PAS contre un `min-height` :
   sans hauteur definie sur le parent, il retombe sur `auto` et le composant
   ne fait que la taille de son contenu. La page, elle, garde sa hauteur
   minimale. L'ecart entre les deux, c'est la bande vide.
   On donne donc au parent une hauteur DEFINIE et on le passe en colonne
   flex : le composant s'etire pour la remplir, et il n'y a plus d'ecart a
   combler. Aucun padding n'etait en cause, ce qui explique pourquoi aucune
   de mes trois corrections precedentes n'a rien change.
   ═══════════════════════════════════════════════════════════════════════ */
/* [b2363] PLUS AUCUN NOMBRE MAGIQUE. Mon `calc(100vh - 40px)` de b2359
   etait une SUPPOSITION sur la hauteur du chrome ; des qu'elle est fausse,
   l'ecart reapparait — et c'est la bande grise. On chaine les hauteurs au
   lieu de les deviner : le conteneur de scroll devient une colonne flex, la
   page prend TOUT ce qui reste (flex:1), le composant prend toute la page.
   Aucun des trois maillons ne suppose la taille d'un autre, donc l'ecart ne
   peut plus exister quelle que soit la hauteur du chrome. */
body.aqh-on .shellv2-main{
  display:flex; flex-direction:column; overflow:hidden;
}
body.aqh-on #page-accueil.ak-scope{
  display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0; height:auto;
  overflow:hidden;
}
body.aqh-on #aqh-host{ flex:1 1 auto; min-height:0; height:auto; }

/* [b2359] Entree destructrice : texte plus petit et sans coins arrondis —
   c'est une ligne de menu, pas un bouton. */
#aqh-host .aqh-mi.aqh-danger{ font-size:12.5px; border-radius:0; }
#aqh-host .aqh-mi.aqh-danger:hover{ border-radius:0; }

/* [b2360] Suggestions : le dessin qu'Anthony demande — pastille blanche,
   bordure fine, icone a gauche en accent, libelle en gras sombre. La
   couleur ne porte que l'icone : un libelle colore ferait concurrence au
   texte de la reponse juste au-dessus. */
/* [b2365] Un cran plus petites (Anthony) : ce sont des raccourcis, pas des
   actions principales — a 13.5px elles pesaient autant que la reponse. */
#aqh-host .aqh-suite{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; letter-spacing:-.01em;
  padding:6px 12px; border:1px solid var(--border);
  border-radius:11px; background:var(--surface); color:var(--text);
  box-shadow:0 1px 2px rgba(20,22,31,.03);
}
#aqh-host .aqh-suite svg{ width:13px; height:13px; color:var(--accent); flex:none; }
#aqh-host .aqh-suite:hover{ border-color:var(--border-hi); background:var(--surface); }


/* [b2365] Idem pour les suggestions du hero, pour que les deux rangees
   aient le meme poids. */
#aqh-host .aqh-sg{ font-size:12px !important; padding:6px 12px !important; }
#aqh-host .aqh-sg svg{ width:13px !important; height:13px !important; }