chatbot/src/App.vue

<template>
  <v-app class="sentimental-app">
    <router-view />
  </v-app>
</template>

<style>
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Space+Grotesk:wght@300;400;500;700&display=swap");

/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; padding: 0; }
body { overflow-x: hidden; }

.sentimental-app {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  min-height: 100vh;
}

/* ─── Light theme (default) ───────────────────────
   All CSS vars live here. Dark overrides below.    */
:root,
.v-theme--vsLight {
  --vs-bg-gradient:      #fafafa;
  --vs-panel:            rgba(255, 255, 255, 0.82);
  --vs-panel-hover:      rgba(255, 255, 255, 0.96);
  --vs-border:           rgba(102, 126, 234, 0.18);
  --vs-text:             #1e2240;
  --vs-muted:            #5a6890;
  --vs-gold:             #b8860b;
  --vs-gold-glow:        rgba(184, 134, 11, 0.25);

  /* component-level */
  --vs-result-bg:        rgba(255, 255, 255, 0.92);
  --vs-result-border:    rgba(102, 126, 234, 0.14);
  --vs-bot-bg:           rgba(102, 126, 234, 0.07);
  --vs-bot-border:       rgba(102, 126, 234, 0.15);
  --vs-movie-bg:         rgba(102, 126, 234, 0.04);
  --vs-movie-hover:      rgba(102, 126, 234, 0.09);
  --vs-bar-bg:           rgba(0, 0, 0, 0.06);
  --vs-scrollbar:        rgba(0, 0, 0, 0.13);
  --vs-scrollbar-hover:  rgba(0, 0, 0, 0.23);
  --vs-empty-icon-bg:    rgba(102, 126, 234, 0.08);
  --vs-empty-icon-border:rgba(102, 126, 234, 0.2);
  --vs-hero-bg:          linear-gradient(135deg, rgba(240,244,255,0.92) 0%, rgba(255,255,255,0.88) 100%);
  --vs-hero-shadow:      0 4px 20px rgba(102,126,234,0.1), 0 0 0 1px rgba(102,126,234,0.1);
  --vs-transition-bg:    rgba(34, 211, 238, 0.06);
  --vs-transition-border:rgba(34, 211, 238, 0.18);
  --vs-followup-bg:      rgba(34, 197, 94, 0.06);
  --vs-followup-border:  rgba(34, 197, 94, 0.18);
  --vs-dialog-bg:        rgba(245, 247, 255, 0.99);
  --vs-dialog-border:    rgba(102, 126, 234, 0.2);
  --vs-section-alt:      transparent;
  --vs-section-bg:       transparent;
  --vs-card-shadow:      0 2px 16px rgba(102,126,234,0.1);
  --vs-glass-blur:       20px;
  --vs-accent:           #667eea;
}

/* ─── Dark theme ──────────────────────────────── */
.v-theme--vsDark {
  --vs-bg-gradient:      #121212;
  --vs-panel:            rgba(30, 41, 82, 0.38);
  --vs-panel-hover:      rgba(30, 41, 82, 0.55);
  --vs-border:           rgba(212, 175, 55, 0.2);
  --vs-text:             #f0f6ff;
  --vs-muted:            #a8b8d0;
  --vs-gold:             #d4af37;
  --vs-gold-glow:        rgba(212, 175, 55, 0.35);

  --vs-result-bg:        rgba(12, 18, 42, 0.65);
  --vs-result-border:    rgba(255, 255, 255, 0.07);
  --vs-bot-bg:           rgba(102, 126, 234, 0.11);
  --vs-bot-border:       rgba(102, 126, 234, 0.2);
  --vs-movie-bg:         rgba(255, 255, 255, 0.04);
  --vs-movie-hover:      rgba(255, 255, 255, 0.08);
  --vs-bar-bg:           rgba(255, 255, 255, 0.07);
  --vs-scrollbar:        rgba(255, 255, 255, 0.12);
  --vs-scrollbar-hover:  rgba(255, 255, 255, 0.22);
  --vs-empty-icon-bg:    rgba(212, 175, 55, 0.1);
  --vs-empty-icon-border:rgba(212, 175, 55, 0.2);
  --vs-hero-bg:          linear-gradient(135deg, rgba(22,28,58,0.55) 0%, rgba(30,41,82,0.4) 100%);
  --vs-hero-shadow:      0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(212,175,55,0.08);
  --vs-transition-bg:    rgba(34, 211, 238, 0.06);
  --vs-transition-border:rgba(34, 211, 238, 0.12);
  --vs-followup-bg:      rgba(34, 197, 94, 0.06);
  --vs-followup-border:  rgba(34, 197, 94, 0.12);
  --vs-dialog-bg:        rgba(8, 12, 35, 0.98);
  --vs-dialog-border:    rgba(212, 175, 55, 0.22);
  --vs-section-alt:      transparent;
  --vs-section-bg:       transparent;
  --vs-card-shadow:      0 4px 24px rgba(0,0,0,0.25);
  --vs-accent:           #d4af37;
  --vs-glass-blur:       24px;
}

/* ─── App backgrounds ────────────────────────── */
.v-theme--vsLight.sentimental-app {
  background-color: var(--vs-bg-gradient) !important;
  color: var(--vs-text);
}

.v-theme--vsDark.sentimental-app {
  background-color: var(--vs-bg-gradient) !important;
  color: var(--vs-text);
}

/* ─── Shared dialog styles (dialogs teleport to body) ── */
.dialog-card {
  background: var(--vs-dialog-bg) !important;
  border: 1.5px solid var(--vs-dialog-border) !important;
  backdrop-filter: blur(30px) !important;
}

.dialog-title {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--vs-text) !important;
  display: flex !important;
  align-items: center !important;
}

.dialog-movie-name {
  font-weight: 600;
  color: var(--vs-text);
  font-size: 1rem;
}

.dialog-subtitle {
  color: var(--vs-muted);
  margin: 0;
  line-height: 1.55;
}

.rating-stars-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.rating-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vs-muted);
  margin-left: 6px;
}

/* ─── Animations ──────────────────────────────── */
@keyframes liquidFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-5px) rotate(0.5deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
</style>