/* Importing Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

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


:root {
  
    /* Dark theme colors */
    --text-color: #edf3ff;
    --subheading-color:#97a7ca;
    --placeholder-color:#c3cdde;
    --primary-color:#101623;
    --secondary-color:#283045;
    --secondary-hover-color:#333e58;
    --scrollbar-color:#626a7f;

}


body.light-theme{
  --text-color:"#090c13";
  --subheading-color:"#7b8cae";
  --placeholder-color:#606982;
  --primary-color:#f2f3f4;
  --secondary-color:#dce6f9;
  --secondary-hover-color:#d2ddf2;
  --scrollbar-color:#a2aac2;
}

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



}

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


}

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

  /* App header styling */
.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);
}


/* Suggestion list styling */

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


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

 
body.chats-active .app-header,
body.chats-active .suggestions {
    display: none !important;
}



 
 




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


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

}

.suggestions .suggestions-item:hover{
background:var(--secondary-hover-color);

}


.suggestions .suggestions-item span{
  height: 45px;
  width:45px;
  margin-top:35px;
  align-self: flex-end;
  display:flex;
  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;}






/* Chats container stylings */

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

.chats-container .user-message{
  display:flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;

  gap:0 !important;
 width: 100% !important;}

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

.chats-container .bot-message.loading .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 .message .message-text{
  margin:9px 0;
}


.chats-container .user-message .message-text{
  margin-left: auto;
}
.chats-container .bot-message .message-text{
  margin-right: auto;
}


.chats-container .user-message{
  flex-direction: column !important;
  align-items: flex-end !important;
}
.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 13px 3px 13px;
}

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



/* Prompt container styling */

.prompt-container{
  position: fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:16px;
  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-input:not(:placeholder-shown) ~ .prompt-actions #send-prompt-btn */
.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 #add-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 #add-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-form #stop-response-btn {
  display: none;
}

/* Show stop button when generating */
body.bot-responding .prompt-form #stop-response-btn {
  display: block !important;
}

/* Hide file upload while generating */
body.bot-responding .prompt-form .file-upload-wrapper {
  display: none !important;
}

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

}


/* Responsive for mobile */
@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;
  }
  .prompt-wrapper .hide-controls:where(#theme-toggle-btn,#delete-chats-btn){

    display:none
  }
}


.code-block{
  position: relative;
  background-color: #0d1117;
  border-radius: 10px;
  margin: 12px 0 ;
}

.code-block pre{
  padding: 14px;
  overflow-x: auto;
  color: #c9d1d9;

}

.code-block code{
  font-family: Consolas,monospace;
  font-size: 0.95rem;
}

.copy-btn{
  position:absolute;
  top:8px;
  right: 8px;
  background: #30363d;
  border: none;
  color:#fff;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
}

.copy-btn:hover{
  background:#484f58;

}

/* Inline code */
.message-text code{
  background: #2d333b;
  padding: 2px 6px;
  border-radius: 5px;
}


/* list */
.message-text ul,
.message-text ol{
  margin-left:20px;
}