body{
    background-color: #c3e3f3;
}

#reader{
    background-color: #c3e3f3;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50vw;
    height: 50vh;
    z-index: -1;
}

button{
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

#chat-header{
    position:fixed;
    font-size: 500%;
    width: 100%;
    top: none;
    left: none;
    padding: none;
    margin: none;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

/* .back-btn::before{
    content:url(https://chat.teowei.lol/assets/discoveryworld.png);
} */

.back-btn{
    background-color: #FFFFFF;
    padding: 15px;
    border-radius: 10px;
    width: 20%;
    height: auto;
}

.qr-expd::before{
    content:url(https://chat.teowei.lol/assets/qr-reader.webp);
}

.voice-dctn::before{
    content:url(https://chat.teowei.lol/assets/voice-dictation.webp);
}

.send-pmpt::before{
    content:url(https://chat.teowei.lol/assets/send-message.webp);
}

#user-text-box{
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0%);
    background-color: #FFFFFF;
    border-radius: 25px;
    padding: 10px;
    position: fixed;
    bottom: 10px;
    width: 95vw;
    display: flex;
    flex-direction: row;

}

textarea{
    background-color: transparent;
    height: 1.2em;
    width: 97.5%;
    color: #404040;
    border: none;
    padding: 1em;
    outline: none;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 125%;
    text-align: left;
}

#user-text-area{
    flex-grow: 1;
}

#text-box-controls{
    direction: rtl;
    white-space: nowrap;
}

.control-buttons{
    width: 75px;
    display: inline-block;
    grid-row: 1;
}

#chat-box-window{
    position: absolute;
    top: none;
    width: 100%;
    height: 87.5vh;
    overflow: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse;
}

#first-message{
    margin-top: 40vh;
}

.normal-message{
    margin-bottom: 7.5vh;
}

.last-message{
    margin-bottom: 25vh;
}

.user-message{
    align-self: flex-end;
    max-width: 62.5%;
    color: #404040;
    font-family: Arial, Helvetica, sans-serif;
    margin-right: 25px;
    font-size: 125%;
    background-color: #eeeeee;
    border-radius: 25px;
    padding-left: 25px;
    padding-right: 25px;
    box-shadow: 0px 1px 12px #404040;
}

.assistant-message{
    align-self: flex-start;
    max-width: 62.5%;
    color: #404040;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 25px;
    font-size: 125%;
    background-color: #eeeeee;
    border-radius: 25px;
    padding-left: 25px;
    padding-right: 25px;
    box-shadow: 0px 1px 12px #404040;
}

#assistant-processing{
    width: auto;
}