*{box-sizing:border-box}body{background-color:#d3dbdc;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-window{display:flex;height:100vh;background-color:#ededed}.sidebar{width:35%;max-width:415px;display:flex;flex-direction:column;border-right:1px solid #ddd}header{height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 15px}.header-avatar{width:40px;height:40px;border-radius:20px;cursor:pointer}.header-buttons{display:flex}.header-btn{width:40px;height:40px;border-radius:20px;display:flex;justify-content:center;align-items:center;cursor:pointer}.search{background-color:#f6f6f6;border-bottom:1px solid #eee;padding:5px 15px}.search-input{background-color:#fff;height:40px;display:flex;border-radius:20px;align-items:center;padding:0 10px}.search-input input{flex:1;border:0;outline:0;background-color:transparent;margin-left:10px}.chat-list{flex:1;background-color:#fff;overflow-y:auto}.chat-list::-webkit-scrollbar{width:6px;height:6px}.chat-list::-webkit-scrollbar-thumb{background-color:#0003}.content-area{flex:1}.chat-list-item{display:flex;cursor:pointer;align-items:center;height:70px}.chat-list-item.active{background-color:#ebebeb}.chat-list-avatar{width:50px;height:50px;border-radius:25px;margin-left:15px}.chat-list-lines{flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid #eee;padding-right:15px;margin-left:15px;flex-wrap:wrap;min-width:0}.chat-list-line{display:flex;justify-content:space-between;align-items:center;width:100%}.chat-list-name{font-size:17px;color:#000}.chat-list-date{font-size:12px;color:#999}.chat-list-lastmensage{font-size:14px;color:#999;display:flex;width:100%}.chat-list-lastmensage p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0}.chat-intro{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;border-bottom:6px solid #6ab04c}.chat-intro img{width:250px;height:auto}.chat-intro h1{font-size:32px;font-style:italic;color:#badc58}.chat-intro h2{font-size:20px;color:#777;font-weight:400;line-height:20px;text-align:center}.chat-intro p{font-weight:700}.chat-window{display:flex;flex-direction:column;height:100%}.chat-header{height:60px;border-bottom:1px solid #ccc;display:flex;justify-content:space-between;align-items:center}.chat-window-info{display:flex;align-items:center;cursor:pointer}.chat-window-avatar{width:50px;height:50px;border-radius:50%;margin-left:15px;margin-right:15px}.chat-window-name{font-size:17px;font-weight:700;color:#000}.chat-window-buttons{display:flex;align-items:center;margin-right:15px}.chat-window-btn{width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer}.chat-body{flex:1;overflow-y:auto;background-color:#e5ddd5;background-size:cover;background-position:center;padding:20px 30px}.chat-body::-webkit-scrollbar{width:6px;height:6px}.chat-body::-webkit-scrollbar-thumb{background-color:#6ab04c}.chat-footer{height:62px;display:flex;align-items:center}.chat-footer-inputarea{flex:1}.chat-footer-input{width:100%;height:40px;border:0;outline:0;background-color:#fff;border-radius:20px;font-size:15px;color:#4a4a4a;padding-left:8px}.chat-footer-pos{display:flex;margin:0 15px}.chat-footer-btn{transition:all ease .3s;overflow:hidden;cursor:pointer}.message-line{margin-bottom:10px;display:flex}.message-item{background-color:#fff;border-radius:10px;box-shadow:0 1px 1px #ccc;display:flex;flex-direction:column;padding:3px;max-width:90%}.message-text{font-size:14px;margin:5px 40px 5px 5px}.message-date{font-size:11px;color:#999;margin-right:5px;text-align:right;height:15px;margin-top:15px}.newchat{width:35%;max-width:415px;position:fixed;left:0;top:0;bottom:0;background-color:#fff;display:flex;flex-direction:column;border-right:1px solid #ddd;box-shadow:0 5px 5px 5px #ddd;transition:all ease .5s}.header-newchat{display:flex;background-color:#44bd32;align-items:center;padding:60px 15px 15px}.backbutton-newchat{width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer}.title-newchat{font-size:19px;height:40px;line-height:40px;flex:1;font-weight:700;color:#fff;margin-left:20px}.list-newchat{flex:1;overflow-y:auto}.list-newchat::-webkit-scrollbar{width:6px;height:6px}.list-newchat::-webkit-scrollbar-thumb{background-color:#6ab04c}.item-newchat{display:flex;align-items:center;padding:15px;cursor:pointer}.item-newchat:hover{background-color:#f5f5f5}.itemavatar-newchat{width:50px;height:50px;border-radius:50%;margin-right:15px}.itemname-newchat{font-size:17px;color:#000}.login{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh}.login img{width:250px;height:250px}.login button{display:flex;align-items:center;justify-content:center;border:none;font-size:20px;line-height:48px;width:332px;padding:0 16px;border-radius:6px;background-color:#1877f2;color:#fff;cursor:pointer;font-weight:700;box-shadow:2px 2px #f3e6e6}