/*
 * Project: Video Sharing Platform
 * Year: 2026
 * Developed by: Molla Samser (Founder of RSK World)
 * Designer & Tester: Rima Khatun
 * Website: https://rskworld.in
 */

const videoGrid = document.getElementById('videoGrid');
const playerOverlay = document.getElementById('playerOverlay');
const closePlayer = document.getElementById('closePlayer');
const playingTitle = document.getElementById('playingTitle');
const playingCreator = document.getElementById('playingCreator');
const sidebar = document.querySelector('.sidebar');
const menuToggle = document.querySelector('.menu-toggle');
const searchInput = document.querySelector('.search-bar input');
const emptyState = document.getElementById('emptyState');
let isLoading = false;
let currentFilter = 'All';
let searchQuery = '';

// Initialize Plyr
const player = new Plyr('#player');

const mockVideos = [
    {
        id: 1,
        title: "Building High-Performance Media Systems with Go",
        creator: "Molla Samser",
        category: "Tutorials",
        views: "1.2M",
        time: "10 mins ago",
        duration: "15:24",
        thumbnail: "./video-sharing.png"
    },
    {
        id: 2,
        title: "Live: Advanced Video Processing Techniques",
        creator: "Rima Khatun",
        category: "Live",
        views: "450K",
        time: "Live",
        duration: "LIVE",
        thumbnail: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800"
    },
    {
        id: 3,
        title: "Mastering FFmpeg for HLS Streaming",
        creator: "RSK World Team",
        category: "Tutorials",
        views: "89K",
        time: "1 hour ago",
        duration: "45:10",
        thumbnail: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&fit=crop&q=80&w=800"
    },
    {
        id: 4,
        title: "Future of RSK World: 2026 Vision",
        creator: "Molla Samser",
        category: "General",
        views: "2.5M",
        time: "5 hours ago",
        duration: "12:00",
        thumbnail: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=800"
    }
];

function switchView(view) {
    const home = document.getElementById('homeView');
    const dash = document.getElementById('dashboardView');
    
    // Update active states
    document.querySelectorAll('.sidebar-item').forEach(item => {
        item.classList.remove('active');
        item.removeAttribute('aria-current');
    });
    
    if (view === 'home') {
        home.style.display = 'block';
        dash.style.display = 'none';
        document.querySelector('a[onclick="switchView(\'home\')"]').classList.add('active');
        document.querySelector('a[onclick="switchView(\'home\')"]').setAttribute('aria-current', 'page');
    } else if (view === 'dashboard') {
        home.style.display = 'none';
        dash.style.display = 'block';
        document.querySelector('a[onclick="switchView(\'dashboard\')"]').classList.add('active');
        document.querySelector('a[onclick="switchView(\'dashboard\')"]').setAttribute('aria-current', 'page');
        initChart();
    } else {
        // Handle other views (placeholder)
        showNotification(`${view} feature coming soon!`, 'info');
    }
    
    // Close mobile sidebar after navigation
    if (window.innerWidth <= 768) {
        sidebar.classList.remove('open');
        menuToggle.setAttribute('aria-expanded', 'false');
    }
}

let chartInstance = null;
function initChart() {
    if (chartInstance) return;
    const ctx = document.getElementById('viewChart').getContext('2d');
    chartInstance = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            datasets: [{
                label: 'Views (RSK Network)',
                data: [12000, 19000, 3000, 50000, 22000, 30000, 45000],
                borderColor: '#ff4b2b',
                background: 'rgba(255, 75, 43, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: { grid: { color: 'rgba(255,255,255,0.05)' }, border: { display: false } },
                x: { grid: { display: false } }
            }
        }
    });
}

function renderVideos(filter = 'All', search = '') {
    if (isLoading) return;
    
    isLoading = true;
    currentFilter = filter;
    searchQuery = search;
    
    videoGrid.innerHTML = '';
    emptyState.style.display = 'none';
    showSkeletons();

    // Simulate API delay
    setTimeout(() => {
        try {
            videoGrid.innerHTML = '';
            const filtered = mockVideos.filter(v => {
                const matchesFilter = filter === 'All' || v.category === filter;
                const matchesSearch = v.title.toLowerCase().includes(search.toLowerCase()) ||
                                     v.creator.toLowerCase().includes(search.toLowerCase());
                return matchesFilter && matchesSearch;
            });

            if (filtered.length === 0) {
                emptyState.style.display = 'block';
            } else {
                filtered.forEach((video, index) => {
                    const card = createVideoCard(video, index);
                    videoGrid.appendChild(card);
                });
            }
        } catch (error) {
            showError('Failed to load videos. Please try again.');
        } finally {
            isLoading = false;
        }
    }, 800);
}

function createVideoCard(video, index) {
    const card = document.createElement('article');
    card.className = 'video-card';
    card.setAttribute('role', 'gridcell');
    card.style.animationDelay = `${index * 0.1}s`;
    card.classList.add('fade-in');
    
    card.innerHTML = `
        <div class="video-thumbnail">
            <img src="${video.thumbnail}" alt="${video.title}" loading="lazy">
            ${video.duration === 'LIVE' ? 
                '<span class="duration-tag live-badge">LIVE</span>' : 
                `<span class="duration-tag">${video.duration}</span>`
            }
        </div>
        <div class="video-info">
            <div class="creator-avatar" aria-label="${video.creator} avatar"></div>
            <div class="video-details">
                <h3>${video.title}</h3>
                <p>${video.creator}</p>
                <p>${video.views} views • ${video.time}</p>
            </div>
        </div>
    `;
    
    card.onclick = () => openVideo(video);
    card.onkeydown = (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            openVideo(video);
        }
    };
    card.setAttribute('tabindex', '0');
    
    return card;
}

function showSkeletons() {
    for (let i = 0; i < 4; i++) {
        const skeleton = document.createElement('div');
        skeleton.className = 'video-card skeleton';
        skeleton.setAttribute('aria-hidden', 'true');
        skeleton.innerHTML = `
            <div class="video-thumbnail skeleton-box"></div>
            <div class="video-info">
                <div class="creator-avatar skeleton-box" style="border-radius: 50%;"></div>
                <div class="video-details" style="flex:1;">
                    <div class="skeleton-line" style="width: 80%; margin-bottom: 4px;"></div>
                    <div class="skeleton-line" style="width: 60%;"></div>
                </div>
            </div>
        `;
        videoGrid.appendChild(skeleton);
    }
}

function openVideo(video) {
    playingTitle.innerText = video.title;
    playingCreator.innerText = `Uploaded by ${video.creator} (RSK World)`;
    playerOverlay.style.display = 'flex';
    document.body.style.overflow = 'hidden';
    
    // Focus management for accessibility
    closePlayer.focus();
    
    // Try to play video
    player.play().catch(error => {
        console.log('Auto-play prevented:', error);
    });
    
    // Update player actions
    updatePlayerActions(video);
}

closePlayer.onclick = () => closeVideoPlayer();

// Close player on Escape key
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && playerOverlay.style.display === 'flex') {
        closeVideoPlayer();
    }
});

function closeVideoPlayer() {
    playerOverlay.style.display = 'none';
    document.body.style.overflow = 'auto';
    player.pause();
    player.currentTime = 0;
}

menuToggle.onclick = () => toggleSidebar();
searchInput.oninput = debounce((e) => renderVideos(currentFilter, e.target.value), 300);

function toggleSidebar() {
    sidebar.classList.toggle('open');
    const isOpen = sidebar.classList.contains('open');
    menuToggle.setAttribute('aria-expanded', isOpen);
}

function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

function filterVideos(category) {
    // Update active chip
    document.querySelectorAll('.chip').forEach(chip => {
        chip.classList.remove('active');
        chip.setAttribute('aria-selected', 'false');
    });
    
    event.target.classList.add('active');
    event.target.setAttribute('aria-selected', 'true');
    
    renderVideos(category, searchQuery);
}

function handleSearch(event) {
    event.preventDefault();
    const searchTerm = searchInput.value.trim();
    renderVideos(currentFilter, searchTerm);
    
    if (searchTerm) {
        showNotification(`Searching for "${searchTerm}"...`, 'info');
    }
}

async function fetchLiveInfo() {
    const viewersCount = document.createElement('div');
    viewersCount.className = 'live-viewer-badge';
    viewersCount.innerHTML = `<i class="fas fa-eye"></i> <span id="viewers">15.4K</span> Live`;
    document.querySelector('.premium-hero').appendChild(viewersCount);

    setInterval(() => {
        const current = parseFloat(document.getElementById('viewers').innerText);
        const next = (current + (Math.random() * 0.1 - 0.05)).toFixed(1);
        document.getElementById('viewers').innerText = next + 'K';
    }, 3000);
}

// Utility Functions
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.setAttribute('role', 'alert');
    notification.setAttribute('aria-live', 'polite');
    notification.innerHTML = `
        <i class="fas fa-${type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
        <span>${message}</span>
        <button onclick="this.parentElement.remove()" aria-label="Close notification">
            <i class="fas fa-times"></i>
        </button>
    `;
    
    document.body.appendChild(notification);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (notification.parentElement) {
            notification.remove();
        }
    }, 5000);
}

function showError(message) {
    showNotification(message, 'error');
}

function updatePlayerActions(video) {
    // Simulate updating like count and subscribe button
    const likeButton = document.querySelector('.btn-action');
    const subscribeButton = document.querySelector('.btn-subscribe');
    
    if (likeButton) {
        likeButton.onclick = () => {
            const countSpan = likeButton.querySelector('.count');
            const currentCount = parseFloat(countSpan.innerText.replace('K', '')) * 1000;
            const newCount = currentCount + 1;
            countSpan.innerText = newCount >= 1000 ? 
                (newCount / 1000).toFixed(1) + 'K' : newCount.toString();
            likeButton.style.color = 'var(--accent-color)';
        };
    }
    
    if (subscribeButton) {
        subscribeButton.onclick = () => {
            const isSubscribed = subscribeButton.classList.contains('subscribed');
            if (isSubscribed) {
                subscribeButton.innerText = 'SUBSCRIBE';
                subscribeButton.classList.remove('subscribed');
                subscribeButton.style.background = 'white';
                subscribeButton.style.color = 'black';
            } else {
                subscribeButton.innerText = 'SUBSCRIBED';
                subscribeButton.classList.add('subscribed');
                subscribeButton.style.background = 'var(--accent-color)';
                subscribeButton.style.color = 'white';
                showNotification(`Subscribed to ${video.creator}!`, 'success');
            }
        };
    }
}

// Initialize app
document.addEventListener('DOMContentLoaded', () => {
    renderVideos();
    fetchLiveInfo();
    setupUploadModal();
    setupCommentsIntegration();
    
    // Add keyboard navigation for video grid
    videoGrid.addEventListener('keydown', (e) => {
        const cards = Array.from(videoGrid.querySelectorAll('.video-card:not(.skeleton)'));
        const currentIndex = cards.indexOf(document.activeElement);
        
        if (e.key === 'ArrowRight' && currentIndex < cards.length - 1) {
            e.preventDefault();
            cards[currentIndex + 1].focus();
        } else if (e.key === 'ArrowLeft' && currentIndex > 0) {
            e.preventDefault();
            cards[currentIndex - 1].focus();
        }
    });
    
    // Close sidebar when clicking outside on mobile
    document.addEventListener('click', (e) => {
        if (window.innerWidth <= 768 && 
            !sidebar.contains(e.target) && 
            !menuToggle.contains(e.target) &&
            sidebar.classList.contains('open')) {
            toggleSidebar();
        }
    });
    
    // Handle window resize
    window.addEventListener('resize', () => {
        if (window.innerWidth > 768) {
            sidebar.classList.remove('open');
            menuToggle.setAttribute('aria-expanded', 'false');
        }
    });
});

// Upload Modal Setup
function setupUploadModal() {
    const uploadBtn = document.querySelector('.btn-icon[title="Upload"]');
    const uploadModal = document.getElementById('uploadModal');
    const closeUpload = document.getElementById('closeUpload');
    const fileInput = document.getElementById('fileInput');
    const selectFilesBtn = document.querySelector('.btn-select-files');
    const uploadArea = document.getElementById('uploadArea');
    const uploadForm = document.getElementById('uploadForm');
    const submitBtn = document.getElementById('submitUpload');
    const cancelBtn = document.getElementById('cancelUpload');
    
    if (uploadBtn) {
        uploadBtn.addEventListener('click', () => {
            uploadModal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        });
    }
    
    if (closeUpload) {
        closeUpload.addEventListener('click', () => closeUploadModal());
    }
    
    if (cancelBtn) {
        cancelBtn.addEventListener('click', () => closeUploadModal());
    }
    
    // Close on outside click
    uploadModal?.addEventListener('click', (e) => {
        if (e.target === uploadModal) {
            closeUploadModal();
        }
    });
    
    // File selection
    if (selectFilesBtn) {
        selectFilesBtn.addEventListener('click', () => fileInput.click());
    }
    
    if (fileInput) {
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                showUploadForm(e.target.files[0]);
            }
        });
    }
    
    // Drag and drop
    if (uploadArea) {
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = 'var(--accent-color)';
            uploadArea.style.background = 'var(--glass-bg)';
        });
        
        uploadArea.addEventListener('dragleave', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '';
            uploadArea.style.background = '';
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.borderColor = '';
            uploadArea.style.background = '';
            
            const files = e.dataTransfer.files;
            if (files.length > 0 && files[0].type.startsWith('video/')) {
                showUploadForm(files[0]);
            }
        });
    }
    
    // Form submission
    if (submitBtn) {
        submitBtn.addEventListener('click', () => handleVideoUpload());
    }
}

function closeUploadModal() {
    const uploadModal = document.getElementById('uploadModal');
    uploadModal.style.display = 'none';
    document.body.style.overflow = 'auto';
    resetUploadForm();
}

function showUploadForm(file) {
    const uploadArea = document.getElementById('uploadArea');
    const uploadForm = document.getElementById('uploadForm');
    const titleInput = document.getElementById('videoTitle');
    
    uploadArea.style.display = 'none';
    uploadForm.style.display = 'flex';
    
    // Auto-fill title with filename
    if (titleInput && !titleInput.value) {
        const fileName = file.name.replace(/\.[^/.]+$/, '');
        titleInput.value = fileName.replace(/[-_]/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
    }
    
    // Enable submit button
    updateSubmitButton();
}

function resetUploadForm() {
    const uploadArea = document.getElementById('uploadArea');
    const uploadForm = document.getElementById('uploadForm');
    const fileInput = document.getElementById('fileInput');
    
    uploadArea.style.display = 'block';
    uploadForm.style.display = 'none';
    fileInput.value = '';
    
    // Clear form fields
    document.getElementById('videoTitle').value = '';
    document.getElementById('videoDescription').value = '';
    document.getElementById('videoCategory').value = '';
    document.getElementById('videoTags').value = '';
    document.getElementById('privateVideo').checked = false;
    
    // Hide progress
    document.getElementById('uploadProgress').style.display = 'none';
}

function updateSubmitButton() {
    const titleInput = document.getElementById('videoTitle');
    const submitBtn = document.getElementById('submitUpload');
    
    if (submitBtn && titleInput) {
        submitBtn.disabled = !titleInput.value.trim();
    }
}

// Add event listeners for form fields
document.getElementById('videoTitle')?.addEventListener('input', updateSubmitButton);

async function handleVideoUpload() {
    const title = document.getElementById('videoTitle').value.trim();
    const description = document.getElementById('videoDescription').value.trim();
    const category = document.getElementById('videoCategory').value;
    const tags = document.getElementById('videoTags').value.split(',').map(t => t.trim()).filter(t => t);
    const isPrivate = document.getElementById('privateVideo').checked;
    
    if (!title) {
        showNotification('Please enter a video title', 'error');
        return;
    }
    
    // Show progress
    const uploadProgress = document.getElementById('uploadProgress');
    const progressFill = document.getElementById('progressFill');
    const progressPercent = document.getElementById('progressPercent');
    const progressStatus = document.getElementById('progressStatus');
    
    uploadProgress.style.display = 'block';
    
    // Simulate upload progress
    let progress = 0;
    const interval = setInterval(() => {
        progress += Math.random() * 15;
        if (progress > 100) progress = 100;
        
        progressFill.style.width = progress + '%';
        progressPercent.textContent = Math.round(progress) + '%';
        
        if (progress < 30) {
            progressStatus.textContent = 'Uploading...';
        } else if (progress < 70) {
            progressStatus.textContent = 'Processing...';
        } else if (progress < 90) {
            progressStatus.textContent = 'Generating thumbnail...';
        } else if (progress < 100) {
            progressStatus.textContent = 'Finalizing...';
        } else {
            progressStatus.textContent = 'Complete!';
            clearInterval(interval);
            
            setTimeout(() => {
                closeUploadModal();
                showNotification('Video uploaded successfully!', 'success');
                // Refresh video list
                renderVideos();
            }, 1500);
        }
    }, 200);
}

// Comments Integration
function setupCommentsIntegration() {
    const commentsSection = document.getElementById('commentsSection');
    const commentsContainer = document.getElementById('commentsContainer');
    
    // Add comments button to player
    const playerActions = document.querySelector('.player-actions');
    if (playerActions) {
        const commentsBtn = document.createElement('button');
        commentsBtn.className = 'btn-action';
        commentsBtn.setAttribute('aria-label', 'View comments');
        commentsBtn.innerHTML = '<i class="fas fa-comments"></i> Comments';
        commentsBtn.onclick = toggleComments;
        playerActions.appendChild(commentsBtn);
    }
}

function toggleComments() {
    const commentsSection = document.getElementById('commentsSection');
    const isOpen = commentsSection.style.display === 'block';
    
    if (isOpen) {
        commentsSection.style.display = 'none';
        commentsSection.classList.remove('open');
    } else {
        commentsSection.style.display = 'block';
        commentsSection.classList.add('open');
        
        // Initialize comments for current video
        const currentVideoId = 1; // Get from currently playing video
        commentsManager.init(currentVideoId);
    }
}

// Enhanced switchView to handle all new views
function switchView(view) {
    const views = ['homeView', 'dashboardView', 'profileView', 'shortsView', 'subscriptionsView', 'libraryView', 'historyView'];
    
    // Hide all views
    views.forEach(viewId => {
        const element = document.getElementById(viewId);
        if (element) element.style.display = 'none';
    });
    
    // Update active states
    document.querySelectorAll('.sidebar-item').forEach(item => {
        item.classList.remove('active');
        item.removeAttribute('aria-current');
    });
    
    // Show selected view
    const targetView = document.getElementById(view + 'View');
    if (targetView) {
        targetView.style.display = 'block';
    }
    
    // Update sidebar active state
    const activeItem = document.querySelector(`a[onclick="switchView('${view}')"]`);
    if (activeItem) {
        activeItem.classList.add('active');
        activeItem.setAttribute('aria-current', 'page');
    }
    
    // Load view-specific content
    loadViewContent(view);
    
    // Close mobile sidebar after navigation
    if (window.innerWidth <= 768) {
        sidebar.classList.remove('open');
        menuToggle.setAttribute('aria-expanded', 'false');
    }
}

function loadViewContent(view) {
    switch(view) {
        case 'profile':
            // Load profile data (mock)
            profileManager.init('mollasamser');
            break;
        case 'shorts':
            loadShorts();
            break;
        case 'subscriptions':
            loadSubscriptions();
            break;
        case 'library':
            loadLibrary();
            break;
        case 'history':
            loadHistory();
            break;
        case 'dashboard':
            initChart();
            break;
    }
}

function loadShorts() {
    const shortsGrid = document.getElementById('shortsGrid');
    if (!shortsGrid) return;
    
    // Mock shorts data
    const shorts = [
        { id: 1, title: "Quick Go Tip", thumbnail: "https://images.unsplash.com/photo-1516116216624-53e697fedbea?auto=format&fit=crop&q=80&w=400", views: "12K" },
        { id: 2, title: "Code Review", thumbnail: "https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?auto=format&fit=crop&q=80&w=400", views: "8K" },
        { id: 3, title: "Debug Magic", thumbnail: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&q=80&w=400", views: "15K" },
        { id: 4, title: "API Design", thumbnail: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&q=80&w=400", views: "6K" },
    ];
    
    shortsGrid.innerHTML = shorts.map(short => `
        <div class="short-card" onclick="openVideo({id: ${short.id}, title: '${short.title}', creator: 'RSK World'})">
            <img src="${short.thumbnail}" alt="${short.title}" class="short-thumbnail">
            <div class="short-info">
                <h4 class="short-title">${short.title}</h4>
                <p class="short-views">${short.views} views</p>
            </div>
        </div>
    `).join('');
}

function loadSubscriptions() {
    const subscriptionFeed = document.getElementById('subscriptionFeed');
    if (!subscriptionFeed) return;
    
    // Mock subscription feed
    subscriptionFeed.innerHTML = `
        <div class="subscription-videos">
            ${mockVideos.map(video => createVideoCard(video, Math.random())).outerHTML}
        </div>
    `;
}

function loadLibrary() {
    const libraryContent = document.getElementById('libraryContent');
    if (!libraryContent) return;
    
    libraryContent.innerHTML = `
        <div class="library-sections">
            <section class="library-section">
                <h3>Uploaded Videos</h3>
                <div class="videos-grid">
                    ${mockVideos.slice(0, 2).map(video => createVideoCard(video, Math.random())).outerHTML}
                </div>
            </section>
            <section class="library-section">
                <h3>Watch Later</h3>
                <div class="videos-grid">
                    ${mockVideos.slice(2, 4).map(video => createVideoCard(video, Math.random())).outerHTML}
                </div>
            </section>
        </div>
    `;
}

function loadHistory() {
    const historyContent = document.getElementById('historyContent');
    if (!historyContent) return;
    
    historyContent.innerHTML = `
        <div class="history-timeline">
            ${mockVideos.map((video, index) => `
                <div class="history-item">
                    <div class="history-time">${index + 1} hour${index > 0 ? 's' : ''} ago</div>
                    ${createVideoCard(video, Math.random()).outerHTML}
                </div>
            `).join('')}
        </div>
    `;
}

// Add CSS for notifications and animations
const additionalStyles = `
    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 1rem 1.5rem;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 3000;
        backdrop-filter: blur(10px);
        animation: slideIn 0.3s ease;
        max-width: 400px;
    }
    
    .notification.error {
        border-color: rgba(239, 68, 68, 0.5);
        background: rgba(239, 68, 68, 0.1);
    }
    
    .notification.success {
        border-color: rgba(34, 197, 94, 0.5);
        background: rgba(34, 197, 94, 0.1);
    }
    
    .notification button {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        padding: 4px;
        margin-left: auto;
    }
    
    .fade-in {
        animation: fadeIn 0.5s ease forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    
    @keyframes fadeIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    .live-badge {
        background: rgba(239, 68, 68, 0.9) !important;
        color: white !important;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }
    
    .btn-subscribe.subscribed {
        background: var(--accent-color) !important;
        color: white !important;
    }
`;

// Inject additional styles
const styleSheet = document.createElement('style');
styleSheet.textContent = additionalStyles;
document.head.appendChild(styleSheet);
