/* Panel: light (default) */
#notifications-panel {
  width: 20rem;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}
/* Wider when the full list is shown */
#notifications-panel:has(.np-expanded) { width: 28rem; max-width: 90vw; }

.np-header   { display:flex; align-items:center; justify-content:space-between;
               padding:.5rem .75rem; border-bottom:1px solid #e5e7eb; }
.np-title    { font-size:.875rem; font-weight:600; }
.np-link     { font-size:.75rem; color:#1d4ed8; background:none; border:0; cursor:pointer; }
.np-link:hover { text-decoration:underline; }
.np-list     { list-style:none; margin:0; padding:0; }
.np-expanded .np-list { max-height:20rem; overflow-y:auto; }   /* the scroller */
.np-item     { padding:.5rem .75rem; font-size:.875rem; border-bottom:1px solid #f3f4f6; }
.np-unread   { background:#eff6ff; }
.np-date     { font-size:.75rem; color:#6b7280; }
.np-empty    { padding:1rem .75rem; font-size:.875rem; color:#6b7280; }
.np-footer   { padding:.5rem .75rem; text-align:center; border-top:1px solid #e5e7eb; }

/* Panel: dark (follows your toggle) */
[data-theme="dark"] #notifications-panel { background:#1f2937; color:#f3f4f6; border-color:#374151; }
[data-theme="dark"] .np-header,
[data-theme="dark"] .np-footer { border-color:#374151; }
[data-theme="dark"] .np-link   { color:#60a5fa; }
[data-theme="dark"] .np-item   { border-bottom-color:#374151; }
[data-theme="dark"] .np-unread { background:#374151; }
[data-theme="dark"] .np-date,
[data-theme="dark"] .np-empty  { color:#9ca3af; }