@charset "utf-8";
*,*:before,*:after{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin: 0;}
body{font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;margin: 0;padding: 0;background-color: #F5F5F5;-webkit-text-size-adjust:none;}
#chat-window,#chat-header,#chat-footer{width: 100%;max-width: 600px;}
#chat-header{position: fixed;font-size: 16px;background-color: #ececec;top: 0;left: 0;height: 40px;line-height: 40px;padding: 0 10px;border-bottom: 1px solid #ced3cd;z-index:2;}
#chat-header s{text-decoration: none;color: #ca0007;font-size: 12px;}
#chat-header span{}
#chat-body{overflow-y: auto;padding: 0 20px 50px 20px;margin: 40px 0 60px 0;}
#chat-body dl{padding-top: 15px;clear: both;}
#chat-body dl:after{clear: both;content: "";display: block;height: 0;visibility: hidden;}
#chat-body dl dt{font-size: 16px;font-weight: 500;color: #333333;float: left;height: 42px;line-height: 42px;width: 40px;}
#chat-body dl dd{font-size: 16px;color: #000;background-color: #fff;padding: 10px;border-radius: 6px;word-wrap: break-word;display: inline-block;border: 1px solid #fff;position: relative;margin-left: 7px;max-width: 86%;}
#chat-body dl dd:before{content:"";width: 0;height: 0;border-top: 8px solid transparent;border-right: 10px solid #FFF;border-bottom: 8px solid transparent;left: -11px;position: absolute;top: 11px;z-index: 1;}
#chat-body dl.my{float: right;}
#chat-body dl.my dt{float: right;text-align: right;}
#chat-body dl.my dd{background-color: #95eb6c;color: #000;border: 1px solid #afd98f;float: right;}
#chat-body dl.my dd:before{left: auto;right: -10px;border-left: 10px solid #95eb6c;border-right: none;}
#chat-body dl.my dd.read:after{content:"已读";font-size: 12px;color: #999;position: absolute;left: -31px;bottom: 0;}
#chat-body dl.my dd.loading:after{content:"发送中";font-size: 12px;color: #999;position: absolute;left: -31px;bottom: 0;}
#chat-body dl.my dd.done:after{content:"成功";font-size: 12px;color: #999;position: absolute;left: -31px;bottom: 0;}
#chat-body .time,#chat-body .msg,#chat-body .online{clear: both;text-align: center;color: #a0a0a0;font-size: 16px;padding: 10px 0;}
#chat-body .msg{}
#chat-footer{height: 60px;padding: 0 10px;display: flex;align-items: center;border-top: 1px solid #E6E6E6;position: fixed;left: 0;bottom: 0;z-index:2;}
#chat-footer textarea,#msg-line{flex: 1;height: 42px;padding: 5px 15px;border: 1px solid #CCCCCC;outline: none;font-size: 16px;border-radius: 5px;line-height: 30px;outline: none;resize: none;}
#chat-footer button{margin-left: 10px;height: 44px;padding: 0 25px;background-color: #E9E9E9;color: #07C160;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;transition: background-color 0.3s ease;}
#chat-footer button:hover{background-color: #05A050;}
#chat-input{visibility: hidden;}
.valid{text-align: center;padding: 20px 0;}
.valid input{border: 1px solid #ccc;height: 32px;line-height: 32px;width: 50%;padding-left: 10px;}
.valid button{border: 1px solid #ccc;height: 32px;margin-left: 15px;width: 60px;border-radius: 5px;}