/* Dark Theme Overrides */
:root[data-theme="dark"] {
  --color-primary: #1DA1F2;
  --color-surface: rgba(0, 0, 0, 0.5);
  --color-accent: #2795D9;
  --color-hover: #2795D9;
  --color-focus: rgba(29, 161, 242, 0.4);
  --color-background: transparent;
  --color-bg-secondary: rgba(39, 149, 217, 0.1);
  --color-bg-error: rgba(255, 0, 0, 0.1);
  --color-border: #1DA1F2;
  --color-border-error: #ff0000;
  --color-text-primary: #ffffff;
  --color-text-secondary: #9ccaff;
  --color-text-tertiary: #b0e0e6;
  --color-text-error: #ff0000;
  --color-text-code: #ffffff;
  --color-bg-code: #000000;
  --color-shadow-primary: rgba(29, 161, 242, 0.4);
  --color-shadow-secondary: rgba(29, 161, 242, 0.3);
  --color-shadow-subtle: rgba(29, 161, 242, 0.15);
  --color-overlay: rgba(0, 0, 0, 0.75);
  --container-bg: rgba(0, 0, 0, 0.5);
  
  --icon-filter: invert(1) brightness(1.5);
  --icon-color: rgba(255, 255, 255, 0.8);
}

/* Dark theme body background */
:root[data-theme="dark"] body {
  background-image: url('https://i.imgur.com/6Bo9P7f.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Dark theme containers */
:root[data-theme="dark"] .chat-container,
:root[data-theme="dark"] .upload-area,
:root[data-theme="dark"] .result-container,
:root[data-theme="dark"] .message-content,
:root[data-theme="dark"] .radio-group,
:root[data-theme="dark"] .prompt-selector,
:root[data-theme="dark"] .theme-button,
:root[data-theme="dark"] .refresh-button,
:root[data-theme="dark"] .login-btn,
:root[data-theme="dark"] .paste-button,
:root[data-theme="dark"] .div-footer-text {
  background: rgba(0, 0, 0, 0.5);
  /* backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); */
  border: 1px solid var(--color-border);
}

/* Dark theme hover states */
:root[data-theme="dark"] .upload-area:hover {
  border-color: var(--color-primary);
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 4px 12px var(--color-shadow-primary);
}

:root[data-theme="dark"] .paste-button:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  box-shadow: 0 4px 12px var(--color-shadow-primary);
}

:root[data-theme="dark"] .radio-option:hover {
  background: rgba(29, 161, 242, 0.2);
  box-shadow: 0 2px 8px var(--color-shadow-subtle);
}

:root[data-theme="dark"] .icon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-shadow-primary);
  background-size: 250% 250%;
}

:root[data-theme="dark"] .donate-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--color-shadow-primary);
  background-size: 250% 250%;
}

/* Dark theme buttons */
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .donate-button {
  background: linear-gradient(135deg,
    #FF0099,  /* Pink */
    #1DA1F2,  /* Bluesky Blue */
    #00FF87   /* Mint */
  );
  background-size: 200% 200%;
  animation: gradientRotate 10s ease-in-out infinite;
}

/* Dark theme progress bar */
:root[data-theme="dark"] .progress-bar {
  background-color: rgba(29, 161, 242, 0.2);
  box-shadow: 0 0 5px rgba(29, 161, 242, 0.1);
}

:root[data-theme="dark"] .progress-fill {
  background: linear-gradient(90deg,
    #1DA1F2,  /* Bluesky Blue */
    #00FF87   /* Mint */
  );
  box-shadow: 0 0 10px rgba(29, 161, 242, 0.4);
}

/* Dark theme text */
:root[data-theme="dark"] .huge-header {
  color: var(--color-text-primary);
  text-shadow: 0 0 10px rgba(29, 161, 242, 0.3);
}

:root[data-theme="dark"] .newspaper-description {
  color: var(--color-text-secondary);
  text-shadow: 0 0 10px rgba(29, 161, 242, 0.2);
}

/* Dark theme loading GIF */
:root[data-theme="dark"] .streaming-avatar {
  content: url("https://i.imgur.com/IgN0M2Y.gif");
}

/* Dark theme selectors */
:root[data-theme="dark"] .icon-button {
  border: 2px solid rgba(255, 255, 255, 0.1);
  /* backdrop-filter: blur(8px); */
}

/* Remove dark theme selector icons */
:root[data-theme="dark"] .prompt-selector-container::before,
:root[data-theme="dark"] .language-selector-container::before,
:root[data-theme="dark"] .tts-selector-container::before {
  filter: invert(1) brightness(1.5);
}

:root[data-theme="dark"] .prompt-selector-container::after,
:root[data-theme="dark"] .language-selector-container::after,
:root[data-theme="dark"] .tts-selector-container::after,
:root[data-theme="dark"] .model-selector-container::after {
  filter: invert(1);
}


@keyframes gradientRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

:root[data-theme="light"] {
  --icon-color: rgba(44, 24, 16, 0.8);
}

/* Dark theme footer specific override */
:root[data-theme="dark"] .footer {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--color-border);
}

/* Dark theme footer text specific style */
/* :root[data-theme="dark"] .div-footer-text {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
} */

/* Dark theme footer text */
:root[data-theme="dark"] .dev-footer-text {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}