/* Smooth transition */
body, .card, .form-control, .btn {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Default light mode */
body {
  background-color: #f8f9fa; /* Bootstrap light */
  color: #212529;
}

/* Chat box */
.chat-box {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
}

.message {
  padding: 8px 12px;
  margin-bottom: 8px;
  border-radius: 10px;
  animation: fadeInUp 0.3s ease;
}

.user-message {
  background-color: #007bff;
  color: #fff;
  align-self: flex-end;
}

.bot-message {
  background-color: #e9ecef;
  color: #000;
  align-self: flex-start;
}

/* Dark mode */
body.dark-mode {
  background-color: #121212;
  color: #eaeaea;
}

body.dark-mode .card {
  background-color: #1e1e1e;
  border: 1px solid #333;
}

body.dark-mode .form-control {
  background-color: #2c2c2c;
  color: #eaeaea;
  border: 1px solid #444;
}

body.dark-mode .form-control::placeholder {
  color: #aaa;
}

body.dark-mode .btn {
  background-color: #2c2c2c;
  color: #eaeaea;
  border: 1px solid #555;
}

body.dark-mode .btn:hover {
  background-color: #444;
}

body.dark-mode .chat-box {
  background: #1e1e1e;
  border: 1px solid #333;
}

body.dark-mode .bot-message {
  background-color: #2c2c2c;
  color: #f1f1f1;
}
/* Fix muted text in dark mode */
body.dark-mode .text-muted {
  color: #bbbbbb !important;  /* softer gray for dark mode */
}

/* Optional: make headings brighter in dark mode */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3 {
  color: #ffffff;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}