@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}body{background-color:#f5f5f5}.app{height:100vh;display:flex;flex-direction:column}.login-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f5f5f5}.login-card{background-color:#fff;padding:2rem;border-radius:8px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:400px}.login-card h1{text-align:center;margin-bottom:1.5rem;color:#333}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.error-message{color:#e53e3e;margin-bottom:1rem;font-size:.875rem}button{width:100%;padding:.75rem;background-color:#4299e1;color:#fff;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .2s}button:hover{background-color:#3182ce}button:disabled{background-color:#a0aec0;cursor:not-allowed}.chat-container{display:flex;height:100vh}.chat-sidebar{width:250px;background-color:#2d3748;color:#fff;padding:1rem;display:flex;flex-direction:column}.user-info{margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #4a5568}.logout-btn{margin-top:.5rem;background-color:#e53e3e}.logout-btn:hover{background-color:#c53030}.rooms-list h3{margin-bottom:.5rem;font-size:.875rem;text-transform:uppercase;color:#a0aec0}.rooms-list ul{list-style:none}.rooms-list li{padding:.5rem;margin-bottom:.25rem;border-radius:4px;cursor:pointer}.rooms-list li:hover{background-color:#4a5568}.rooms-list li.active{background-color:#4299e1}.chat-main{flex:1;display:flex;flex-direction:column}.chat-header{padding:1rem;background-color:#fff;border-bottom:1px solid #e2e8f0}.chat-header h2{font-size:1.25rem;color:#2d3748}.message-list{flex:1;padding:1rem;overflow-y:auto;background-color:#fff}.no-messages{text-align:center;color:#a0aec0;margin-top:2rem}.message{margin-bottom:1rem;padding:.75rem;border-radius:8px;max-width:70%}.message-own{background-color:#4299e1;color:#fff;margin-left:auto}.message-other{background-color:#edf2f7;color:#2d3748}.message-header{display:flex;justify-content:space-between;margin-bottom:.25rem;font-size:.75rem}.message-sender{font-weight:600}.message-time{opacity:.8}.message-content{word-break:break-word}.message-input-form{display:flex;padding:1rem;background-color:#fff;border-top:1px solid #e2e8f0}.message-input-form input{flex:1;padding:.75rem;border:1px solid #e2e8f0;border-radius:4px;margin-right:.5rem}.message-input-form button{width:auto;padding:.75rem 1.5rem}.back-button{display:none;position:absolute;left:.2rem;transform:translateY(-50%);background:none;border:none;font-size:2rem;color:#000;cursor:pointer;padding:.2rem;width:40px;height:40px;border-radius:50%;margin-top:.7rem}@media (max-width: 768px){.chat-container{position:relative;width:100%;height:100vh;overflow:hidden}.back-button{display:block}.chat-sidebar{position:fixed;top:0;left:0;width:100%;height:100%;transform:translate(-100%);transition:transform .3s ease;z-index:10}.chat-sidebar.open{transform:translate(0)}.chat-main{position:fixed;top:0;left:0;width:100%;height:100%;transition:transform .3s ease;z-index:5}.chat-header{padding-left:3rem;position:relative}.rooms-list li{padding:1rem;margin-bottom:.5rem;border-radius:8px;background-color:#3a4757;text-align:left;width:100%}}