/* Dark Theme CSS */

/* Set a dark background color */
body {
  background-color: #181818;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
}

/* Container for the chat messages */
.chat-container {
  padding: 20px;
}

/* Individual chat messages */
.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 10px;
}

/* User messages */
.user-message {
  background-color: #2a2a2a;
}

/* Assistant messages */
.assistant-message {
  background-color: #444444;
}

/* Input area */
.input-container {
  margin-top: 20px;
}

/* Input box */
.input-box {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #2a2a2a;
  color: #ffffff;
}

/* buttons.css */

/* Base button styles */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-family: 'Roboto', sans-serif;
}

/* Primary button styles */
.primary-button {
  background-color: #555555;
  color: #ffffff;
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
}

.primary-button:hover {
  background-color: #444444;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
}

/* Secondary button styles */
.secondary-button {
  background-color: #555555;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
}

.secondary-button:hover {
  background-color: #444444;
  font-family: 'Roboto', sans-serif;
}


.collapsible {
  background-color: #444444;
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  cursor: pointer;
  padding: 10px;
  border: none;
  text-align: center;
  justify-content: center;
  align-items: center;
  outline: none;
  width: 100%;
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s, color 0.3s;
  font-family: 'Roboto', sans-serif;
}

.collapsible:hover {
  background-color: #45a049;
  font-family: 'Roboto', sans-serif;
}

.content {
  display: none;
  padding: 10px;
}

code {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  background-color: #181818;
  padding: 5px;
  border-radius: 3px;
  color: #038d03;
}