.notification-bell { position:relative; }
.map-notification-anchor { position:absolute; z-index:410; bottom:calc(var(--map-actions-bottom) + 76px); left:24px; pointer-events:auto; }
.notification-badge { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border-radius:20px; background:var(--acid); color:var(--black); font-size:12px; font-weight:800; }
.notification-badge[hidden] { display:none; }
.notification-bell .notification-badge { display:inline-grid; position:absolute; right:-3px; top:-3px; }
.notification-bell .notification-badge[hidden] { display:none; }
.settings-list > .button > .notification-badge { flex:0 0 auto; text-align:center; }
.notification-page { width:min(620px,calc(100vw - 32px)); max-height:calc(var(--visual-viewport-height,100dvh) - 48px); display:flex; flex-direction:column; padding:0; overflow:hidden; }
.notification-page .modal-header { padding:24px; flex-shrink:0; margin:0; border-bottom:1px solid var(--line-dark); }
.notification-page h2 { font-size:28px; margin:4px 0 0; }
.notification-scroll { overflow-y:auto; overscroll-behavior:contain; padding:20px 24px 24px; }
.notification-tools { display:flex; align-items:center; gap:8px; }
.notification-tools .icon-button,.notification-page button { min-height:48px; min-width:48px; touch-action:manipulation; }
.notification-filters { display:flex; flex:1; gap:4px; }
.notification-filters button { padding:10px 14px; border:1px solid var(--line-dark); border-radius:30px; background:var(--black-raised); color:var(--white); font-size:14px; }
.notification-filters button[aria-pressed="true"] { background:var(--acid); color:var(--black); border-color:var(--acid); }
.notification-status { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; font-size:13px; color:var(--muted); }
.notification-status .text-button { font-size:13px; }
.notification-page .text-button { color:var(--acid); }
.notification-page button:disabled { color:var(--muted); opacity:.55; }
.notification-item { display:flex; position:relative; align-items:flex-start; gap:12px; padding:20px 0; border-top:1px solid var(--line-dark); }
.notification-symbol { flex:0 0 44px; width:44px; height:44px; border:1px solid var(--line-dark); border-radius:14px; display:grid; place-items:center; color:var(--muted); background:var(--black-raised); }
.notification-symbol svg { width:20px; height:20px; }
.notification-copy { min-width:0; flex:1; }
.notification-copy strong { display:block; font-size:16px; line-height:1.5; padding-right:34px; overflow-wrap:anywhere; }
.notification-copy p,.notification-copy small { font-size:13px; color:var(--muted); line-height:1.6; margin:5px 0; overflow-wrap:anywhere; }
.notification-item-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.notification-item-actions .text-button { display:inline-flex; align-items:center; gap:8px; font-size:14px; padding:8px 0; }
.notification-item-actions svg { width:16px; height:16px; }
.notification-unread-label { position:absolute; top:22px; right:0; color:var(--acid); font-size:11px; font-weight:700; }
.notification-read-label { font-size:12px; color:var(--muted); }
.is-unread .notification-symbol { color:var(--acid); border-color:color-mix(in srgb,var(--acid) 30%,transparent); }
.notification-empty { text-align:center; padding:64px 12px; color:var(--muted); }
.notification-empty>svg { width:36px; height:36px; margin-bottom:12px; }
.notification-empty h3 { font-size:20px; color:var(--white); margin:0 0 12px; }
.notification-empty p { font-size:14px; line-height:1.7; max-width:300px; margin:auto; }
.notification-footnote { margin:20px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.notification-preferences { padding:16px; border:1px solid var(--line-dark); border-radius:20px; margin-top:16px; background:var(--black-raised); }
.notification-preferences h3 { margin:0 0 12px; font-size:16px; }
.notification-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border:0; border-bottom:1px solid var(--line-dark); background:none; color:var(--white); text-align:left; }
.notification-toggle strong { font-size:14px; font-weight:600; }
.notification-toggle small { display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.5; }
.notification-switch { width:42px; height:26px; border-radius:30px; background:#626760; padding:3px; flex-shrink:0; }
.notification-switch::before { content:""; display:block; width:20px; height:20px; border-radius:50%; background:var(--white); transition:transform 180ms ease; }
[aria-checked="true"] .notification-switch { background:var(--acid); }
[aria-checked="true"] .notification-switch::before { background:var(--black); transform:translateX(16px); }
.notification-preferences p { font-size:12px; line-height:1.6; color:var(--muted); margin:12px 0 0; }
#notification-banner-host { position:fixed; z-index:1100; left:16px; right:16px; top:calc(env(safe-area-inset-top,0px) + 12px); pointer-events:none; display:flex; justify-content:center; }
.notification-banner { pointer-events:auto; display:flex; align-items:center; gap:8px; padding:12px 8px 12px 16px; width:min(100%,460px); background:var(--black-raised); border:1px solid var(--line-dark); border-radius:20px; box-shadow:0 12px 32px #0006; animation:notification-enter 220ms ease-out; }
.notification-banner-copy { flex:1; min-width:0; }
.notification-banner-copy strong { display:block; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.notification-banner-copy span { display:block; font-size:12px; color:var(--muted); margin-top:4px; }
.notification-banner button { min-width:48px; min-height:48px; flex-shrink:0; }
.notification-banner .text-button { color:var(--acid); }
.notification-page button:focus-visible,.notification-banner button:focus-visible,.notification-bell:focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
@keyframes notification-enter { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:600px) {
 .notification-page { inset:0; transform:none; animation:none; width:100%; max-height:none; height:var(--visual-height,100dvh); border:0; border-radius:0; padding-top:env(safe-area-inset-top,0px); }
 .notification-page .modal-header { padding:20px; }
 .notification-scroll { padding:16px 20px calc(24px + env(safe-area-inset-bottom,0px)); }
 .map-notification-anchor { left:16px; }
 .notification-status { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { .notification-banner { animation:none; } .notification-switch::before { transition:none; } }
.notification-push{border-bottom:1px solid var(--border,rgba(255,255,255,.12));padding-bottom:14px;margin-bottom:4px;display:grid;gap:8px}.notification-push>small,.notification-push-note{color:var(--muted,#a8aaa4);font-size:12px;line-height:1.5}.notification-push>.text-button{justify-self:start;min-height:44px;text-align:left}.notification-toggle:disabled{cursor:default;opacity:.65}.notification-push .invite-error{margin:0}