@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: 'Tajawal', 'Inter', sans-serif;
  
  /* Color definitions for Tailwind v4 - available as bg-background, bg-surface, etc. */
  --color-background: #020202;
  --color-surface: #0f0f11;
  --color-surface-highlight: #18181b;
  --color-border: #1f1f22;
  --color-primary: #fafafa;
  --color-secondary: #a1a1aa;
}

:root {
  color-scheme: dark;
}

@layer base {
  body {
    direction: rtl;
    text-align: right;
    @apply bg-[--color-background] text-[--color-primary] font-sans antialiased;
  }
}

:root {
  direction: rtl;
  color-scheme: dark;
}

/* Optional helper for elevated panels */
.surface {
  @apply bg-[--color-surface] border border-[--color-border];
}

/* Custom scrollbar styling for dark UI */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #09090b;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

@keyframes typingDot {
  0% {
    transform: translateY(0);
    opacity: 0.35;
  }
  20% {
    transform: translateY(-3px);
    opacity: 0.9;
  }
  40%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: #a1a1aa;
  animation: typingDot 1.1s infinite;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.12s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.24s;
}