/* Main application styles */
/* Note: Most styling is handled via Tailwind CDN in index.html */

:root {
    --brand-virtulens-blue: #4A4AFF;
    --brand-virtulens-purple: #9933CC;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #0A0A2A;
    color: #f1f5f9;
    touch-action: manipulation;
}

/* Custom scrollbar for better theme integration */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(74, 74, 255, 0.3);
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 74, 255, 0.5);
}

/* Horizontal pill-style scrollbar for filmstrips */
.filmstrip-scrollbar::-webkit-scrollbar {
    height: 14px; /* Thick, "much taller" as requested */
}

.filmstrip-scrollbar::-webkit-scrollbar-track {
    background: transparent !important;
}

.filmstrip-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4b5563; /* Match global grey */
    border-radius: 20px;
    border: 4px solid transparent; /* Create floating pill effect */
    background-clip: content-box;
}

.filmstrip-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
}

/* =============================================
   Native Video Fullscreen styles
   When the <video> element goes fullscreen via
   requestFullscreen(), these styles apply so our
   sibling overlays (watermark, controls) appear.
   ============================================= */

/* Make the video area fill the screen */
video:fullscreen,
video:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain;
    background: black;
}

/* When any element in our player is fullscreen, show watermark overlay */
.videoplayer-watermark {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}