* {
    font-family: arial;
  }
  
  body {
    padding: 0.5rem;
  }
  
  h1 {
    text-align: center;
  }
  
  .header {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: center;
  }
  
  .selection {
    display: flex;
    gap: 1rem;
  }
  
  #question-section {
      margin-top: 20px;
    display: flex;
    gap: 1rem;
  }
  
  #answer-section {
      margin-top: 20px;
  }
  
  #answer:before {
    content: "🧐：";
  }
  
  
  #question-input {
    width: 20rem;
    padding: 0.9rem;
    border-radius: 4px;
    border: 1px solid #3d3d3d;
    font-size: 1rem;
  }
  
  button {
    padding: 0.9rem;
    border-radius: 4px;
    border: 1px solid #3d3d3d;
    cursor: pointer;
  }
  
  select {
    padding: 0.8rem;
    font-size: 1rem;
  }
  
  .wrap {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
  }
  
  .col-1,
  .col-2 {
    width: 50%;
  }
  
  .col-2 {
    background-color: #fff;
    border: 1px solid #3d3d3d80;
    border-radius: 4px;
    padding: 0.5rem;
  }
  
  .test {
    display: flex; 
    gap: 1rem;
    justify-content: center;
  }
  
  .test button {
    width: 100%;
  }
  
  #chat-box {
    height: 20rem;
    border: 1px solid #3d3d3d80!important;
    border-radius: 4px;
  }
  
  #messages {
    height: 100%; /* Adjust based on your layout */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .user-message {
    background-color: #DBF0F0;
    padding: 0.5rem;
    margin: 0.5rem 0.5rem 0.5rem auto; /* Right align */
    border-radius: 10px;
    width: 80%;
  }
  
  .bot-message {
    background-color: #FFF0F0;
    padding: 0.5rem;
    margin: 0.5rem auto 0.5rem 0.5rem; /* Left align */
    border-radius: 10px;
    width: 80%;
  }
  
  #test-loading {
    width: fit-content;
    box-sizing: border-box;
    margin: auto;
  }
  
  #loading-gif {
    width: 20rem;
  }
  
  #new-topic-input {
    width: 10rem;
    padding: 0.85rem;
    border-radius: 4px;
    border: 1px solid #3d3d3d;
    font-size: 1rem;
  }