/* ============================================
   客服系统 · 简洁高级版
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-size:15px;
    background:#111827;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
}
.clearfix::after{content:"";display:block;clear:both;}

/* ===== 主容器 ===== */
.service{
    width:100%;max-width:460px;
    height:100vh;max-height:100dvh;
    background:#edeef2;
    display:flex;flex-direction:column;
    overflow:hidden;
    box-shadow:0 0 80px rgba(0,0,0,0.3);
}

/* ===== 头部 ===== */
.msg-head{
    height:54px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:#fff;
    font-size:17px;
    font-weight:600;
    text-align:center;
    display:flex;align-items:center;justify-content:center;
    position:relative;flex-shrink:0;
    box-shadow:0 2px 8px rgba(102,126,234,0.25);
}
.msg-head a{
    position:absolute;left:8px;top:50%;transform:translateY(-50%);
    width:36px;height:36px;line-height:36px;
    text-decoration:none;color:rgba(255,255,255,0.85);
    border-radius:50%;transition:background 0.2s;
    text-align:center;
}
.msg-head a:hover{background:rgba(255,255,255,0.12);}
.msg-head a i{font-size:20px;}
.msg-head .tha{font-size:16px;font-weight:600;}
.msg-head .thb{font-size:12px;opacity:0.85;font-weight:400;}

/* ===== 消息区 ===== */
.msg-box{
    flex:1;
    background:linear-gradient(180deg,#e6e9ef 0%,#dce0e6 50%,#d4d8df 100%);
    padding:14px 12px 8px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.msg-box::-webkit-scrollbar{width:4px;}
.msg-box::-webkit-scrollbar-track{background:transparent;}
.msg-box::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:4px;}

/* ===== 消息气泡 ===== */
.msg{margin-bottom:14px;}
.msg:last-of-type{margin-bottom:20px;}
.msg .img1{width:36px;height:36px;float:left;}
.msg .img1 img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.msg .img2{display:none;}

.msg .content{
    max-width:72%;
    float:left;
    padding:10px 14px;
    margin:3px 0 0 10px;
    border-radius:16px 16px 16px 4px;
    background:#fff;
    color:#1a1a2e;
    font-size:15px;
    line-height:1.55;
    word-break:break-word;
    box-shadow:0 2px 4px rgba(0,0,0,0.06);
}
.msg .content img{border-radius:8px;margin-top:3px;display:block;max-width:100%;}
.msg-time{font-size:11px;color:#aaa;margin-top:4px;padding-left:2px;clear:both;}

/* 自己的消息 */
.msg.on .img1{display:none;}
.msg.on .img2{float:right;width:36px;height:36px;display:block;}
.msg.on .img2 img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.msg.on .content{
    float:right;
    margin:3px 10px 0 0;
    border-radius:16px 16px 4px 16px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:#fff;
    box-shadow:0 2px 6px rgba(102,126,234,0.25);
}

.msg-box p{margin-top:-4px;}

/* ===== 输入区 ===== */
input,textarea{border:none;outline:none;}
.msg-post{
    height:52px;
    background:#fff;
    display:flex;align-items:center;
    padding:7px 10px;gap:8px;
    border-top:1px solid #e8e8ec;
    flex-shrink:0;z-index:10;
}
.msg-post textarea{
    resize:none;
    font-size:15px;line-height:1.4;
    padding:9px 42px 9px 14px;
    flex:1;
    border:1px solid #e0e0e8;border-radius:20px;
    background:#f5f6fa;font-family:inherit;
    height:38px;max-height:80px;
    transition:all 0.2s;
}
.msg-post textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.08);background:#fff;}
.msg-post textarea::placeholder{color:#bbb;}
.msg-post label{position:absolute;right:80px;bottom:12px;height:24px;line-height:24px;cursor:pointer;}
.msg-post label i{font-size:22px;color:#888;vertical-align:middle;}
.msg-post label:hover i{color:#667eea;}
.msg-post input[type="file"]{display:none;}
.msg-post input[type="button"]{
    padding:0 16px;height:38px;font-size:15px;
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    border-radius:20px;color:#fff;cursor:pointer;font-weight:500;
    border:none;outline:none;box-shadow:0 2px 6px rgba(102,126,234,0.3);
    transition:all 0.2s;flex-shrink:0;
}
.msg-post input[type="button"]:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.4);}
.msg-post input[type="button"]:active{transform:translateY(0);}

/* ===== PC 客服端 ===== */
.pc-service{width:372px;height:100%;display:flex;flex-direction:column;}
.pc-main{width:1014px;height:100vh;margin:0 auto;background:#f5f6fa;box-shadow:0 0 40px rgba(0,0,0,0.1);display:flex;}
.pc-left{width:372px;flex-shrink:0;border-right:1px solid #e8e8ec;display:flex;flex-direction:column;}
.pc-right{flex:1;min-width:0;}
.service-box{flex:1;font-size:14px;background:#f5f6fa;overflow-y:auto;}
.service-box::-webkit-scrollbar{width:4px;}
.service-box::-webkit-scrollbar-thumb{background:#c8c8d0;border-radius:4px;}
.user-box{padding:12px;}
.user-box a{text-decoration:none;color:inherit;}
.user-list{background:#fff;padding:12px;display:flex;margin-bottom:8px;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:all 0.2s;border:1px solid transparent;}
.user-list:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);border-color:#667eea;transform:translateX(2px);}
.user-list img{width:44px;height:44px;border-radius:50%;flex-shrink:0;}
.user-list .user{margin-left:10px;min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center;}
.user-list .user .name{font-size:15px;color:#2d3436;font-weight:600;}
.user-list .user .name .ison{margin-left:6px;font-size:11px;color:#fff;background:#e17055;padding:1px 8px;border-radius:10px;vertical-align:2px;font-weight:400;}
.user-list .user .last-msg{font-size:13px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-list .data{width:80px;text-align:right;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;}
.user-list .data .time{font-size:11px;color:#aaa;}
.user-list .data .num{min-width:20px;height:20px;border-radius:10px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;text-align:center;line-height:20px;font-size:11px;font-weight:600;padding:0 6px;margin-top:2px;}
.foot{height:44px;background:#fff;padding:6px 12px;display:flex;border-top:1px solid #eee;flex-shrink:0;gap:8px;}
.foot>div{flex:1;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;color:#fff;text-align:center;line-height:32px;font-size:13px;cursor:pointer;transition:all 0.2s;}
.foot>div:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(102,126,234,0.3);}
.foot a{display:block;height:100%;text-decoration:none;color:inherit;}

/* ===== 动画 ===== */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.msg{animation:fadeIn 0.25s ease-out;}

/* PC 端居中显示 */
@media(min-width:768px){
    body{padding:20px 0;}
    .service{border-radius:20px;height:calc(100vh - 40px);max-height:900px;}
}