*{
box-sizing:border-box;
}


body{

margin:0;

height:100vh;

font-family:"Microsoft YaHei";

background:linear-gradient(
135deg,
#ffe8f2,
#e6dcff
);

}


.notice{

position:absolute;

top:70px;

left:50%;

transform:translateX(-50%);

width:520px;

padding:20px;

background:white;

border-radius:25px;

box-shadow:0 10px 40px #ccc;

}


.item{

height:45px;

margin:10px 0;

display:flex;

align-items:center;

padding-left:18px;

border-radius:12px;

background:linear-gradient(
90deg,
#c7ffff,
#ffd9e7
);

font-size:16px;

}



.service-btn{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

cursor:pointer;

box-shadow:0 5px 20px #aaa;

}



.chat{

display:none;

position:fixed;

right:30px;

bottom:100px;

width:360px;

height:480px;

background:white;

border-radius:20px;

box-shadow:0 10px 40px #aaa;

overflow:hidden;

}



.chat-title{

height:100px;

background:#1976ff;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

}



.message{

padding:25px;

}



.chat input{

position:absolute;

bottom:20px;

left:20px;

width:320px;

height:45px;

border-radius:15px;

border:2px solid #448aff;

padding:10px;

}



@media(max-width:700px){

.notice{

width:90%;

}


.chat{

width:90%;

right:5%;

}


.chat input{

width:80%;

}

}