/**
 * Connection Status Styles
 */

.connection-status {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bg-warning, #f59e0b);
    color: var(--text-dark, #1f2937);
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.connection-status.hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.connection-status-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.connection-icon {
    font-size: 1rem;
}

.connection-text {
    line-height: 1.4;
}

/* Disconnected state */
.connection-status.disconnected {
    background: var(--bg-error, #0000);
    color: white;
}

/* Reconnecting state - pulsing animation */
.connection-status.reconnecting {
    animation: pulse-connection 2s ease-in-out infinite;
}

@keyframes pulse-connection {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Success state */
.connection-status.success {
    background: var(--bg-success, #10b981);
    color: white;
}

/* Info state */
.connection-status.info {
    background: var(--bg-info, #3b82f6);
    color: white;
}

/* Error state */
.connection-status.error {
    background: var(--bg-error, #000000);
    color: white;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .connection-status {
        background: var(--bg-warning-dark, #d97706);
    }

    .connection-status.disconnected,
    .connection-status.error {
        background: var(--bg-error-dark, #000000);
    }

    .connection-status.success {
        background: var(--bg-success-dark, #059669);
    }

    .connection-status.info {
        background: var(--bg-info-dark, #2563eb);
    }
}

/* Safe area for mobile devices */
@supports (padding-top: env(safe-area-inset-top)) {
    .connection-status {
        padding-top: calc(0.5rem + env(safe-area-inset-top));
    }
}