/* The bell dialog lives inside the isolated header. Raise that entire stacking
   context only while its dialog is open, above Leaflet and map controls. */
.app-header:has(.notification-backdrop){z-index:13000}
.app-header .notification-backdrop{position:fixed;inset:0;z-index:14000;padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));overscroll-behavior:contain}
.notification-backdrop .notification-panel{min-height:0;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:min(520px,100%);display:flex;flex-direction:column;overflow:hidden}
.notification-backdrop .notification-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media(max-width:760px){.notification-backdrop .notification-panel{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.notification-backdrop .modal-header{flex-shrink:0}.notification-backdrop .notification-tabs{flex-shrink:0}}