src/index.css

@import "tailwindcss";

@source "../node_modules/streamdown/dist/*.js";

@font-face {
  font-family: "PP Telegraf";
  src: url("/fonts/PPTelegraf-Ultralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Telegraf";
  src: url("/fonts/PPTelegraf-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Telegraf";
  src: url("/fonts/PPTelegraf-Ultrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@layer base {
  html,
  body {
    font-family:
      "PP Telegraf",
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    font-size: 17px;
    height: 100%;
    overflow: hidden;
    background: #0a3235;
    color: #0a3235;
  }

  #root {
    height: 100%;
  }

  /* Sleek scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  *:hover {
    scrollbar-color: #c8bfb3 transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

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

  ::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
  }

  *:hover::-webkit-scrollbar-thumb {
    background: #c8bfb3;
  }

  *:hover::-webkit-scrollbar-thumb:hover {
    background: #a89e92;
  }

  :root {
    --ai2-dark-teal: #0a3235;
    --ai2-off-white: #faf2e9;
    --ai2-teal: #105257;
    --ai2-pink: #f0529c;
    --ai2-purple: #b11be8;
    --ai2-green: #0fcb8c;

    --ai2-dark-teal-70: #0a3235b3;
    --ai2-dark-teal-50: #0a323580;
    --ai2-dark-teal-30: #0a32354d;
    --ai2-dark-teal-10: #0a32351a;
    --ai2-teal-70: #105257b3;
    --ai2-teal-50: #10525780;
    --ai2-teal-30: #1052574d;
    --ai2-teal-10: #1052571a;
    --ai2-pink-70: #f0529cb3;
    --ai2-pink-50: #f0529c80;
    --ai2-pink-30: #f0529c4d;
    --ai2-pink-10: #f0529c1a;
    --ai2-green-70: #0fcb8cb3;
    --ai2-green-50: #0fcb8c80;
    --ai2-green-30: #0fcb8c4d;
    --ai2-green-10: #0fcb8c1a;
    --ai2-purple-70: #b11be8b3;
    --ai2-purple-50: #b11be880;
    --ai2-purple-30: #b11be84d;
    --ai2-purple-10: #b11be81a;

    --background: var(--ai2-off-white);
    --foreground: var(--ai2-dark-teal);
    --card: var(--ai2-off-white);
    --card-foreground: var(--ai2-dark-teal);
    --popover: var(--ai2-off-white);
    --popover-foreground: var(--ai2-dark-teal);
    --primary: var(--ai2-dark-teal);
    --primary-foreground: var(--ai2-off-white);
    --secondary: #f0e8de;
    --secondary-foreground: var(--ai2-dark-teal);
    --muted: #f0e8de;
    --muted-foreground: var(--ai2-dark-teal-70);
    --accent: var(--ai2-teal-10);
    --accent-foreground: var(--ai2-dark-teal);
    --destructive: #dc2626;
    --destructive-foreground: var(--ai2-off-white);
    --border: var(--ai2-dark-teal-10);
    --input: var(--ai2-dark-teal-10);
    --ring: var(--ai2-teal);
    --radius: 0.5rem;
  }
}

.brand-surface {
  background: radial-gradient(
      ellipse 70% 50% at 86% 12%,
      var(--ai2-teal-10),
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 50% at 12% 86%,
      var(--ai2-green-10),
      transparent 72%
    ),
    var(--ai2-off-white);
}

/* Gentle pulse for loading text */
@keyframes pulse-gentle {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.animate-pulse-gentle {
  animation: pulse-gentle 2.5s ease-in-out infinite;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-rise-in {
  animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-rise-in-delayed {
  animation: rise-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}

.font-support {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Fade-in for chat transition */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.5s ease-out both;
}

/* Thinking shimmer animation */
@keyframes thinking-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.thinking-shimmer {
  background: linear-gradient(
    105deg,
    #6d6d6d 0%,
    #6d6d6d 40%,
    #f0529c 50%,
    #6d6d6d 60%,
    #6d6d6d 100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: thinking-shimmer 2s ease-in-out infinite;
}

@keyframes orb-drift-left {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  33% {
    transform: translate(-46%, -44%) scale(1.05);
  }
  66% {
    transform: translate(-53%, -54%) scale(0.97);
  }
}
@keyframes orb-drift-right {
  0%,
  100% {
    transform: translate(50%, -50%) scale(1);
  }
  33% {
    transform: translate(55%, -54%) scale(0.97);
  }
  66% {
    transform: translate(47%, -44%) scale(1.04);
  }
}