body {
    font-family: 'Fira Code', monospace; 
    background-color: #121212; /* Very dark background */
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .chat-container {
    flex: 1; 
    display: flex;
    flex-direction: column;
    background-color: #121212; /* Same as body background */
    overflow: hidden;
  }
  
  .chat-history {
    flex: 1; 
    padding: 20px;
    overflow-y: scroll; 
    background: #121212; 
  }
  
  .input-area {
    display: flex;
    padding: 12px;
    background-color: rgb(32, 32, 32); /* Darker background */
    border-top: 1px solid #070e13; /* Even darker border */
  }
  
  .input-area input {
    flex-grow: 1;
    padding: 10px;
    background: rgb(32, 32, 32); /* Same as input area background */
    color: #ffffff; /* Slightly lighter text */
    border: none;
    border-radius: 20px; 
    margin-right: 10px;
  }
  
  .input-area input::placeholder {
    color: #778899; /* Muted placeholder text */
  }
  
.input-area button {
  padding: 10px 16px;
  background-color: #342f35; /* Dark blue for send button */
  color: white;
  border: none;
  border-radius: 20px; 
  cursor: pointer;
  font-family: inherit; /* Inherit font from parent elements */
  font-size: 15px; /* Optionally specify a font size */
}
  
  .input-area button:hover {
    background-color: #492847; /* Even darker blue on hover */
  }
  
  .chat-history .user {
    align-self: flex-end;
    max-width: 70%;
    margin-bottom: 10px;
    background-color: #392843; /* Darker blue for user messages */
    color: white;
    padding: 10px;
    border-radius: 8px 8px 0 8px; 
  }
  
  .chat-history .model {
    align-self: flex-start;
    max-width: 70%;
    margin-bottom: 10px;
    background-color: rgb(41, 41, 41); /* Darker gray for model messages */
    color: #d9dce2; 
    padding: 10px;
    border-radius: 8px 8px 8px 0; 
  }
  
  .model pre code {
    display: block; 
    background-color: #232223; /* Very dark background */
    padding: 15px; 
    border-radius: 5px; 
    color: #fff; 
    font-family: monospace; 
    overflow-x: auto; 
    white-space: pre;  
  }

/* Clear Chat Button (within settings page) */
#clear-chat-button {
  background-color: #f44336; /* Red color for clear button */
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px; /* Add some spacing above */
}

#clear-chat-button:hover {
  background-color: #d32f2f; /* Darker red on hover */
}
  
/* Overall Settings Page */
#settings-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #212121; /* Dark background color */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  opacity: 0.75;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
  color: #ffffff; /* Light text color for contrast */
}

#settings-page.hidden {
  display: none;
}

/* Headings */
h3 {
  color: #ffffff;
  font-weight: 400; /* Lighter font weight for headings */
}

/* Input Field */
#system-prompt-input {
  background-color: #424242; /* Darker background for input */
  border: none;
  border-radius: 4px;
  padding: 10px;
  color: #ffffff;
  width: 100%;
}

/* Buttons */
#update-prompt-button,
#close-settings {
  background-color: #616161; /* Dark gray background */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  margin-top: 20px; /* Add some spacing above */
  cursor: pointer;
  transition: background-color 0.3s; /* Add transition for hover effect */
}

#update-prompt-button:hover,
#close-settings:hover {
  background-color: #757575; /* Slightly lighter on hover */
}

/* Open Settings Button */
#open-settings {
  background-color: #616161; /* Dark gray background */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s; /* Add transition for hover effect */
}

#open-settings:hover {
  background-color: #757575; /* Slightly lighter on hover */
}
/* Add more styles for other elements as needed */

/* Add more styles for specific settings elements as needed */

/* Toast Container */
#toast-container {
  position: fixed; /* Keep it fixed to the viewport */
  top: 10px; /* Position it at the top */
  left: 50%; /* Center it horizontally */
  transform: translateX(-50%); /* Adjust for centering */
  z-index: 10000; /* Ensure it's on top */
}
/* Toast */
.toast {
  background-color: #4CAF50; /* Green background */
  color: white;
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 5px; 
  opacity: 0;
  transition: opacity 0.5s; /* Smooth fade in/out */
}

.toast.show {
  opacity: 1;
}