/* ---------- FULL-PAGE NOTIFICATIONS ---------- */
  .notif-page{
    /* --vvh / --vvtop suivent visualViewport (voir js/app.js) : à l'ouverture du
       clavier mobile, le viewport visuel rétrécit sans que celui de mise en page
       bouge, et la page fixe se retrouvait décalée vers le haut — en-tête hors
       écran. Repli sur 100dvh quand l'API n'existe pas. */
    position:fixed; left:50%; top:var(--vvtop, 0px); transform:translateX(-50%); width:100%; max-width:430px;
    height:100vh; height:100dvh; height:var(--vvh, 100dvh);
    background:var(--bg); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease;
    display:flex; flex-direction:column;
    /* la page elle-même ne défile jamais : seules ses zones internes le font,
       ce qui garde l'en-tête (et la barre de saisie) toujours visibles. */
    overflow:hidden;
  }
  .notif-page.open{opacity:1; pointer-events:auto;}
  .notif-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 14px 13px;
    background:var(--surface); border-bottom:1px solid var(--border); flex-shrink:0;
  }
  .notif-header h2{font-size:16px; font-weight:600; margin:0; font-family:'Fraunces',serif;}
  .notif-back{width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--bg); color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .notif-back svg{width:14px; height:14px;}
  .notif-list{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .notif-row{display:flex; align-items:flex-start; gap:11px; padding:13px 16px; border-bottom:1px solid var(--border); position:relative;}
  .notif-row.unread{background:var(--accent-bg);}
  .notif-icon{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; margin-top:1px;}
  .notif-icon svg{width:16px; height:16px;}
  .notif-body{flex:1; min-width:0;}
  .notif-text{font-size:13.5px; line-height:1.4; color:var(--ink);}
  .notif-text strong{font-weight:700;}
  .notif-time{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); margin-top:4px;}
  .notif-dot{width:8px; height:8px; border-radius:50%; background:var(--send); flex-shrink:0; margin-top:6px;}
  .notif-empty{text-align:center; padding:60px 20px; color:var(--ink-soft); font-size:13px; font-style:italic;}


/* Une notification qui mène quelque part doit le montrer : sans ce signal, on
   ne devine pas qu'elle est cliquable. */
.notif-row.actionable{cursor:pointer;}
.notif-row.actionable:hover{background:var(--bg);}