.offline-indicator{position:fixed;top:calc(.75rem + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);z-index:999;width:fit-content;max-width:min(90%,400px);display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;font-size:.8125rem;font-weight:500;border-radius:9999px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 4px 12px rgba(0,0,0,.12);animation:offline-indicator-enter .3s ease-out forwards}.offline-indicator.offline{background:color-mix(in oklch,hsl(var(--destructive)) 90%,transparent);color:hsl(var(--destructive-foreground));border:1px solid color-mix(in oklch,hsl(var(--destructive)) 60%,transparent)}.offline-indicator.reconnected{background:color-mix(in oklch,hsl(var(--success)) 90%,transparent);color:#fff;border:1px solid color-mix(in oklch,hsl(var(--success)) 60%,transparent)}.offline-indicator-icon{flex-shrink:0;width:.875rem;height:.875rem}@keyframes offline-indicator-enter{0%{opacity:0;transform:translateX(-50%) translateY(-.5rem)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@media (prefers-reduced-motion:reduce){.offline-indicator{animation:none}}