.notification-banners{--banner-ink:var(--glass-ink);--banner-muted:var(--glass-muted);position:fixed;z-index:10030;top:calc(var(--bar-height,42px) + env(safe-area-inset-top,0px) + 12px);right:max(16px,env(safe-area-inset-right,0px));width:min(354px,calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:calc(100dvh - var(--bar-height,42px) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 28px);color:var(--banner-ink);pointer-events:none}
.notification-banners[hidden]{display:none}
.notification-banner-card{display:flex;flex-direction:column;max-height:inherit;overflow:hidden;pointer-events:auto;border:1px solid var(--glass-edge);border-radius:18px;background:var(--glass-surface);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);animation:notification-banner-enter .24s cubic-bezier(.2,.7,.3,1)}
.notification-banner-brand{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:12px 12px 0;font-size:11px;font-weight:600;line-height:1.4}
.notification-banner-brand img{flex:0 0 30px;border-radius:9px}
.notification-banner-brand small{margin-left:auto;color:var(--banner-muted);font-size:10px;font-weight:400}
.notification-banners button{border:0;border-radius:8px;background:transparent;color:var(--banner-muted);font:inherit;cursor:pointer}
.notification-banners button:hover{background:var(--accent-soft);color:var(--banner-ink)}
.notification-banners button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.notification-banners .notification-banner-close{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;padding:6px;margin-right:-3px}
.notification-banner-close svg{display:block;width:16px;height:16px}
.notification-banner-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px 15px 0 50px;overflow-wrap:anywhere;scrollbar-width:thin}
.notification-banner-content strong{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--banner-ink);font-size:13px;font-weight:650;line-height:1.5}
.notification-banner-content p{display:-webkit-box;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:4px 0 0;color:var(--banner-muted);font-size:12px;line-height:1.65;white-space:pre-wrap}
.notification-banner-more{display:block;margin-top:7px;color:var(--banner-muted);font-size:11px;line-height:1.6}
.notification-banner-actions{display:flex;justify-content:flex-end;flex-shrink:0;padding:7px 12px 10px}
.notification-banner-actions button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:30px;padding:5px 8px;font-size:11px;font-weight:550}
.notification-banner-actions svg{width:13px;height:13px}
@keyframes notification-banner-enter{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:480px),(pointer:coarse){.notification-banners{right:max(12px,env(safe-area-inset-right,0px));width:calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}.notification-banners .notification-banner-close{width:36px;height:36px;flex-basis:36px}.notification-banner-actions button{min-height:36px;padding-inline:12px}.notification-banner-content{padding-left:15px}}
@media(prefers-reduced-motion:reduce){.notification-banner-card{animation:none}}
html[data-reduce-motion=true] .notification-banner-card{animation:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.notification-banner-card{background:var(--surface)}}