/* SSE Connection Status Indicator
   Standalone styles extracted from Skrift for the theme.
   The JS (notifications.js) sets inline backgroundColor using --sk-color-* vars. */

:root {
    --sk-color-success: #34D399;
    --sk-color-warning: #F59E0B;
    --sk-color-error: #F43F5E;
    --sk-color-muted: rgba(255, 255, 255, 0.4);
}

.sk-status-indicator {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background-color: var(--surface, rgba(255, 255, 255, 0.04));
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    font-size: 0.75rem;
    color: var(--sk-color-muted);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.sk-status-indicator-hidden {
    opacity: 0;
}

.sk-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 150ms ease;
}

@media (max-width: 600px) {
    .sk-status-indicator {
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}