/* themes.css */
/* Version: 0.7.4.w2 */

/* Dark Mode Styles */
body.dark-mode {
  background-color: #121212;
  color: #ffffff;
  /* font-weight: 400; */ /* Original value - commented out */
  font-weight: 200; /* Lighter weight for all text in dark mode */
}

body.dark-mode header {
  background-color: #1f1f1f;
}

body.dark-mode .input-container,
body.dark-mode #response-container {
  background-color: #1f1f1f;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
}

body.dark-mode #question-input,
body.dark-mode #api-response {
  color: #ffffff;
  background-color: #1f1f1f;
}

body.dark-mode .dropdown-menu {
  background-color: #1f1f1f;
}

body.dark-mode .dropdown-menu a {
  color: #ffffff;
}

body.dark-mode .dropdown-menu a:hover {
  background-color: #2f2f2f;
}

body.dark-mode .header-text h3 {
  color: #cccccc;
}

body.dark-mode #submit-button {
  background-color: #4CAF50;
  color: white;
}

body.dark-mode #submit-button:hover {
  background-color: #45a049;
}

body.dark-mode #copy-button {
  color: #4CAF50;
}

body.dark-mode #copy-button:hover {
  color: #45a049;
}

body.dark-mode #chat-input,
body.dark-mode .input-container {
  background-color: #121212;
}

body.dark-mode #question-input {
  background-color: #1f1f1f;
  color: #ffffff;
}

body.dark-mode #button-container button {
  background-color: #4CAF50;
  color: white;
}

body.dark-mode #button-container button:hover {
  background-color: #45a049;
}

body.dark-mode .user-question {
  color: #8FBC8F;
  padding-left: 24px;
  position: relative;
}

body.dark-mode .user-question::before,
body.dark-mode .ai-response::before {
  color: #121212;
  background-color: #4CAF50;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-style: normal;
  font-weight: normal; /* changed from bold */
  position: absolute;
  left: 0;
  top: 2px;
}

body.dark-mode .user-question::before {
  content: "?";
}

body.dark-mode .ai-response::before {
  content: "AI";
  font-size: 10px;
}

body.dark-mode .ai-response {
  color: #ffffff;
  padding-left: 24px;
  position: relative;
}

body.dark-mode .send-hint {
  color: #888;
}

/* Light Mode Styles */
body.light-mode {
  background-color: #ffffff;
  color: #000000;
}

body.light-mode header {
  background-color: #f0f0f0;
}

body.light-mode .input-container,
body.light-mode #response-container {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode #question-input,
body.light-mode #api-response {
  color: #000000;
  background-color: #ffffff;
  font-weight: 200; /* Added -Ensure api-response text is also light */

}

body.light-mode .dropdown-menu {
  background-color: #ffffff;
}

body.light-mode .dropdown-menu a {
  color: #000000;
}

body.light-mode .dropdown-menu a:hover {
  background-color: #f0f0f0;
}

body.light-mode .header-text h3 {
  color: #666666;
}

body.light-mode #submit-button {
  background-color: #4CAF50;
  color: white;
}

body.light-mode #submit-button:hover {
  background-color: #45a049;
}

body.light-mode #copy-button {
  color: #4CAF50;
}

body.light-mode #copy-button:hover {
  color: #45a049;
}

body.light-mode #chat-input,
body.light-mode .input-container {
  background-color: #ffffff;
}

body.light-mode #question-input {
  background-color: #f0f0f0;
  color: #000000;
}

body.light-mode #button-container button {
  background-color: #2E7D32;
  color: white;
}

body.light-mode #button-container button:hover {
  background-color: #1B5E20;
}

body.light-mode .user-question {
  color: #2E8B57;
  padding-left: 24px;
  position: relative;
} 
 
body.light-mode .user-question::before,
body.light-mode .ai-response::before {
  color: #ffffff;
  background-color: #2E8B57;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-style: normal;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 2px;
}
 
body.light-mode .user-question::before {
  content: "?";
}

body.light-mode .ai-response::before {
  content: "AI";
  font-size: 10px;
}

body.light-mode .ai-response {
  color: #000000;
  padding-left: 24px;
  position: relative;
}

body.light-mode .send-hint {
  color: #666666;
}

/* New styles for conversation history in dropdown */
body.dark-mode #recent-conversations {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode #conversation-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-mode #recent-conversations {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode #conversation-list li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}