/* Base Styles - Variables, resets, and global styles */
:root {
  --bg-1: #0f1115;
  --bg-2: #0f1115;
  --card: #15181d;
  --card-overlay: rgba(21, 24, 29, 0.7);
  --stroke: #2a2f36;
  --text: #e5e7eb;
  --muted: #9aa0a6;
  --accent: #b0b5bc;
  --accent-2: #c4c7cc;
  --success: #a9adb3;
  --danger: #a9adb3;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  --input-bg: #0f141b;
  --code-bg: #0b1117;
  --bubble-bg: rgba(15, 20, 27, 0.7);
  --bubble-user-bg: rgba(96, 165, 250, 0.12);
  --button-text: #0f1115;
  --dock-bg: rgba(21, 24, 29, 0.8);
  --dock-border: #2a2f36;
  --dock-item-bg: rgba(21, 24, 29, 0.9);
  --dock-item-hover: rgba(176, 181, 188, 0.1);
  --dock-label-bg: rgba(21, 24, 29, 0.95);
}

:root[data-theme="light"] {
  --bg-1: #f5f6f8;
  --bg-2: #f5f6f8;
  --card: #ffffff;
  --card-overlay: rgba(255, 255, 255, 0.9);
  --stroke: #d5d9df;
  --text: #1f2933;
  --muted: #5f6b7a;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --success: #15803d;
  --danger: #b91c1c;
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  --input-bg: #f8fafc;
  --code-bg: #eef2f7;
  --bubble-bg: rgba(255, 255, 255, 0.9);
  --bubble-user-bg: rgba(37, 99, 235, 0.12);
  --button-text: #f8fafc;
  --dock-bg: rgba(255, 255, 255, 0.9);
  --dock-border: #d5d9df;
  --dock-item-bg: rgba(255, 255, 255, 0.95);
  --dock-item-hover: rgba(37, 99, 235, 0.12);
  --dock-label-bg: rgba(255, 255, 255, 0.98);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Domine", "Segoe UI", system-ui, -apple-system, serif;
  color: var(--text);
  height: 100vh;
  width: 100vw;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

.theme-toggle {
  position: static;
  height: 36px;
  padding: 0 12px;
  border-radius: 0;
  border: 1px solid var(--stroke);
  background: var(--card);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.theme-toggle:hover {
  filter: brightness(1.04);
}

/* Aurora Background */
.aurora-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Global effects */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  opacity: 0.12;
  animation: float 12s ease-in-out infinite;
  z-index: 0;
}

.orb.one {
  width: 280px;
  height: 280px;
  background: #9aa0a6;
  top: -80px;
  left: -60px;
}

.orb.two {
  width: 220px;
  height: 220px;
  background: #6b7280;
  bottom: -60px;
  right: -40px;
  animation-delay: -6s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.answer-content.popIn {
  animation: popIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}