/* ===== Theme Styles ===== */

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

body.dark-mode .sidebar {
  background: #1e1e1e;
  border-right: 2px solid #3b82f6;
}

body.dark-mode .main {
  background: #121212;
}

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

body.dark-mode .chat-input-wrapper input {
  background: #2d2d2d;
  border: 1px solid #444;
  color: #e0e0e0;
}

body.dark-mode .chat-input-wrapper input:focus {
  border-color: #667eea;
}

body.dark-mode .message.assistant .bubble {
  background: #1e1e1e;
  border: 1px solid #333;
}

body.dark-mode .message.assistant .bubble.collapsed::after {
  background: linear-gradient(to bottom, rgba(30, 30, 30, 0), rgba(30, 30, 30, 1));
}

/* Sidebar Dark Mode */
body.dark-mode .sidebar .btn-logout {
  background: #2d2d2d;
  border: 1px solid #444;
}

body.dark-mode .sidebar .btn-logout:hover {
  background: #3d3d3d;
}

body.dark-mode .sidebar hr {
  border-top: 1px solid #333;
}

body.dark-mode .sidebar select {
  background: #2d2d2d;
  border: 1px solid #444;
  color: #e0e0e0;
}

body.dark-mode .sidebar .btn-clear {
  background: #3d2d2d;
  border: 1px solid #5d3d3d;
  color: #ff9999;
}

body.dark-mode .sidebar .btn-clear:hover {
  background: #4d3d3d;
}

body.dark-mode .sidebar .mode-radio label:hover {
  background: #2d2d2d;
}

body.dark-mode .sidebar .sidebar-footer {
  background: #1e1e1e;
  border-top: 1px solid #333;
}

body.dark-mode .sidebar .sidebar-footer .user-info h3 {
  color: #e0e0e0;
}

body.dark-mode .sidebar .sidebar-footer .user-info span {
  color: #aaa;
}

body.dark-mode .sidebar .sidebar-footer .btn-logout {
  background: #2d2d2d;
  border: 1px solid #444;
  color: #e0e0e0;
}

body.dark-mode .sidebar .sidebar-footer .btn-logout:hover {
  background: #3d3d3d;
}

body.dark-mode .sidebar .sidebar-footer .footer-text {
  color: #888;
}

/* Theme Menu Dark Mode */
body.dark-mode .theme-menu {
  background: #1e1e1e;
  border: 1px solid #333;
}

body.dark-mode .theme-option:hover {
  background: #2d2d2d;
}

body.dark-mode .theme-option.active {
  background: #2d2d3d;
  color: #8899ff;
}