/* Bell popup: a compact inbox; delivery controls live in notification settings. */
#notification-panel.notification-panel { display:flex; flex-direction:column; min-width:0; padding:0; border:0; border-radius:14px; background:#fff; box-shadow:0 16px 48px rgba(16,27,34,.18); overflow:hidden; color:#12393f; max-height:calc(100dvh - 24px); }
.topbar #notification-panel.notification-panel { width:min(420px,calc(100vw - var(--sidenav-expanded) - 24px)); overflow:hidden; }
#notification-panel[hidden] { display:none; }
#notification-panel .notification-panel-head { display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; flex:0 0 auto; gap:16px; padding:20px 18px 12px; border:0; }
#notification-panel .notification-panel-title { flex:1 1 auto; gap:6px; }
#notification-panel .notification-panel-title strong { font-size:18px; line-height:1.4; font-weight:650; color:#12393f; }
#notification-panel .notification-panel-title > span { font-size:12px; line-height:1.5; white-space:nowrap; color:#526e72; }
#notification-panel .notification-panel-head-actions { width:auto; gap:8px; flex-wrap:nowrap; }
#notification-panel .notification-panel-action { min-height:34px; padding:6px 8px; background:transparent; border:0; font-size:12px; font-weight:500; color:#35575b; }
#notification-panel .notification-panel-head-actions .notification-panel-action { border:1px solid #d9e3e1; border-radius:6px; }
#notification-panel .notification-panel-action:disabled { color:#526e72; opacity:.48; cursor:default; }
#notification-panel .notification-panel-action:hover:not(:disabled), #notification-panel .notification-popup-close:hover { background:#eff6f4; color:#175a54; text-decoration:none; }
#notification-panel .notification-popup-close { display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; padding:0; background:transparent; color:#526e72; border:0; border-radius:6px; cursor:pointer; }
#notification-panel .notification-popup-tools { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 10px 8px; border-bottom:1px solid #e4eae8; }
#notification-panel .notification-popup-tools > span { display:flex; gap:8px; }
#notification-panel .notification-panel-content { flex:1 1 auto; min-height:0; overflow:auto; max-height:min(520px,calc(100dvh - 218px)); scrollbar-width:thin; scrollbar-color:#9fb8b4 transparent; }
#notification-panel .notification-list { display:grid; gap:0; max-height:none; overflow:visible; padding:0; }
#notification-panel .notification-item, #notification-panel .notification-item.notification-business { padding:16px 18px; margin:0; gap:12px; grid-template-columns:32px minmax(0,1fr); background:#fff; border:0; border-bottom:1px solid #edf2ef; border-radius:0; opacity:1; }
#notification-panel .notification-item:last-child { border-bottom:0; }
#notification-panel .notification-item:not(.is-read) { background:#f5faf8; }
#notification-panel .notification-item-avatar { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:#deede8; color:#175a54; font-weight:600; font-size:12px; }
#notification-panel .notification-item.system-alert .notification-item-avatar { background:#fff0ee; color:#a32e2e; }
#notification-panel .notification-item-main { gap:6px; }
#notification-panel .notification-item-main strong { color:#12393f; font-size:14px; line-height:1.5; font-weight:600; white-space:normal; overflow-wrap:anywhere; }
#notification-panel .notification-item-main span { color:#526e72; font-size:12px; line-height:1.6; white-space:normal; overflow-wrap:anywhere; }
#notification-panel .notification-item-head { align-items:flex-start; gap:10px; }
#notification-panel .notification-read-state { flex:0 0 auto; font-size:11px; font-weight:400; white-space:nowrap; }
#notification-panel .notification-item:not(.is-read) .notification-read-state { color:#175a54; font-weight:600; }
#notification-panel .notification-item-main > .notification-item-actions { gap:16px; flex-wrap:wrap; margin-top:2px; }
#notification-panel .notification-action-button { display:inline-flex; align-items:center; gap:8px; padding:4px 0; color:#0b6f62; font-size:12px; font-weight:600; line-height:1.5; }
#notification-panel .notification-panel-foot { display:flex; flex:0 0 auto; justify-content:center; flex-direction:column; align-items:stretch; gap:4px; padding:12px 18px; border-top:1px solid #e4eae8; }
#notification-panel .notification-panel-foot > button { justify-content:center; width:100%; min-height:34px; }
#notification-panel .notification-panel-foot > span { text-align:center; color:#526e72; font-size:11px; }
#notification-panel .notification-sync-feedback { padding:12px 18px; margin:0; background:#f6f8f7; font-size:12px; line-height:1.6; }
#notification-panel .notification-sync-feedback[role=alert] { color:#a32e2e; }
#notification-panel .notification-empty { display:grid; justify-items:center; gap:8px; padding:40px 18px; color:#526e72; font-size:13px; }
#notification-panel .notification-empty strong { color:#12393f; font-size:14px; font-weight:600; }
#notification-panel :is(button,a):focus-visible { outline:2px solid #087f73; outline-offset:2px; }
#notification-panel ::selection { background:#d8eeeb; color:#12393f; }
.notification-center-scope { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; color:#526e72; font-size:13px; line-height:1.6; }
@media (max-width:767px) {
 .topbar #notification-panel.notification-panel { position:fixed; left:12px; right:12px; top:calc(64px + env(safe-area-inset-top)); bottom:auto; width:auto; max-height:calc(100dvh - 148px); }
 #notification-panel .notification-panel-head { padding:16px 16px 8px; gap:10px; }
 #notification-panel .notification-panel-action, #notification-panel .notification-popup-close { min-height:44px; }
 #notification-panel .notification-popup-close { height:44px; flex-basis:36px; }
 #notification-panel .notification-panel-content { max-height:calc(100dvh - 352px); }
 #notification-panel .notification-item, #notification-panel .notification-item.notification-business { padding:16px; gap:10px; }
 #notification-panel .notification-action-button { min-height:40px; }
}