html,body{margin:0;padding:0;height:100%}.App{display:flex;justify-content:center;align-items:center;height:100vh;font-family:Roboto,Arial,sans-serif;transition:background-color .3s ease}.App.light,.App.dark{background-color:#fff;color:#333}.theme-toggle{position:absolute;top:20px;right:20px;padding:10px 20px;font-size:1rem;background-color:#2575fc;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.theme-toggle:hover{background-color:#1d62d6;transform:translateY(-3px);box-shadow:0 5px 10px #0003}.Auth{background:#fff;color:#333;padding:40px;border-radius:16px;box-shadow:0 10px 20px #0000001a;text-align:center;max-width:600px;width:90%;transition:all .3s ease-in-out}.Auth.dark{background:#333;color:#fff}.Auth p{font-size:1.5rem;font-weight:500;margin-bottom:20px}.Auth button{padding:15px 30px;background-color:#2575fc;color:#fff;border:none;border-radius:10px;font-size:1.2rem;cursor:pointer;transition:all .3s ease}.Auth button:hover{background-color:#1d62d6;transform:translateY(-4px);box-shadow:0 8px 15px #0000001a}.room{display:flex;flex-direction:column;align-items:center;background:#fff;color:#333;padding:40px;border-radius:16px;box-shadow:0 10px 20px #0000001a;max-width:600px;width:90%;transition:all .3s ease-in-out}.room.dark{background:#222;color:#fff}.room label{font-size:1.3rem;font-weight:700;margin-bottom:20px}.room input{width:100%;padding:18px;margin-bottom:20px;border:1px solid #ccc;border-radius:10px;font-size:1rem}.room input:focus{outline:none;border-color:#2575fc;box-shadow:0 0 8px #2575fc80}.room button{padding:15px 30px;background-color:#2575fc;color:#fff;border:none;border-radius:10px;font-size:1.2rem;cursor:pointer;transition:all .3s ease}.room button:hover{background-color:#1d62d6;transform:translateY(-4px);box-shadow:0 8px 15px #0000001a}.sign-out button{position:fixed;top:20px;left:20px;transform:translate(0);padding:10px 20px;background-color:#e74c3c;color:#fff;border:none;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .3s ease}.sign-out button:hover{background-color:#c0392b;transform:translateY(-3px);box-shadow:0 5px 10px #0003}.theme-toggle-hidden{display:none}@media (max-width: 1024px){.Auth,.room{padding:30px;font-size:1.1rem}.Auth p,.room label{font-size:1.2rem}.Auth button,.room button{font-size:1.1rem;padding:14px 28px}.room input{padding:16px;font-size:1rem}}@media (max-width: 768px){.Auth,.room{padding:25px;font-size:1rem}.Auth p,.room label{font-size:1.1rem}.Auth button,.room button{font-size:1rem;padding:12px 24px}.room input{padding:14px;font-size:.95rem}}@media (max-width: 480px){.Auth,.room{padding:20px;max-width:100%;width:90%}.Auth p,.room label{font-size:1rem}.Auth button,.room button{font-size:.95rem;padding:10px 20px}.room input{padding:12px;font-size:.9rem}.sign-out button{top:20px;left:20px;bottom:auto;transform:translate(0)}}body{font-family:Roboto,sans-serif;margin:0;padding:0;height:100vh;width:100vw;overflow:hidden;display:flex;justify-content:center;align-items:center}body.chat-page{background-color:#1e1f22;color:#f1f1f1}body.sign-in-page,body.room-entry-page{background-color:#fff;color:#000}body.dark-mode{background-color:#1e1f22;color:#f1f1f1}body.light-mode{background-color:#fff;color:#000}.Chat-app{display:flex;flex-direction:column;justify-content:flex-end;height:100vh;width:100vw;max-width:1600px;margin:0 auto;background-color:#2c2f33;border-left:1px solid #23272a;border-right:1px solid #23272a;box-shadow:0 4px 8px #0003;overflow-y:auto;position:relative}.chat-header{background-color:#2c2f33;padding:12px 16px;border-bottom:1px solid #424549;text-align:center}.chat-header h2{margin:0;font-size:20px;color:#f1f1f1;text-transform:uppercase;letter-spacing:1px}.messages{flex:1;padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background-color:#2c2f33}.message{max-width:60%;padding:10px 14px;background-color:#424549;border-radius:12px;color:#f1f1f1;font-size:16px;line-height:1.5;position:relative;word-wrap:break-word}.message.left{align-self:flex-start;background-color:#5865f2;border-top-left-radius:4px}.message.right{align-self:flex-end;background-color:#424549;border-top-right-radius:4px}.message .metadata{font-size:12px;color:#b9bbbe;margin-top:6px;text-align:right}.new-chat-form{display:flex;align-items:center;padding:12px;background-color:#23272a;border-top:1px solid #424549;position:sticky;bottom:0}.new-chat-input{flex:1;padding:12px 16px;font-size:16px;color:#f1f1f1;background-color:#2c2f33;border:1px solid #424549;border-radius:4px;outline:none;transition:border-color .3s,box-shadow .3s,width .2s ease-in-out}.new-chat-input:focus{border-color:#5865f2;box-shadow:0 0 6px #5865f266}.send-button{margin-left:12px;padding:12px 16px;font-size:16px;font-weight:700;color:#f1f1f1;background-color:#5865f2;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s,transform .2s}.send-button:hover{background-color:#4752c4;transform:translateY(-2px)}.send-button:active{background-color:#3c45a5;transform:translateY(0)}.Chat-app{scrollbar-width:thin;scrollbar-color:#5865f2 #2c2f33}.Chat-app::-webkit-scrollbar{width:8px}.Chat-app::-webkit-scrollbar-thumb{background-color:#5865f2;border-radius:5px}.Chat-app::-webkit-scrollbar-thumb:hover{background-color:#4752c4}@media (max-width: 1200px){.Chat-app{max-width:100%;height:100vh}.new-chat-form{padding:10px}.new-chat-input{font-size:14px;padding:8px 10px}.send-button{font-size:14px;padding:8px 12px}.message{max-width:80%}}.back-button{margin-left:auto;padding:6px 12px;background-color:#1976d2;color:#fff;border:none;border-radius:6px;cursor:pointer;float:right}.back-button:hover{background-color:#0d47a1}