* {
    width: 100%;
    height: 100%;
    padding: 0; margin: 0;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
}
body * {
    width: auto;
    height: auto;
}
body {
    width: 100%; height: 100%;
    overflow: hidden;
    background-color: rgb(37,37,38);
}

.container {
    width: 100%; height: 100%;
    max-width: 500px;
    margin: auto;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
}

.speak {
    width: 100%; 
    height: 90%;
    overflow-y: auto;
    scroll-behavior: smooth;
} 

    @keyframes message_pop {
        0% {transform: scale(0); color: transparent;}
        50% {transform: scale(1); color: transparent;}
        100% {transform: scale(1);}
    }
    .speak .msg {
        margin: 2px 20px;
        max-width: 70%;
        text-align: justify;

        animation-name: message_pop;
        animation-duration: 0.5s;
        clear: both;
        position: relative;
    }

    .speak .msg .msg-content {
        padding: 20px;
    }
    .speak .msg:last-child {
        margin-bottom: 20px !important;
    }
    .speak .msg::first-letter, 
    .speak .msg .localisation::first-letter,
    .speak .msg .people::first-letter{
        text-transform: capitalize;
    }
    .speak .msg .localisation,
    .speak .msg .people {
        font-weight: bold;
        color: black;
        text-transform: capitalize;
    }
    .speak .in {
        float: right;
        color: white;
        transform-origin: 100% 100%;
    }
    .speak .out {
        float: left;
        transform-origin: 0% 100%;
    }
    .speak .msg .gif {
        width: 400px;
        max-width: 100%;
        height: auto;
        border-radius: 20px;
    }
.wave {
    width: 100%; height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.1);
}
    .wave .circle {
        width: 5vh; height: 5vh;
        border-radius: 100%;
        box-shadow: 0 0 0 3px white;
        position: relative;
    }
        .wave .circle .inner {
            position: absolute;
            background-color: rgb(53, 184, 155);
            border-radius: 100%;
            transition: background-color 0.5s ease;
        }
        .wave .circle .vocal_pause {
            background-color: rgb(99, 53, 184) !important;
        }