html,body,#root,.app{width:100%;height:100%}.main-header{display:flex;border-bottom:1px solid;align-items: center}.main-header h1{padding:10px;font-size:20px;font-weight:600}.main-header .hamburger-menu{width:30px;padding-left:5px}.container{display:flex;width:100%;height:calc(100% - 45px)}.sidebar{border-right:1px solid;width:40%;min-width:250px}.sidebar .person:first-child{margin-top:10px}.sidebar .person{display:flex;gap:5px;padding-left:10px}.sidebar .person .left .pfp{border-radius:10px;width:50px}.sidebar .person .name{font-weight:700}.sidebar .person .status{color:gray;margin-left:22px;font-size:13px}.sidebar .person .status:before{content:"";position:absolute;background-color:#00b900;border-radius:50%;width:15px;height:15px;margin-left:-20px}.chat-area{width:100%;height:100%}.chat-area .chats{overflow:auto;height:calc(100% - 40px);padding-top:5px;padding-left:5px;padding-right:5px}.chat-area .chat{border-radius:10px;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 50px);margin-bottom:5px;padding:5px 10px 5px 5px}.chat-area .chat.received{background-color:#d5d5d5;border-bottom-left-radius:0}.chat-area .chat.sent{color:#fff;background-color:#00f;border-bottom-right-radius:0;margin-left:auto}.chat-area .chat .up{display:flex;align-items: center;gap:5px;font-size:13px}.chat-area .chat .pfp{object-fit:cover;border-radius:50%;flex-grow:0;flex-shrink:0;width:15px;height:15px}.chat-area .chat .content{word-break:break-all;font-size:20px}.input-section{display:flex;justify-content:center;width:100%}.input-section input{background-color:#e8e8e8;border:0;border-top-left-radius:10px;border-bottom-left-radius:10px;width:calc(100% - 80px);height:30px;padding-left:10px;padding-right:10px}.input-section .btn-send{color:#fff;cursor:pointer;background-color:#00f;border:0;border-top-right-radius:10px;border-bottom-right-radius:10px;width:50px;height:30px;transition:all .1s linear}.input-section .btn-send:active{background-color:#0000c2}*{outline:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0;font-family:ABeeZee,sans-serif}@media screen and (max-width:500px){.sidebar{overflow:hidden;width:60px;min-width:0}.sidebar.open{overflow:hidden;width:100%;min-width:0}body:has(.sidebar.open) .chat-area{display:none}.sidebar .person{padding-left:5px}.sidebar .person .left .pfp{width:40px}.sidebar.closed .person .name,.sidebar.closed .person .status{display:none}}