body #chat-room{background:#fafafa;position:fixed;display:block;right:0;bottom:0;width:450px;height:300px;overflow:hidden;border:silver solid 1px;z-index:1000;font-size:16px}body #chat-room .msg-box{position:absolute;height:calc(300px - 37px);max-height:calc(300px - 37px);width:100%;color:#222323;font-size:13px;overflow-x:hidden;overflow-y:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:5px;gap:5px;font-family:Consolas,"Microsoft Yahei UI","Microsoft YaHei","Yu Gothic Medium",serif}body #chat-room .msg-box .msg-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin:0}body #chat-room .msg-box .msg-row:nth-child(odd){background-color:#ececec}body #chat-room .msg-box .msg-row:nth-child(2n){background-color:#c3c2c3}body #chat-room .msg-box .msg-row:hover{background-color:#ffffe4}body #chat-room .msg-box .msg-row .msg-name{-webkit-box-flex:0;-ms-flex:0 0 90px;flex:0 0 90px;cursor:pointer;text-align:right;margin-right:4px;padding:2px}body #chat-room .msg-box .msg-row .msg-name:hover{outline:#7FEAFF 1px solid}body #chat-room .msg-box .msg-row .msg-text{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:2px;word-break:break-all}body #chat-room .join-room-btn{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:3;cursor:pointer;display:inline;white-space:nowrap;overflow:hidden;text-align:center;padding:.8em 1.8em;border:2px solid #17c3b2;background-color:transparent;text-transform:uppercase;-webkit-transition:.3s;transition:.3s;font-family:inherit;color:#17c3b2}body #chat-room .join-room-btn::before{content:'';width:0;height:300%;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);background:#17c3b2;-webkit-transition:.5s ease;transition:.5s ease;display:block;z-index:-1}body #chat-room .join-room-btn:hover::before{width:105%}body #chat-room .join-room-btn:hover{color:#111}body #chat-room .chat-clear-btn{cursor:pointer;font-size:20px;width:20px;height:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;left:20px;top:0}body #chat-room .chat-hide-btn{cursor:pointer;font-size:20px;width:20px;height:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;left:0;top:0}body #chat-room .room-desc{position:absolute;right:0;top:0;z-index:1;background-color:#288de5}body #chat-room .user-input,body #chat-room .user-send{position:absolute;border:4px #36a2b0 solid;-webkit-box-sizing:border-box;box-sizing:border-box;bottom:0}body #chat-room .user-input{outline:0;left:0;padding-left:.3em;width:75%;height:35px;line-height:35px;font-size:13px;font-family:Consolas,"Microsoft Yahei UI","Microsoft YaHei","Yu Gothic Medium",serif}body #chat-room .user-send{right:0;width:calc(25% - 12px);height:25px;line-height:25px;-webkit-box-sizing:content-box;box-sizing:content-box}body #chat-show-btn{cursor:pointer;font-size:20px;width:20px;height:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;right:0;bottom:0;display:none;z-index:1000}