/* ============================================================================
   notif.css — verre unique pour TOUTES les notifications du site.

   Avant, chaque page avait sa propre banniere en inline style : des bords
   differents, un fond ou pas, des rayons qui ne collaient pas. On les a
   regroupees ici pour que toute notification se ressemble, quel que soit
   l'endroit d'ou elle part.

   Plusieurs de ces elements portent des styles inline, qui l'emportent sur
   une feuille de style : on les neutralise donc explicitement avec !important.
   C'est le but de ces regles.

   TOUT est cale sur la barre du bas (le « slider ») : meme brume blanche,
   meme flou court, meme bordure claire, memes reliefs interieurs. Une
   notification doit avoir l'air d'une piece de la meme famille que la barre.
   ========================================================================== */

/* ============================================================================
   LA FORME, unique pour tout le site.

   Messages, snaps et appels passent par le meme bloc : memes dimensions,
   meme rayon, meme matiere, meme animation, meme duree. Les trois
   declenchements n'ont pas droit a trois habillages differents — sinon
   l'oeil les lit comme trois systemes.

   Ces valeurs sont posees en !important : notif.js injecte ses propres
   regles apres cette feuille, et les messages posent aussi du style en
   inline. Sans !important, la forme gagnait a chaque fois.
   ========================================================================== */
/* ---- le conteneur --------------------------------------------------
   notif.js ne pose plus AUCUN style : c'est ici que vit la position de
   la pile. Elle est posee au-dessus de la barre du bas, centree, et
   traverse les clics — sauf sur les notifications elles-memes. */
#notifHost {
  isolation: isolate;
  position: fixed;
  left: 50%;
  bottom: 104px;
  transform: translateX(-50%);
  z-index: 9400;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: center;
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}
#notifHost .n-toast { pointer-events: auto; }
/* La sortie : meme courbe que l'arrivee, sens inverse. */
#notifHost .n-toast.out { opacity: 0; transform: translateY(10px) scale(.97); }

#notifHost .n-toast {
  /* la seule boite qui existe : messages, snaps et appels y passent tous */
  background: rgba(255, 255, 255, .10) !important;
  -webkit-backdrop-filter: blur(4px) saturate(160%) brightness(1.1) !important;
  backdrop-filter: blur(4px) saturate(160%) brightness(1.1) !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: 999px !important;
  color: rgba(255, 255, 255, .92) !important;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, .42),
    inset 2px 2px 5px -2px rgba(255, 255, 255, .5),
    inset -2px -2px 5px 2px rgba(255, 255, 255, .4),
    inset 0 -2px 0 rgba(255, 255, 255, .2) !important;
  /* la meme taille, sur les trois */
  box-sizing: border-box !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  padding: 12px 18px !important;
  /* et la meme arrivee : meme duree, meme courbe, meme sens */
  animation: notifIn .28s cubic-bezier(.34, 1.35, .64, 1) both !important;
}
@keyframes notifIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #notifHost .n-toast { animation: none !important; }
}

/* ---- la pastille : elle dit de quoi il s'agit, rien d'autre ------------
   bleu = message, rouge = snap, or = sport, vert = appel. Meme carre pour
   les trois, pose en CSS : aucune page n'a besoin d'un script. */
#notifHost .n-toast::before {
  content: "";
  display: block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
#notifHost .n-toast.k-msg::before { background: #3b82f6; }
#notifHost .n-toast.k-snap::before { background: #ef4444; }
/* Snap video : violet, comme sa pastille dans la barre laterale. */
#notifHost .n-toast.k-snapvid::before { background: #7c3aed; }
#notifHost .n-toast.k-sport::before { background: #fbbf24; }
#notifHost .n-toast.k-call::before { background: #22c55e; }
/* Le toast : meme alignement que la bannière et que l'appel. */
#notifHost .n-toast { display: flex !important; align-items: center !important; gap: 11px !important; }
#notifHost .n-toast .n-ico { display: none !important; }
/* Le texte : deux lignes possibles (qui + quoi), meme style partout. */
#notifHost .n-toast .n-tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#notifHost .n-toast .n-tx b { display: block; font-size: .72rem; font-weight: 700;
  color: rgba(255, 255, 255, .55); }
#notifHost .n-toast .n-tx span { display: block; font-size: .86rem; font-weight: 650; }
/* Les boutons de l'appel : ronds comme la barre, rouge et vert. */
#notifHost .n-toast .n-act {
  flex: 0 0 auto; font: inherit; font-size: .8rem; font-weight: 750;
  padding: 7px 14px; border-radius: 999px; cursor: pointer; color: #fff;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08);
  transition: filter .16s ease, background .16s ease;
}
#notifHost .n-toast .n-act:hover { background: rgba(255, 255, 255, .18); }
#notifHost .n-toast .n-act.no { background: linear-gradient(135deg, #ff5b5b, #dc2626);
  border-color: rgba(255, 120, 120, .45); }
#notifHost .n-toast .n-act.yes { background: linear-gradient(135deg, #34d399, #16a34a);
  border-color: rgba(134, 239, 172, .45); }
/* La croix de fermeture, identique partout. */
#notifHost .n-x {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0;
  border-radius: 50% !important;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .65) !important;
  font-size: 1rem; line-height: 1;
  transition: background .16s ease, color .16s ease;
}
#notifHost .n-x:hover { background: rgba(255, 255, 255, .16) !important; color: #fff !important; }

#announcePopup {
  background: rgba(4, 6, 12, .6) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
#announcePopup h3 { color: #fff; letter-spacing: .02em; }
#announcePopup button {
  border-radius: 12px !important; padding: 9px 18px !important;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #e8eaf0 !important; font-weight: 650;
}
#announcePopup button:hover { background: rgba(255, 255, 255, .16) !important; }

/* ---- bannier defi d'echecs (chess-notify.js) ------------------------- */
/* Ce script construit sa banniere en JS avec du inline : on l'identifie
   grace a sa bordure violette, trop caracteristique pour etre fortuite. */
body > div[style*="translate(-50%,-140%)"] {
  border-radius: 18px !important;
  border-color: rgba(124, 92, 255, .45) !important;
}
body > div[style*="translate(-50%,-140%)"] button {
  border-radius: 12px !important; font-weight: 700;
}
/* ---- la banniere des pages ---------------------------------------------
   Elles continuent de creer #msgNotifBanner et d'y poser le texte (le clic
   ouvre la conversation) : notif.js prend le relais et redessine tout dans la
   boite commune. La banniere d'origine ne doit donc plus se voir. */
#msgNotifBanner { display: none !important; }