.video-preview-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 2;
        display: none;
        background-color: #000;
    }
    
    .video-card:hover .video-preview-container,
    .video-card.touch-active .video-preview-container {
        opacity: 1;
        display: block;
    }
    
    .preview-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .preview-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 3;
    }
    
    .preview-progress-bar {
        height: 100%;
        background-color: #ff0000;
        width: 0;
        transition: width 0.1s linear;
    }
    
    .preview-timestamp {
        position: absolute;
        bottom: 5px;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 2px 5px;
        font-size: 12px;
        border-radius: 2px;
        z-index: 4;
    }
    
    .video-card:hover .video-overlay {
        opacity: 0; /* Hide overlay on hover to see video preview */
    }
    
    /* Loading indicator */
    .preview-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 20px;
        z-index: 3;
    }
    
    /* Touch hint for mobile */
    .touch-hint {
        font-size: 12px;
        color: #ccc;
        margin-top: 5px;
    }