/* ============================================================
   Centre de notifications (annonces admin -> tous les clients) —
   MadaPayExchange. Fichier séparé pour ne toucher à aucun style
   existant dans style.css ni chat-widget.css.

   - #mp-notif-bar : bannière insérée tout en haut de la page (avant
     tout le reste), donc jamais superposée au header existant de
     chaque page (elle pousse simplement le contenu vers le bas).
     Elle s'affiche automatiquement puis disparaît toute seule après
     5 secondes (AUTO_HIDE_MS, voir notif-widget.js) — le client n'a
     rien à fermer lui-même.
   - #mp-notif-bell : icône flottante (même gabarit que la bulle de
     chat) donnant accès à l'historique des annonces actives, ex.
     depuis n'importe quelle page du compte client.
   ============================================================ */

#mp-notif-bar {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  z-index: 99997;
  display: none;
  padding: 12px 16px;
  gap: 12px;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  color: #eef2f5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, #0f151d, #121a24);
}
#mp-notif-bar.mp-notif-show { display: flex; }

#mp-notif-bar[data-type="info"]    { border-left: 4px solid #3aa0ff; }
#mp-notif-bar[data-type="success"] { border-left: 4px solid #00d97e; }
#mp-notif-bar[data-type="warning"] { border-left: 4px solid #f2b705; }
#mp-notif-bar[data-type="urgent"]  { border-left: 4px solid #ff5c5c; }

#mp-notif-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mp-notif-bar[data-type="info"]    #mp-notif-icon { background: rgba(58, 160, 255, 0.15); color: #3aa0ff; }
#mp-notif-bar[data-type="success"] #mp-notif-icon { background: rgba(0, 217, 126, 0.15); color: #00d97e; }
#mp-notif-bar[data-type="warning"] #mp-notif-icon { background: rgba(242, 183, 5, 0.15); color: #f2b705; }
#mp-notif-bar[data-type="urgent"]  #mp-notif-icon { background: rgba(255, 92, 92, 0.15); color: #ff5c5c; }
#mp-notif-icon svg { width: 16px; height: 16px; }

#mp-notif-body { flex: 1 1 auto; min-width: 0; }
#mp-notif-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
#mp-notif-text {
  font-size: 13px;
  line-height: 1.4;
  color: #c3ccd3;
  word-break: break-word;
}

#mp-notif-pager {
  display: none;
  align-items: center;
  gap: 6px;
}
#mp-notif-pager.mp-notif-show { display: flex; }
.mp-notif-pager-btn {
  border: none;
  background: transparent;
  color: #7c8894;
  cursor: pointer;
  padding: 2px;
  display: flex;
}
.mp-notif-pager-btn:hover { color: #eef2f5; }
.mp-notif-pager-btn svg { width: 14px; height: 14px; }
#mp-notif-dots { display: flex; gap: 4px; }
.mp-notif-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.mp-notif-dot.mp-active { background: #eef2f5; }

@media (max-width: 640px) {
  #mp-notif-bar { padding: 10px 12px; gap: 8px; }
  #mp-notif-icon { width: 26px; height: 26px; }
  #mp-notif-title { font-size: 13px; }
  #mp-notif-text { font-size: 12px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  #mp-notif-pager { display: none !important; }
}

/* ---------- Icône flottante "cloche" (historique des annonces) --------- */

#mp-notif-bell {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px) + 14px);
  bottom: max(62px, env(safe-area-inset-bottom, 0px) + 58px);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #121a24;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99998;
  transition: transform .15s ease;
}
#mp-notif-bell.mp-notif-show { display: flex; }
#mp-notif-bell:hover { transform: scale(1.08); }
#mp-notif-bell svg { width: 15px; height: 15px; color: #eef2f5; }

/* Variante : cloche placée directement dans l'en-tête du site (#mp-notif-header-slot),
   entre le logo et le nom du client — reste toujours visible, plutôt qu'en
   icône flottante séparée. */
#mp-notif-header-slot {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
}
#mp-notif-bell.mp-notif-in-header {
  position: relative;
  right: auto;
  bottom: auto;
  width: 32px;
  height: 32px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 640px) {
  #mp-notif-header-slot { flex: 0 0 auto; }
}

#mp-notif-bell-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ff5c5c;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #0b0f14;
}
#mp-notif-bell-badge.mp-notif-show { display: flex; }

#mp-notif-panel {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px) + 14px);
  bottom: max(104px, env(safe-area-inset-bottom, 0px) + 100px);
  width: min(340px, calc(100vw - 28px));
  max-height: min(420px, calc(100vh - 140px));
  background: #121a24;
  border: 1px solid #1e2833;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 99999;
  font-family: 'Inter', sans-serif;
}
#mp-notif-panel.mp-notif-open { display: flex; }

/* Quand la cloche est dans l'en-tête (voir #mp-notif-header-slot ci-dessus),
   le panneau s'ouvre juste en dessous d'elle, plutôt qu'en bas de l'écran. */
#mp-notif-panel.mp-notif-panel-from-header {
  right: max(18px, env(safe-area-inset-right, 0px) + 14px);
  bottom: auto;
  top: 66px;
}
@media (max-width: 480px) {
  #mp-notif-panel.mp-notif-panel-from-header { top: 56px; }
}

#mp-notif-panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid #1e2833;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #eef2f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#mp-notif-panel-close {
  border: none;
  background: transparent;
  color: #7c8894;
  cursor: pointer;
  padding: 2px;
  display: flex;
}
#mp-notif-panel-close svg { width: 16px; height: 16px; }
#mp-notif-panel-close:hover { color: #eef2f5; }

#mp-notif-panel-list { overflow-y: auto; padding: 8px; }
.mp-notif-item {
  border: 1px solid #1e2833;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.mp-notif-item:last-child { margin-bottom: 0; }
.mp-notif-item[data-type="info"]    { border-left: 3px solid #3aa0ff; }
.mp-notif-item[data-type="success"] { border-left: 3px solid #00d97e; }
.mp-notif-item[data-type="warning"] { border-left: 3px solid #f2b705; }
.mp-notif-item[data-type="urgent"]  { border-left: 3px solid #ff5c5c; }
.mp-notif-item-title { font-weight: 700; font-size: 13px; color: #eef2f5; margin-bottom: 3px; }
.mp-notif-item-text { font-size: 12.5px; color: #c3ccd3; line-height: 1.4; margin-bottom: 6px; word-break: break-word; }
.mp-notif-item-meta { display: flex; align-items: center; justify-content: flex-end; }
.mp-notif-item-time { font-size: 11px; color: #7c8894; }
#mp-notif-panel-empty { padding: 24px 16px; text-align: center; color: #7c8894; font-size: 13px; }