/* Light Theme */
body.theme-light {
  --bg-primary: #f5f5f7;
  --bg-secondary: #ffffff;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --accent: #6c5ce7;
  --accent-light: #5a4bd1;
}

body.theme-light #bottom-nav {
  background-color: #ffffff;
  border-top: 1px solid #e0e0e0;
}

body.theme-light .input-bar {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
}

body.theme-light .input-bar input {
  background-color: #ffffff;
  color: #1d1d1f;
  border: none;
}

body.theme-light .chat-bubble.assistant {
  background-color: #f0f0f0;
  color: #1d1d1f;
}

body.theme-light .form-input,
body.theme-light .form-select {
  background-color: #ffffff;
  color: #1d1d1f;
  border: 1px solid #d0d0d5;
}

/* Dark Theme (Default) */
body.theme-dark {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0b0;
  --accent: #6c5ce7;
  --accent-light: #a29bfe;
}

/* Flowers Theme */
body.theme-flowers {
  --bg-primary: #fff0f3;
  --accent: #e84393;
  --accent-light: #fd79a8;
}

body.theme-flowers::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(232, 67, 147, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(253, 121, 168, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(232, 67, 147, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body.theme-flowers #app {
  position: relative;
  z-index: 1;
}

body.theme-flowers #bottom-nav {
  background-color: #ffffff;
  border-top: 3px solid #fd79a8;
}

body.theme-flowers .input-bar {
  background-color: #ffffff;
  border: 2px solid #fd79a8;
}

body.theme-flowers .input-bar input {
  background-color: #ffffff;
  color: #1d1d1f;
  border: none;
}

body.theme-flowers .form-input,
body.theme-flowers .form-select {
  background-color: #ffffff;
  color: #1d1d1f;
  border: 2px solid #fd79a8;
}

body.theme-flowers .chat-bubble.assistant {
  color: #1d1d1f;
}

/* Stars Theme */
body.theme-stars {
  --bg-primary: #0c1445;
  --accent: #ffd700;
  --accent-light: #ffe44d;
}

body.theme-stars::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 15% 20%, #ffd700 0%, transparent 1.5px),
    radial-gradient(circle at 85% 30%, #ffe44d 0%, transparent 1px),
    radial-gradient(circle at 25% 70%, #ffd700 0%, transparent 1.2px),
    radial-gradient(circle at 70% 80%, #ffe44d 0%, transparent 1px),
    radial-gradient(circle at 45% 45%, #ffd700 0%, transparent 1px),
    radial-gradient(circle at 90% 60%, #ffe44d 0%, transparent 1.5px),
    radial-gradient(circle at 10% 90%, #ffd700 0%, transparent 1px),
    radial-gradient(circle at 60% 15%, #ffe44d 0%, transparent 1.2px);
  pointer-events: none;
  z-index: 0;
}

body.theme-stars #app {
  position: relative;
  z-index: 1;
}

body.theme-stars #bottom-nav {
  background-color: #ffffff;
  border-top: 3px solid #ffd700;
}

body.theme-stars .input-bar {
  background-color: #ffffff;
  border: 2px solid #ffd700;
}

body.theme-stars .input-bar input {
  background-color: #ffffff;
  color: #0c1445;
  border: none;
}

body.theme-stars .form-input,
body.theme-stars .form-select {
  background-color: #ffffff;
  color: #0c1445;
  border: 2px solid #ffd700;
}

body.theme-stars .chat-bubble.assistant {
  color: #0c1445;
}

/* Rainbows Theme */
body.theme-rainbows {
  --bg-primary: #fefefe;
  --accent: #e84393;
  --accent-light: #6c5ce7;
  --accent-gradient: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #9b59b6);
}

body.theme-rainbows::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(255, 107, 107, 0.05),
    rgba(255, 217, 61, 0.05),
    rgba(107, 203, 119, 0.05),
    rgba(77, 150, 255, 0.05),
    rgba(155, 89, 182, 0.05));
  pointer-events: none;
  z-index: 0;
}

body.theme-rainbows #app {
  position: relative;
  z-index: 1;
}

body.theme-rainbows #bottom-nav {
  background-color: #ffffff;
  border-top: 3px solid #e84393;
}

body.theme-rainbows .input-bar {
  background-color: #ffffff;
  border: 2px solid #6c5ce7;
}

body.theme-rainbows .input-bar input {
  background-color: #ffffff;
  color: #1d1d1f;
  border: none;
}

body.theme-rainbows .form-input,
body.theme-rainbows .form-select {
  background-color: #ffffff;
  color: #1d1d1f;
  border: 2px solid #6c5ce7;
}

body.theme-rainbows .chat-bubble.assistant {
  color: #1d1d1f;
}

/* Hearts Theme */
body.theme-hearts {
  --bg-primary: #fff0f0;
  --accent: #ff4757;
  --accent-light: #ff6b81;
}

body.theme-hearts::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 71, 87, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255, 107, 129, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 71, 87, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body.theme-hearts #app {
  position: relative;
  z-index: 1;
}

body.theme-hearts #bottom-nav {
  background-color: #ffffff;
  border-top: 3px solid #ff6b81;
}

body.theme-hearts .input-bar {
  background-color: #ffffff;
  border: 2px solid #ff6b81;
}

body.theme-hearts .input-bar input {
  background-color: #ffffff;
  color: #1d1d1f;
  border: none;
}

body.theme-hearts .form-input,
body.theme-hearts .form-select {
  background-color: #ffffff;
  color: #1d1d1f;
  border: 2px solid #ff6b81;
}

body.theme-hearts .chat-bubble.assistant {
  color: #1d1d1f;
}

/* Butterflies Theme */
body.theme-butterflies {
  --bg-primary: #f3f0ff;
  --accent: #7c3aed;
  --accent-light: #06b6d4;
  --accent-gradient: linear-gradient(135deg, #7c3aed, #06b6d4);
}

body.theme-butterflies::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 75% 60%, rgba(6, 182, 212, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body.theme-butterflies #app {
  position: relative;
  z-index: 1;
}

body.theme-butterflies #bottom-nav {
  background-color: #ffffff;
  border-top: 3px solid #7c3aed;
}

body.theme-butterflies .input-bar {
  background-color: #ffffff;
  border: 2px solid #7c3aed;
}

body.theme-butterflies .input-bar input {
  background-color: #ffffff;
  color: #1d1d1f;
  border: none;
}

body.theme-butterflies .form-input,
body.theme-butterflies .form-select {
  background-color: #ffffff;
  color: #1d1d1f;
  border: 2px solid #7c3aed;
}

body.theme-butterflies .chat-bubble.assistant {
  color: #1d1d1f;
}

/* Clouds Theme */
body.theme-clouds {
  --bg-primary: #eef6ff;
  --accent: #3b82f6;
  --accent-light: #60a5fa;
}

body.theme-clouds::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 600px 200px at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 500px 150px at 80% 60%, rgba(96, 165, 250, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 400px 180px at 50% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body.theme-clouds #app {
  position: relative;
  z-index: 1;
}

body.theme-clouds #bottom-nav {
  background-color: #ffffff;
  border-top: 3px solid #3b82f6;
}

body.theme-clouds .input-bar {
  background-color: #ffffff;
  border: 2px solid #3b82f6;
}

body.theme-clouds .input-bar input {
  background-color: #ffffff;
  color: #0c1445;
  border: none;
}

body.theme-clouds .form-input,
body.theme-clouds .form-select {
  background-color: #ffffff;
  color: #0c1445;
  border: 2px solid #3b82f6;
}

body.theme-clouds .chat-bubble.assistant {
  color: #0c1445;
}