/* A single phone-style prompt enters from the top without moving page content. */
.notification-banner { position: fixed; z-index: 120; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100vw - 24px)); display: flex; align-items: center; border: 1px solid #dbeafe; border-radius: 20px; background: #fffffff5; box-shadow: 0 12px 40px #0f172a25; backdrop-filter: blur(16px); animation: notification-enter .24s ease-out; }
.notification-banner[hidden] { display: none; }
.notification-banner-open { flex: 1; display: flex; gap: 12px; align-items: center; text-align: left; background: transparent; border: 0; padding: 16px; min-width: 0; cursor: pointer; color: #0f172a; font: inherit; }
.notification-banner-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; color: white; background: #2563eb; font: 700 19px Inter, sans-serif; }
.notification-banner-open small, .notification-banner-open strong, .notification-banner-open span span { display: block; }
.notification-banner-open small { font-size: 10px; letter-spacing: .12em; color: #64748b; }
.notification-banner-open strong { font-size: 15px; margin: 3px 0; }
.notification-banner-open span span { font-size: 12px; color: #64748b; }
.notification-banner-dismiss { border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; margin-right: 12px; width: 34px; height: 34px; font-size: 24px; cursor: pointer; }
.notification-banner button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 2px; }
@keyframes notification-enter { from { opacity: 0; translate: 0 -30px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .notification-banner { animation: none; } }