*{
    background-color: transparent;
    font-family: Arial, sans-serif !important;
    margin:0;
    padding:0;
    list-style: none;
    text-decoration: none;
    transition:all .4s
}

.typing-response{
    display: none;
    align-items: center;
    gap:5px;
    width:fit-content;
    margin:1em auto;
    background-color: #2a2a2a;
    border-radius: 360px;
    padding:1em;    
}
.typing-response .dot{
    width:10px;
    height:10px;
    background-color:white;
    border-radius: 360px;
    animation:bounce 1.4s infinite ease-in-out
}
.typing-response .dot:nth-child(1){
    animation-delay: -0.32s;
}
.typing-response .dot:nth-child(2){
    animation-delay: -0.16s;
}
.typing-response .dot:nth-child(3){
    animation-delay: -0
}
@keyframes bounce{
    0%, 80%, 100%{
        transform:scale(0)
    }
    40%{
        transform: scale(1);
    }
}

.hide{
    display: none;
}
body, html{
   background-color: white;
}
.scaffold{
    display: grid;
    grid-template-columns: 20% 80%;
    height: 100vh;
}

@media(max-width:768px){
    .scaffold{
        display: block;
    }
}
aside{
    background-color:#2a2a2a;
    height: 100%;
    position: sticky;
}
.aside-header{
    background-color:#3a3a3a;
    height: 10vh;
    display: grid;
    place-content: center;
    color:white;
    font-size: 2em;
    font-weight: 700;
}

aside ul{
    padding:1em;
}
aside ul li a{
    display: block;
    padding:.5em 1em;
    border:1px solid #5a5a5a;
    color:#5a5a5a;
    border-radius: .6em;
    display: flex;
    gap:5px;
    align-items: center;
    margin-bottom: .3em;
}
aside ul li a:hover{
    border:1px solid white;
    color:white
}

@media(max-width:769px){
    aside{
        position: fixed;
        left:0;
        top:0;
        z-index: 1500;
        width: 250px;
        left:-250px;
    }
    .aside-header{
        font-size: 1.5em;
    }
}


main{
    background-color:#4a4a4a;
    overflow-y: scroll;
    height: 100vh;
}
nav{
    position:sticky;
    top:0;
    background-color:#3a3a3a;
    display: flex;
    justify-content: end;
    height: 10vh;
    align-items: center;
    padding: 0 1em
}
nav a.profile{
    width: fit-content;
    height: 30px;
    border-radius: 360px;
    background-color:#5a5a5a;
    display: grid;
    place-content: center;
    display: flex;
    align-items: center;
    gap:5px;
    padding:.2em 1.5em;
    color: #a1a1a1;

}
nav .model-select{
    border:1px solid lightgray;
    padding:.4em .6em;
    background: #5a5a5a;
    border-radius: .4em;
}
nav .model-select select{
    border:none;
    color:white;
    background: #5a5a5a;
}
nav a.profile span{
    font-size: 1em;
}
nav .brand{
    display: none;
}
@media(max-width:768px){
    nav{
        justify-content: space-between;
    }
    nav .brand{
        display: flex;
        align-items: center;
        gap:5px
    }
    nav .brand button{
        border:none;
        outline: none;
        color:white;
        font-size: .9em;
        cursor:pointer
    }
    nav .brand h1{
        color:white;
        font-size: .9em;
    }
}

textarea{
    resize: none;
}
.chat-container{
    width:100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-messages{
    flex-grow:1;
    padding:20px;
    margin-bottom: 4em;
}
.chat-messages .message{
    display: flex;
    gap:10px;
    align-items: flex-start;
    margin-bottom: 15px;
}
.message .message-content{
    padding:10px;
    border-radius: 5px;
    max-width: 90%;
}
.message.bot-block{
        flex-direction: row-reverse;
}        
.message.user-block .message-content{
    background-color: whitesmoke;/* #4a90e2;*/
    margin-right: 10px;
}
.message.bot-block .message-content{
    background-color: #3a3a3a;
    margin-left: 10px;
    color:white
}

.profile-pic img{
     width:40px;
     height:40px;
     object-fit: cover;
     border-radius: 360px;
}


.chat-input-container{
     display: flex;
     padding:15px;
     position: fixed;
     bottom: 2%;
     border-radius: .9em;
     left: 50%;
     width:50%;
     transform: translate(-30%, -50%);
     background-color: #2a2a2a;

}
@media(max-width:768px){
    .chat-input-container{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translate(0,0);
        width: 90%;
        border-radius: 0;        
    }
}

.chat-input-container textarea{
     flex-grow: 1;
     padding: 5px;
     border:1px solid #4a4a4a;
     border-radius: 5px;
     color:#e0e0e0;
     outline:none
}
.chat-input-container button{
    background-color: red;
    color:white;
    border:none;
    outline:none;
    cursor: pointer;
    margin-left: 10px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: .9em;
}
.intro{ 
    margin-top: 15em;
    flex:1;
    display: grid;
    place-content: center;
}
.intro .banner{
    background-color: #3a3a3a;
    padding: .9em;
    border-radius: .6em;
    width:60%;
    margin:auto;
    text-align: center;
    padding:2em
}
@media(max-width:768px){
    .intro .banner{
        width: 70%;
    }
}

.banner p{
    color: white;
    font-size: .9em;
}
.response-progress{
    color:white;
    padding:1em;
    margin: 1em 0;
    display: none;
}


/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #2a2a2a;
}

::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
}

.contact{
    text-align: center;
    color:white;
    margin-top: .4em;
}
.contact a{
    color:red
}