/* =========================================================================
   notifs.css — panneau de NOTIFICATIONS (#notif-root, js/views/notifs.js).
   20/08/2026, point 7 de Sylvain. Le shell (position, glissement, largeur)
   est dans app.css §17 : il est PARTAGÉ avec le chat, parce que les deux
   panneaux occupent exactement la même place et doivent bouger ensemble.
   Ici : uniquement l'intérieur du panneau.
   ========================================================================= */

.nf-panel{display:flex;flex-direction:column;height:100%;
  border-radius:16px 0 0 16px;overflow:hidden}

/* ---------- En-tête ------------------------------------------------------- */
.nf-head{display:flex;align-items:center;gap:10px;flex:none;
  padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.nf-head>.ic{width:19px;height:19px;flex:none;color:var(--notif)}
.nf-head-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nf-titre{font-size:14.5px;letter-spacing:.2px}
.nf-compte{font-size:11.5px}
/* Le compteur se colore SEULEMENT quand il y a du neuf : « Tout est à jour »
   en couleur d'alerte serait un contresens. */
.nf-compte-on{color:var(--notif);font-weight:700}
.nf-fermer{width:30px;height:30px;flex:none}

/* ---------- Barre d'actions ----------------------------------------------- */
.nf-barre{display:flex;gap:8px;flex:none;padding:9px 14px;
  border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
.nf-barre .btn{font-size:11.5px;padding:5px 10px}

/* ---------- Le relevé ------------------------------------------------------ */
.nf-liste{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:10px 12px 18px;display:flex;flex-direction:column;gap:7px}

.nf-item{display:flex;align-items:flex-start;gap:9px;
  padding:9px 10px;border-radius:11px;
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background:color-mix(in srgb, #fff 4%, transparent);
  transition:background .16s,border-color .16s,box-shadow .3s ease}
.nf-cliquable{cursor:pointer}
/* Bouton « partager dans le chat » (21/08/2026) : discret au repos, net au
   survol de la ligne — son clic ne doit pas se confondre avec l'ouverture
   de la fiche (stopPropagation côté JS). */
.nf-partager{flex:0 0 auto;align-self:center;opacity:.45;transition:opacity .16s}
.nf-item:hover .nf-partager,.nf-partager:focus-visible{opacity:1}
.nf-cliquable:hover{background:color-mix(in srgb, #fff 8%, transparent);
  border-color:color-mix(in srgb, var(--accent) 40%, transparent)}

/* NEUVE : la même lumière que partout ailleurs dans l'application (.lum-glow,
   app.css §16b) — « pas encore vu » a UN seul vocabulaire visuel, et il ne
   change pas selon l'écran. Le liseré gauche donne en plus la CATÉGORIE, donc
   la couleur du code couleur : on sait de quoi il s'agit avant d'avoir lu.
   La transition sur box-shadow est LONGUE (300 ms) volontairement : au survol,
   l'extinction doit se voir — sinon on ne sait pas qu'on vient de consommer la
   notification, et on la cherche encore. */
.nf-neuve{background:color-mix(in srgb, var(--lum) 9%, transparent)}
/* MES actions (22/08/2026) : au relevé mais estompées — elles naissent déjà
   vues (voir notifs.js) et ne doivent pas rivaliser avec les nouveautés. */
.nf-moi{opacity:.62}
.nf-moi:hover{opacity:1}
.nf-item{border-left:3px solid transparent}
.nf-cat-envoi{border-left-color:color-mix(in srgb, var(--accent) 70%, transparent)}
.nf-cat-reponse{border-left-color:color-mix(in srgb, var(--st-reponse) 70%, transparent)}
.nf-cat-rdv{border-left-color:color-mix(in srgb, var(--rdv) 70%, transparent)}
.nf-cat-relance{border-left-color:color-mix(in srgb, var(--task) 70%, transparent)}
.nf-cat-equipe{border-left-color:color-mix(in srgb, var(--violet) 70%, transparent)}
.nf-cat-reglage{border-left-color:color-mix(in srgb, var(--dim) 55%, transparent)}

/* La pastille de catégorie est une `.nbadge` VIDE : même objet que les
   compteurs, donc elle suit le style choisi par Sylvain (rond, carré, contour,
   pulsé…) sans une seule règle en double. Largeur forcée au diamètre : sans
   chiffre à l'intérieur, `min-width` laisserait un ovale sur les styles à
   padding. */
.nf-pastille{width:var(--nb-h);padding:0;margin-top:2px}

.nf-corps{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.nf-txt{font-size:12.5px;line-height:1.45;color:var(--txt)}
.nf-qui{font-weight:800}
.nf-soc{font-size:12px;font-weight:700;color:var(--accent-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nf-detail{font-size:11.5px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nf-quand{font-size:11px}

.nf-vide{padding:34px 18px;text-align:center}
.nf-vide p{font-size:12.5px;line-height:1.6;margin-top:8px}
.nf-note{flex:none;padding:12px 4px 0;font-size:11px;line-height:1.55;
  border-top:1px solid color-mix(in srgb, var(--line) 50%, transparent);
  margin-top:6px}

@media (prefers-reduced-motion:reduce){
  .nf-item{transition:none}
}