:root {
    --logo-primary-color: #a855f7; /* Tailwind purple-500 */
    --logo-accent-color: #3b82f6; /* Tailwind blue-500 */
  }
  body {
    background-color: #0a0a0a;
    background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(120, 119, 198, 0.3), rgba(255, 255, 255, 0));
    transition: background-color 0.3s ease;
  }
  .light body {
    background-color: #f0f2f5;
    background-image: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.15), rgba(255, 255, 255, 0));
  }
  .logo-text {
    background: linear-gradient(to right, var(--logo-primary-color), var(--logo-accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  @keyframes float-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-float-in {
    animation: float-in 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
  }
  @keyframes slide-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
  .animate-slide-in-left {
    animation: slide-in-left 0.3s ease-out forwards;
  }
  @keyframes slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }
  .animate-slide-in-right {
    animation: slide-in-right 0.3s ease-out forwards;
  }

  .is-private {
    --theme-bg-panel: #3c3c50;
    --theme-border: #52525b;
    --theme-bg-hover: #52525b;
    --theme-interactive-primary: #a78bfa; /* A lighter purple for private mode primary */
    --theme-text-primary: #f5f3ff;
    --theme-text-muted: #dcd9e9;
  }
  .light .is-private {
    --theme-bg-primary: #f5f3ff;
    --theme-bg-panel: #e9e7f5;
    --theme-border: #d1cce6;
    --theme-bg-hover: #dcd9e9;
    --theme-interactive-primary: #6d28d9;
    --theme-text-primary: #2e1065;
    --theme-text-muted: #5b21b6;
  }
  .private-mode-toggle {
    background-color: rgba(168, 85, 247, 0.1);
  }
  .private-mode-toggle:hover {
    background-color: rgba(168, 85, 247, 0.2);
  }
  .light .private-mode-toggle {
    background-color: rgba(109, 40, 217, 0.1);
  }
  .light .private-mode-toggle:hover {
    background-color: rgba(109, 40, 217, 0.2);
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .glass-card {
    background-color: rgba(30, 30, 35, 0.6);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .light .glass-card {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
  
  .glass-surface {
    background-color: rgba(24, 24, 27, 0.6);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }
  .light .glass-surface {
    background-color: rgba(244, 244, 245, 0.7);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .private-glow {
    box-shadow: 0 0 10px 2px rgba(168, 85, 247, 0.5), 0 0 20px 4px rgba(59, 130, 246, 0.3);
    animation: pulse-glow 3s infinite alternate;
  }
  @keyframes pulse-glow {
    from {
        box-shadow: 0 0 8px 1px rgba(168, 85, 247, 0.4), 0 0 16px 2px rgba(59, 130, 246, 0.2);
    }
    to {
        box-shadow: 0 0 12px 2px rgba(168, 85, 247, 0.6), 0 0 24px 4px rgba(59, 130, 246, 0.3);
    }
  }

  /* Styles for Live AI Page */
  .live-ai-bg {
    background: radial-gradient(circle at 50% 50%, #1a1129, #0a0a0a 70%);
  }

  @keyframes pulse-glow-subtle {
    0% { transform: scale(0.95); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.7; }
  }
  .animate-pulse-glow-subtle {
    animation: pulse-glow-subtle 4s ease-in-out infinite;
  }
  .shadow-inner-strong {
    box-shadow: inset 0 10px 30px rgba(0,0,0,0.5), inset 0 -2px 5px rgba(255,255,255,0.1);
  }