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

body{

    background:transparent;
    overflow:hidden;

    font-family:Arial,Helvetica,sans-serif;

}

#chat{

    position:absolute;

    left:25px;

    bottom:25px;

    width:420px;

}

.message{

    display:flex;

    align-items:flex-start;

    margin-top:12px;

    opacity:0;

    transform:translateX(-40px);

    animation:slideIn .45s forwards;

}

.avatar{

    width:48px;

    height:48px;

    border-radius:50%;

    margin-right:10px;

    object-fit:cover;

    border:2px solid white;

}

.box{

    background:rgba(0,0,0,.75);

    color:white;

    padding:10px 14px;

    border-radius:14px;

    max-width:340px;

    word-break:break-word;

}

.user{

    font-weight:bold;

    color:#00d2ff;

    margin-bottom:4px;

}

.text{

    font-size:16px;

    line-height:22px;

}

@keyframes slideIn{

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fadeOut{

    animation:fadeOut .5s forwards;

}

@keyframes fadeOut{

    to{

        opacity:0;

        transform:translateX(-40px);

    }

}