/* =================== TOASTS · « Popotam parle » ===================
   Porté du handoff design_handoff_toasts (direction C). Le principe : la tête de Popotam
   remplace le pictogramme, avec l'EXPRESSION qui colle au message. C'est ce qui rend le ton
   chaleureux crédible (une mascotte a le droit de parler comme ça, une icône non), et c'est
   aussi ce qui permet aux textes de rester courts : l'expression fait la moitié du travail.

   Trois écarts assumés par rapport au handoff, tous dictés par l'application :

   1. LA PILE EST #toasts, la région aria-live qui existe déjà dans index.html. Le handoff
      crée un conteneur .tstack à la volée ; en ajouter un second laisserait deux régions
      annoncées aux lecteurs d'écran, et deux systèmes qui s'effacent mutuellement (le
      piège que popotam-space.js documente déjà).
   2. z-index 500, pas 80. Les messages doivent passer AU-DESSUS des modales (fb-overlay
      420, pt-overlay 400, tour 300), sinon un message déclenché depuis une modale est
      invisible.
   3. SUR MOBILE, la pile monte au-dessus de la barre d'onglets, fixée en bas (z-index 90)
      en dessous de 600 px. L'ancien toast passait dessous : 85 % du trafic est mobile,
      donc c'était la règle plutôt que l'exception.

   Les jetons du handoff sont traduits dans ceux de la charte (--surface, --line, --ink,
   --muted, --radius-lg…), et les accents suivent l'ambiance : le vert de carnet n'est pas
   celui de tournesol. */

/* La pile. column-reverse : le plus récent arrive EN BAS, près du pouce, et pousse les
   précédents vers le haut. Ne pas inverser. */
#toasts {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 500;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 10px;
  pointer-events: none; padding: 0 18px;
}
#toasts .t { pointer-events: auto; }

.t {
  --accent: var(--green); --accent-bg: var(--green-bg);
  position: relative; display: flex; align-items: center; gap: 14px;
  max-width: min(520px, 100%);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 12px 14px 12px 12px; overflow: hidden;
  box-shadow: 0 16px 34px -16px rgba(120,72,24,.34), 0 2px 6px -2px rgba(120,72,24,.14);
  animation: tIn .42s cubic-bezier(.24,1.34,.44,1);
}
.t.out { animation: tOut .28s cubic-bezier(.4,0,1,.6) forwards; }
@keyframes tIn  { from { opacity: 0; transform: translateY(22px) scale(.94); } }
@keyframes tOut { to   { opacity: 0; transform: translateY(10px) scale(.96); } }

/* La tête est ZOOMÉE et recadrée dans sa vignette : Popotam.popotam() rend un corps
   entier, on l'agrandit et on décale l'origine pour ne garder que la tête. Ne pas
   « corriger » ces valeurs, et ne pas passer à popotamFace() : ce cadrage garde un peu de
   toque et d'épaules, ce qui vaut mieux qu'un visage flottant. */
.t .ic {
  flex: none; width: 50px; height: 50px; border-radius: 16px;
  background: var(--accent-bg); overflow: hidden; position: relative;
  display: grid; place-items: center;
}
.t .ic svg {
  width: 50px; height: 50px; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(1.42); transform-origin: 50% 38%;
}

.t .tx { min-width: 0; flex: 1; padding: 2px 0; }
/* display:block obligatoire : ce sont des <span>, sans ça titre et sous-ligne se collent
   sur une seule ligne. */
.t .tt {
  display: block; font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing); font-size: 15px; line-height: 1.25; color: var(--ink);
}
.t .sub { display: block; font-size: 13.5px; line-height: 1.4; margin-top: 2px; color: var(--muted); text-wrap: pretty; }

/* Le mot manuscrit, collé au titre. Troisième endroit de l'application à employer la
   manuscrite, après la promesse de gratuité de l'accueil et .hb-hand, et pour exactement
   le même rôle : un aparté humain à côté d'un énoncé factuel. */
.t .badge {
  display: inline-block; font-family: "Caveat", var(--font-body), cursive;
  font-weight: 600; font-size: 16px; color: var(--accent);
  margin-left: 7px; vertical-align: 1px;
}

.t .act { flex: none; display: flex; align-items: center; gap: 4px; }
.t .cta {
  border: 0; border-radius: var(--pill); padding: 9px 17px;
  font-family: var(--font-body); font-weight: 800; font-size: 13.5px;
  cursor: pointer; background: var(--ink); color: var(--bg); transition: .16s;
}
.t .cta:hover { filter: brightness(1.25); }
.t .cta:focus-visible { outline: none; box-shadow: var(--ring); }
.t .x {
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: none;
  cursor: pointer; display: grid; place-items: center; color: var(--muted); transition: .16s;
}
.t .x:hover { background: var(--surface-2); color: var(--ink); }
.t .x:focus-visible { outline: none; box-shadow: var(--ring); }
.t .x svg { width: 15px; height: 15px; }

/* La minuterie. Le JS la met en pause au survol (animationPlayState) : personne ne doit
   courir après un « Annuler ». */
.t .timer {
  position: absolute; left: 0; bottom: 0; height: 3px;
  border-radius: 0 var(--pill) var(--pill) 0;
  background: var(--accent); opacity: .5;
  animation: tTime var(--life, 6s) linear forwards;
}
@keyframes tTime { from { width: 100%; } to { width: 0; } }

/* Les cinq accents, et leur sens. Un de plus se déclare en une ligne, mais il faut y
   réfléchir à deux fois : cinq sens, c'est déjà la limite de ce qu'on décode sans légende. */
.t.v-green  { --accent: var(--green);       --accent-bg: var(--green-bg); }   /* c'est fait */
.t.v-sun    { --accent: var(--gold-ink);    --accent-bg: var(--gold-bg); }    /* tu as gardé quelque chose */
.t.v-orange { --accent: var(--primary-ink); --accent-bg: var(--primary-bg); } /* quelque chose t'attend */
.t.v-plaisir{ --accent: var(--plaisir);     --accent-bg: var(--plaisir-bg); } /* plaisir */
.t.v-ink    { --accent: var(--info);        --accent-bg: var(--info-bg); }    /* information neutre */

@media (max-width: 600px) {
  /* Au-dessus de la barre d'onglets fixée en bas (56 px + encoche), sinon les messages
     passent dessous, et c'est le cas de 85 % du trafic. */
  #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); padding: 0 12px; gap: 8px; }
  .t .ic { width: 44px; height: 44px; border-radius: 14px; }
  .t .ic svg { width: 44px; height: 44px; }
  .t .tt { font-size: 14.5px; }
  .t .sub { font-size: 13px; }
  .t .cta { padding: 8px 14px; font-size: 13px; }
}
/* La barre d'enregistrement des préférences occupe déjà le bas de l'écran (z-index 95) :
   quand elle est levée on remonte encore, sinon le message la recouvre au moment précis
   où elle demande un clic. */
#toasts.sur-savebar { bottom: calc(104px + env(safe-area-inset-bottom)); }
/* La pastille des minuteurs du batch cooking (css/batch-ui.css) tient le bas de l'écran
   quand on a quitté le plan : les messages passent au-dessus d'elle. */
body.bk-pastille-on #toasts { bottom: 100px; }
@media (max-width: 600px) {
  body.bk-pastille-on #toasts { bottom: calc(146px + env(safe-area-inset-bottom)); }
  body.bk-pastille-on .app-wrap { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
  /* Sur l'accueil, le bouton flottant de génération est au même étage : il monte. */
  body.bk-pastille-on .ph-fab { bottom: calc(146px + env(safe-area-inset-bottom)); }
  body.bk-pastille-on.ph-fab-on #toasts { bottom: calc(210px + env(safe-area-inset-bottom)); }
  body.bk-pastille-on.ph-fab-on .app-wrap { padding-bottom: calc(218px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .t, .t .timer { animation-duration: .01ms !important; }
}