/* ========== 原版正常基底 + 微信风完美美化版 ========== */
body{
    margin:0;
    padding:0;
    font-size:15px;
    background-color:#ededed;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
}
input:focus,textarea:focus{outline:none;outline-offset:0;}

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

/* 滚动条优化 */
::-webkit-scrollbar {width:4px;}
::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.15);border-radius:4px;}
::-webkit-scrollbar-track {background:transparent;}
::-ms-scrollbar {width:10px;}
::-ms-scrollbar-thumb {background-color:#ccc;border-radius:10px;}

.content{width:100%;height:100vh;overflow:hidden;}

/* 顶部导航 微信风格 */
.contentTop{
    width:100%;
    height:44px;
    line-height:44px;
    text-align:center;
    font-size:17px;
    font-weight:500;
    background:#f7f7f7;
    color:#000;
    border-bottom:1px solid #e5e5e5;
    box-sizing:border-box;
    border-radius:0;
    box-shadow:none;
}

.contentMiddle{
    width:100%;
    height:calc(100vh - 110px);
    padding-bottom:30px;
    overflow-x:hidden;
    overflow-y:auto;
    background:#ededed;
}

/* 快捷咨询按钮 修复+美化 */
.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 #e5e5e5;
    border-right:1px solid #e5e5e5;
    border-radius:0px 15px 0 0;
    background:#ffffff;
    overflow-x:hidden;
}
.contentMiddle2_1,.contentMiddle2_bt{
    float:left;
    margin:5px 5px 0 5px;
    padding:2px 8px 2px 8px;
    border:1px solid #e5e5e5;
    border-radius:6px;
    line-height:20px;
    font-size:13px;
    box-sizing:border-box;
    cursor:pointer;
    background:#f8f8f8;
}
.contentMiddle2_1:hover,.contentMiddle2_bt:hover{
    box-shadow:0 0 4px 1px rgba(7,193,96,0.3);
    background:#07c160;
    color:white;
    border-color:#07c160;
}

/* 底部输入栏 微信风 */
.contentBottom{
    position:fixed;
    bottom:0px;
    left:0px;
    z-index:1;
    width:100%;
    height:50px;
    overflow:hidden;
    background:#f7f7f7;
    font-size:15px;
    color:#666;
    border-top:1px solid #e5e5e5;
}
.textContent{
    width:calc(100% - 135px);
    margin:5px 0 5px 5px;
    height:40px;
    padding:10px 12px;
    resize:none;
    font-size:14px;
    line-height:15px;
    border:1px solid #e5e5e5;
    border-radius:18px;
    background:#ffffff;
    box-sizing:border-box;
}
.textContent:hover{
    box-shadow:0 0 4px 1px rgba(7,193,96,0.25);
}

/* 发送按钮 微信绿 */
.sendTextButton{
    position:absolute;
    z-index:2;
    top:5px;
    right:10px;
    width:50px;
    height:40px;
    line-height:38px;
    text-align:center;
    border:none;
    border-radius:18px;
    background:#07c160;
    color:white;
    cursor:pointer;
    box-sizing:border-box;
    font-size:15px;
    font-weight:normal;
}
.sendTextButton:hover{
    background:#06b058;
}

/* 图片按钮容器 */
.sendPictureButton{
    position:absolute;
    z-index:2;
    top:5px;
    right:70px;
    width:40px;
    height:40px;
    border:none;
    border-radius:18px;
    box-sizing:border-box;
    overflow:hidden;
    cursor:pointer;
    background:#f2f2f2;
}
/* 透明上传层 锁定范围 绝不遮挡输入框 */
.sendPicture{
    position:absolute;
    z-index:99;
    top:5px;
    right:70px;
    width:40px;
    height:40px;
    border-radius:18px;
    box-sizing:border-box;
    overflow:hidden;
    opacity:0;
    cursor:pointer;
    border:none;
}

.textContent:focus{
    border:1px solid #07c160;
    box-sizing:border-box;
}

/* 消息动画 */
.messageStyle{
    margin:12px 0;
    height:auto;
    overflow:hidden;
    opacity:0;
    animation:fadeIn 0.3s ease-in-out forwards;
}
@keyframes fadeIn {
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
}

/* 左侧客服消息 */
.messageStyleLeft1{float:left;width:40px;}
.messageStyleLeft1P{width:40px;height:40px;border-radius:4px;}
.messageStyleLeft2{
    position:relative;
    float:left;
    margin:0px 0 0 12px;
    min-width:20px;
    max-width:calc(100vw - 130px);
}
.messageStyleLeft2T{
    padding:9px 12px;
    background:#ffffff;
    border-radius:6px;
    text-overflow:ellipsis;
    white-space:pre-wrap;
    word-break:break-all;
    overflow-wrap:break-word;
    min-height:20px;
    box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

/* 右侧自己消息 微信经典绿 */
.messageStyleRight1{float:right;width:40px;}
.messageStyleRight1P{width:40px;height:40px;border-radius:4px;}
.messageStyleRight2{
    position:relative;
    float:right;
    margin:0px 12px 0 0;
    min-width:20px;
    max-width:calc(100vw - 130px);
    text-align:left;
}
.messageStyleRight2T{
    padding:9px 12px;
    background:#95ec69;
    border-radius:6px;
    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 #95ec69;
    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;
}

/* 图片自适应 完美显示（含欢迎图） */
.messageStyleLeft2T img,.messageStyleRight2T img{
    max-width:100%;
    height:auto;
    display:block;
    border-radius:6px;
}