*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}nav{color:#007efc;background-color:#d8d8d8;border-bottom:1px solid #000;justify-content:space-between;align-items:center;width:100%;height:5.2rem;padding:10px;display:flex}nav .app-name{color:#000;padding:.5rem 1rem;font-size:1.5rem}nav ul{justify-content:space-evenly;align-items:center;display:flex}nav ul li{padding:.5rem 1rem;list-style:none}nav ul li:nth-child(3) a{color:#0056b3;cursor:pointer;text-decoration:none}nav ul li img{border-radius:50%;width:2.5rem;height:2.5rem}.loginContainer,.registerContainer{box-sizing:border-box;background-color:#f3f4f6;justify-content:center;align-items:center;width:100%;min-height:100vh;font-family:sans-serif;display:flex}.loginContainer .login-form,.register-form{background:#fff;border-radius:12px;max-width:420px;padding:40px;box-shadow:0 54px 55px #00000040,0 -12px 30px #0000001f,0 4px 6px #0000001f,0 12px 13px #0000002b,0 -3px 5px #00000017}.loginContainer h2,.registerContainer h2{text-align:center;color:#111827;margin:0 0 1.75rem;font-size:28px;font-weight:700}.loginContainer .input-group,.registerContainer .inputGroup{flex-direction:column-reverse;margin-bottom:24px;display:flex;position:relative}.loginContainer .input-group input,.registerContainer .inputGroup input{color:#1f2937;border:1px solid #d1d5db;border-radius:8px;outline:none;width:100%;padding:12px 16px;font-size:16px;transition:border-color .2s,box-shadow .2s}.loginContainer .input-group input:focus,.registerContainer .inputGroup input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb26}.loginContainer .input-group label,.inputGroup label{color:#4b5563;margin-bottom:6px;font-size:14px;font-weight:500;display:block}.loginContainer .login-btn,.signup-btn{color:#fff;cursor:pointer;background-color:#2563eb;border:none;border-radius:8px;width:100%;margin-top:8px;padding:14px;font-size:16px;font-weight:600;transition:background-color .2s}.loginContainer .login-btn:hover,.signup-btn:hover{background-color:#1d4ed8}.loginContainer .login-btn:active,.signup-btn:active{background-color:#1e40af}.loginContainer .signup-text,.login-text{text-align:center;color:#4b5563;margin:24px 0 0;font-size:14px}.loginContainer .signup-text a,.login-text{color:#2563eb;font-weight:600;text-decoration:none}.loginContainer .signup-text a:hover,.login-text:hover{color:#1d4ed8;text-decoration:underline}.home-container{grid-template-rows:1fr;grid-template-columns:30rem 1fr;width:100%;height:calc(100vh - 5.2rem);display:grid}.sidebar-container{flex-direction:column;gap:.3rem;height:100%;padding:10px;display:flex}#sidebar-heading{justify-content:space-between;display:flex}#sidebar-heading h1{padding:20px;font-size:1.5rem}.publicRoom-container{flex-direction:column;gap:.5rem;max-height:40vh;padding-bottom:20px;display:flex;overflow-y:auto}.publicRoom-list{cursor:pointer;border:2px solid #9b7d45;border-radius:.5rem;width:fit-content;padding:.5rem 1rem;list-style:none;transition:all .3s}.publicRoom-list:hover{color:#fff;background-color:#c0a362}.publicRoom-list:active{color:#fff;background-color:#deceab}.create-room-container{padding:20px;font-family:sans-serif}.btn-trigger{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:5px;padding:10px 20px;font-size:1rem}.btn-trigger:hover{background-color:#0056b3}.modal-overlay{z-index:1000;background-color:#0009;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-content{background-color:#fff;border-radius:8px;width:clamp(250px,80%,450px);padding:1.5rem;animation:.2s ease-out fade-In;box-shadow:0 4px 15px #0003}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.modal-header h3{color:#333;font-size:1.25rem}.btn-close{cursor:pointer;color:#666;background:0 0;border:none;font-size:1.5rem}.modal-form{flex-direction:column;gap:.8rem;display:flex}.form-group{flex-direction:column;gap:.3rem;display:flex}.form-group label{color:#444;font-size:.88rem;font-weight:600}.form-group input[type=text],.form-group textarea{border:1px solid #ccc;border-radius:.25rem;padding:.5rem .75rem;font-size:.88rem}.form-group input:focus,.form-group textarea:focus{border-color:#007bff;outline:none}.checkbox-group{cursor:pointer;flex-direction:row;align-items:center;gap:.5rem;display:flex}.checkbox-group input{cursor:pointer;width:1rem;height:1rem}.checkbox-group label{cursor:pointer;font-weight:400}.modal-actions{justify-content:flex-end;gap:.76rem;margin-top:.63rem;display:flex}.btn-primary,.btn-secondary{cursor:pointer;border:none;border-radius:.25rem;padding:.5rem 1rem;font-size:.88rem;font-weight:500}.btn-primary{color:#fff;background-color:#007bff}.btn-primary:hover{background-color:#0056b3}.btn-primary:active{background-color:#00b}.btn-secondary{color:#333;background-color:#f1f1f1}.btn-secondary:hover{background-color:#e0e0e0}@keyframes fade-In{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.chat-window{border-left:1px solid #000;flex-direction:column;height:calc(100vh - 5.2rem);padding:.6rem;display:flex;overflow:hidden}.chat-header{border-bottom:1px solid #000;justify-content:space-between;width:100%;height:4rem;margin-bottom:10px;padding:10px;display:flex}.name-avatar{align-items:center;gap:.5rem;display:flex}.name-avatar div{flex-direction:column;gap:.1rem;display:flex}.status-indicator{color:#6b7280;font-size:.7rem}.chat-header img{border-radius:50%;width:2.5rem;height:2.5rem;overflow:hidden;box-shadow:0 5px 15px #00000059}.chat-header .description{justify-content:space-around;align-items:center;gap:1rem;display:flex}.chat-header .description button{cursor:pointer;color:red;background:0 0;border:none;font-size:1.5rem}.messages-container{flex-direction:column;flex:1;min-height:0;padding:.5rem;display:flex;overflow-y:auto}.message-box{word-wrap:break-word;overflow-wrap:break-word;border-radius:1rem;max-width:60%;margin-bottom:.5rem;padding:.5rem 1rem}.my-message{color:#fff;background-color:#2563eb;align-self:flex-end;margin-left:auto}.other-message{color:#000;background-color:#e5e7eb;align-self:flex-start}.timestamp{opacity:.7;text-align:right;margin-top:.2rem;font-size:.65rem;display:block}.input-send{border-top:1px solid #e2e8f0;gap:.5rem;padding:.5rem;display:flex}.input-send input{border:1px solid #d1d5db;border-radius:1rem;outline:none;flex:1;padding:.5rem 1rem;box-shadow:0 54px 55px #00000040,0 -12px 30px #0000001f,0 4px 6px #0000001f,0 12px 13px #0000002b,0 -3px 5px #00000017}.input-send input:focus{border-color:#2563eb;animation:.3s ease-out focuschange}.input-send button{color:#fff;cursor:pointer;background-color:#2563eb;border:none;border-radius:1rem;padding:.5rem 1rem}.input-send button:hover{background-color:#2052bd}.input-send button:active{background-color:#0051ff}@keyframes focuschange{0%{border-color:#fff;box-shadow:0 54px 55px #00000040,0 -12px 30px #0000001f,0 4px 6px #0000001f,0 12px 13px #0000002b,0 -3px 5px #00000017}to{box-shadow:0 0 0 4px #2563eb26}}@media (width<=768px){.home-container{grid-template-rows:1fr;grid-template-columns:1fr;height:calc(100vh - 5.2rem)}.hide-mobile{display:none}.chat-window{border-top:1px solid #000;height:calc(100vh - 5.2rem)}nav ul li{padding:.5rem .7rem}a{text-decoration:none}.publicRoom-container{max-height:25vh;overflow-y:auto}.sidebar-secondaryHeading{flex:1;overflow-y:auto}}