@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    

}


:root{
 --text-color: #e4e9f7;                  /* Texto principal: branco suave */
  --subheading-color: #9da9c5;            /* Texto secundário: azul acinzentado */
  --placeholder-color: #7b859b;           /* Placeholder discreto */
  --primary-color: #0e0f11;               /* Fundo principal: preto profundo */
  --secondary-color: #1c1f26;             /* Fundo secundário: cinza grafite */
  --secondary-hover-color: #2a2f3a;       /* Hover: cinza azulado escuro */
  --scroolbar-color: #3e4558;             /* Scrollbar: cinza médio */
  --accent-color: #4ea0f7;                /* Azul vibrante (botões/detalhes) */
  --border-color: #252931;   
}


body.light-theme{
 --text-color: #2b213a;                   /* Roxo escuro elegante para textos */
  --subheading-color: #6f5b89;             /* Roxo acinzentado suave */
  --placeholder-color: #9d8ab5;            /* Lavanda esmaecido */
  --primary-color: #f4f1fa;                /* Fundo principal: lavanda muito clara */
  --secondary-color: #e9e2f4;              /* Blocos secundários: lilás leve */
  --secondary-hover-color: #d8c9ec;        /* Hover em cartões e inputs */
  --scrollbar-color: #b7a4d1;              /* Scroll discreto roxo claro */
  --accent-color: #a26adf;                 /* Roxo vibrante para botões/destaques */
  --border-color: #d6c5e9;  
}



body{
color:var(--text-color);
background: var(--primary-color);
}

.container {
    overflow-y: none;
    padding:32px 0 60px;
    max-height: calc(100vh - 100px);
    scrollbar-color:var(--scroolbar-color) transparent;
    
    
}

.container :where(.app-header, .suggestions, .message, .prompt-wrapper, .disclaimer-text){
    margin:0 auto;
    width:100%;
    padding:0 20px;
    max-width:980px;
}


.container .app-header{
    margin-top:4vh;
}




.app-header .heading{
    font-size: 3rem;
    width: fit-content;
    background: linear-gradient( to right, #1d7efd, #8f6fff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.app-header .sub-heading{
    font-size:2.6rem;
    margin-top:-5px;
    color: var(--subheading-color);
}


.container .suggestions{
    display:flex;
    gap:15px;
    margin-top:6vh;
    list-style: none;
    overflow-x:auto;
    scrollbar-width: none;
}


body.chats-active .container :where(.app-header, .suggestions){
    display:none;
}







.suggestions .suggestions-item{
    width:228px;
    padding:18px;
    flex-shrink: 0;
    display:flex;
    cursor:pointer;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    border-radius: 12px;
    background: var(--secondary-color);
    transition:0.3s ease;
    box-shadow:1px 0px 10px #424242be;
}


.suggestions .suggestions-item:hover{
    color:#fff;
    
   
}






.suggestions .suggestions-item .text{
    font-size:1.1rem;

}

.suggestions .suggestions-item span{
    height:45px;
    width:45px;
    margin-top:35px;
    display:flex;
    align-self: flex-end;
    align-items:center;
    justify-content:center;
    border-radius: 50%;
    color:#1d7efd;
    background: var(--primary-color);
}

.suggestions .suggestions-item:nth-child(2) span{
    color:#28a745;
}

.suggestions .suggestions-item:nth-child(3) span{
    color:#ffc107;
}

.suggestions .suggestions-item:nth-child(4) span{
    color:#6f42c1;
}


.container .chats-container{
    display:flex;
    gap:20px;
    flex-direction: column;
}






.chats-container .message{
    display:flex;
    gap:11px;
    align-items:center;
}


.chats-container .bot-message .avatar{
    height:43px;
    width:43px;
    flex-shrink: 0;
    padding:6px;
    align-self: flex-start;
    margin-right: -7px;
    border-radius:50%;
    background: var(--secondary-color);
    border:1px solid var(--secondary-hover-color);
}




.chats-container .bot-message .avatar{
animation:rotate 3s linear infinite;
}


@keyframes rotate{
100%{
    transform: rotate(360deg);
}
}





.chats-container .message .message-text{
    padding:3px 16px;
    word-wrap:break-word;
    white-space:pre-line;
}


.chats-container .bot-message{
    margin:9px auto;
}





.chats-container .user-message{
    flex-direction: column;
    align-items: flex-end;
}



.chats-container .user-message .message-text{
    padding:12px 16px;
    max-width:75%;
    border-radius:13px 13px 3px 13px;
    background: var(--secondary-color);
}

.chats-container .user-message .img-attachment{
    width:50%;
    margin-top:-7px;
    border-radius:13px 3px 3px 13px;
}

.chats-container .user-message .file-attachment{
    display:flex;
    gap:6px;
    align-items: center;
    padding:10px;
    margin-top:-7px;
    border-radius:13px 3px 3px 13px;
    background: var(--secondary-color);
}




.chats-container .user-message .file-attachment span{
    color:#1d7efd;
}







.prompt-container{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    padding:16px 0;
    background: var(--primary-color);
}

.prompt-container :where(.prompt-wrapper, .prompt-form, .prompt-actions){
    display:flex;
    gap:12px;
    height:56px;
    align-items:center;
}

.prompt-wrapper .prompt-form{
    width:100%;
    height:100%;
    border-radius:130px;
    background: var(--secondary-color);
}

.prompt-form .prompt-input{
    height:100%;
    width:100%;
    background:none;
    outline:none;
    border:none;
    font-size:1rem;
    padding-left:24px;
    color:var(--text-color);
}

.prompt-form .prompt-input::placeholder{
    color:var(--placeholder-color);
}


.prompt-wrapper button{
    width:56px;
    height:100%;
    border:none;
    cursor:pointer;
    border-radius: 50%;
    font-size:1.4rem;
    flex-shrink:0;
    color:var(--text-color);
    background: var(--secondary-color);
    transition:0.3s ease;
}


.prompt-wrapper :is(button:hover, .file-icon, #cancel-file-btn){
    background: var(--secondary-hover-color);
}



.prompt-form .prompt-actions{
    gap:5px;
    margin-right:7px;
}





.prompt-wrapper .prompt-form :where(.file-upload-wrapper, button, img) {
    position:relative;
    height:45px;
    width:45px;
    
}



.prompt-form #send-prompt-btn{
    color:#fff;
    display:none;
    background: #1d7efd;
}



.prompt-form .prompt-input:valid ~ .prompt-actions #send-prompt-btn{
    display:block;
}






.prompt-form #send-prompt-btn:hover{
    background: #0264e3;
}


.prompt-form .file-upload-wrapper :where(button, img){
    position:absolute;
    border-radius:50%;
    object-fit: cover;
    display:none;
}


.prompt-form .file-upload-wrapper #ad-file-btn,
.prompt-form .file-upload-wrapper.active.img-attached img,
.prompt-form .file-upload-wrapper.active.file-attached .file-icon,
.prompt-form .file-upload-wrapper.active:hover
#cancel-file-btn{
    display:block;
}


.prompt-form .file-upload-wrapper.active #ad-file-btn {
    display:none;
}




.prompt-form :is(#cancel-file-btn, #stop-response-btn:hover){
    color: #d62939;
}

.prompt-form .file-icon{
    color: #1d7efd;
}


.prompt-form #stop-response-btn, body.bot-responding .prompt-form .file-upload-wrapper{
    display:none;
}



body.bot-responding .prompt-form #stop-response-btn{
    display:block;
}





.prompt-container .disclaimer-text{
    text-align:center;
    font-size: 0.9rem;
    padding:16px 20px 0;
    color:var(--placeholder-color);
}


@media (max-width: 768px){
    
    .container{
        padding: 20px 0 100px;
    }
    
    .app-header :is(.heading, .sub-heading){
        font-size:2rem;
        line-height:1.4;
    }

    .prompt-form .file-upload-wrapper.active #cancel-file-btn{
        opacity:0;
        transform: none;
    }
    
    
    .suggestions .suggestions-item{
        
    }
    
    
    
    
    .prompt-wrapper.hide-controls :where(#theme-toggle-btn, #delete-chats-btn){
        display:none;
    }
}