body{margin: 0; padding: 0;font-family: "Microsoft YaHei","宋体", Arial, "新宋体";border:0;font:inherit;vertical-align:baseline;}
input:focus, textarea:focus{outline: none; outline-offset: 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;
}

.content{position:fixed;z-index:0;top:0;left:0;width:100%;height:100%;overflow:hidden;background:white;}

.contentTop{padding:0 5px;height:60px;line-height:60px;text-align:center;font-size:18px;font-weight:bold;background:linear-gradient(to right,#3366ff,purple);color:black;overflow:hidden;}
.contentTopP{float:left;margin:10px;width:40px;height:40px;border-radius:5px;}
.contentTopView{float:left;width:calc(100% - 60px);height:60px;line-height:40px;text-align:left;color:white;}
.contentTopView1{width:100%;height:40px;line-height:40px;font-size:15px;font-weight:bold;text-overflow:ellipsis;}
.contentTopView2{width:100%;height:15px;line-height:15px;font-size:13px;text-overflow:ellipsis;}

.contentView{width:100%;height:calc(100% - 60px);overflow:hidden;}
.chatContent{width:100%;height:calc(100% - 130px);padding-bottom:30px;overflow:auto;background:#e7e7e7;}

.questionView{white-space:nowrap;position:absolute;bottom:100px;left:0px;width:100%;height:30px;background:#f8f8f8;overflow-x:auto;overflow-y:hidden;}
.contentMiddle2_bt{display:inline-block;white-space:nowrap;margin:5px 5px 0 5px;padding:2px 5px 2px 5px;border:1px solid #ccc;border-radius:5px;line-height:15px;font-size:14px;box-sizing:border-box;cursor:pointer;}
.contentMiddle2_bt:hover{box-sizing:border-box;box-shadow:0 0 5px 1px red;background:linear-gradient(to right,orange,purple);color:white;}
.contentMiddle2_bt:hover{color:white !important;}

.part1_pc{position:relative;float:left;width:calc(100% - 200px);height:100%;border-right:1px solid #ccc;box-sizing:border-box;}
.part1_mb{width:100%;height:100%;}

.part2_pc{float:left;width:200px;height:100%;}
.part2_mb{display:none;}
.part2Top{width:100%;height:30px;line-height:30px;text-align:center;border-bottom:1px solid #ccc;box-sizing:border-box;font-size:13px;font-weight:bold;}
.part2Content{padding:10px;height:calc(100% - 220px);overflow:auto;font-size:14px;font-weight:bold;}
.part2Bottom{width:100%;height:170px;border-top:1px solid #ccc;box-sizing:border-box;text-align:center;overflow:hidden;}
.part2BottomP{margin:8px 0 0 0;width:70px;height:70px;border-radius:5px;}
.part2BottomT{width:100%;height:30px;line-height:30px;font-size:14px;font-weight:bold;}



.sendView{width:100%;height:100px;background:white;}
.textView{width:100%;height:60px;overflow:hidden;text-align:center;}
.textViewContent{padding:5px;width:98%;height:50px;border:1px solid #ccc;border-radius:5px;resize:none;font-size:14px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;outline:none;text-align:left;}
.textViewContent:empty:before{content:attr(data-placeholder);color:#aaa;pointer-events:none;}

.sendBtnView{position:relative;width:100%;height:40px;background:white;}
.sendText{position:absolute;bottom:5px;right:5px;width:60px;height:30px;line-height:30px;text-align:center;background:linear-gradient(to right,royalblue,purple);color:White;font-size:14px;font-weight:bold;overflow:hidden;border-radius:5px;cursor:pointer;}
.sendPicture{position:absolute;bottom:5px;right:80px;width:60px;height:30px;line-height:30px;text-align:center;background:linear-gradient(to right,pink,orange);;color:White;font-size:14px;font-weight:bold;overflow:hidden;border-radius:5px;cursor:pointer;}
.sendPictureBtn{position:absolute;bottom:0;right:0;cursor:pointer;}
.sendFile{position:absolute;bottom:5px;right:150px;width:60px;height:30px;line-height:30px;text-align:center;background:linear-gradient(to right,#66ccff,#3399ff);color:White;font-size:14px;font-weight:bold;overflow:hidden;border-radius:5px;cursor:pointer;}
.sendFileBtn{position:absolute;bottom:0;right:0;cursor:pointer;}
.sendText:hover,.sendPicture:hover,.sendFile:hover{background:grey;}	    
			    




.messageStyle{margin:10px;height:auto;overflow:hidden;/* 初始状态：完全透明 */  opacity: 0;  /* 定义动画 */  animation: fadeIn 0.5s ease-in-out forwards;}

.messageView1_left{width:auto;height:30px;line-height:30px;text-align:left;}
.messageView1_right{width:auto;height:30px;line-height:30px;text-align:right;}
.messageView1T1{font-size:14px;font-weight:bold;}
.messageView1T2{margin-left:10px;font-size:12px;color:grey;}

.messageView2{width:100%;height:auto;overflow:hidden;}
.messageContent{padding:10px;max-width:95%;min-height:20px;border-radius:5px;white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;font-size:14px;background:white;}
.messagePicture{padding:5px;max-width:200px;min-height:20px;border-radius:5px;background:white;}
.pictureStyle{max-width:180px;max-height:180px;border-radius:5px;cursor:pointer;transition:opacity 0.2s;}
.pictureStyle:hover{opacity:0.85;}

.imgLightbox{display:none;position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);justify-content:center;align-items:center;cursor:pointer;overflow:hidden;touch-action:none;}
.imgLightbox img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 4px 30px rgba(0,0,0,0.5);transition:none;user-select:none;-webkit-user-drag:none;transform-origin:center center;}
.fl{float:left;}
.fr{float:right;}

.bg1{background:royalblue;color:white;}
.bg2{background:red;color:white;}
.bg3{background:purple;color:white;}
.bg4{background:green;color:white;}

/* 定义关键帧动画 */  
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.emojiBtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;cursor:pointer;font-size:20px;border-radius:5px;user-select:none;}
.emojiBtn:hover{background:#e8e8e8;}
.emojiPicker{display:none;position:fixed;z-index:99998;bottom:0;left:0;width:320px;max-width:90vw;background:white;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.2);overflow:hidden;}
.emojiPickerHeader{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:13px;font-weight:bold;border-bottom:1px solid #eee;background:#f8f8f8;}
.emojiPickerClose{cursor:pointer;font-size:18px;color:#999;width:24px;height:24px;text-align:center;line-height:24px;border-radius:4px;}
.emojiPickerClose:hover{background:#e0e0e0;color:#333;}
.emojiPickerGrid{display:flex;flex-wrap:wrap;padding:6px;max-height:200px;overflow-y:auto;}
.emojiItem{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:20px;cursor:pointer;border-radius:4px;user-select:none;}
.emojiItem:hover{background:#e8e8f8;}