/* "Update available — Reload" toast, appended to by service-worker-registration.ts when a new service worker is waiting. */ .update-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%); z-index: 2147483000; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-alt); color: var(--color-text); font-family: system-ui, sans-serif; font-size: 14px; box-shadow: 0 8px 24px rgb(0 0 0 / 45%); } .update-toast__message { white-space: nowrap; } .update-toast__action { flex: none; padding: 6px 14px; border: 1px solid var(--color-accent); border-radius: 6px; background: var(--color-accent); color: var(--color-surface-deep); font: inherit; font-weight: 600; cursor: pointer; } .update-toast__action:disabled { opacity: 0.6; cursor: default; } .update-toast__dismiss { flex: none; width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--color-text-dim); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; } .update-toast__dismiss:hover { color: var(--color-text); } @media (prefers-reduced-motion: no-preference) { .update-toast { animation: update-toast-in 180ms ease-out; } } @keyframes update-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }