body { 
    background-color: #040405; 
    color: #f2f3f5;
    overscroll-behavior: none; 
    -webkit-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; outline: none; }
input { -webkit-user-select: text; user-select: text; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 20px); }

.bg-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; pointer-events: none; }
.noise-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAAAAAB9fX3///8zMzOMjIwMDAxYWFhX41olAAAAhklEQVQ4y2NgQAX8DIwMWEDAwMgAF2BghAMmRia4AAMDExwYWZmQhRkYWZDFGRhZUMUZGJmRRRkYmFDFGRhZkEUZGFmRxRgYWRBFGRiYUEUZGFmQxRkYWZDFGRhZkMUZGJmRRRkYmFDFGRhZkEUZGFmQxRkYWZDFGRiZkUUZGJiQRRkYWZAFAH5hEwQY0p3MAAAAAElFTkSuQmCC'); opacity: 0.15; z-index: 3; }
.bg-grid { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80%); mask-image: radial-gradient(circle, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80%); z-index: 1; will-change: transform; }
.glow { position: absolute; border-radius: 50%; will-change: transform; z-index: 0; }
.glow-1 { background: radial-gradient(circle, rgba(88, 101, 242, 0.25) 0%, transparent 60%); width: 100vw; height: 100vw; top: -30vh; left: -20vw; }
.glow-2 { background: radial-gradient(circle, rgba(35, 165, 89, 0.2) 0%, transparent 60%); width: 90vw; height: 90vw; bottom: -20vh; right: -10vw; }
.glow-3 { background: radial-gradient(circle, rgba(138, 43, 226, 0.15) 0%, transparent 60%); width: 80vw; height: 80vw; top: 10vh; right: -15vw; }

.glass-panel {
    background: rgba(20, 21, 24, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#local-video-container {
    cursor: grab;
    transition: width 0.3s ease, height 0.3s ease, transform 0.3s ease;
}
#local-video-container:active {
    cursor: grabbing;
}

body.is-swapped #local-video-container {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 90px !important;
    width: 100% !important; height: auto !important; transform: none !important;
    border-radius: 0 !important; z-index: 40 !important; border: none !important; cursor: default !important;
}

body.is-swapped #remote-video-container {
    position: fixed !important;
    width: 120px !important; height: 160px !important;
    bottom: 100px !important; right: 12px !important;
    top: auto !important; left: auto !important;
    z-index: 75 !important; border-radius: 1rem !important;
    padding: 0 !important; background: transparent !important;
    pointer-events: auto !important; cursor: pointer !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

@media (min-width: 768px) {
    body.is-swapped #remote-video-container {
        width: 224px !important; height: 126px !important;
        bottom: 110px !important; right: 16px !important;
    }
}

body.is-swapped #remote-video-container > div {
    width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 1rem !important; border: none !important;
}

.custom-scrollbar::-webkit-scrollbar { width: 4px; display: block; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }