@import "material-icons/material-icons.min.css";


:root {
    --chat-window-width: 20vw;
    --chat-window-font-size: 65%;
    --chat-window-color-theme: #0099ff;
    --chat-window-bg-color: #ffffff;
    --chat-button-bg-color: #ffffff;
}


#chat-container {
    position: absolute;
    z-index: 1033;
    right: 0;
    top: 0;
    bottom: 0;
}


#chat-container-inner {
    width: 0vw;
    transition: width 0.2s ease-in-out;
}


#chat-container.opened #chat-container-inner,
#chat-container-inner-fixed {
    width: var(--chat-window-width);
}


#chat-container-inner-fixed {
    position: fixed;
    height: 100%;
    right: calc(var(--chat-window-width)*-1);
    transition: right 0.2s ease-in-out;
}

#chat-container.opened #chat-container-inner-fixed {
    right: 0;
}

#chat-container.opened #chat-btn {
    opacity: 0;
    scale: 0;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}


#chat-popup {
    padding: 1vw;
    font-size: var(--chat-window-font-size);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--chat-window-bg-color);
}

#chat-btn {
    position: absolute;
    width: 17vmax;
    height: 17vmax;
    left: -14vmax;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    color: var(--chat-window-color-theme);
    background-color: var(--chat-button-bg-color);
    border-radius: 30vmax;
    display: flex;
    font-size: 80%;
    opacity: 1;
    scale: 1;
    transition: all 0.2s ease-in-out;
}

#chat-btn span,
#chat-btn img {
    justify-content: center;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

#chat-btn span {
    padding: 0.5vmax;
}

#chat-btn img {
    margin-right: 2vmax;
}

#chat-btn,
#chat-container.opened #chat-popup {
    -webkit-filter: drop-shadow(0 0 0.75vw rgba(0, 0, 0, 0.08));
    filter: drop-shadow(0 0 0.75vw rgba(0, 0, 0, 0.08));
}

#chat-container button {
    cursor: pointer;
    line-height: normal;
}

#chat-popup button {
    border-radius: 0.5vw;
    padding: 0.3vw;
}

#chat-popup .chat-header-buttons button {
    background-color: var(--chat-window-bg-color);
    color: var(--chat-window-color-theme);
    border: 0.1vw solid var(--chat-window-color-theme);
}

#chat-popup .chat-header-buttons button:hover {
    background-color: #EEEEEE;
}

#chat-popup button .material-icons {
    font-size: 1.3vw;
    display: block;
}


.chat-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-height: 30%;
}

.chat-header-buttons {
    white-space: nowrap;
}

.chat-area {
    margin-top: 1vw;
    margin-bottom: 1vw;
    margin-right: -0.5vw;
    padding-right: 0.5vw;
}



#chat-popup .bot-img {
    display: none;
}

#chat-popup .bot-msg {
    justify-content: flex-start;
}

#chat-popup .user-msg {
    justify-content: flex-end;
}

#chat-popup .user-msg,
#chat-popup .bot-msg {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#chat-popup .bot-msg:not(:last-child),
#chat-popup .user-msg {
    margin-bottom: 1vw;
}


#chat-popup .user-msg .msg,
#chat-popup .bot-msg .msg {
    border-radius: 0.5vw;
    padding: 0.5vw;
    box-shadow: 0 0.05vw 0.3vw rgba(0, 0, 0, 0.4);
    margin: 0.2vw;
}


#chat-popup .user-msg .msg {
    margin-left: 10%;
    background-color: #EEEEEE;
}

#chat-popup .bot-msg:not(.dot-typing) .msg {
    margin-right: 10%;
}

.chatbot-title {
    width: 100%;
}

.chatbot-title img {
    height: 100%;
}


#chat-popup .msg p,
.chatbot-title h3 {
    margin: 0;
}




#chat-container .chat-input-area {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5vw;
}

#chat-container .chat-input-area input {
    width: 100%;
    margin-right: 0.3vw;
    border-radius: 0.5vw;
    padding: 0.5vw;
    border: 0.1vw solid #D8D8D8;
}


#chat-container .chat-input-area button.chat-submit {
    color: var(--chat-window-bg-color);
    background-color: var(--chat-window-color-theme);
    border: 0.1vw solid var(--chat-window-color-theme);
    padding: 0.5vw;
}

#chat-container .chat-input-area button.chat-submit:hover {
    background-color: #D8D8D8;
    border: 0.1vw solid #D8D8D8;
}

#chat-container .chat-info-area {
    font-size: 80%;
}


/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
#chat-popup .dot-typing {
    padding-top: 0.5vw;
}

#chat-popup .dot-typing .msg {
    padding: 0;
    margin: 0.1rem 0.1rem 0.1rem 20px;
    left: -9999px;
    width: 7px;
    height: 7px;
    border-radius: 3px;

    position: relative;
    background-color: #000000;
    color: #000000;
    box-shadow: 9984px 0 0 0 #000000, 9999px 0 0 0 #000000, 10014px 0 0 0 #000000;
    animation: dot-typing 1.5s infinite linear;
}

@keyframes dot-typing {
    0% {
        box-shadow: 9984px 0 0 0 #000000, 9999px 0 0 0 #000000, 10014px 0 0 0 #000000;
    }

    16.667% {
        box-shadow: 9984px -10px 0 0 #000000, 9999px 0 0 0 #000000, 10014px 0 0 0 #000000;
    }

    33.333% {
        box-shadow: 9984px 0 0 0 #000000, 9999px 0 0 0 #000000, 10014px 0 0 0 #000000;
    }

    50% {
        box-shadow: 9984px 0 0 0 #000000, 9999px -10px 0 0 #000000, 10014px 0 0 0 #000000;
    }

    66.667% {
        box-shadow: 9984px 0 0 0 #000000, 9999px 0 0 0 #000000, 10014px 0 0 0 #000000;
    }

    83.333% {
        box-shadow: 9984px 0 0 0 #000000, 9999px 0 0 0 #000000, 10014px -10px 0 0 #000000;
    }

    100% {
        box-shadow: 9984px 0 0 0 #000000, 9999px 0 0 0 #000000, 10014px 0 0 0 #000000;
    }
}



/***********************
SCROLL BAR
***********************/

.chat-area {
    overflow: auto;
    height: inherit;
}

.chat-area::-webkit-scrollbar {
    width: 0.6vw;
}

.chat-area::-webkit-scrollbar-track,
.chat-area::-webkit-scrollbar-thumb {
    border-radius: 0.5vw;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}



@media (max-width: 1199px) {
    #chat-container-inner-fixed {
        right: -100%;
        width: 100%;
    }


    #chat-popup {
        padding: 30px;
        font-size: 100%;
    }

    #chat-popup button,
    #chat-container .chat-input-area button.chat-submit {
        border-width: 1px;
        border-radius: 8px;
        padding: 12px;
    }

    #chat-popup button .material-icons {
        font-size: 24px;
    }

    #chat-container .chat-area {
        margin-bottom: 15px;
        margin-right: -7px;
        padding-right: 7px;
    }


    #chat-popup .user-msg .msg,
    #chat-popup .bot-msg .msg {
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
        margin: 4px;
    }

    #chat-popup .bot-msg:not(:last-child),
    #chat-popup .user-msg {
        margin-bottom: 10px;
    }

    #chat-container .chat-input-area {
        margin-bottom: 10px;
    }

    #chat-container .chat-input-area input {
        margin-right: 10px;
        border-radius: 8px;
        padding: 0 10px;
    }


    /**
    * ==============================================
    * Dot Typing
    * ==============================================
    */
    #chat-popup .dot-typing {
        padding-top: 10px;
    }

    #chat-popup .dot-typing .msg {
        padding: 0;
        margin: 0.1rem 0.1rem 0.1rem 20px;
        left: -9999px;
        width: 7px;
        height: 7px;
        border-radius: 3px;
    }


    /***********************
    SCROLL BAR
    ***********************/

    .chat-area::-webkit-scrollbar {
        width: 8px;
    }

    .chat-area::-webkit-scrollbar-track,
    .chat-area::-webkit-scrollbar-thumb {
        border-radius: 8px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    }
}


@media (max-width: 950px) {
    #chat-btn {
        font-size: 70%;
    }
}


@media (max-width: 767px) {
    #chat-btn {
        font-size: 60%;
    }
}




/********** FIX MAIN STUFF ************/



/**************************************/