*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;background-color:#f0f2f5;color:#333;line-height:1.6}#root{max-width:100%;margin:0 auto;padding:1rem}.App{background-color:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;padding:2rem;max-height:calc(100dvh - 2rem);margin:0 auto}h1{color:#000;margin-bottom:1rem;font-size:2em}p{margin-bottom:1rem}.error{color:#f44336;font-weight:700;margin-bottom:1rem}.video-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-bottom:1rem}.local-video,.remote-video{max-width:100%;height:auto;border-radius:8px;object-fit:cover}.controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1rem}.controls button{background-color:#f0f2f5;border:none;cursor:pointer;padding:.75rem;border-radius:50%;transition:background-color .3s,transform .2s;display:flex;justify-content:center;align-items:center}.controls button:hover{background-color:#e4e6eb;transform:scale(1.05)}.controls button:disabled{opacity:.5;cursor:not-allowed}.controls .icon{width:24px;height:24px;fill:#333}.controls .start-call{background-color:#4caf50}.controls .start-call .icon{fill:#fff}.controls .end-call{background-color:#f44336}.controls .end-call .icon{fill:#fff}.controls .mute.active,.controls .video.active{background-color:#f44336}.controls .mute.active .icon,.controls .video.active .icon{fill:#fff}@media (max-width: 600px){.App{padding:1rem;height:calc(100dvh - 2rem)}.video-container{flex-direction:column;align-items:center}.local-video,.remote-video{max-width:100%}.controls{flex-direction:row;justify-content:space-around}.controls button{padding:.5rem}.controls .icon{width:20px;height:20px}}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.header h1{margin-right:1rem}.connected:after{content:"";width:10px;height:10px;background-color:#4caf50;border-radius:50%;display:inline-block;margin-left:.5rem}.disconnected:after{content:"";width:10px;height:10px;background-color:#f44336;border-radius:50%;display:inline-block;margin-left:.5rem}.mirror{transform:scaleX(-1)}