.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,var(--destructive) 90%,transparent);color:var(--destructive-foreground);border:1px solid color-mix(in oklch,var(--destructive) 60%,transparent)}.offline-indicator.reconnected{background:color-mix(in oklch,var(--success) 90%,transparent);color:#fff;border:1px solid color-mix(in oklch,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}}