*{
box-sizing:border-box;
}


html,body{

margin:0;

height:100%;

font-family:
-apple-system,
BlinkMacSystemFont,
"Microsoft YaHei";

background:#e9edf3;

}


.app{

height:100vh;

max-width:520px;

margin:auto;

background:#f5f6f8;

display:flex;

flex-direction:column;

}



.header{

height:68px;

background:white;

display:flex;

align-items:center;

padding:0 18px;

box-shadow:0 2px 12px rgba(0,0,0,.06);

}



.avatar{

width:45px;

height:45px;

border-radius:50%;

overflow:hidden;

background:#1677ff;

display:flex;

align-items:center;

justify-content:center;

margin-right:12px;

}



.image-box img{

width:100%;

height:auto;

max-width:100%;

display:block;

border-radius:16px;

}



.title{

font-size:17px;

font-weight:600;

}



.status{

font-size:12px;

color:#888;

margin-top:4px;

}



.status span{

display:inline-block;

width:8px;

height:8px;

background:#20c997;

border-radius:50%;

}



.chat{

flex:1;

overflow-y:auto;

padding:20px 15px;

}



.message{

margin-bottom:18px;

}



.time{

font-size:12px;

color:#999;

margin-bottom:6px;

}



.bubble{

display:inline-block;

background:white;

padding:14px 16px;

border-radius:4px 20px 20px 20px;

box-shadow:0 4px 12px rgba(0,0,0,.05);

font-size:15px;

line-height:1.6;

}


.image-box{

padding:6px;

background:white;

border-radius:18px;

width:100%;

}



.image-box img{

width:100%;

max-width:330px;

border-radius:16px;

display:block;

}



.input-area{

height:65px;

background:white;

display:flex;

gap:10px;

padding:10px;

padding-bottom:calc(10px + env(safe-area-inset-bottom));

}



.input-area input{

flex:1;

border:0;

background:#f1f2f4;

border-radius:30px;

padding:0 18px;

font-size:15px;

outline:none;

}



.input-area button{

width:70px;

border:0;

border-radius:30px;

background:#1677ff;

color:white;

font-size:14px;

}

.qq-box{

padding:12px 15px;

background:#f5f6f8;

}


.qq-box a{

display:block;

height:48px;

line-height:48px;

text-align:center;

background:#1677ff;

color:white;

font-size:16px;

font-weight:bold;

border-radius:25px;

text-decoration:none;

box-shadow:0 5px 15px rgba(22,119,255,.25);

}


.qq-box a:active{

opacity:.8;

}