.chat-page{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chat-system{height:600px;width:800px;background-color:#000;border-radius:8px;display:flex;padding:10px}.info{height:100%;width:220px;position:relative}.personal{display:flex;align-items:center;height:100px;background-color:#fffcea}.avatar{width:60px;height:60px;border-radius:50%;border:2px solid #fff}.name{font-weight:700;text-align:left}.autograph{font-size:12px;text-align:left;color:grey;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.list{top:100px;bottom:0;left:0;right:0;overflow:auto;position:absolute;background-color:#fffcea}.list .personal{height:60px;cursor:pointer;position:relative;margin:5px}.list .personal:hover{background-color:#fff;box-shadow:3px 3px 5px #ccc}.list .active.personal{background-color:bisque}.list .personal .has-new-tag{position:absolute;width:16px;height:16px;border-radius:50%;background-color:red;line-height:16px;right:5px;color:#fff;text-align:center;font-size:12px;display:none}.list .has-new.personal .has-new-tag{display:block}.list .avatar{width:40px;height:40px}.list .name{font-size:13px}.list .autograph{font-size:8px;width:164px;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.chat-room{height:100%;flex:1;background-color:#fffcea;border-left:none;position:relative;padding:10px;box-sizing:border-box}.input-frame{height:50px;border:1px solid #fff;position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center}.input-frame .input{flex:1;height:54px;margin:0;box-sizing:border-box}.input-frame .send-btn{height:54px;width:54px;padding:0}.chat-title{padding:6px;text-align:center;position:relative}.chat-title .guest-name{font-weight:700}.chat-title .mobile-user{position:absolute;display:none}.chat-box{border:1px solid #ccc;height:480px;overflow:auto;border-radius:4px}.chat-box .chat-box-ul{padding:10px}.chat-box .record{display:flex;min-height:50px}.chat-box .record .avatar{height:50px;width:50px}.chat-box .record .word{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin-top:12px;padding:6px;background-color:#d3d3d3;max-width:300px;word-break:break-all;border-radius:4px;text-align:left;font-size:14px;position:relative}.chat-box .host{flex-direction:row-reverse}.chat-box .host .word{background-color:#7cfc00;margin-right:6px}.chat-box .guest .word{margin-left:6px}.chat-box .host .word:after{border-left:4px solid #7cfc00;right:-4px}.chat-box .guest .word:after,.chat-box .host .word:after{content:" ";width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;position:absolute;top:10px}.chat-box .guest .word:after{border-right:4px solid #d3d3d3;left:-4px}@media only screen and (max-device-width:640px),only screen and (max-device-width:667px),only screen and (max-width:480px){.login-page .login-frame{width:300px;height:200px}.login-page .login-frame>h2{font-size:18px}.chat-page .info{display:none}.chat-page .chat-system{width:100%}.chat-page .chat-title{height:40px;line-height:40px}.chat-page .info-drawer .info,.chat-page .mobile-user{display:block}}