body { 
    background-color: #000; 
    color: white; 
    margin: 0; 
    overflow: hidden; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

.dvh-screen { 
    height: 100vh; 
    height: 100dvh; 
    width: 100vw;
    position: fixed; 
    inset: 0; 
    display: flex; 
    flex-direction: column; 
}

.video-fs { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    background: #121212; 
}

.video-placeholder {
    width: 100%;
    height: 100%;
    background: #1e1e1e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Grid Layout Styles */
.video-grid {
    display: grid;
    gap: 8px;
    padding: 8px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden; 
}

.video-grid.users-1 { grid-template-rows: 1fr; }
.video-grid.users-2 { grid-template-rows: 1fr 1fr; }
.video-grid.users-3 { grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; }
.video-grid.users-3 > :first-child { grid-column: span 2; } 
.video-grid.users-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

@media (min-width: 768px) {
    .video-grid.users-2 { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; }
    .video-grid.users-3 { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; }
    .video-grid.users-3 > :first-child { grid-column: auto; }
}

.grid-item {
    background: #1e1e1e;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.1);
}

.glass-panel { 
    background: rgba(20, 20, 20, 0.85); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1); 
}

/* Animations */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes slideLeft { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@keyframes floatStraightUp {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    10% { transform: translateY(-20px) scale(1.2); opacity: 1; }
    100% { transform: translateY(-300px) scale(1); opacity: 0; }
}

@keyframes fadeSlide {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes sound-wave {
    0% { box-shadow: inset 0 0 0 0px rgba(16, 185, 129, 0); }
    50% { box-shadow: inset 0 0 0 6px rgba(16, 185, 129, 0.8); }
    100% { box-shadow: inset 0 0 0 0px rgba(16, 185, 129, 0); }
}

.animate-slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-left { animation: slideLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-pop-in { animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-float-up { animation: floatStraightUp 2.5s ease-out forwards; will-change: transform, opacity; }
.animate-fade-slide { animation: fadeSlide 0.3s ease-out forwards; }

.speaking-active { 
    animation: sound-wave 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1); 
    border-color: transparent !important; 
}

.speaking-active-fs { box-shadow: inset 0 0 0 6px #10b981; }
.speaking-active-grid { animation: sound-wave 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; }

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

.mirror-x { transform: scaleX(-1); }
canvas { touch-action: none; }

/* CINEMA MODE STYLES */
/* Hides video grid visually to allow cinema player to be seen, but keeps audio elements in DOM */
.visually-hidden-video {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Cinema player container on top */
.cinema-active {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: black;
}

/* BLOCKED BUTTON STYLE */
.btn-locked {
    position: relative;
    overflow: hidden;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-locked::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}