:root {
  /* Light mode colors - these will only apply when data-theme="light" is set */
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-secondary: #06b6d4;
  --color-secondary-light: #22d3ee;
  --color-secondary-dark: #0891b2;
  --color-tertiary: #8b5cf6;
  --color-tertiary-light: #a78bfa;
  --color-tertiary-dark: #7c3aed;
  --color-hover: var(--color-primary-light);
  --color-active: var(--color-primary-dark);
  --color-focus: rgba(99, 102, 241, 0.4);
  
  --color-background: #f0f0f0;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-hover: #e0e0e0;
  
  --color-text-primary: #111111;
  --color-text-secondary: #333333;
  --color-text-tertiary: #555555;
  --color-text-disabled: #9ca3af;
  
  --color-border: #bbbbbb;
  --color-divider: #bbbbbb;
  
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  --color-shadow-primary: rgba(0, 0, 0, 0.05);
  --color-shadow-secondary: rgba(0, 0, 0, 0.1);
  
  --container-bg: rgba(255, 255, 255, 0.95);
  --icon-filter: none;
  
  /* RGB values for opacity adjustments */
  --rgb-surface: 249, 250, 251;
  --rgb-primary: 99, 102, 241;
  --rgb-secondary: 6, 182, 212;
  --rgb-tertiary: 139, 92, 246;
  
  /* Gradient variables */
  --gradient-border: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-tertiary),
    var(--color-secondary),
    var(--color-primary)
  );
  
  --gradient-background: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    var(--color-tertiary-light) 100%
  );
}

/* Set dark theme as default */
html {
  data-theme: dark;
}

:root[data-theme="dark"] {
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-secondary: #06b6d4;
  --color-secondary-light: #22d3ee;
  --color-secondary-dark: #0891b2;
  --color-tertiary: #8b5cf6;
  --color-tertiary-light: #a78bfa;
  --color-tertiary-dark: #7c3aed;
  --color-hover: var(--color-primary-light);
  --color-active: var(--color-primary-dark);
  --color-focus: rgba(99, 102, 241, 0.4);
  
  --color-background: #121212;
  --color-surface: #1e1e1e;
  --color-surface-elevated: #252525;
  --color-surface-hover: #2a2a2a;
  
  --color-text-primary: rgba(255, 255, 255, 0.9);
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.38);
  
  --color-border: #333333;
  --color-divider: rgba(255, 255, 255, 0.12);
  
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  --color-shadow-primary: rgba(0, 0, 0, 0.5);
  --color-shadow-secondary: rgba(0, 0, 0, 0.3);
  
  --container-bg: rgba(30, 30, 30, 0.95);
  --icon-filter: brightness(0.9) invert(1);
  
  /* RGB values for opacity adjustments */
  --rgb-surface: 30, 30, 30;
  --rgb-primary: 99, 102, 241;
  --rgb-secondary: 6, 182, 212;
  --rgb-tertiary: 139, 92, 246;
  
  /* Gradient variables */
  --gradient-border: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-tertiary),
    var(--color-secondary),
    var(--color-primary)
  );
  
  --gradient-background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-tertiary-dark) 100%
  );
}

:root[data-theme="light"] .upload-area {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-md);
}

:root[data-theme="light"] .upload-area:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

:root[data-theme="dark"] .upload-area {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-md);
}

:root[data-theme="dark"] .upload-area:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

:root[data-theme="dark"] .control-selector,
:root[data-theme="dark"] .prompt-selector,
:root[data-theme="dark"] .radio-group {
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-standard);
}

:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .prompt-selector:hover,
:root[data-theme="dark"] .radio-group:hover,
:root[data-theme="dark"] .control-selector:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
  background-image: none !important;
}

:root[data-theme="dark"] .streaming-avatar {
  filter: var(--icon-filter);
}

.theme-toggle {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 1000;
}

.theme-button {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: all var(--transition-standard);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: var(--shadow-sm);
}

.theme-button:hover {
  transform: scale(1.1);
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-md);
}

.theme-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:root[data-theme="dark"] .icon-button:focus-visible,
:root[data-theme="dark"] .prompt-selector:focus-visible,
:root[data-theme="dark"] .control-selector:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:root[data-theme="light"] body {
  background-color: var(--color-background);
  background-image: url('https://i.imgur.com/LWiGF7y.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh !important;
  position: relative;
}

:root[data-theme="light"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: -1;
}

:root[data-theme="dark"] body {
  background-color: var(--color-background);
  background-image: url('https://i.imgur.com/FrQYSSE.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 100vh !important;
  position: relative;
}

:root[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  pointer-events: none;
  z-index: -1;
}

:root[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  top: -50px;
  left: -50px;
  right: -50px;
  bottom: -50px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(99, 102, 241, 0.3) 0%,
    rgba(139, 92, 246, 0.2) 25%,
    rgba(6, 182, 212, 0.2) 50%,
    rgba(139, 92, 246, 0.2) 75%,
    rgba(99, 102, 241, 0.3) 100%
  );
  animation: animatedGlow 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -2;
  opacity: 0.2;
}

.animated-gradient {
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
              var(--gradient-border) border-box;
  border: 2px solid transparent;
  background-size: 200% 200%;
  animation: gradientRotate 4s linear infinite;
  border-radius: var(--border-radius-md);
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}

.animated-gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Chat container theme-specific styling */
:root[data-theme="light"] .chat-container {
  /* background: rgba(255, 255, 255, 0.85); */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 
              0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

:root[data-theme="dark"] .chat-container {
  /* background: rgba(30, 30, 30, 0.7); */
  backdrop-filter: blur(8px);
  /* -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
              0 4px 16px rgba(0, 0, 0, 0.2); */
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
}

/* Animated glow keyframes for dark mode background */
@keyframes animatedGlow {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.4;
  }
  25% {
    transform: scale(1.1) rotate(90deg);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
  75% {
    transform: scale(1.1) rotate(270deg);
    opacity: 0.6;
  }
  100% {
    transform: scale(1) rotate(360deg);
    opacity: 0.4;
  }
}

/* Mobile optimizations for background images */
@media (max-width: 768px) {
  :root[data-theme="light"] body,
  :root[data-theme="dark"] body {
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
  }
  
  :root[data-theme="light"] .chat-container {
    /* background: rgba(255, 255, 255, 0.9); */
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 0.5rem; */
    /* border-radius: var(--border-radius-md); */
  }
  
  :root[data-theme="dark"] .chat-container {
    /* background: rgba(30, 30, 30, 0.8); */
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
    margin: 0.5rem;
    border-radius: var(--border-radius-md);
  }
  
  :root[data-theme="dark"] body::after {
    animation-duration: 12s;
    opacity: 0.1;
  }
}

/* Ensure proper z-index stacking */
.theme-toggle {
  z-index: 1001;
}

.chat-container {
  z-index: 1;
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
  :root[data-theme="light"] .chat-container {
    background: rgba(255, 255, 255, 0.95);
  }
  
  :root[data-theme="dark"] .chat-container {
    background: rgba(30, 30, 30, 0.9);
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] body::after {
    animation: none;
    opacity: 0.3;
  }
  
  :root[data-theme="light"] body::before,
  :root[data-theme="dark"] body::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}