#chatApp {
  width: 100%;

  font-family: 'Poppins', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 100px;
  font-weight: 300;
  text-align: left;
}

#chatApp header {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--background-white);
}

#chatApp header h2 {
  text-align: center;
  color: var(--background-white);
  text-transform: capitalize;
  margin-top: 0.5rem;
}
#chatApp header h2 span {
  color: #10a37f;
  text-shadow: 2px 1px 2px var(--background-black);
}

#chatApp header img {
  max-width: 10rem;
  border-radius: 50%;
}

#chatApp #chat-container {
  flex: 1;
  width: 100%;
  
  

  display: flex;
  flex-direction: column;
  gap: 10px;

  -ms-overflow-style: none;
  scrollbar-width: none;

  padding-bottom: 20px;
  scroll-behavior: smooth;
}

#chatApp #chat-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px var(--box-shadow);
  border-radius: 10px;
  background-color: #f5f5f5;
}

#chatApp #chat-container::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
}

#chatApp #chat-container::-webkit-scrollbar-thumb {
  border-radius: 50px;
  -webkit-box-shadow: inset 0 0 6px var(--box-shadow);
  background-color: var(--dark-grey3);
}

#chatApp .wrapper {
  width: 100%;
  padding: 15px;
}

#chatApp .bot {
  background: var(--background-white)fff;
}

#chatApp .chat {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#chatApp .profile {
  width: 36px;
  height: 36px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#chatApp .bot .profile {
    
  
}

#chatApp .bot .profile img {
    width: 100%;
    height: 100%;
    filter: var(--icon-filter);
    opacity: var(--icon-opacity);
  }

#chatApp .bot .message {
  /* font-family: 'Courier New', Courier, monospace; */
}

#chatApp .profile img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: var(--icon-filter);
    opacity: var(--icon-opacity);
}

#chatApp .message {
  flex: 1;

  color: var(--background-black);
  font-size: 16px;

  max-width: 100%;
  overflow-x: scroll;

  /*
   * white space refers to any spaces, tabs, or newline characters that are used to format the CSS code
   * specifies how white space within an element should be handled. It is similar to the "pre" value, which tells the browser to treat all white space as significant and to preserve it exactly as it appears in the source code.
   * The pre-wrap value allows the browser to wrap long lines of text onto multiple lines if necessary.
   * The default value for the white-space property in CSS is "normal". This tells the browser to collapse multiple white space characters into a single space, and to wrap text onto multiple lines as needed to fit within its container.
  */
  /* white-space: pre-wrap; */

  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* hides scrollbar */
#chatApp .message::-webkit-scrollbar {
  display: none;
}

#chatApp .message::first-letter {
  text-transform: uppercase;
}



.footer-background {
  background-color: var(--dark-grey) ;
}


.title-container { 
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 0px 2px;
}

.title-container .prompt-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--background-black);
}

.title-container .title-icon {
  width: 40px;
  filter: var(--icon-filter);
    

}

.prompt-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;  
  padding: 10px;
  margin-bottom: 75px;
  
}
.prompt-button {
  padding: 15px 15px;
  cursor: pointer;
  background-color: var(--background-white);
  border: 1px solid var(--border-grey);
  border-radius: 5px;
  transition: background-color 0.3s;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;

}
.prompt-button:hover {
  background-color: var(--medium-grey);
}

.prompt-button .prompt-icon {
  width: 36px;
  filter: var(--icon-filter);
    
}

.prompt-button .special-button-icon {
  width: 36px;
  filter: var(--icon-filter);
    
}

.prompt-button span {
  
}


#chatInput {
  bottom: 0px;
    position: fixed;
    width: 100%;
    background: var(--medium-grey3);
    display: none;
}

#chatInput form {
  max-width: 1280px;
  margin: 10px;
  padding: 0px;
  border-top: 1px solid var(--medium-grey3);
  bottom: 0px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  background: var(--background-white);
  border-radius: 50px;
}

#chatInput textarea {
  width: 100%;
  color: #000;
  font-size: 16px;
  font-weight: 300;
  padding: 0px;
  padding-left: 18px;
  background: transparent;
  border-radius: 5px;
  border: none;
  outline: none;
  line-height: 1em;
  font-family: 'Poppins', Arial, sans-serif;
}

#chatInput button {
  outline: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  padding-right: 11px;
  padding-bottom: 6px;
}

#chatInput form img {
  width: 30px;
  height: 30px;
  filter: var(--icon-filter);
    opacity: var(--icon-opacity);
}