/* Theme Switcher for Bulma v1.0.4
 * Instead of custom CSS, we override Bulma's CSS variables
 * This makes all Bulma components theme-aware automatically
 */

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ============================================
   DARK THEME - Override Bulma CSS Variables
   ============================================ */

[data-theme="dark"] {
  /* Scheme brightness indicator */
  --bulma-scheme-brightness: dark;

  /* Main background colors (dark) */
  --bulma-scheme-main-l: 10%;
  --bulma-scheme-main-bis-l: 12%;
  --bulma-scheme-main-ter-l: 14%;
  --bulma-background-l: 14%;

  /* Inverted colors (light text on dark background) */
  --bulma-scheme-invert-l: 96%;
  --bulma-scheme-invert-bis-l: 93%;
  --bulma-scheme-invert-ter-l: 86%;

  /* Text colors */
  --bulma-text-weak-l: 71%;
  --bulma-text-l: 86%;
  --bulma-text-strong-l: 93%;
  --bulma-text-title-l: 14%;

  /* Border colors */
  --bulma-border-weak-l: 21%;
  --bulma-border-l: 24%;

  /* Link colors */
  --bulma-link-l: 73%;
  --bulma-link-hover-l: 80%;
  --bulma-link-active-l: 80%;

  /* Code and pre backgrounds */
  --bulma-code-background-l: 18%;
  --bulma-pre-background-l: 18%;

  /* Shadows */
  --bulma-shadow-h: 0deg;
  --bulma-shadow-s: 0%;
  --bulma-shadow-l: 0%;

}

/* Modal overlay - override Bulma's inverted logic */
[data-theme="dark"] .modal-background {
  background-color: hsla(0, 0%, 4%, 0.86);
}

[data-theme="light"] .modal-background {
  background-color: hsla(0, 0%, 4%, 0.86);
}

/* ============================================
   COMPONENT-SPECIFIC OVERRIDES
   (Only for things Bulma doesn't handle)
   ============================================ */

/* Sidebar - Now uses Bulma CSS variables, minimal overrides needed */
[data-theme="light"] .close-btn {
  color: hsl(0, 0%, 48%);
}

/* Chat Container - Custom styling */
[data-theme="dark"] .chat-container-wrapper {
  min-height: 500px;
  max-width: 1000px;
  margin: 0 auto;
}

[data-theme="dark"] .chat-header {
  background-color: hsl(0, 0%, 14%);
  border: 1px solid hsl(0, 0%, 21%);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

[data-theme="dark"] .chat-messages {
  background-color: hsl(0, 0%, 14%);
  border: 1px solid hsl(0, 0%, 21%);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

[data-theme="dark"] .chat-messages::-webkit-scrollbar-track {
  background: hsl(0, 0%, 14%);
}

[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 29%);
  border-radius: 4px;
}

[data-theme="dark"] .chat-messages::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 0%, 48%);
}

[data-theme="dark"] .user-message-bubble {
  background-color: hsl(217, 20%, 22%);
}

[data-theme="dark"] .agent-message-bubble {
  background-color: hsl(0, 0%, 18%);
}

[data-theme="dark"] .response-history-box {
  background-color: hsl(0, 0%, 18%);
}

[data-theme="dark"] .option-button-default {
  background-color: hsl(0, 0%, 21%);
  color: hsl(0, 0%, 96%);
  border-color: hsl(0, 0%, 29%);
}

[data-theme="dark"] .option-button-default:hover:not(:disabled) {
  background-color: hsl(0, 0%, 29%);
}

[data-theme="light"] .chat-container-wrapper {
  min-height: 500px;
  max-width: 1000px;
  margin: 0 auto;
}

[data-theme="light"] .chat-header {
  background-color: hsl(0, 0%, 96%);
  border: 1px solid hsl(0, 0%, 86%);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

[data-theme="light"] .chat-messages {
  background-color: hsl(0, 0%, 100%);
  border: 1px solid hsl(0, 0%, 86%);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

[data-theme="light"] .chat-messages::-webkit-scrollbar-track {
  background: hsl(0, 0%, 96%);
}

[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 71%);
  border-radius: 4px;
}

[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 0%, 48%);
}

[data-theme="light"] .user-message-bubble {
  background-color: hsl(217, 71%, 96%);
  border-color: hsl(217, 71%, 86%);
}

[data-theme="light"] .agent-message-bubble {
  background-color: hsl(0, 0%, 96%);
  border-color: hsl(0, 0%, 86%);
}

[data-theme="light"] .response-history-box {
  background-color: hsl(0, 0%, 96%);
  border-color: hsl(0, 0%, 86%);
}

[data-theme="light"] .option-button-default {
  background-color: hsl(0, 0%, 96%);
  color: hsl(0, 0%, 21%);
  border-color: hsl(0, 0%, 86%);
}

[data-theme="light"] .option-button-default:hover:not(:disabled) {
  background-color: hsl(0, 0%, 90%);
  border-color: hsl(0, 0%, 71%);
}