*{margin: 0; padding: 0; box-sizing: border-box;}
.text-center::after{content: ' '; display: inline-block; width: 0; height: 100%; vertical-align: middle; margin-top: 4px;}
body{font-size: 15px; background-color: #eef1f6; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased;}
.clearfix::after{ content:""; display:block; clear:both;}
input, textarea{border: none;}
input:focus, textarea:focus{outline: none; outline-offset: 0;}
.off{display: none;}

.service{width: 100%; max-width: 640px; height: 100%; position: fixed; left: 0; right: 0; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.pc-service{width: 372px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}

/* 顶部栏：品牌蓝渐变 */
.msg-head{min-height: 50px; height: auto; padding: 4px 0 6px; background: linear-gradient(135deg, #4E8DFF 0%, #6EA5FF 100%); color: #fff; font-size: 17px; text-align: center; position: relative; box-shadow: 0 2px 8px rgba(78,141,255,0.25); z-index: 5;}
.msg-head a{width: 44px; height: 44px; line-height: 44px; position: absolute; left: 2px; top: 0; text-decoration: none; color: #fff;}
.msg-head a i{font-size: 24px;}
.msg-head .tha{height: 22px; line-height: 22px;}
.msg-head .thb{height: 20px; line-height: 20px; font-size: 13px; color: #eaf0ff;}
.connection-state{position: absolute; left: 12px; right: 12px; top: 58px; z-index: 20; padding: 8px 12px; border-radius: 10px; background: #fff1f0; color: #d4380d; text-align: center; font-size: 13px; box-shadow: 0 3px 10px rgba(0,0,0,.08);}
.connection-state.off{display: none;}
.remark-on{height: 24px; line-height: 24px; position: absolute; top: 13px; right: 48px; padding: 0 8px; border: 1px solid rgba(255,255,255,0.7); border-radius: 12px; color: #fff; font-size: 12px; cursor: pointer;}
.remark-on:hover{background-color: rgba(255,255,255,0.18);}
.reply-on{width: 44px; height: 44px; line-height: 44px; position: absolute; top: 0; right: 6px; text-decoration: none; color: #fff; cursor: pointer;}
.reply-on i{font-size: 28px;}

/* 消息区 */
.msg-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; background-color: #f2f4f8; padding: 12px 12px 0; line-height: 1.4; -webkit-box-sizing: border-box; box-sizing: border-box; overflow-y: auto;}
.msg{margin-bottom: 12px;}
.msg:last-of-type{margin-bottom: 16px}
.msg .img1, .msg .img2{width: 44px; height: 44px; float: left;}
.msg .img1 img, .msg .img2 img{width: 100%; height: 100%; border-radius: 50%; object-fit: cover;}
.msg .img2{display: none;}
.msg .content{max-width: 68%; float: left; border: 1px solid #e4e7ee; border-radius: 12px; background-color: #fff; margin: 6px 0 0 12px; padding: 9px 11px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; text-align: justify; box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
.content .indicate{width: 0; height: 0; border: 10px solid; border-color: transparent; position: absolute; top: 12px;}
.msg .content .left-indicate{border-right-color: #fff; left: -19px;}
.msg .content .right-indicate{display: none;}
.msg.on .img1{display: none;}
.msg.on .img2{float: right; width: 44px; height: 44px; display: block;}
.msg.on .content{float: right; margin: 6px 12px 0 0; background: linear-gradient(135deg, #4E8DFF 0%, #6EA5FF 100%); border: 1px solid transparent; color: #fff; box-shadow: 0 1px 4px rgba(78,141,255,0.3);}
.msg.on .content .left-indicate{display: none;}
.msg.on .content .right-indicate{border-left-color: #6EA5FF; right: -19px; display: block;}
.msg-box p{margin-top: -6px}

/* 撤回提示 / 消息操作按钮 */
.msg-recall-wrap{text-align: center;}
.msg-recall{display: inline-block; margin: 4px auto; padding: 4px 12px; font-size: 12px; color: #8a92a3; background-color: #eceff4; border-radius: 10px;}
.msg .msg-act{float: right; height: 30px; line-height: 30px; margin-top: 8px; font-size: 12px;}
.msg .msg-act a{display: inline-block; padding: 0 9px; color: #8a92a3; background-color: #eef1f6; border-radius: 10px; text-decoration: none;}
.msg .msg-act a:hover{color: #ff4d4f; background-color: #ffecec;}

/* 快捷回复面板 */
.reply{width: 100%; background-color: #fff; position: absolute; top: 50px; bottom: 54px; right: 0; overflow-y: auto; z-index: 8;}
.reply .reply-item{width: 100%; height: 34px; line-height: 34px; padding: 0 12px; background-color: #fff; border-bottom: 1px solid #f0f1f5; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333;}
.reply .reply-item:hover{background-color: #f4f7ff;}
.reply .reply-item:last-child{border-bottom: none;}
/* 快捷回复：搜索框 + 条目布局（2026-09-29） */
.reply .reply-search{padding: 6px 8px; background-color: #fff; border-bottom: 1px solid #f0f1f5; position: sticky; position: -webkit-sticky; top: 0; z-index: 2;}
.reply .reply-search input{width: 100%; height: 30px; line-height: 30px; padding: 0 10px; font-size: 13px; color: #333; border: 1px solid #e3e6ee; border-radius: 15px; background-color: #f6f7fa;}
.reply .reply-search input:focus{border-color: #4E8DFF; background-color: #fff;}
.reply .reply-item{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.reply .reply-item .ri-txt{-webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;}
.reply .reply-item .ri-send{-webkit-box-flex: 0; -ms-flex: none; flex: none; margin-left: 8px; padding: 0 10px; height: 22px; line-height: 22px; font-size: 12px; color: #4E8DFF; background-color: #eef2ff; border-radius: 11px;}
.reply .reply-item .ri-send:hover{background-color: #4E8DFF; color: #fff;}
.reply-empty{padding: 20px; text-align: center; color: #9aa3b2; font-size: 13px;}

/* 快捷菜单（图片/拉黑） */
.menu{height: 44px; background-color: #fff; border-top: 1px solid #eef0f4; padding: 8px 40px 0 40px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.menu .m-box{width: 36px; height: 30px; line-height: 30px; text-align: center; float: left; margin: 0 14px; cursor: pointer;}
.menu .m-box .icontupian{font-size: 34px; color: #4E8DFF;}
.menu .m-box .iconheimingdan{font-size: 30px; color: #4E8DFF; vertical-align: -6px;}
.menu .m-box .iconhuiyuan{font-size: 29px; color: #4E8DFF; font-weight: bold; vertical-align: -6px;}
.menu .m-box input[type="file"]{display: none;}

/* 输入区 */
.msg-post{height: 56px; background-color: #fff; border-top: 1px solid #eef0f4; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 9px 10px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.msg-post textarea{resize: none; font-size: 15px; line-height: 1.3; padding: 8px 12px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #e3e6ee; border-radius: 18px; background-color: #f6f7fa;}
.msg-post textarea:focus{border-color: #4E8DFF; background-color: #fff;}
.msg-post label{position: absolute; right: 76px; bottom: 8px; height: 38px; line-height: 38px; cursor: pointer;}
.msg-post label .iconfont{font-size: 34px; color: #4E8DFF; vertical-align: -1px;}
.msg-post input[type="file"]{display: none;}
.msg-post .msg-jia{position: absolute; right: 76px; bottom: 6px; height: 38px; line-height: 38px; cursor: pointer;}
.msg-post .msg-jia .iconjia{font-size: 30px; color: #9aa3b2; vertical-align: -1px;}
.msg-post .msg-jia .iconchacha{font-size: 29px; color: #9aa3b2; vertical-align: -1px;}
.msg-post input[type="button"]{padding: 0 18px; font-size: 15px; margin-left: 8px; height: 36px; border: none; background: linear-gradient(135deg, #4E8DFF 0%, #6EA5FF 100%); border-radius: 18px; color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(78,141,255,0.3);}
.msg-post .back{width: 52px; line-height: 36px; text-align: center; background-color: #35ace0; border-radius: 18px;}
.msg-post .back a{text-decoration: none; color: inherit;}

/* 会话列表（后台聊天窗口共用） */
.service-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; font-size: 14px; background-color: #f2f4f8; overflow-y: auto; vertical-align: baseline;}
.user-search{height: 48px; padding: 8px 10px; background-color: #f2f4f8; box-sizing: border-box;}
.user-search input{width: 100%; height: 32px; padding: 0 12px; border: 1px solid #e3e8f2; border-radius: 16px; background-color: #fff; color: #333; outline: none; box-sizing: border-box;}
.user-search input:focus{border-color: #4E8DFF; box-shadow: 0 0 0 3px rgba(78,141,255,.12);}
.user-box{padding: 10px 10px 0;}
.user-box a{text-decoration: none; color: inherit;}
.user-list{height: 58px; background-color: #fff; padding: 6px 8px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
.user-list img{width: 44px; height: 44px; border-radius: 50%;}
.user-list .user{margin-left: 8px; padding-top: 4px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0;}
.user-list .user .name{height: 22px; line-height: 22px; font-size: 16px; color: #222; font-weight: 600;}
.user-list .user .name .ison{margin-left: 6px; font-size: 12px; color: #ff9f0a; vertical-align: 1px;}
.user-list .user .last-msg{height: 20px; line-height: 20px; color: #8a92a3; padding-left: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.user-list .user .last-msg .customer-remark{color: #4E8DFF;}
.user-list .user .last-msg .customer-tags{color: #7c5cff;}
.user-list .data{width: 82px; text-align: right;}
.user-list .data .time{height: 22px; line-height: 22px; color: #9aa3b2; font-size: 12px;}
.user-list .data .num{width: 18px; height: 18px; border-radius: 9px; background-color: #ff4d4f; color: #fff; text-align: center; line-height: 18px; font-size: 12px; margin-left: 64px;}
.foot{height: 44px; background-color: #fff; border-top: 1px solid #eef0f4; padding: 6px 8px; display: -webkit-box; display: -ms-flexbox; display: flex;}
.foot > div{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; padding: 1px; margin-right: 6px; background-color: #4E8DFF; border-radius: 8px; color: #fff; text-align: center; line-height: 30px; font-size: 14px;}
.foot a{display: block; height: 100%; text-decoration: none; color: inherit;}

/* PC 双栏 */
.pc-main{width: 1014px; height: 100%; position: fixed; left: 0; right: 0; margin: auto;}
.pc-left{width: 372px; height: 100%; float: left; border: 1px solid #dfe3ec; border-right: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
.pc-right{width: 642px; height: 100%; float: left; border: 1px solid #dfe3ec; -webkit-box-sizing: border-box; box-sizing: border-box;}
/* ===== 表情面板 / 语音按钮（新增） ===== */
.emoji-panel{position: absolute; bottom: 62px; left: 10px; width: 304px; background-color: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 8px; z-index: 30; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.emoji-panel.off{display: none;}
.emoji-panel span{width: 36px; height: 36px; line-height: 36px; text-align: center; font-size: 22px; cursor: pointer; border-radius: 8px;}
.emoji-panel span:hover{background-color: #f0f4ff;}
.msg-tools{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 8px;}
.msg-tools .tool-btn{width: 34px; height: 34px; line-height: 34px; text-align: center; font-size: 20px; cursor: pointer; color: #4E8DFF; border-radius: 8px;}
.msg-tools .tool-btn:hover{background-color: #f0f4ff;}
.msg-tools label{position: static; height: auto; line-height: 1; cursor: pointer;}
.msg-tools label .iconfont{font-size: 24px; color: #4E8DFF;}
.msg-tools .tool-btn.recording{background-color: #ff4d4f; color: #fff;}
.msg-tools input[type="file"]{display: none;}
/* ===== 语音模式：按住说话 / 录音浮层 ===== */
.voice-hold{-webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 36px; line-height: 34px; text-align: center; border: 1px solid #e3e6ee; border-radius: 18px; background-color: #f6f7fa; color: #333; font-size: 15px; margin-right: 8px; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;}
.voice-hold.off{display: none;}
.voice-hold.active{background-color: #dfe8ff; border-color: #4E8DFF; color: #2b6cf6;}
.msg-post textarea.off{display: none;}
.voice-mask{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.35); z-index: 60; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.voice-mask.off{display: none;}
.voice-mask-box{min-width: 190px; padding: 20px 24px; border-radius: 14px; background-color: rgba(0,0,0,0.72); color: #fff; text-align: center;}
.voice-mask.cancel .voice-mask-box{background-color: rgba(255,77,79,0.9);}
.voice-mask-icon{height: 52px; line-height: 52px; font-size: 46px;}
.voice-mask-icon.rec{-webkit-animation: voice-pulse 1.1s infinite; animation: voice-pulse 1.1s infinite;}
@-webkit-keyframes voice-pulse{0%{-webkit-transform:scale(1);}50%{-webkit-transform:scale(1.18);}100%{-webkit-transform:scale(1);}}
@keyframes voice-pulse{0%{transform:scale(1);}50%{transform:scale(1.18);}100%{transform:scale(1);}}
.voice-mask-text{margin-top: 10px; font-size: 15px;}

/* 访客端移动适配 */
.msg .content img{display:block;max-width:100%;height:auto;border-radius:8px;}
.msg .content audio{display:block;max-width:100%;min-width:220px;}
@media (max-width:640px){
    body{background-color:#f2f4f8;}
    .service{max-width:none;width:100%;height:100dvh;height:100vh;padding-bottom:env(safe-area-inset-bottom);}
    .msg-head{padding-top:max(4px, env(safe-area-inset-top));}
    .msg-box{padding:12px 10px 0;-webkit-overflow-scrolling:touch;}
    .msg{margin-bottom:10px;}
    .msg .img1,.msg .img2,.msg.on .img2{width:38px;height:38px;}
    .msg .content{max-width:calc(100% - 68px);margin:4px 0 0 10px;padding:8px 10px;border-radius:11px;word-break:break-word;}
    .msg.on .content{margin:4px 10px 0 0;}
    .msg-post{height:62px;padding:10px 8px;}
    .msg-tools{margin-right:4px;}
    .msg-tools .tool-btn{width:30px;height:34px;line-height:34px;font-size:18px;}
    .msg-tools label .iconfont{font-size:22px;}
    .msg-post textarea{min-width:0;height:38px;padding:9px 10px;font-size:14px;}
    .msg-post input[type="button"]{min-width:54px;padding:0 11px;margin-left:5px;height:38px;font-size:14px;}
    .voice-hold{height:38px;line-height:36px;margin-right:5px;font-size:14px;}
    .emoji-panel{left:8px;right:8px;bottom:68px;width:auto;max-height:255px;overflow-y:auto;padding:7px;}
    .emoji-panel span{width:12.5%;height:34px;line-height:34px;font-size:20px;}
    .connection-state{top:62px;left:8px;right:8px;}
    .msg .content audio{min-width:190px;}
}