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

:root {
  --purple: #7c6fd4;
  --pink:   #c084b8;
  --dark:   #5b4b8a;
  --muted:  #9d8ec2;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Background Gradient ---------- */
.bg-gradient {
  background: linear-gradient(
    160deg,
    #C7D2FE 0%,
    rgba(204,209,251,0.85) 20%,
    rgba(225,202,241,0.6) 50%,
    rgba(242,197,232,0.3) 75%,
    rgba(255,194,226,0.1) 100%
  );
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 280px;
  min-width: 0;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(124,111,212,0.12);
}

/* ---------- Gradient Utility ---------- */
.grad-purple {
  background: linear-gradient(135deg, var(--purple), var(--pink));
}

/* ---------- Role Card Icon ---------- */
.role-icon {
  background: linear-gradient(
    135deg,
    rgba(124,111,212,0.12),
    rgba(192,132,184,0.12)
  );
}

/* ---------- Suggestion Button ---------- */
.suggestion-btn {
  color: var(--dark);
  box-shadow: 0 4px 14px rgba(124,111,212,0.08);
}

/* ---------- Particle Animation ---------- */
.particle {
  animation: floatP linear infinite;
}

@keyframes floatP {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-120px) scale(1); opacity: 0; }
}

/* ---------- Bot Logo Float ---------- */
.float-bot {
  box-shadow: 0 10px 40px rgba(124,111,212,0.3);
  animation: floatBot 3s ease-in-out infinite;
}

@keyframes floatBot {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* ---------- Message Fade In ---------- */
.fade-in {
  animation: fadeIn 0.25s ease;
}

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

/* ---------- Typing Dots ---------- */
.typing-dot {
  animation: bounce 1.2s infinite;
}

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%            { transform: translateY(-6px); }
}

/* ---------- Rounded corner override for messages ---------- */
.msg-bot  { border-bottom-left-radius:  5px; }
.msg-user { border-bottom-right-radius: 5px; }

/* ===========================
   Landing Page
   =========================== */

.bg-landing {
  background: linear-gradient(
    to bottom,
    #C7D2FE 4%,
    rgba(204,209,251,0.91) 9%,
    rgba(225,202,241,0.53) 46%,
    rgba(242,197,232,0.23) 70%,
    rgba(255,194,226,0) 81%
  );
}

.particle {
  background: rgba(124,111,212,0.15);
  animation: floatParticle linear infinite;
}

@keyframes floatParticle {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

.slide-up {
  opacity: 0;
  animation: slideUp 0.7s ease forwards;
}

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

.float-robot {
  animation: floatRobot 3s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(124,111,212,0.25));
}

@keyframes floatRobot {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

.btn-glow {
  background: linear-gradient(135deg, #7c6fd4, #c084b8, #7c6fd4);
  background-size: 200% auto;
  border: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: glowPulse 2.5s ease-in-out infinite, shimmer 3s linear infinite;
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: rgba(255,255,255,0.25);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}

.btn-glow:hover::before { left: 130%; }

.btn-glow:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 10px 30px rgba(124,111,212,0.5), 0 0 60px rgba(192,132,184,0.3);
}

.btn-glow:active {
  transform: scale(0.97);
  filter: brightness(1.2);
  box-shadow: 0 0 50px rgba(124,111,212,0.8), 0 0 100px rgba(192,132,184,0.5);
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124,111,212,0.4), 0 0 40px rgba(192,132,184,0.2); }
  50%       { box-shadow: 0 0 35px rgba(124,111,212,0.7), 0 0 70px rgba(192,132,184,0.4); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ===========================
   Forgot Password
   =========================== */
.shadow-card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ===========================
   Login Page
   =========================== */
.card-shadow {
  box-shadow: 0 25px 60px rgba(92,75,138,0.2), 0 8px 20px rgba(124,111,212,0.15);
}

.left-panel {
  background: linear-gradient(145deg, #7c6fd4 0%, #9b6fc4 50%, #c084b8 100%);
}
.left-panel::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 40px solid rgba(255,255,255,0.08);
  top: -80px; left: -80px;
}
.left-panel::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 30px solid rgba(255,255,255,0.06);
  bottom: -60px; right: -60px;
}

.focus-within\:shadow-input:focus-within {
  box-shadow: 0 0 0 4px rgba(124,111,212,0.08);
}

.alert-error {
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,0.2);
}
.alert-success {
  background: rgba(110,231,183,0.15);
  color: #059669;
  border: 1px solid rgba(110,231,183,0.3);
}

.btn-login {
  background: linear-gradient(135deg, #7c6fd4, #c084b8);
  box-shadow: 0 4px 15px rgba(124,111,212,0.35);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn-login::before {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 40%; height: 200%;
  background: rgba(255,255,255,0.2);
  transform: skewX(-20deg);
  transition: left 0.5s;
}
.btn-login:hover::before { left: 130%; }
.btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124,111,212,0.5);
}
.btn-login:active { transform: scale(0.98); }

/* ===========================
   Mobile Responsive
   =========================== */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    left: -100% !important;
    top: 0 !important;
    height: 100% !important;
    width: 0 !important;
    min-width: 0 !important;
    transition: left 0.3s ease;
    z-index: 100 !important;
    overflow: hidden !important;
  }
  .sidebar.open {
    left: 0 !important;
    width: 75% !important;
  }
  #splash {
    padding: 16px !important;
    gap: 10px !important;
    overflow-y: auto !important;
  }
  #splash .w-28 {
    width: 64px !important;
    height: 64px !important;
  }
  #splash .text-3xl {
    font-size: 1.1rem !important;
  }
  #splash .w-full {
    gap: 8px !important;
    margin-top: 4px !important;
    padding: 0 !important;
  }
  #splash .role-card {
    padding: 10px 12px !important;
  }
  #splash .role-icon {
    width: 36px !important;
    height: 36px !important;
  }
}