* { padding: 0; margin: 0; font-family: inherit;}
ol,ul,dl { margin-left: 20px;}
/* ol, ul, menu {list-style: none;} */
body { background-color: rgb(231, 248, 255); height: 100vh; width: 100vw;}
.chatPage {display: flex; flex-direction: column; position: relative; height: 100%; background-color: #f5f5f5;}
.chatList {margin-top: 20px; overflow: auto;padding-bottom:90px}
.messageWrap {margin-bottom: 30px;position: relative;}
.imgWrap {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-right: 10px;
  margin-left: 10px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  /* border: 1px solid rgb(222, 222, 222); */
}
.msgBox { margin: 0 60px 30px; }
.msgWrap { position: relative; background-color: #fff;padding: 0px 10px;border-radius: 5px; min-height: 40px;display: inline-block; max-width: 100%;}
.msgText { padding: 8px 0; line-height: 25px;word-wrap: break-word; text-align: justify;}
.msgText p {
  /* margin-bottom: 10px; */
}
.msgWrap::after {
  content: '';
  display: block;
  position: absolute;
  top: 15px;
  border-right: 6px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  left: -6px;
}
.imgWrap img { max-width: 100%;}
.time { position: absolute; left: 0; bottom: -18px;color: #aaa; font-size: 12px;width: 135px;}
.messageWrap.mine .imgWrap { right: 0; left: auto;}
.messageWrap.mine .msgBox { text-align: right; }
.messageWrap.mine .msgWrap { background-color: #a8ea7c;}
.messageWrap.mine .msgWrap::after {
  border: none;
  border-left: 6px solid #a8ea7c;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  right: -6px;
  left: auto;
}

.messageWrap.mine .time {left: auto; right: 0; text-align: right;}
.msgEmpty { width: 50px; flex-shrink: 0;}

.chatBottomWrap {position: fixed;width: 100%; bottom: 0; background-color: #f5f5f5;}
.chatInputWrap {  display: flex; position: relative;}
.disclaimerWrap {color: #999; text-align: center;padding: 5px;}
.settingBtn {width: 30px; margin: 20px 0px 0px 5px; padding: 4px; box-sizing: border-box; cursor: pointer;}
.channelBtn {width: 30px; height: 30px; border-radius: 50%; overflow: hidden; margin: 20px 0px 0 5px; box-sizing: border-box; padding: 2px; cursor: pointer;}
.channelBtn.active { display: block;}
.channelBtn img {width: 100%; height: 100%; border-radius: 50%;}
.inputWrap {margin: 5px 5px 5px 5px;  flex: 1;}
.quesText {padding: 5px 70px 5px 8px; width: 100%; box-sizing: border-box; outline:none; border: solid 1px rgba(222,222,222);resize: none; border-radius: 5px;box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.03); font-size: 16px;height: 60px; display: block;}
.quesText:focus{ border: 1px solid rgb(29, 147, 171);}
.sendBtn { background-color: rgb(29, 147, 171); color: #fff; border: none; border-radius: 10px; cursor: pointer; padding: 12px 16px; position: absolute; right: 12px; bottom: 14px;outline: none;}
.sendBtn:hover {filter: brightness(0.9);}


/* 动画特效开始 */
.ani_dot {
  font-family: simsun;
  /* font-size: 30px; */
  font-weight: bolder;
  display: inline-block;
  width: 1.5em;
  vertical-align: bottom;
  overflow: hidden;
  display: flex;
}

@keyframes dot {
  0% { width:0; margin-right: 0.8em; }
  33% { width: .25em; margin-right: 0.55em; }
  66% { width: 0.5em; margin-right: .3em; }
  100% { width: 0.8em; margin-right:0;}
}
.ani_dot {
  animation: dot 3s infinite step-start;
}
/* 动画特效结束 */
pre { border-radius: 8px;overflow: hidden; margin: 10px 0; overflow: auto;}
code,pre {font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
code:not(.hljs) {border:0.5px solid #E6E7EB;border-radius: 4px;background-color: #fff; color: rgba(20, 21, 26, 0.65);line-height: 21px;padding: 2px 6px;}
pre code.hljs {padding: 0.5em; }
/* pre {direction: ltr;tab-size: 4; hyphens: none; background-color: rgb(30, 30, 30); white-space: pre; word-spacing: normal; word-break: normal; color: rgb(212, 212, 212);background-color: #1f1f1f;border-radius: 8px;padding: 10px;} */
/* code { white-space: nowrap; max-width: 100%;} */
.mask {position: fixed; top:0; left: 0; height: 100%; width: 100%; background-color: rgb(250, 250, 250); text-align: center; display: flex;z-index:1000; display: none; }
.mask.active {display: block;}
.mask h1 {margin: 100px 0 30px;}

.dialogWrap { display: none;}
.dialogWrap.active{ display: block;}
.modalMask { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); display: flex; justify-content: center; align-items: center;}
.modalMask.active { display: block;}

.dialogContWrap { background-color: #fff; position: relative; border-radius: 12px; width: 80vw;}
.modalTitle { text-align: center; padding: 20px; border-bottom: 1px solid rgb(222, 222, 222); font-weight: bolder; font-size: 16px;}
.dialogContWrap .closeBtn { position: absolute; cursor: pointer;}
.closeBtn { position: absolute; top: 25px; right: 25px;}
.modalCont { padding: 20px;}
.settingItemBtn { font-size: 12px; border-radius: 10px; border: 1px solid rgb(222, 222, 222); text-align: center; color: #4e5969; padding: 16px; margin-bottom: 15px; cursor: pointer;}

.messageWrap.split { margin-top: 40px;}
.splitLine { margin: 0 10px; border-bottom: 1px solid rgb(222, 222, 222); display: flex; justify-content: center; align-items: center; position: relative; }
.splitLine .splitText { color: #aaa; background-color: #f5f5f5; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px;height: 20px; line-height: 20px; text-align: center; font-size: 12px;}

.toast { display: inline-block; top: 40%; position: fixed; z-index: 999; left: 50%; transform: translate(-50%, -50%);background: rgba(0, 0, 0, .6);border-radius: 10px; padding: 10px; color: #fff; z-index: 1000;}
.keyboardWrap,.audioInputWrap { display: none;}
.keyboardWrap.active { display: block;}
.audioInputWrap.active { display: flex;}
.audioInputWrap { 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
   background-color: #fff; height: 100%; text-align: center; justify-content: center; align-items: center;border-radius: 10px;cursor: pointer;}

.login_container {
  width: 300px;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px 20px 50px;
}
.labelWrap {margin: 15px 20px;padding: 10px 5px;border-bottom: 1px solid #1c4cff;position: relative;}
.loginIcon {position: absolute;width: 30px; height: 30px; text-align: center;}
.loginIcon img {max-width: 100%;}
.loginCaptchaWrap {position: absolute; right: 0; width: 80px;top: 5px;}
.loginCaptchaWrap img {max-width: 100%;cursor: pointer;}
.labelWrap .loginCtrl {border: none; outline: none; margin-left: 25px;font-size: 16px; line-height: 30px; vertical-align: middle; width: 200px;}
.loginBtn { background-color: #1c4cff; line-height: 40px; font-size: 16px; text-align: center;width: 80%;border-radius: 10px;border: none; color: #fff; cursor: pointer;}
.smsBtn {right: 0; position: absolute; background-color: #1c4cff; line-height: 30px; font-size: 14px; text-align: center;border-radius: 5px;border: none; color: #fff;padding: 0 8px; cursor: pointer;}
.smsBtn.disable {background-color: #eee; color: #999;}

.resDocListWrap { display: flex;}
.resDocListWrap .resDocTitle { color: #84868c;}
.resDocListWrap .resDocList { flex: 1; display: flex;flex-wrap: wrap;}
.resDocListWrap .resDocList .resDocItem {display: inline-flex; padding: 0 5px; color: #84868c; vertical-align: middle}
.resDocListWrap .resDocList .resDocItem span { display: flex; align-items: center;}