*{margin:0;padding:0;box-sizing:border-box}.App{background-color:#f0f2f5;height:100vh;display:flex;align-items:center;justify-content:center}.login_container{background-color:#fff;padding:40px;border-radius:10px;box-shadow:0 2px 10px #0000001a}.login_title{display:flex;align-items:center;justify-content:center;margin-bottom:20px}.login_icon{margin-right:10px;color:#25d366;font-size:40px}.login_form{display:flex;flex-direction:column;gap:15px}.login_form input{height:50px;padding:0 15px;border:1px solid #ddd;border-radius:5px;font-size:16px}.login_form button{height:50px;font-weight:700;border-radius:5px;font-size:18px;background-color:#25d366;border:none;color:#fff;cursor:pointer}.home{width:100%;height:100vh;background-color:#f0f2f5}.chat_layout{display:flex;height:100vh}.sidebar{width:350px;background-color:#fff;border-right:1px solid #e5e5e5;display:flex;flex-direction:column}.sidebar_header{background-color:#008069;color:#fff;padding:15px;display:flex;justify-content:space-between;align-items:center}.logout_btn{background-color:#025144;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer;font-size:14px}.userlist_container{flex:1;overflow-y:auto}.userlist_tabs{display:flex;border-bottom:1px solid #e5e5e5}.userlist_tabs button{flex:1;padding:15px;border:none;background-color:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px}.userlist_tabs button.active{background-color:#f0f2f5;border-bottom:3px solid #008069}.userlist_items{overflow-y:auto}.user_item{display:flex;padding:15px;cursor:pointer;border-bottom:1px solid #f0f2f5;transition:background-color .2s}.user_item:hover{background-color:#f5f6f6}.user_item.selected{background-color:#e5e5e5}.user_item img{width:50px;height:50px;border-radius:50%;margin-right:15px}.user_info{flex:1}.user_header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.user_header h4{font-size:16px;font-weight:500}.status{width:10px;height:10px;border-radius:50%}.status.online{background-color:#25d366}.status.offline{background-color:#999}.last_message,.user_status{font-size:14px;color:#667781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no_chats{text-align:center;padding:30px;color:#667781}.chat_section{flex:1;display:flex;flex-direction:column;background-color:#efeae2}.chat_header{background-color:#f0f2f5;padding:10px 20px;display:flex;align-items:center;gap:15px;border-bottom:1px solid #e5e5e5}.back_btn{background:none;border:none;font-size:20px;cursor:pointer;color:#54656f}.chat_header_avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.chat_user_info h4{font-size:16px;margin-bottom:3px}.user_status_text{font-size:13px;color:#667781}.no_chat_selected{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#667781}.chats_list{flex:1;overflow-y:auto;padding:20px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23e5ddd5" width="100" height="100"/></svg>')}.message_wrapper{display:flex;margin-bottom:15px;gap:8px}.message_wrapper.sender{justify-content:flex-end}.message_wrapper.receiver{justify-content:flex-start}.message_avatar{width:32px;height:32px;border-radius:50%}.chat_bubble{max-width:60%;padding:8px 12px;border-radius:8px;position:relative}.sender_bubble{background-color:#d9fdd3;border-top-right-radius:0}.receiver_bubble{background-color:#fff;border-top-left-radius:0}.message_text{font-size:14px;line-height:1.5;margin-bottom:5px;word-wrap:break-word}.message_time{font-size:11px;color:#667781;float:right}.inputtext_container{display:flex;padding:10px 20px;background-color:#f0f2f5;gap:10px;align-items:center}.inputtext_container input{flex:1;height:45px;border:none;border-radius:25px;padding:0 20px;font-size:15px}.send_btn{width:45px;height:45px;border-radius:50%;background-color:#008069;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px}@media (max-width: 768px){.login_container{padding:30px 20px;margin:0 15px;width:calc(100% - 30px)}.chat_layout{flex-direction:column;width:100vw}.sidebar{width:100%;border-right:none;border-bottom:1px solid #e5e5e5;max-height:100vh}.chat_section{width:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;display:none}.chat_section.active{display:flex}.sidebar.hidden{display:none}.back_btn{display:block}.chat_bubble{max-width:80%}.sidebar_header h3{font-size:18px}.logout_btn{padding:6px 12px;font-size:13px}.user_item img{width:45px;height:45px}.chat_header_avatar{width:35px;height:35px}.inputtext_container{padding:8px 15px}.inputtext_container input{height:40px;font-size:14px}.send_btn{width:40px;height:40px;font-size:16px}}@media (max-width: 480px){.login_container{padding:25px 15px}.login_title h2{font-size:24px}.login_icon{font-size:32px}.chat_bubble{max-width:85%}.message_text{font-size:13px}.user_header h4{font-size:15px}.last_message,.user_status{font-size:13px}}