body{margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#00f2fe,#4facfe);height:100vh;display:flex;justify-content:center;align-items:center}.containar{background:#ffffff1a;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:20px;box-shadow:0 8px 32px #0003;padding:40px;width:90%;max-width:400px;display:flex;flex-direction:column;align-items:center}.login{width:100%;display:flex;flex-direction:column;margin-bottom:20px}input[type=text],input[type=password]{width:100%;padding:12px 15px;border:none;border-radius:10px;background-color:#fffc;font-size:16px;transition:all .3s ease;box-shadow:inset 0 0 5px #0000001a}input[type=text]:focus,input[type=password]:focus{outline:none;background-color:#fff;box-shadow:0 0 8px #0000004d}input[type=submit]{padding:12px 20px;width:100%;background:#00f2fe;border:none;border-radius:10px;font-weight:700;color:#000;font-size:16px;cursor:pointer;transition:all .3s ease}input[type=submit]:hover{background:#4facfe;color:#fff}.error{color:#fff;background-color:#ff4d4f;padding:10px;border-radius:8px;font-size:14px;margin-top:5px;text-align:center;width:100%}.message p{color:#fff;background-color:#28a745;padding:10px;border-radius:8px;font-size:14px;text-align:center;width:100%}.btn{width:100%;padding:12px 20px;font-size:1rem;border:none;border-radius:10px;background:linear-gradient(135deg,#fc466b,#3f5efb);color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease}.server-msg{color:#fff;background-color:#28a745;padding:10px;border-radius:8px;font-size:14px;margin-top:10px;text-align:center;width:100%}button:hover{transform:scale(1.15);box-shadow:0 0 20px #ff69b466}.dashboard-container{display:flex;height:100vh;width:100vw;background:#1e1e2f;color:#fff}.chat-sidebar{width:35%;background:#2c2f48;padding:20px;overflow:hidden;display:flex;flex-direction:column}#search-bar{width:90%}.user-list{margin-top:10px;flex:1;overflow-y:auto;padding-right:5px;height:100%}.user-item{padding:10px;cursor:pointer;border-radius:8px;margin-bottom:5px;transition:.3s}.user-item:hover,.user-item.selected{background:#3d3f5c}.online{color:#00ff8a}.offline{color:#888}.chat-main{width:75%;display:flex;flex-direction:column;padding:20px}.chat-header{font-size:20px;margin-bottom:10px}.chat-body{flex:1;overflow-y:auto;padding:10px;background:#292b40;border-radius:10px}.chat-msg{margin:5px 0;padding:10px;max-width:60%;border-radius:10px}.sent{align-self:flex-end;background:#5f9ea0}.received{align-self:flex-start;background:indigo}.chat-input{display:flex;margin-top:10px}.chat-input input{flex:1;padding:10px;border-radius:10px 0 0 10px;border:none}.chat-input button{padding:10px;background:indigo;color:#fff;border:none;border-radius:0 10px 10px 0;cursor:pointer}.chat_button{margin-top:10px;width:100%;padding:14px;font-size:1rem;border:none;border-radius:10px;background:linear-gradient(135deg,#fc466b,#3f5efb);color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease}#logout{background:linear-gradient(135deg,#e0113a,#fb683f)}.user-list::-webkit-scrollbar{width:4px}.chat-body::-webkit-scrollbar{width:8px}.user-list::-webkit-scrollbar-track,.chat-body::-webkit-scrollbar-track{background:#1a1a1a;border-radius:10px}.user-list::-webkit-scrollbar-thumb{background:#dad8d8;border-radius:10px}.chat-body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00f2fe,#4facfe);border-radius:10px}.user-list::-webkit-scrollbar-thumb:hover,.chat-body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#4facfe,#00f2fe)}.input_fild{display:flex;justify-content:center;gap:2rem;margin:40px auto}.input_fild button{padding:12px 24px;font-size:2rem;border:none;border-radius:18px;background:#f5f0f0;color:#2a2a2a;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 5px 15px #0ff3}.input_fild button:hover{transform:scale(1.5);box-shadow:0 10px 25px #0ff6;background:linear-gradient(135deg,#00f2fe,#4facfe)}.join_room,.create_room{background:#1c1c1c;margin:40px;padding:30px;max-width:500px;border-radius:16px;box-shadow:0 0 20px #00ffff1a;animation:slideIn .6s ease-out}.join_room h1,.create_room h1{margin-bottom:20px;font-size:1.8rem;color:#00f2fe}.join_room input,.create_room input{width:100%;margin-bottom:20px;padding:12px;border-radius:10px;border:none;outline:none;font-size:1rem;background:#2a2a2a;color:#000}.join_room button,.create_room button{width:100%;padding:14px;font-size:1rem;border:none;border-radius:10px;background:linear-gradient(135deg,#fc466b,#3f5efb);color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease}.join_room button:hover,.create_room button:hover{transform:scale(1.05);box-shadow:0 0 20px #ff69b466}.div{text-align:center;font-size:1.2rem;margin-top:20px}.room_names{margin:40px auto;max-width:500px;height:40vh;padding:20px;background:#1c1c1c;border-radius:16px;box-shadow:0 0 15px #00ffff1a;animation:fadeIn .8s ease-in;overflow-y:scroll}.room_names::-webkit-scrollbar,body::-webkit-scrollbar{width:8px}.room_names::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:#1a1a1a;border-radius:10px}.room_names::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00f2fe,#4facfe);border-radius:10px}.room_names::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#4facfe,#00f2fe)}.room_names h3{margin-bottom:15px;font-size:1.5rem;color:#4facfe}.room_names ul{list-style:none;padding:0;margin:0}.room_names li{background:#2a2a2a;padding:10px 15px;border-radius:8px;margin-bottom:10px;transition:background .3s ease;color:#f0f0f0}.room_names li:hover{background:#3b3b3b}@keyframes slideIn{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media screen and (max-width: 600px){.input_fild{flex-direction:column;gap:1rem}.join_room,.create_room,.room_names{width:90%;padding:20px}.input_fild button{width:80%;margin:auto}}.chat-page{display:flex;flex-direction:column;height:100vh;width:100vw;padding:0}.messages{flex:1;overflow-y:auto;padding:20px;background-color:#181818;display:flex;flex-direction:column;gap:10px}.chat-bubble{background:#2c2c2c;padding:10px 15px;border-radius:16px;max-width:70%;align-self:flex-start;color:#f0f0f0;animation:fadeInUp .3s ease}.room_msg{display:flex;padding:10px 20px;background-color:#1c1c1c;border-top:1px solid #333}.room_msg input{flex:1;padding:12px;border-radius:10px;border:none;background-color:#2c2c2c;color:#000;font-size:1rem;margin-right:10px}.room_msg button{padding:12px 18px;border:none;border-radius:10px;background:linear-gradient(to right,#3f5efb,#fc466b);color:#fff;font-weight:700;cursor:pointer;transition:.3s ease}.room_msg button:hover{transform:scale(1.05)}.messages::-webkit-scrollbar{width:8px}.messages::-webkit-scrollbar-track{background:#1a1a1a;border-radius:10px}.messages::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#00f2fe,#4facfe);border-radius:10px}.messages::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#4facfe,#00f2fe)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width: 600px){.chat-bubble{max-width:90%}.room_msg{flex-direction:column;gap:10px}.room_msg input,.room_msg button{width:100%}}