*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;background-color:#f0f2f5;color:#333}.join-container{display:flex;justify-content:center;align-items:center;height:100vh;background-image:linear-gradient(to top,#fad0c4,#ffd1ff)}.join-form{background-color:#fff;padding:2rem;border-radius:10px;box-shadow:0 4px 6px #0000001a;text-align:center;max-width:600px;margin:15px;transition:all .3s ease}.join-form h1{margin-bottom:1.5rem;color:#333}.join-form input{width:100%;padding:.75rem;margin-bottom:1rem;border:1px solid #ddd;border-radius:6px;font-size:13px}.join-form input:focus{border-color:#007bff;outline:none}.join-form button{width:100%;padding:.75rem;background-color:#886fbe;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background-color .8s ease}.join-form button:hover{background-color:#009584;transform:translateY(-2px)}.editor-container{display:flex;height:100vh;width:100%}.editor-container .sidebar{width:350px;padding:1.5rem;background-color:#2c3e50;color:#ecf0f1}.editor-container .sidebar .room-info{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem}.editor-container .sidebar .room-info h2{margin-bottom:1rem;font-size:1.2rem}.editor-container .sidebar .room-info .copy-button{padding:.5rem 1rem;background-color:#2980b9;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.editor-container .sidebar .room-info .copy-button:hover{background-color:#3498db}.editor-container .sidebar .room-info .copy-success{margin-top:.5rem;font-size:.8rem;color:#2ecc71}.editor-container .sidebar h3{margin-top:1.5rem;margin-bottom:.5rem;font-size:1rem}.editor-container .sidebar ul{list-style:none}.editor-container .sidebar ul li{padding:.5rem;font-size:.9rem;background:gray;margin-top:5px;border-radius:5px}.editor-container .sidebar .typing-indicator{margin-top:1rem;font-size:14px;color:#25ce3c}.editor-container .sidebar .language-selector{margin-top:1rem;width:100%;padding:.5rem;background-color:#34495e;color:#ecf0f1;border:none;border-radius:5px}.editor-container .sidebar .leave-button{margin-top:1rem;width:100%;padding:.75rem;background-color:#e74c3c;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:background-color .3s ease}.editor-container .sidebar .leave-button:hover{background-color:#c0392b}.editor-container .editor-wrapper{flex-grow:1;background-color:#fff;padding:1.5rem}