/**
 * 聊天样式 - 神秘聊天室
 */
*, ::before, ::after { box-sizing: border-box; }
html,body{ height: 100%; margin: 0; padding: 0; }
body{ max-width:800px; margin:0 auto; }
.mk-chat-box{ font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; font-size:16px; width: 100%; padding: 0; position:relative; overflow-y: scroll; overflow-x: hidden; height: calc(100% - 130px); border: 1px solid #eceff1; border-bottom:0; }
.top{padding-left:10px;background-color: #eceff1;height:40px;line-height:40px;text-align:center;}
.write{height:40px;width: 100%;}
.write input { font-size: 16px; float: left; width: calc(100% - 60px); height: 40px; padding: 0 10px; border-radius:0; border: 0; outline: none; background:#eceff1; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; }
.send{color:#fff;text-decoration:none;width:60px; background-color: #007bff;display:inline-block;height: 40px;line-height:40px;text-align:center}
.send.disabled{background-color: #cccccc;}
.mk-chat-box .msg{ margin: 4px 6px; position: relative; min-height: 40px; border: 0; }
.mk-chat-box .right{ text-align: right; margin-left: 64px; }
.mk-chat-box .left{ text-align: left; margin-right: 64px; }
.mk-chat-box img.head{ width: 32px; height: 32px; top: 8px; position: absolute; border-radius: 100%; border: 1px solid #cbe5c8; user-select: none; }
.mk-chat-box .right img.head{ right: 0; }
.mk-chat-box .left img.head{ left: 0; }
.mk-chat-box .name{ color: #8b8b8b; font-size: 12px; display: block; line-height: 18px; }
.mk-chat-box .right .name{ margin: 0 48px 2px 0; }
.mk-chat-box .left .name{ margin: 0 0 2px 48px; }
.mk-chat-box .content{ word-break: break-all; word-wrap: break-word; text-align: left; position: relative; display: inline-block; font-size: 14px; padding: 6px; line-height: 18px; border-radius: 6px; min-width: 9px; min-height: 18px; }
.mk-chat-box .right .content{ margin: 0 48px 0 0; border: 1px solid #78cdf8; background: #78cdf8; }
.mk-chat-box .left .content{ margin: 0 0 0 48px; border: 1px solid #CDD7E2; background: #CDD7E2; }
.mk-chat-box .content:after{ content: ""; position: absolute; border-bottom: 8px solid rgba(255, 255, 255, 0); }
.mk-chat-box .right .content:after{ right: -12px; top: 8px; border-left: 12px solid #78cdf8; }
.mk-chat-box .left .content:after{ left: -12px; top: 8px; border-right: 12px solid #cdd7e2; }
.mk-chat-box .tips{ margin: 12px; text-align: center; font-size: 12px; }
.mk-chat-box .tips span{ display: inline-block; padding: 4px; background-color: #cccccc; color: #ffffff; border-radius: 6px; }
.mk-chat-box .tips .tips-primary{ background-color: #428bca; }
.mk-chat-box .tips .tips-success{ background-color: #5cb85c; }
.mk-chat-box .tips .tips-info{ background-color: #5bc0de; }
.mk-chat-box .tips .tips-warning{ background-color: #f0ad4e; }
.mk-chat-box .tips .tips-danger{ background-color: #d9534f; }
.mk-chat-box::-webkit-scrollbar{width:8px;height:8px}
.mk-chat-box::-webkit-scrollbar-button:vertical{display:none}
.mk-chat-box::-webkit-scrollbar-track:vertical{background-color:transparent;}
.mk-chat-box::-webkit-scrollbar-track-piece{background-color:transparent;}
.mk-chat-box::-webkit-scrollbar-thumb:vertical{background-color:rgba(204,204,204,.3);border-radius:8px}
.mk-chat-box::-webkit-scrollbar-thumb:vertical:hover,
.mk-chat-box::-webkit-scrollbar-thumb:vertical:active {background-color: #8C8C8C}