.ai-kefu-widget{
position:fixed;
right:18px;
top:50%;
z-index:9999998;
transform:translateY(-50%);
font-family:Arial,"Microsoft YaHei",SimSun,sans-serif;
}
.ai-kefu-entry{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
}
.ai-kefu-trigger,
.ai-kefu-backtop{
border:0;
cursor:pointer;
}
.ai-kefu-trigger{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
width:88px;
padding:10px 8px 12px;
border-radius:24px;
background:linear-gradient(180deg,#ffffff 0%,#eef6ff 100%);
box-shadow:0 10px 28px rgba(23,86,170,.18);
color:#1e4f8f;
box-sizing:border-box;
}
.ai-kefu-trigger:hover{
background:linear-gradient(180deg,#ffffff 0%,#e5f1ff 100%);
}
.ai-kefu-avatar{
display:flex;
align-items:center;
justify-content:center;
width:48px;
height:48px;
border-radius:50%;
background:linear-gradient(180deg,#f0f8ff 0%,#dcecff 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 6px 14px rgba(79,141,255,.18);
}
.ai-kefu-avatar-mascot{
position:relative;
overflow:visible;
}
.ai-kefu-avatar-mascot .halo{
position:absolute;
top:-7px;
left:50%;
width:14px;
height:14px;
margin-left:-7px;
border-radius:50% 50% 50% 0;
background:linear-gradient(180deg,#8af19e 0%,#40c463 100%);
transform:rotate(-35deg);
box-shadow:0 2px 4px rgba(58,163,84,.18);
}
.ai-kefu-avatar-mascot .halo:after{
content:"";
position:absolute;
left:4px;
top:4px;
width:4px;
height:4px;
border-radius:50%;
background:rgba(255,255,255,.55);
}
.ai-kefu-avatar-mascot .face{
position:relative;
display:block;
width:30px;
height:24px;
margin-top:-2px;
border-radius:16px 16px 13px 13px;
background:linear-gradient(180deg,#fefefe 0%,#cfe4ff 100%);
border:1px solid #b9d6ff;
}
.ai-kefu-avatar-mascot .face:before,
.ai-kefu-avatar-mascot .face:after{
content:"";
position:absolute;
top:9px;
width:4px;
height:6px;
border-radius:50%;
background:#5c78a6;
}
.ai-kefu-avatar-mascot .face:before{
left:9px;
}
.ai-kefu-avatar-mascot .face:after{
right:9px;
}
.ai-kefu-avatar-mascot .mouth{
position:absolute;
left:50%;
bottom:4px;
width:10px;
height:5px;
margin-left:-5px;
border-bottom:2px solid #f48fa7;
border-radius:0 0 10px 10px;
}
.ai-kefu-avatar-mascot .body{
display:block;
width:20px;
height:12px;
margin:2px auto 0;
border-radius:10px 10px 9px 9px;
background:linear-gradient(180deg,#5d9cff 0%,#3a74df 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.ai-kefu-avatar-mascot .body:after{
content:"";
display:block;
width:8px;
height:8px;
margin:2px auto 0;
border-radius:50%;
background:rgba(255,255,255,.65);
}
.ai-kefu-trigger-text{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
line-height:1.45;
text-align:center;
}
.ai-kefu-trigger-title{
font-size:14px;
font-weight:700;
color:#1f3f68;
}
.ai-kefu-trigger-subtitle{
font-size:12px;
color:#5e7492;
max-width:56px;
}
.ai-kefu-backtop{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:50%;
background:#ffffff;
box-shadow:0 8px 18px rgba(16,49,91,.14);
color:#3b5f92;
font-size:18px;
font-weight:700;
}
.ai-kefu-panel{
position:fixed;
right:84px;
top:50%;
display:none;
width:380px;
height:640px;
margin-top:-320px;
background:#ffffff;
border:1px solid #dfe7f2;
border-radius:18px;
box-shadow:0 22px 54px rgba(17,48,87,.22);
overflow:hidden;
}
.ai-kefu-widget.open .ai-kefu-panel{
display:flex;
flex-direction:column;
}
.ai-kefu-mask{
display:none;
}
.ai-kefu-panel-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:16px 18px;
background:linear-gradient(180deg,#f5faff 0%,#eaf3ff 100%);
border-bottom:1px solid #dbe7f5;
}
.ai-kefu-panel-title{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.ai-kefu-panel-avatar{
display:flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(180deg,#f1f8ff 0%,#d7e9ff 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px rgba(79,141,255,.16);
}
.ai-kefu-panel-name{
font-size:18px;
font-weight:700;
color:#1f2d3d;
}
.ai-kefu-panel-tip{
font-size:12px;
color:#687b93;
}
.ai-kefu-close{
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border:0;
border-radius:50%;
background:#ffffff;
color:#5c6f88;
font-size:20px;
cursor:pointer;
}
.ai-kefu-body{
flex:1 1 auto;
padding:18px;
background:#f7fafe;
overflow-y:auto;
}
.ai-kefu-welcome{
padding:18px;
margin-bottom:14px;
background:#ffffff;
border:1px solid #e7edf5;
border-radius:16px;
box-shadow:0 6px 18px rgba(32,69,111,.06);
}
.ai-kefu-welcome-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}
.ai-kefu-welcome-main{
flex:1 1 auto;
min-width:0;
}
.ai-kefu-welcome h3{
margin:0 0 10px;
font-size:24px;
line-height:1.4;
color:#1f2d3d;
}
.ai-kefu-welcome p{
margin:0;
font-size:14px;
line-height:1.9;
color:#53657b;
}
.ai-kefu-quick{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:14px;
}
.ai-kefu-quick button{
padding:8px 12px;
border:1px solid #d7e4f2;
border-radius:999px;
background:#f5faff;
color:#24548d;
font-size:13px;
cursor:pointer;
}
.ai-kefu-hero{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
width:94px;
height:94px;
border-radius:24px;
background:linear-gradient(180deg,#f5fbff 0%,#e7f0ff 100%);
}
.ai-kefu-hero .ai-kefu-avatar-mascot{
transform:scale(1.65);
}
.ai-kefu-messages{
display:flex;
flex-direction:column;
gap:12px;
}
.ai-kefu-message{
display:flex;
}
.ai-kefu-message.user{
justify-content:flex-end;
}
.ai-kefu-message.assistant{
justify-content:flex-start;
}
.ai-kefu-bubble{
max-width:85%;
padding:12px 14px;
border-radius:14px;
font-size:14px;
line-height:1.8;
word-break:break-word;
white-space:pre-wrap;
}
.ai-kefu-message.assistant .ai-kefu-bubble{
background:#ffffff;
border:1px solid #e1e8f1;
color:#233547;
}
.ai-kefu-message.user .ai-kefu-bubble{
background:linear-gradient(180deg,#4f8dff 0%,#2c70de 100%);
color:#ffffff;
}
.ai-kefu-message.loading .ai-kefu-bubble{
color:#67809e;
}
.ai-kefu-panel-footer{
padding:14px 16px 16px;
border-top:1px solid #dfe7f2;
background:#ffffff;
}
.ai-kefu-textarea{
width:100%;
height:112px;
padding:12px 14px;
border:1px solid #d8e2ee;
border-radius:14px;
resize:none;
outline:none;
box-sizing:border-box;
font-size:14px;
line-height:1.8;
color:#203245;
background:#fbfdff;
}
.ai-kefu-textarea:focus{
border-color:#8fb8ea;
background:#ffffff;
}
.ai-kefu-tools{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:10px;
}
.ai-kefu-actions{
display:flex;
gap:10px;
margin-top:10px;
}
.ai-kefu-action-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:38px;
padding:0 14px;
border:1px solid #d7e2ee;
border-radius:10px;
background:#f7fbff;
color:#244c84;
font-size:13px;
font-weight:700;
cursor:pointer;
text-decoration:none;
box-sizing:border-box;
}
.ai-kefu-action-btn.primary{
border-color:#ffb464;
background:linear-gradient(180deg,#fff5e7 0%,#ffe3bd 100%);
color:#9b5200;
}
.ai-kefu-action-btn.success{
border-color:#8dd0a2;
background:linear-gradient(180deg,#edfdf2 0%,#d6f5e0 100%);
color:#1f8050;
}
.ai-kefu-action-status{
display:none;
margin-top:8px;
font-size:12px;
line-height:1.7;
color:#50708f;
}
.ai-kefu-action-status.show{
display:block;
}
.ai-kefu-count{
font-size:12px;
color:#7a8da5;
}
.ai-kefu-send{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:96px;
height:40px;
padding:0 16px;
border:0;
border-radius:10px;
background:linear-gradient(180deg,#63a1ff 0%,#2f75e2 100%);
color:#ffffff;
font-size:14px;
font-weight:700;
cursor:pointer;
}
.ai-kefu-send:disabled{
opacity:.6;
cursor:not-allowed;
}
.ai-kefu-footer-links{
display:flex;
flex-wrap:wrap;
gap:10px 12px;
margin-top:10px;
font-size:12px;
color:#7a8da5;
}
.ai-kefu-footer-links a{
color:#2b5d99;
text-decoration:none;
}
@media (max-width:768px){
.ai-kefu-widget{
right:12px;
bottom:16px;
top:auto;
transform:none;
}
.ai-kefu-entry{
gap:10px;
}
.ai-kefu-trigger{
padding:8px;
border-radius:50%;
}
.ai-kefu-trigger-text{
display:none;
}
.ai-kefu-backtop{
width:38px;
height:38px;
font-size:16px;
}
.ai-kefu-panel{
right:0;
left:0;
top:auto;
bottom:0;
width:auto;
height:88vh;
margin-top:0;
border-radius:18px 18px 0 0;
}
.ai-kefu-mask{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
display:none;
background:rgba(7,25,48,.28);
z-index:9999997;
}
.ai-kefu-widget.open .ai-kefu-mask{
display:block;
}
.ai-kefu-welcome h3{
font-size:21px;
}
.ai-kefu-welcome-head{
display:block;
}
.ai-kefu-hero{
width:78px;
height:78px;
margin:0 0 12px auto;
}
.ai-kefu-actions{
display:block;
}
.ai-kefu-action-btn{
display:block;
width:100%;
margin-bottom:10px;
}
}