frontend/app/globals.css

@import "tailwindcss";

:root {
  --bg-primary: #070b14;
  --bg-secondary: #0d1424;
  --bg-card: rgba(255, 255, 255, 0.04);
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(99, 179, 237, 0.3);
  --text-primary: #f0f4ff;
  --text-secondary: #8892a4;
  --accent-blue: #63b3ed;
  --accent-purple: #9f7aea;
  --accent-green: #68d391;
  --accent-pink: #f687b3;
  --accent-orange: #f6ad55;
  --glow-blue: rgba(99, 179, 237, 0.15);
  --glow-purple: rgba(159, 122, 234, 0.15);
}

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

html, body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: rgba(99, 179, 237, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 179, 237, 0.5); }

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-strong {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #63b3ed, #9f7aea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* High-Tech Borders */
.cyber-border {
  position: relative;
  border: 1px solid rgba(99, 179, 237, 0.2);
}

.cyber-border::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  background: linear-gradient(45deg, transparent, rgba(99, 179, 237, 0.3), transparent);
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
}

.cyber-border:hover::before {
  opacity: 1;
}

/* Animations */
@keyframes slide-in-right {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes scale-up {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes scan-line {
  0% { top: 0%; }
  100% { top: 100%; }
}

@keyframes emotion-appear {
  0% { opacity: 0; transform: scale(0.8) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes rotate-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-slide-in { animation: slide-in-right 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-scale-up { animation: scale-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-glow { animation: glow-pulse 2s ease-in-out infinite; }
.animate-emotion { animation: emotion-appear 0.3s ease-out forwards; }
.animate-fade-in-up { animation: fade-in-up 0.5s ease-out forwards; }
.animate-blink { animation: blink 1.5s ease-in-out infinite; }
.animate-rotate { animation: rotate-ring 3s linear infinite; }

/* Emotion colors */
.emotion-happy { color: #68d391; }
.emotion-sad { color: #76e4f7; }
.emotion-angry { color: #fc8181; }
.emotion-surprised { color: #f6ad55; }
.emotion-neutral { color: #a0aec0; }

.emotion-bg-happy { background: rgba(104, 211, 145, 0.1); border-color: rgba(104, 211, 145, 0.2); }
.emotion-bg-sad { background: rgba(118, 228, 247, 0.1); border-color: rgba(118, 228, 247, 0.2); }
.emotion-bg-angry { background: rgba(252, 129, 129, 0.1); border-color: rgba(252, 129, 129, 0.2); }
.emotion-bg-surprised { background: rgba(246, 173, 85, 0.1); border-color: rgba(246, 173, 85, 0.2); }
.emotion-bg-neutral { background: rgba(160, 174, 192, 0.08); border-color: rgba(160, 174, 192, 0.15); }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}