/* dark-mode.css - Dark mode specific styles */

body.dark-mode {
  /* Dark mode color variables */
  --text-primary: #f8f9fa;
  --text-secondary: #adb5bd;
  --surface-1: #111111;
  --surface-2: #222222;
  --border-light: #333333;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  background-color: #111111;
  --primary: hsl(181, 53%, 52%);
  --primary-light: rgba(66, 194, 197, 0.2);
  --secondary: #b332cc;
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --surface-1: #2125294f;
  --surface-2: #343a40;
  --border-light: #495057;
  overflow: hidden; /* Ensure dark mode also prevents body scrolling */
}

/* Dark mode specific overrides */
body.dark-mode .header,
body.dark-mode .sidebar,
body.dark-mode .sidebar-right {
  background-color: #151515;
  border-color: #333333;
}

/* Add dark mode styling for sticky tabs */
body.dark-mode .content-tabs {
  background-color: #151515;
  border-bottom-color: var(--border-light);
  /* Different shadow for dark mode */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .message-user {
  background-color: #2a2a2a;
}

body.dark-mode .message-assistant {
  background-color: var(--background-color);
}

body.dark-mode .code-block,
body.dark-mode .code-content pre {
  background-color: #1a1a1a !important;
  border-color: #333333;
}

body.dark-mode .code-header {
  background-color: #2a2a2a;
  border-color: #333333;
}

/* Add Prism syntax highlighting styles for dark mode */
body.dark-mode .token.comment,
body.dark-mode .token.prolog,
body.dark-mode .token.doctype,
body.dark-mode .token.cdata {
  color: #6a9955;
}

body.dark-mode .token.punctuation {
  color: #d4d4d4;
}

body.dark-mode .token.property,
body.dark-mode .token.tag,
body.dark-mode .token.boolean,
body.dark-mode .token.number,
body.dark-mode .token.constant,
body.dark-mode .token.symbol,
body.dark-mode .token.deleted {
  color: #b5cea8;
}

body.dark-mode .token.selector,
body.dark-mode .token.attr-name,
body.dark-mode .token.string,
body.dark-mode .token.char,
body.dark-mode .token.builtin,
body.dark-mode .token.inserted {
  color: #ce9178;
}

body.dark-mode .token.operator,
body.dark-mode .token.entity,
body.dark-mode .token.url,
body.dark-mode .language-css .token.string,
body.dark-mode .style .token.string {
  color: #d4d4d4;
}

body.dark-mode .token.atrule,
body.dark-mode .token.attr-value,
body.dark-mode .token.keyword {
  color: #569cd6;
}

body.dark-mode .token.function,
body.dark-mode .token.class-name {
  color: #dcdcaa;
}

body.dark-mode .token.regex,
body.dark-mode .token.important,
body.dark-mode .token.variable {
  color: #d16969;
}

body.dark-mode .token.important,
body.dark-mode .token.bold {
  font-weight: bold;
}

body.dark-mode .token.italic {
  font-style: italic;
}

/* Fix code preview visibility in dark mode */
body.dark-mode .code-preview iframe {
  background-color: #fff;
}

body.dark-mode code[class*="language-"],
body.dark-mode pre[class*="language-"] {
  color: #d4d4d4;
  background: none;
  text-shadow: none;
}

body.dark-mode .input-container,
body.dark-mode .input-main {
  background-color: #151515;
  border-color: #333333;
}

body.dark-mode .input-textarea {
  background-color: #1a1a1a;
  color: #f8f9fa;
}

/* Ensure input row matches textarea background in dark mode */
body.dark-mode .input-row {
  background-color: #1a1a1a;
}

/* Use container background for textarea inside input row */
body.dark-mode .input-row .input-textarea {
  background: transparent;
}

body.dark-mode .input-actions {
  background-color: #202020;
}

body.dark-mode .search-bar,
body.dark-mode .search-bar input {
  background-color: #1a1a1a;
  color: #f8f9fa;
}

body.dark-mode .modal-content {
  background-color: #1a1a1a;
}

body.dark-mode .toast {
  background-color: #16181d;
  border-color: var(--border-light);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

body.dark-mode .dropdown-menu {
  background-color: #1a1a1a;
  border: 1px solid #333333;
}

/* Custom scrollbar styling for dark mode */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

body.dark-mode ::-webkit-scrollbar-corner {
  background: #1a1a1a;
}

/* Make code block scrollbars even more subtle */
body.dark-mode .code-content pre::-webkit-scrollbar,
body.dark-mode .code-preview-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.dark-mode .code-content pre::-webkit-scrollbar-thumb,
body.dark-mode .code-preview-container::-webkit-scrollbar-thumb {
  background: #333;
}

body.dark-mode .dropdown-item:hover {
  background-color: #2a2a2a;
}

/* Dropdown menu in dark mode */
body.dark-mode .dropdown-menu-up {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .dropdown-menu-up .dropdown-item:hover {
  background-color: var(--surface-1);
  color: var(--primary);
}

body.dark-mode #prompt-profile-button {
  background-color: #333333;
}

body.dark-mode #prompt-profile-button:hover {
  background-color: #444444;
}

body.dark-mode .btn-secondary {
  background-color: #333333;
  color: #f8f9fa;
}

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

/* Fix for the history items and sidebar in dark mode */
body.dark-mode .history-item {
  background-color: #1a1a1a;
}

body.dark-mode .history-item:hover {
  background-color: #2a2a2a;
}

body.dark-mode .reasoning-content {
  background-color: #0e4647;
  border-left-color: #35aeb1;
  color: #f8f9fa;
}

body.dark-mode .reasoning-block p {
  color: #f8f9fa;
  font-weight: 400; /* Slightly bolder for better readability */
}

body.dark-mode .example-usage {
  background-color: #1a1a1a;
  border-color: #333333;
  color: var(--text-primary);
}

body.dark-mode .code-tab.active {
  background-color: #1a1a1a;
}

body.dark-mode .history-delete-btn {
  background-color: #333333;
}

body.dark-mode .history-delete-btn:hover {
  background-color: #444444;
}

/* Dark mode switcher */
body.dark-mode .dark-mode-logo {
  display: block;
}

body.dark-mode .light-mode-logo {
  display: none;
}

/* Code playground in dark mode */
body.dark-mode .code-playground-editor textarea {
  background-color: #1a1a1a;
  color: #f8f9fa;
}

body.dark-mode .code-execution-result {
  background-color: #1a1a1a;
  border-color: #333333;
  color: #f8f9fa;
}

body.dark-mode .code-preview-content {
  background-color: #1a1a1a;
  border-color: #333333;
  color: #f8f9fa;
}

body.dark-mode .code-preview-header {
  background-color: #2a2a2a;
  border-color: #333333;
}

body.dark-mode .form-control {
  background-color: #1a1a1a;
  color: #f8f9fa;
}

body.dark-mode .reasoning-details {
  background-color: #1a1a1a;
  border-color: #333333;
}

/* Improve reasoning sidebar contrast in dark mode */
body.dark-mode .reasoning-steps p {
  color: #d4d4d4; /* Brighter white for better contrast */
}

/* Same for reasoning strong text */
body.dark-mode .reasoning-steps strong {
  color: #d4d4d4; /* Brighter white for better contrast */
}

body.dark-mode #reasoning-steps .p-sm {
  background-color: #1b3c3d; /* Slightly lighter than the original reasoning-content for better visibility */
  border: 1px solid #35aeb1; /* Add border for definition */
}

/* Make the reasoning icons more visible in dark mode */
body.dark-mode #reasoning-steps .icon {
  color: #35aeb1; /* Brighter color for the icons */
}

body.dark-mode .message.editing {
  background-color: #1a1a1a;
  border: 1px solid var(--primary-light);
  color: white;
}

body.dark-mode .message-edit-textarea {
  background-color: #1a1a1a;
  color: #f8f9fa;
  border: 1px solid #333333;
}

/* Dark mode searching message styles */
body.dark-mode .searching-message {
  background-color: #2a2a2a !important;
}

body.dark-mode .searching-message.error {
  border-left: 4px solid #ff6b6b;
}

body.dark-mode .error-message {
  color: #ff6b6b;
}

body.dark-mode .success-message {
  color: var(--primary);
}

/* Mobile specific dark mode styles */
@media (max-width: 768px) {
  body.dark-mode .new-conversation-mobile {
    background-color: #35aeb1;
    box-shadow: 0 2px 8px rgba(53, 174, 177, 0.4);
  }

  body.dark-mode .input-container {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
  }
}

/* Mobile optimized source preview in dark mode */
@media (max-width: 600px) {
  body.dark-mode .source-content {
    color: #e9ecef; /* Brighter text for better readability in dark mode on mobile */
  }

  body.dark-mode .source-content .text-secondary {
    color: #adb5bd;  /* Adjusted secondary text color for dark mode mobile */
  }

  body.dark-mode .source-thumbnail-container {
    border-color: #333333;  /* Darker border for thumbnails in dark mode */
  }

  body.dark-mode .source-preview {
    background-color: #1d1d1d;  /* Keep consistent with message-assistant background */
  }

  body.dark-mode .source-preview-text {
    color: #e9ecef; /* Brighter text for better readability in dark mode on mobile */
  }
}

/* Dark mode specific toggle-brain styles */
body.dark-mode #toggle-brain.active {
  background-color: var(--primary-light);
  color: var(--primary);
}

body.dark-mode #toggle-brain:not(.active) {
  background-color: transparent;
}

/* Dark mode specific web-search styles */
body.dark-mode #toggle-web-search.active {
  background-color: var(--primary-light);
  color: var(--primary);
}

body.dark-mode #toggle-web-search:not(.active) {
  background-color: transparent;
}

/* Dark mode styles for tabs */
body.dark-mode .tab-button {
  color: var(--text-secondary);
}

body.dark-mode .tab-button:hover,
body.dark-mode .tab-button.active {
  color: var(--primary);
}

/* Add disabled tab style for dark mode */
body.dark-mode .tab-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body.dark-mode .source-item {
  background-color: var(--surface-1);
  border-color: var(--border-light);
}

body.dark-mode .source-header {
  background-color: var(--surface-2);
  border-color: var(--border-light);
}

body.dark-mode .source-preview {
  background-color: var(--surface-1);
  color: var(--text-primary);
}

body.dark-mode .source-preview-text {
  color: var(--text-primary);
}

body.dark-mode .source-url {
  color: var(--text-secondary);
}

body.dark-mode .btn-open-source:hover {
  background-color: rgba(53, 174, 177, 0.2);
}

body.dark-mode .sources-placeholder {
  color: var(--text-secondary);
}

body.dark-mode .source-thumbnail-container {
  background-color: var(--surface-2);
  border-color: var(--border-light);
}

body.dark-mode .source-thumbnail-content {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), transparent);
}

body.dark-mode .source-favicon img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) brightness(0.95);
}

body.dark-mode .domain-initial {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Dark mode styles for source result messages */
body.dark-mode .source-result-message .source-item {
  background-color: var(--surface-1);
  border-color: var(--border-light);
}

body.dark-mode .source-result-message .source-header {
  background-color: var(--surface-2);
  border-color: var(--border-light);
}

body.dark-mode .source-result-message .source-preview {
  background-color: var(--surface-1);
  color: var(--text-primary);
}

body.dark-mode .source-result-message .btn-open-source:hover {
  background-color: rgba(53, 174, 177, 0.2);
}

body.dark-mode .source-result-message .source-thumbnail-content {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), transparent);
}