body,html{height:100%}*,body,html{margin:0;padding:0}button,input{outline:none;border:none}#app{position:relative;max-width:750px;height:100vh;margin:0 auto;color:#fff}.login-content{position:relative;width:100%;height:100%;background-image:url(/img/bg.dd8833ad.jpg);background-repeat:no-repeat;background-size:cover;background-position:50%;overflow:hidden}.login-content:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;backdrop-filter:saturate(150%) contrast(50%) blur(5px);z-index:0}.login{position:relative;z-index:1;display:flex;justify-content:center}.login-box{position:absolute;top:8rem;display:flex;flex-direction:column;align-items:center}.login-box h2{font-size:2rem;text-shadow:1px 1px 5px #000;padding-bottom:1rem}.login-box h2,p{line-height:2rem}.login-box .info{margin-top:5rem;display:flex;flex-direction:column;align-items:center}.avatar,.roomId,.username{width:100%;height:3rem;border:1px solid #fff;border-radius:.5rem;margin-top:1rem;overflow:hidden;display:flex}.avatar span,.roomId span,.username span{line-height:3rem;padding:0 1rem;display:inline-block;background-color:rgba(0,0,0,.3);border-right:1px solid #fff;color:#fff;font-size:1rem}.avatar input,.roomId input,.username input{color:#fff;font-size:1rem;font-weight:700;padding-left:1rem;background:transparent;flex:1}.upload{line-height:3rem;padding:0 1rem}.submit{width:100%;height:3rem;border-radius:.5rem;background-color:hsla(0,0%,100%,.3);border:2px solid #fff;color:#fff;font-size:20px;font-weight:700;margin-top:5rem;cursor:pointer}.chat-content{background:#ededed}.chat,.chat-content{width:100%;height:100%}.chat{display:flex;flex-direction:column;justify-content:space-between}.chat-header{width:100%;max-width:750px;height:3.5rem;border-bottom:1px solid #d5d5d5;color:#000;font-size:1.2rem;font-weight:700;line-height:3.5rem;text-align:center}.chat-text{width:100%;overflow-y:scroll;flex:1}.chat-text::-webkit-scrollbar{width:0}.chat-footer{width:100%;max-width:750px;height:3rem;border-top:1px solid #d5d5d5;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;box-sizing:border-box}.chat-footer .input-text{flex:1;margin:0 1rem;height:2rem;background-color:#fff;border-radius:.3rem;font-size:1rem;padding:0 .5rem;box-sizing:border-box;color:#000;line-height:2rem;border:0;outline:none;overflow-y:scroll}.input-text::-webkit-scrollbar{width:0}.send-img,.send-msg{width:2rem;height:2rem;cursor:pointer}.enterOrLeave{width:100%;text-align:center;color:#444;font-size:12px;padding:.5rem;box-sizing:border-box}.user_speak{padding:.5rem 1rem;box-sizing:border-box;display:flex}.userRight{flex-direction:row-reverse}.user-avatar{width:2.5rem;height:2.5rem;border-radius:.3rem}.userchat{margin-left:1rem}.user-title{color:#ccc;font-size:12px}.speak-text-r{padding:.3rem .5rem;background:#98e970;border-radius:.2rem;position:relative;color:#000;margin-top:.2rem}.speak-text-r:after{content:"";width:0;height:0;border:5px solid transparent;border-left-color:#98e970;position:absolute;top:50%;transform:translateY(-50%);right:-10px}.speak-text-l{padding:.3rem .5rem;background:#fff;border-radius:.2rem;position:relative;color:#000;margin-top:.2rem}.speak-text-l:after{content:"";width:0;height:0;border:5px solid transparent;border-right-color:#fff;position:absolute;top:50%;transform:translateY(-50%);left:-10px}.inputImage{max-width:10rem}