body{margin:0;padding:0;font-size:15px;background-color:#ededed;font-family:"Microsoft YaHei","宋体",Arial,"新宋体";}
input:focus,textarea:focus{outline:none;outline-offset:0;}

*{outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}

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

/* 修改滚动条滑块的样式 */
::-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;
}

.content{width:100%;height:100vh;overflow:hidden;}
.contentTop{width:100%;height:30px;line-height:30px;text-align:center;font-size:16px;font-weight:bold;background:white;color:black;border-bottom:1px solid #e4e4e4;box-sizing:border-box;border-radius:0 0 20px 20px;box-shadow:2px 2px 2px 2px #e4e4e4;}
.contentMiddle{width:100%;height:calc(100vh - 110px);padding-bottom:30px;overflow-x:hidden;overflow-y:auto;}

.contentMiddle2{position:fixed;z-index:2;bottom:50px;left:0px;width:auto;height:34px;overflow:hidden;padding:0 10px 0 10px;border-top:1px solid #ccc;border-right:1px solid #ccc;border-radius:0px 15px 0 0;background:white;overflow-x:hidden;}
.contentMiddle2_bt{float:left;margin:5px 5px 0 5px;padding:2px 5px 2px 5px;border:1px solid #ccc;border-radius:5px;line-height:20px;font-size:14px;box-sizing:border-box;cursor:pointer;}
.contentMiddle2_bt:hover{box-sizing:border-box;box-shadow:0 0 5px 1px royalblue;background:rgba(0,0,0,0.8);color:white;}

.contentBottom{position:fixed;bottom:0px;left:0px;z-index:1;width:100%;height:50px;overflow:hidden;background:white;font-size:15px;color:grey;border-top:1px solid #ccc;}
.textContent{width:calc(100% - 135px);margin:5px 0 5px 5px;height:40px;padding:10px;resize:none;font-size:14px;line-height:15px;border:1px solid #ccc;border-radius:10px;background:white;box-sizing:border-box;}
.textContent:hover{box-sizing:border-box;box-shadow:0 0 5px 1px royalblue;}


.sendTextButton{position:absolute;z-index:2px;top:5px;right:10px;width:50px;height:40px;line-height:38px;text-align:center;border:1px solid #ccc;border-radius:10px;background:royalblue;color:white;cursor:pointer;box-sizing:border-box;font-size:15px;font-weight:bold;}
.sendPictureButton{position:absolute;z-index:2px;top:5px;right:70px;width:50px;height:40px;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;overflow:hidden;cursor:pointer;}
.sendPicture{position:absolute;z-index:2px;top:5px;right:70px;width:50px;height:40px;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;overflow:hidden;opacity:0;cursor:pointer;}

.textContent:focus{border:1px solid royalblue;box-sizing:border-box;transform:0.5s ease;}
.sendTextButton:hover{background:rgba(0,0,0,0.8);}

.messageStyle{margin:10px;height:auto;overflow:hidden;opacity:0;animation:fadeIn 0.5s ease-in-out forwards;}
/*定义关键帧动画 */  
@keyframes fadeIn {  
    from {  
        opacity:0; 
    }  
    to {  
        opacity:1; 
    }  
}  
.messageStyleLeft1{float:left;width:40px;}
.messageStyleLeft1P{width:40px;height:40px;border-radius:10px;}
.messageStyleLeft2{position:relative;float:left;margin:0px 0 0 15px;min-width:20px;max-width:calc(100vw - 130px);}
.messageStyleLeft2T{padding:10px;background:white;border-radius:5px;text-overflow:ellipsis;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;min-height:20px;}

.messageStyleRight1{float:right;width:40px;}
.messageStyleRight1P{width:40px;height:40px;border-radius:10px;}
.messageStyleRight2{position:relative;float:right;margin:0px 15px 0 0;min-width:20px;max-width:calc(100vw - 130px);text-align:left;}
.messageStyleRight2T{padding:10px;background:#00ffc0;border-radius:5px;text-overflow:ellipsis;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;min-height:20px;}


.rightArrow {width:0;height:0; border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:12px solid #00ffc0;position:absolute;top:10px;right:-10px;}
.leftArrow {  width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent;border-right:12px solid white;position:absolute; top:10px;left:-10px;}