/* WebSocket Real-time Updates Styles */

/* Connection Status Indicator */
#ws-connection-status {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1050;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    transition: var(--transition);
}

/* Score Update Animation */
.score-updated {
    animation: scoreUpdate 2s ease-in-out;
    position: relative;
}

@keyframes scoreUpdate {
    0% {
        background-color: var(--accent-green);
        color: var(--bg-primary);
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
        box-shadow: 0 0 10px var(--accent-green);
    }
    100% {
        background-color: transparent;
        color: inherit;
        transform: scale(1);
        box-shadow: none;
    }
}

/* Real-time Notification Styles */
.alert.position-fixed {
    animation: slideInRight 0.3s ease-out;
}

/* Stacking container for real-time notifications */
.notification-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    pointer-events: none;
}

/* Notifications inside the container stack instead of overlapping */
.notification-container .alert {
    position: relative;
    top: auto;
    right: auto;
    margin: 0;
    width: 100%;
    max-width: 400px;
    pointer-events: auto;
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Real-time Update Indicators */
.update-indicator {
    position: relative;
}

.update-indicator::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
    opacity: 0;
}

.update-indicator.has-update::after {
    opacity: 1;
}

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(0.8);
        opacity: 1;
    }
}

/* Question/Participant List Update Animations */
.list-item-updated {
    animation: listItemUpdate 1s ease-in-out;
}

@keyframes listItemUpdate {
    0% {
        background-color: rgba(0, 255, 255, 0.1);
        border-left: 3px solid var(--accent-cyan);
    }
    100% {
        background-color: transparent;
        border-left: 3px solid transparent;
    }
}

/* Facilitator Page Indicators */
.facilitator-page #ws-connection-status {
    background-color: var(--accent-cyan);
    color: var(--bg-primary);
}

/* Participant Page Indicators */
.participant-page #ws-connection-status {
    background-color: var(--accent-green);
    color: var(--bg-primary);
}

/* Connection Status in Navbar (for both facilitator and participant pages) */
.navbar #ws-connection-status {
    position: static;
    z-index: auto;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

.facilitator-page .navbar #ws-connection-status {
    background-color: #17a2b8;
    color: white;
}

.participant-page .navbar #ws-connection-status {
    background-color: #28a745;
    color: white;
}

/* Loading state for real-time updates */
.loading-realtime {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
}

.loading-realtime::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 255, 0.1),
        transparent
    );
    animation: loadingRealtime 1.5s infinite;
    z-index: 1;
}

@keyframes loadingRealtime {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}