*{margin: 0; padding: 0;}
body{font-size: 15px; background-color: #f3f7f9; font-family: "Microsoft YaHei","宋体", Arial, "新宋体";}
.clearfix::after{ content:""; display:block; clear:both;}
.service{width: 100%; max-width: 640px; height: 100%; position: fixed; left: 0; right: 0; margin:auto; display: flex; flex-direction: column;}

/* 顶部 */
.msg-head{height: auto; min-height: 100px; background: linear-gradient(90deg, #f57c2f 0%, #f3a633 55%, #f6b33a 100%); color: #fff; padding: 20px 14px 12px; box-sizing: border-box;}
.msg-head .top-bar{display:flex; align-items:center; justify-content: space-between; height: 30px; margin-bottom: 12px;}
.msg-head .back-icon{color:#fff; text-decoration:none; display:flex; align-items:center;}
.msg-head .back-icon i{font-size:24px;}


.msg-head .kefu-info{display:flex; align-items:center;}
.msg-head .kefu-avatar-wrap{position:relative; width:58px; height:58px; margin-right: 12px; flex:0 0 58px;}
.msg-head .kefu-avatar{width:58px; height:58px; border-radius:50%; border: 2px solid rgba(255,255,255,0.45); object-fit:cover; display:block;}

.msg-head .kefu-text-info{display:flex; flex-direction:column;}
.msg-head .kefu-name-row{display:flex; align-items:center; gap:8px; margin-bottom: 4px;}
.msg-head .vip-tag{background:#fff; color:#f3a633; font-size:10px; padding: 2px 5px; border-radius: 3px; font-weight: 700; line-height:1;}
.msg-head .kefu-name{font-size:18px; font-weight:600; letter-spacing:0.2px; white-space:nowrap;}
.msg-head .kefu-motto{font-size:13px; opacity:0.9; line-height: 1.25;}

/* 公告条 */
.notice-bar{background: linear-gradient(180deg, #fbe6e6 0%, #fdf1f1 100%); height: 40px; display:flex; align-items:center; padding: 0 12px; box-sizing:border-box; border-bottom:1px solid #f6d5d5; border-radius: 0 0 10px 10px;}
.notice-bar .icon-notification{font-size: 18px; color:#e24a49; margin-right: 8px;}
.notice-bar marquee{flex:1; color:#e24a49; font-size:14px; font-weight: 600;}
.notice-bar .notice-actions{display:flex; align-items:center; gap:8px;}
.notice-bar .notice-btn{background:#f5f5f5; border:1px solid #d8d8d8; color:#333; font-size:13px; padding: 2px 14px; border-radius: 16px; height: 26px; line-height: 22px; box-sizing:border-box;}
.notice-bar .close-notice{font-size:22px; color:#000; line-height:1; font-weight:900; margin-left: 2px;}

/* 消息区 */
.msg-box{flex:1; overflow-y:auto; padding: 14px 12px; box-sizing:border-box;}
.system-tip{text-align:center; margin: 10px 0 14px;}
.system-tip span{display:inline-block; background: rgba(0,0,0,0.06); color:#8b8b8b; font-size:12px; padding: 6px 18px; border-radius: 18px;}

.msg-card-welcome{width: 230px; margin: 10px auto 18px; background:#fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 18px 12px 14px; position: relative; text-align:center;}
.msg-card-welcome .card-avatar{width: 54px; height: 54px; border-radius:50%; overflow:hidden; position:absolute; left:50%; top: -27px; transform: translateX(-50%); border: 3px solid #fff; background:#fff;}
.msg-card-welcome .card-avatar img{width:100%; height:100%; object-fit:cover;}
.msg-card-welcome .card-content{padding-top: 18px;}
.msg-card-welcome .card-title{font-size:18px; color:#222; margin-bottom: 6px;}
.msg-card-welcome .card-subtitle{font-size:14px; color:#999;}

.msg-item{display:flex; align-items:flex-start; margin: 16px 0;}
.msg-item .msg-body{flex:1; max-width: 78%;}

.msg-item .avatar-wrap{position:relative; width:46px; height:46px; flex:0 0 46px;}
.msg-item .avatar-wrap img{width:46px; height:46px; border-radius:50%; object-fit:cover; display:block;}

.msg-item.left .msg-body{margin-left: 10px;}
.msg-item.right{justify-content:flex-end;}
.msg-item.right .msg-body{max-width: 62%; display:flex; flex-direction:column; align-items:flex-end;}

.msg-meta{display:flex; align-items:center; gap:8px; font-size:12px; color:#999; margin-bottom: 6px;}
.official-tag{background:#f3a633; color:#fff; font-size:10px; padding: 1px 6px; border-radius: 3px; height: 16px; line-height: 16px;}
.kefu-nickname{color:#666;}

.bubble{background:#fff; border-radius: 6px; padding: 12px 14px; font-size:16px; color:#333; box-shadow: 0 1px 4px rgba(0,0,0,0.06); word-break: break-all;}
.msg-item.right .bubble{background:#0091ff; color:#fff; box-shadow: 0 1px 4px rgba(0,0,0,0.08);}

.msg-status{font-size: 12px; color:#e46a3d; margin-top: 6px;}

/* 底部输入 */
.msg-post{background:#f8f8f8; border-top:1px solid #e9e9e9; padding: 10px 12px; box-sizing:border-box;}
.msg-post .input-row{display:flex; align-items:center; gap: 12px;}
.msg-post .input-wrap{flex:1; background:#fff; border:1px solid #e2e2e2; border-radius: 6px; height: 44px; display:flex; align-items:center; padding: 0 12px; box-sizing:border-box;}
.msg-post textarea{width:100%; height: 26px; resize:none; font-size:16px; background:transparent; color:#333;}
.msg-post textarea::placeholder{color:#aaa;}
.msg-post .btn-send-wrap{width: 70px;}
.msg-post .btn-send{width:100%; height: 40px; border:none; border-radius: 20px; background:#e1e1e1; color:#fff; font-size:16px;}

.msg-post .bottom-row{display:flex; align-items:center; justify-content: space-between; margin-top: 12px; padding: 0 2px;}
.msg-post .post-icons{display:flex; align-items:center; gap: 18px;}
.msg-post .post-icons i{font-size:28px; color:#666;}


input, textarea{border:none;}
input:focus, textarea:focus{outline:none;}