/* ============================
   Notificaciones - Mascotas Ayacucho
   UI flotante: campana + panel + toast
   ============================ */

/* Campana */
.ma-bell {
    position: fixed;
    right: 16px;
    bottom: 96px; /* Sube la campana para no chocar con WhatsApp */
    z-index: 9999;
    width: 52px; height: 52px;
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    display: grid; place-items: center;
    cursor: pointer; background: #0AC5CA; color: #fff; border: none;
  }
  .ma-bell .dot {
    position: absolute; top: 6px; right: 6px;
    width: 10px; height: 10px; border-radius: 999px; background: #F43F5E; display: none;
  }
  
  /* Panel */
  .ma-panel {
    position: fixed; right: 16px; bottom: 156px; /* 96 + separación */
    width: min(380px, 92vw); max-height: 60vh; overflow: auto;
    background: #fff; border-radius: 16px; box-shadow: 0 18px 45px rgba(0,0,0,.18);
    padding: 12px; display: none; z-index: 9999;
  }
  .ma-panel header { display:flex; align-items:center; justify-content:space-between; padding: 6px 8px 10px; }
  .ma-panel h4 { margin:0; font-size:16px; }
  .ma-panel .mark-all { font-size:12px; background:transparent; border:none; cursor:pointer; text-decoration:underline; }
  
  /* Items */
  .ma-item { border-radius:12px; padding:10px 12px; margin:6px 4px; border:1px solid #eee; display:flex; gap:10px; align-items:center; }
  .ma-item.unseen { border-color:#0AC5CA22; background:#0AC5CA0F; }
  .ma-item .badge { font-size:11px; padding:2px 8px; border-radius:999px; background:#EEF; }
  .ma-item .meta { margin-left:auto; font-size:12px; opacity:.7; white-space:nowrap; }
  .ma-item a { font-size:13px; text-decoration:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  
  /* Toast */
  .ma-toast {
    position: fixed; right:16px; bottom:164px; /* encima de la campana */
    background:#101828; color:#fff; padding:12px 14px; border-radius:12px; box-shadow:0 14px 36px rgba(0,0,0,.3);
    z-index:9999; display:none;
  }
  
  /* Safe area iOS */
  @supports (bottom: env(safe-area-inset-bottom)) {
    .ma-bell  { bottom: calc(96px  + env(safe-area-inset-bottom)); }
    .ma-panel { bottom: calc(156px + env(safe-area-inset-bottom)); }
    .ma-toast { bottom: calc(164px + env(safe-area-inset-bottom)); }
  }