@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

*{
    box-sizing:border-box;
}

html, body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Nunito',sans-serif;
    background:#111;
}


/* LOGIN */

.box{

    width:350px;

    padding:40px;

    background:#1b1b1f;

    border-radius:25px;

    box-shadow:0 0 40px rgba(170,100,220,.15);

    text-align:center;

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

}


.box h1{
    color:#eee;
}


.sub{
    color:#aaa;
}


input,
select,
button{

    width:100%;

    padding:14px;

    margin-top:15px;

    border-radius:15px;

    border:none;

    font-size:16px;

}


input,
select{

    background:#29292e;

    color:white;

}


button{

    background:#b783ff;

    color:white;

}


/* CHAT */

.chat{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100dvh;

    background:#15151a;

}

.chat header{

    flex-shrink:0;

    padding:15px;

    text-align:center;

    color:white;

}



.chat h1{

    font-size:24px;

    margin:5px;

}




    height:20px;

    color:#aaa;

    font-size:14px;

}#typing{

    height:20px;

    color:#aaa;

    font-size:14px;

}#typing{

    height:22px;

    min-height:22px;

    color:#aaa;

    font-size:14px;

    display:block;

}

}



#messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 15px;
    padding-bottom: 100px;
    -webkit-overflow-scrolling: touch;

}
.message{

    max-width:75%;

    background:#25252d;

    color:white;

    padding:12px 15px;

    border-radius:20px;

    margin-bottom:12px;

    word-wrap:break-word;

}



.message.mine{

    margin-left:auto;

    background:#7651aa;

}



.message p{

    margin:8px 0;

}



.timer{

    color:#bbb;

    font-size:11px;

}



/* MESSAGE INPUT */

.input{

    position:sticky;

    bottom:0;

    display:flex;

    gap:10px;

    padding:12px;

    background:#15151a;

    border-top:1px solid #2a2a2a;

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

    z-index:100;

}


.input input{

    flex:1;

    margin:0;

    min-width:0;

}



.input button{

    width:80px;

    margin:0;

}



/* PHONE */

@media(max-width:600px){


    .box{

        width:90%;

        padding:30px;

    }



    .message{

        max-width:90%;

    }



    .chat header{

        padding-top:10px;

    }



    #messages{

        padding:10px;

    }


}
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.chat-container {
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

#messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 15px;
}