.joinPage{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f5f5f5}.joinContainer{background-color:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 15px #0000001a;width:100%;max-width:400px;text-align:center}.joinContainer img{width:80px;margin-bottom:1rem}.joinContainer h1{margin-bottom:1.5rem;color:#333}.joinInput{width:100%;padding:.8rem;margin-bottom:1rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.joinBtn{width:100%!important;padding:.8rem!important;margin-top:.5rem!important;font-size:1rem!important}.error-message{color:#d32f2f;margin-bottom:1rem;padding:.5rem;background-color:#ffebee;border-radius:4px}.toggle-auth{margin-top:1.5rem;color:#666}.toggle-link{color:#1976d2;cursor:pointer;text-decoration:underline}.chatPageContainer{display:flex;height:100vh;overflow:hidden}.userSidebar{width:250px;background-color:#f5f5f5;border-right:1px solid #ddd;transition:all .3s ease;display:flex;flex-direction:column;flex-shrink:0}.userSidebar.closed{width:0;overflow:hidden}.sidebarHeader{padding:1rem;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center}.toggleSidebar{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#666}.currentUser{padding:1rem;border-bottom:1px solid #ddd;display:flex;flex-direction:column;align-items:center}.userAvatar{width:40px;height:40px;border-radius:50%;background-color:#1976d2;color:#fff;display:flex;justify-content:center;align-items:center;font-weight:700;flex-shrink:0}.userInfo{display:flex;flex-direction:column;margin-left:10px;flex:1;min-width:0}.userName{font-weight:700;margin-top:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logoutBtn{margin-top:.5rem;padding:.5rem 1rem;background-color:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.usersList{flex:1;overflow-y:auto;padding:.5rem}.userItem{display:flex;align-items:center;padding:.75rem;border-radius:4px;margin-bottom:.5rem;background-color:#fff;box-shadow:0 1px 3px #0000001a}.userStatus{font-size:.8rem;color:#888}.userStatus.online{color:#4caf50}.userStatus.offline{color:#9e9e9e}.chatPage{flex:1;display:flex;flex-direction:column;min-width:0}.chatContainer{width:100%;height:100%;background-color:#fff;border-radius:0;overflow:hidden;display:flex;flex-direction:column}.header{background-color:#1976d2;padding:1rem;color:#fff;display:flex;align-items:center}.header h2{margin:0;flex:1;text-align:center}.sidebarToggle{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;margin-right:1rem}.logoutButton{background-color:#fff3;border:none;padding:.5rem 1rem;border-radius:4px;color:#fff;cursor:pointer}.chatBox{flex:1;padding:1rem;overflow-y:auto;background-color:#f9f9f9}.inputBox{padding:1rem;display:flex;border-top:1px solid #ddd}.inputBox input{flex:1;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem;margin-right:.5rem}.sendBtn{background-color:#1976d2;border:none;border-radius:4px;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.sendBtn img{width:20px;height:20px}.messageContainer{margin-bottom:1rem;display:flex;flex-direction:column}.messageContainer.left{align-items:flex-start}.messageContainer.right{align-items:flex-end}.messageUser{font-size:.8rem;color:#666;margin-bottom:.2rem;padding-left:.5rem}.message{padding:.8rem 1rem;border-radius:20px;max-width:70%;word-break:break-word}.message.received{background-color:#fff;border:1px solid #ddd;border-top-left-radius:5px}.message.sent{background-color:#e3f2fd;color:#0d47a1;border-top-right-radius:5px}.messageTime{font-size:.7rem;color:#999;margin-top:.2rem;padding:0 .5rem}.loading,.error{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f5f5f5;font-size:1.2rem;color:#666}.error{color:#d32f2f}.noUsers{padding:1rem;text-align:center;color:#888}@media (max-width: 768px){.userSidebar{position:absolute;height:100%;z-index:10}.message{max-width:85%}}