/*.text-center::after{content: ' '; display: inline-block; width: 0; height: 100%; vertical-align: middle; margin-top: 4px;}*/
body{margin: 0; padding: 0;font-size: 15px; background-color: white; font-family: "Microsoft YaHei","宋体", Arial, "新宋体";background:rgba(0,0,0,0.8);}
/*.clearfix::after{ content:""; display:block; clear:both;}*/
input:focus, textarea:focus{outline: none; outline-offset: 0;}

*{outline: none; /* 去除点击时的轮廓线 */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* 去除iOS上的点击高亮 */}

/* Webkit浏览器（如Chrome, Safari）的滚动条样式 */
::-webkit-scrollbar {
width: 5px;
margin-right:2px;
border-radius: 6px;
}

::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
background-color: #555;
border-radius: 6px;
}

::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 6px;
}


.content_pc{position:relative;margin:0 auto;width:700px;height:100vh;overflow:hidden;background:#ededed;box-shadow:0px 0px 5px 1px rgba(0,0,0,0.3);}
.content_mb{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#ededed;}
.contentTop{width:100%;height:40px;line-height:40px;text-align:center;font-size:18px;font-weight:bold;background:white;color:black;border-bottom:1px solid #e4e4e4;box-sizing:border-box;border-radius:0 0 25px 25px;box-shadow:0px 0px 5px 1px rgba(0,0,0,0.3);}
.contentMiddle{width:100%;height:calc(100% - 120px);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:absolute;bottom:0px;left:0px;z-index:99999;width:100%;height:50px;overflow:hidden;background:white;font-size:15px;color:grey;border-top:1px solid #ccc;border-radius:15px 15px 0px 0;}
.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: 20px;background:white;box-sizing:border-box;}
.textContent:hover{/*border:1px solid grey;*/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:40px;text-align:center;border:1px solid #ccc;border-radius:25px;background:linear-gradient(to right,royalblue,purple);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:25px;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:45px;}
.messageStyleLeft1P{width:45px;height:45px;border-radius:10px;}
.messageStyleLeft2{position:relative;float:left;margin:3px 0 0 15px;min-width:20px;max-width:calc(100% - 80px);}
.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:45px;}
.messageStyleRight1P{width:45px;height:45px;border-radius:10px;}
.messageStyleRight2{position:relative;float:right;margin:3px 15px 0 0;min-width:20px;max-width:calc(100% - 80px);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;
}