/* =========================================================================
   LootSplash Notifications (MU) — Polished UI
   Works with MU bell markup + render_cards() classes
   ======================================================================== */

:root{
  --lsn-blue: #0078d4;
  --lsn-blue-600:#0065b3;
  --lsn-slate-900:#0f172a;
  --lsn-slate-700:#334155;
  --lsn-slate-600:#475569;
  --lsn-slate-500:#64748b;
  --lsn-slate-200:#e5e7eb;
  --lsn-slate-100:#f1f5f9;
  --lsn-rose:#e11d48;
  --lsn-gold:#fbbf24;
  --lsn-shadow: 0 12px 28px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
}

/* --- Bell wrapper/button ------------------------------------------------ */
.ls-bell-standalone{ display:inline-block; }
#lsn-bell{
  background:var(--lsn-blue);
  color:#fff;
  border:1px solid var(--lsn-blue-600);
  border-radius:12px;
  padding:.55rem .70rem;
  font-size:16px;
  line-height:1;
  position:relative;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,120,212,.28);
  transition:transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}
#lsn-bell:hover{ transform:translateY(-1px); }
#lsn-bell .lsn-icon,
#lsn-bell .lsn-icon *,
#lsn-bell .lsn-icon-text{ color:var(--lsn-gold); fill:var(--lsn-gold); }

/* Badge pill */
#lsn-bell .lsn-badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 6px;
  border-radius:999px;
  background:var(--lsn-rose); color:#fff;
  font-weight:700; font-size:12px; line-height:18px; text-align:center;
  box-shadow:0 4px 10px rgba(225,29,72,.35);
}

/* --- Dropdown panel ----------------------------------------------------- */
#lsn-dropdown{
  position:absolute; right:10px; top:44px;
  width:min(380px, calc(100vw - 24px));
  max-height:72vh; overflow:auto;
  background:#fff;
  border:1px solid var(--lsn-slate-200);
  border-radius:12px;
  box-shadow:var(--lsn-shadow);
  z-index:2147483640;
}
#lsn-dropdown[hidden]{ display:none !important; }

/* Header */
.lsn-dropdown__header{
  position:sticky; top:0; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  background:#fff;
  border-bottom:1px solid var(--lsn-slate-100);
  font:600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--lsn-slate-700);
}
.lsn-actions{ display:flex; gap:8px; }
.lsn-actions button{
  background:var(--lsn-slate-100);
  border:1px solid var(--lsn-slate-200);
  color:var(--lsn-slate-700);
  border-radius:8px;
  padding:6px 10px;
  font:600 12px/1 system-ui;
  cursor:pointer;
}
.lsn-actions button:hover{ background:#eaf0f6; }

/* Empty state */
.lsn-empty{ padding:14px; color:var(--lsn-slate-500); }

/* --- Cards -------------------------------------------------------------- */
.lsn-list{ padding:6px; }
.lsn-card{
  display:flex; gap:12px;
  padding:12px;
  border:1px solid var(--lsn-slate-100);
  border-radius:10px;
  background:#fff;
  margin:8px 6px;
  transition:background-color .12s ease, box-shadow .12s ease;
}
.lsn-card:hover{ background:#fcfdff; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.lsn-card.is-unread{ box-shadow:0 0 0 2px rgba(0,120,212,.10) inset; }
.lsn-card.is-read{ opacity:.9; }

.lsn-card__img{
  width:56px; height:56px; flex:0 0 auto; border-radius:8px; object-fit:cover;
  background:#f8fafc;
}
.lsn-card__body{
  min-width:0;
  font:400 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--lsn-slate-900);
}
.lsn-card__title{ font-weight:700; margin:0 0 2px; color:var(--lsn-slate-900); }
.lsn-card__date{ font-size:12px; color:var(--lsn-slate-500); margin:0 0 6px; }
.lsn-card__content p{ margin:.25rem 0; }

/* Card buttons */
.lsn-card__actions{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.lsn-card__cta,
.lsn-card__ack,
.lsn-card__delete{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border:1px solid var(--lsn-slate-200);
  border-radius:8px;
  background:#f8fafc;
  color:var(--lsn-slate-900);
  text-decoration:none;
  font:600 12px/1 system-ui;
  cursor:pointer;
}
.lsn-card__cta:hover,
.lsn-card__ack:hover{ background:#eef2f7; }
.lsn-card__delete{
  background:#fff5f5; color:#b91c1c; border-color:#f1d6d6;
}
.lsn-card__delete:hover{ background:#ffecec; }

/* Footer link */
#lsn-dropdown .lsn-dropdown__footer{
  position:sticky; bottom:0; z-index:2;
  background:#fff;
  border-top:1px solid var(--lsn-slate-100);
}
#lsn-dropdown .lsn-dropdown__footer a{
  display:inline-block;
  background:var(--lsn-slate-100);
  border:1px solid var(--lsn-slate-200);
  color:var(--lsn-slate-700);
  border-radius:8px; padding:8px 12px;
  text-decoration:none; font:600 13px/1 system-ui;
}
#lsn-dropdown .lsn-dropdown__footer a:hover{ background:#eaf0f6; }

/* Caret pointer under the bell */
#lsn-dropdown::before{
  content:"";
  position:absolute; top:-8px; right:24px;
  width:12px; height:12px;
  background:#fff;
  border-left:1px solid var(--lsn-slate-200);
  border-top:1px solid var(--lsn-slate-200);
  transform:rotate(45deg);
}

/* Scrollbar (WebKit) */
#lsn-dropdown::-webkit-scrollbar{ width:10px; }
#lsn-dropdown::-webkit-scrollbar-thumb{
  background:var(--lsn-slate-200); border-radius:10px;
}
#lsn-dropdown::-webkit-scrollbar-thumb:hover{ background:#d7dce2; }

/* Mobile tweaks */
@media (max-width:640px){
  #lsn-bell-wrap{ position:relative !important; }
  #lsn-dropdown{
    left:50% !important; right:auto !important; transform:translateX(-50%) !important;
    width:min(420px, calc(100vw - 24px));
    max-height:70vh;
  }
  #lsn-dropdown::before{ right:50%; transform:translateX(50%) rotate(45deg); }
}