/**
 * ═══════════════════════════════════════════════════════════════════════════
 * INDEX - ROTATION TIMER ET PANNEAU PROCHAIN STREAM
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * OBJECTIF:
 * Gérer l'affichage du timer de rotation automatique entre les streamers
 * et le panneau "Prochain stream" qui montre quel streamer arrive ensuite.
 * 
 * FONCTIONNALITÉS:
 * - Timer avec compte à rebours avant le prochain streamer
 * - Bouton play/pause pour contrôler la rotation
 * - Panneau "Prochain stream" avec avatar, nom, jeu
 * - Preview du stream au survol (tooltip avec image)
 * - Bouton skip pour passer immédiatement au suivant
 * 
 * CHARGEMENT: Avec cache busting
 * TAILLE: 8.5 KB
 * 
 * DÉPENDANCES:
 * - JavaScript: rotation-manager.js (gère la logique de rotation)
 * - API: /api/v1/streamers-cache.php (données des streamers)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BOUTON PLAY/PAUSE DU TIMER
   ═══════════════════════════════════════════════════════════════════════════
   Bouton pour mettre en pause ou reprendre la rotation automatique.
   Utile quand l'utilisateur veut rester sur un streamer spécifique.
*/
.timer-play-pause-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 0.75rem;
    transition: all 0.3s ease;
}

.timer-play-pause-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.timer-play-pause-btn:active {
    transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PANNEAU "PROCHAIN STREAM"
   ═══════════════════════════════════════════════════════════════════════════
   Affiche les informations du prochain streamer dans la rotation:
   - Avatar du streamer
   - Nom d'affichage
   - Jeu en cours
   - Timer avant le changement
   - Bouton skip pour passer immédiatement
*/
.player-info-content {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.stream-details {
    flex: 1;
    min-width: 0;
}

.next-stream-panel {
    background: rgba(60, 50, 90, 0.6) !important;
    border: 1px solid rgba(165, 107, 255, 0.4) !important;
    border-radius: 12px !important;
    padding: 0.6rem 1rem !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1rem !important;
    backdrop-filter: blur(10px) !important;
    height: auto !important;
    min-height: 60px !important;
    position: relative !important;
    max-width: 400px !important;
}

.next-stream-panel:hover .stream-preview-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) scale(1) !important;
}

.next-stream-header {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: rgba(165, 107, 255, 1) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
}

.next-stream-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0.2rem 0.4rem !important;
    border-radius: 8px !important;
    margin: 0 !important;
    height: 100% !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.next-stream-info:hover {
    background: rgba(165, 107, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREVIEW DU STREAM AU SURVOL (TOOLTIP)
   ═══════════════════════════════════════════════════════════════════════════
   Quand l'utilisateur survole le panneau "Prochain stream", une preview
   s'affiche avec une capture d'écran du stream (480x270px).
   
   TECHNIQUE:
   - Position absolue au-dessus du panneau
   - Caché par défaut (opacity: 0, visibility: hidden)
   - Apparaît au survol avec transition smooth
   - Flèche pointant vers le panneau (::before)
*/
.stream-preview-tooltip {
    position: absolute !important;
    bottom: calc(100% + 15px) !important;
    left: 50% !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: max-content !important;
    max-width: 90vw !important;
    background: rgba(20, 15, 35, 0.98) !important;
    border: 2px solid rgba(165, 107, 255, 0.6) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(165, 107, 255, 0.4) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
    z-index: 10000 !important;
    backdrop-filter: blur(10px) !important;
    transform: translateX(-50%) scale(0.95) !important;
}

.stream-preview-tooltip::before {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-top: 10px solid rgba(165, 107, 255, 0.6) !important;
}

.stream-preview-tooltip img {
    display: block !important;
    width: 480px !important;
    height: 270px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    background: rgba(165, 107, 255, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFORMATIONS DU PROCHAIN STREAMER
   ═══════════════════════════════════════════════════════════════════════════
   Avatar, nom et jeu du streamer qui arrive dans la rotation
*/
.next-streamer-avatar {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background-color: rgba(165, 107, 255, 0.3) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 3px solid rgba(165, 107, 255, 0.6) !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 15px rgba(165, 107, 255, 0.5) !important;
}

.next-streamer-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.1rem !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.next-streamer-name {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: rgba(165, 107, 255, 1) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.next-streamer-game {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMER ET CONTRÔLES
   ═══════════════════════════════════════════════════════════════════════════
   Compte à rebours et boutons de contrôle (play/pause/skip)
*/
.next-stream-timer {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    height: 100% !important;
}

.next-stream-timer .timer-countdown {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: rgba(165, 107, 255, 1) !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
}

.timer-control-btn {
    background: rgba(30, 144, 255, 0.9) !important;
    border: none !important;
    color: white !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    height: auto !important;
}

.timer-control-btn:hover {
    background: rgba(30, 144, 255, 1) !important;
    transform: scale(1.05) !important;
}

.timer-control-btn:active {
    transform: scale(0.95) !important;
}

.next-stream-actions {
    display: flex !important;
    align-items: center !important;
    margin-left: 0.5rem !important;
    height: 100% !important;
}

#skip-to-next-btn {
    background: transparent !important;
    border: none !important;
    color: rgba(165, 107, 255, 1) !important;
    font-size: 3.5rem !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    filter: drop-shadow(0 0 12px rgba(165, 107, 255, 0.7)) !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#skip-to-next-btn:hover {
    transform: scale(1.2) !important;
    filter: drop-shadow(0 0 18px rgba(165, 107, 255, 0.9)) !important;
}

#skip-to-next-btn:active {
    transform: scale(0.95) !important;
}

.timer-countdown {
    scroll-margin: 0;
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════════════════
   Adaptations pour les écrans de moins de 1200px et 768px
*/
@media (max-width: 1200px) {
    .player-info-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .next-stream-panel {
        width: 100%;
        max-width: 100%;
    }
    
    .stream-preview-tooltip img {
        width: 320px !important;
        height: 180px !important;
    }
}

@media (max-width: 768px) {
    .stream-preview-tooltip {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier gère l'affichage du timer de rotation et du panneau "Prochain stream".
   La rotation automatique permet de faire défiler les streamers toutes les X minutes.
   
   FONCTIONNEMENT:
   1. Le timer compte à rebours jusqu'au prochain changement
   2. Le panneau affiche le prochain streamer avec son avatar et son jeu
   3. Au survol, une preview du stream s'affiche (tooltip)
   4. L'utilisateur peut mettre en pause ou skip
   
   COULEURS:
   - Violet (#A56BFF) : Couleur principale du panneau
   - Bleu (#1E90FF) : Boutons de contrôle
   - Fond sombre avec transparence : rgba(60, 50, 90, 0.6)
   
   MAINTENANCE:
   Pour changer la durée de rotation, modifier rotation-manager.js
   Pour changer les couleurs, modifier les valeurs rgba() et hex
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/