html,body{margin:0; padding:0;width:100%;height:100%;overflow:hidden;background-color:white;font-family:'Arial', sans-serif;}
input:focus, textarea:focus{outline:none; outline-offset:0;}
a,textarea{text-decoration:none; color:inherit;}
*{margin:0;padding:0;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* 修改滚动条轨道的样式 */
::-webkit-scrollbar {
width:2px;
}

/* 修改滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2);
border-radius:10px;
}

/* 修改滚动条轨道的背景色 */
::-webkit-scrollbar-track {
background-color:none;
}

/* 修改滚动条轨道的样式 */
::-ms-scrollbar {
width:10px;
}

/* 修改滚动条滑块的样式 */
::-ms-scrollbar-thumb {
background-color:#333;
border-radius:10px;
}

/*消息内容*/
.messageStyle{margin:10px;height:auto;overflow:hidden;}
.fade{opacity:0;animation:fadeIn 0.5s ease-in-out forwards;}

.messageView1_left{float:left;width:42px;height:42px;}
.messageView1_right{float:right;width:42px;height:42px;text-align:right;}

.messageView2V_left{float:left;max-width:calc(100% - 84px);height:auto;overflow:hidden;}
.messageView2_left{float:left;max-width:calc(100% - 0px);height:auto;overflow:hidden;}
.messageView2V_right{float:right;max-width:calc(100% - 84px);height:auto;overflow:hidden;}
.messageView2_right{float:right;max-width:calc(100% - 0px);height:auto;overflow:hidden;}

.messageContent_left{padding:10px;max-width:100%;min-height:20px;border-radius:5px 15px 15px 15px;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;font-size:14px;background:#F3F4F8;}
.messageContent_right{padding:10px;max-width:100%;min-height:20px;border-radius:15px 5px 15px 15px;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;font-size:14px;background:#F3F4F8;}

.messagePicture_left{padding:10px;max-width:100%;min-height:20px;border-radius:5px 15px 15px 15px;background:#EDF1F4;overflow:hidden;}
.messagePicture_right{padding:10px;max-width:100%;min-height:20px;border-radius:15px 5px 15px 15px;background:#EDF1F4;overflow:hidden;}

.messageView2VT1{height:25px;line-height:25px;font-size:12px;}
.messageView2VT2{margin:0 0 0 10px;font-size:11px;color:#ccc;}

.avatar{width:34px;height:34px;border-radius:50%;}

.pictureStyle{width:100%;border-radius:5px;}

.fl{float:left;}
.fr{float:right;}

.bg1{background:#f1f1f1;color:black;}
.bg2{background:#e3effd;color:black;}
.bg3{background:purple;color:white;}
.bg4{background:green;color:white;}


/*页面*/

.chatContainer{display:flex;flex-direction:column;width:100%;height:100%;background-color:#f5f5f5;overflow:hidden;}

.chatHeader_pc{height:50px;color:white;background-color:#1465ff;overflow:hidden;}
.chatHeader_mb{height:35px;color:white;background-color:#1465ff;overflow:hidden;}

.chatHeaderP_pc{float:left;margin:8px 10px;width:34px;height:34px;border-radius:10px;}
.chatHeaderP_mb{float:left;margin:2px 5px;width:30px;height:30px;border-radius:10px;}

.chatHeaderT_pc{float:left;padding:15px 0px;width:calc(100% - 54px);height:20px;line-height:20px;font-size:18px;font-weight:500;}
.chatHeaderT_mb{float:left;padding:10px 0px;width:calc(100% - 40px);height:15px;line-height:15px;font-size:15px;font-weight:500;}

.chatContentView{flex:1;padding:5px 0px;overflow-x:hidden;overflow-y:auto;background-color:#f9f9f9;}


@keyframes fadeIn{
from{ opacity:0; transform:translateY(10px); }
to{ opacity:1; transform:translateY(0); }
}

.chatInput_pc{display:flex;padding:15px;border-top:1px solid #eee;background-color:white;}
.chatInput_mb{display:flex;padding:5px 8px;border-top:1px solid #eee;background-color:white;}

.sendPictureView{display:flex;margin-right:10px;text-align:center;}

.sendPicture{width:38px;height:38px;border-radius:50%;background-color:transparent;border:none;color:#666;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;}

.sendPicture:hover{background-color:#f0f0f0;color:#1465ff;transform:scale(1.1);}

.textContent{flex:1;border:1px solid #ddd; border-radius:20px;padding:8px 15px;font-size:14px;outline:none;resize:none;height:20px;line-height:20px;transition:border 0.3s;}

.textContent:focus{border-color:#1465ff;}

.sendText{width:40px;height:40px;border-radius:50%; background-color:#1465ff;color:white;border:none;margin-left:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;}

.sendText:hover{background-color:#3a5a9f;transform:scale(1.05);}

/* 滚动条样式 */
.chatContentView::-webkit-scrollbar{
width:6px;
}

.chatContentView::-webkit-scrollbar-track{
background:#f1f1f1;
}

.chatContentView::-webkit-scrollbar-thumb{
background:#ccc;
border-radius:3px;
}

.chatContentView::-webkit-scrollbar-thumb:hover{
background:#aaa;
}