*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Arial,Microsoft YaHei;

}

/* 圆形客服按钮 */

#chat-toggle{

position:fixed;

right:25px;
bottom:25px;

width:68px;
height:68px;

border-radius:50%;

background:#2979ff;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

box-shadow:0 8px 25px rgba(0,0,0,.15);

z-index:999999;
}

#chat-toggle svg{

width:34px;
height:34px;

}

/* 聊天窗口 */

#chat-box{

position:fixed;

right:25px;
bottom:110px;

width:400px;
height:450px;

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 10px 35px rgba(0,0,0,.15);

display:flex;
flex-direction:column;

z-index:999999;
}

/* 顶部 */

#chat-header{

height:78px;

background:#2979ff;

color:#fff;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 18px;

font-size:18px;

font-weight:600;
}

.header-left{

display:flex;
align-items:center;
gap:10px;

}

.online-dot{

width:12px;
height:12px;

border-radius:50%;

background:#29e35d;
}

.header-right{

display:flex;
gap:15px;

font-size:24px;

cursor:pointer;
}

/* 内容区 */

#chat-body{

flex:1;

background:#f3f5f8;

padding:15px;

overflow-y:auto;
}

/* 消息 */

.msg{

display:flex;

margin-bottom:15px;
}

.msg.user{

justify-content:flex-end;
}

.msg.admin{

justify-content:flex-start;
}

.bubble{

padding:10px 15px;

border-radius:14px;

max-width:70%;

word-break:break-all;
}

.user .bubble{

background:#2979ff;

color:#fff;
}

.admin .bubble{

background:#fff;

border:1px solid #e5e5e5;
}

/* 底部 */

#chat-footer{

height:75px;

display:flex;

border-top:1px solid #eee;
}

#chat-input{

flex:1;

border:none;

resize:none;

outline:none;

padding:18px;

font-size:16px;
}

#send-btn{

width:85px;

border:none;

background:#2979ff;

color:#fff;

font-size:24px;

cursor:pointer;
}

#send-btn:hover{

background:#1f66e5;
}

/* 手机 */

@media(max-width:768px){

#chat-box{

width:100%;
height:100%;

right:0;
bottom:0;

border-radius:0;
}

}


















#faq-box{

    padding:15px;

    background:#f7f9fc;

    border-bottom:1px solid #edf1f7;

}

.faq-title{

    font-size:18px;

    font-weight:700;

    color:#222;

    margin-bottom:15px;

}

.faq-item{

    background:#fff;

    border:1px solid #e8edf5;

    border-radius:14px;

    margin-bottom:12px;

    overflow:hidden;

    transition:.25s;
}

.faq-item:hover{

    border-color:#2979ff;

    box-shadow:0 4px 12px rgba(41,121,255,.08);

}

.faq-question{

    padding:16px 18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:15px;

    font-weight:500;

}

.faq-icon{

    font-size:22px;

    color:#a0a8b8;
}

.faq-answer{

    display:none;

    padding:15px 18px;

    border-top:1px solid #eef2f8;

    background:#fafcff;

    color:#555;

    line-height:1.8;

    font-size:14px;

}

.faq-answer a{

    color:#2979ff;

    text-decoration:none;

    font-weight:600;

}

.faq-answer a:hover{

    text-decoration:underline;

}