/* Make scrollbars less intrusive */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a0a0a0;
}

/* Style for the video card thumbnail */
.video-thumbnail {
    position: relative;
    width: 100%;
    /* Aspect ratio for Widescreen videos (16:9) */
    padding-bottom: 56.25%; /* This is 9 / 16 = 0.5625, or 56.25% */
    background-color: #000; /* Black bars for letterboxing */
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
}

.video-thumbnail-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Use 'contain' to fit the image, not crop */
}

/* Play button overlay */
.video-thumbnail::after {
    content: '\f04b'; /* Font Awesome play icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.video-thumbnail:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Style for the video player iframe */
#player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- NEW: Player Aspect Ratios --- */
/* For the #player-wrapper div */
.aspect-16-9 {
    padding-bottom: 56.25%; /* 16:9 */
}
.aspect-9-16 {
    padding-bottom: 177.78%; /* 9:16 */
}

/* On mobile, make TikTok player full height */
@media (max-width: 767px) {
    #player-wrapper.aspect-9-16 {
        height: 100vh; /* Full viewport height */
        padding-bottom: 0;
    }
    #player-wrapper.aspect-16-9 {
        width: 100%; /* Full width */
    }
    
    /* Mobile navigation improvements */
    nav .max-w-7xl {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    nav .flex.items-center.justify-between {
        flex-wrap: wrap;
        min-height: 4rem;
    }
    
    nav .flex.items-center.space-x-1 {
        gap: 0.25rem;
        flex-wrap: wrap;
    }
    
    /* Ensure buttons don't overflow on mobile */
    nav button {
        white-space: nowrap;
        min-width: auto;
    }
    
}


/* --- NEW: Mobile Sidebar Styles --- */
/* Sidebar is hidden by default off-screen */
#sidebar {
    transition: transform 0.3s ease-in-out;
}
/* This class is added by app.js to show it */
#sidebar.open {
    transform: translateX(0);
}