@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    box-sizing: border-box;
  }

  html, body, #root {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  body {
    @apply font-sans text-[15px] antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Modern thin scrollbar */
  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-black/15 rounded-full;
    transition: background 0.2s;
  }
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-black/25;
  }
  .dark ::-webkit-scrollbar-thumb {
    @apply bg-white/15;
  }
  .dark ::-webkit-scrollbar-thumb:hover {
    @apply bg-white/25;
  }

  /* Smooth focus states */
  :focus-visible {
    @apply outline-none ring-2 ring-brand ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
  }
}

@layer utilities {
  .scrollbar-none {
    scrollbar-width: none;
  }
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  /* Glass morphism utilities */
  .glass {
    @apply bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl;
  }
  .glass-strong {
    @apply bg-white/90 dark:bg-gray-900/90 backdrop-blur-2xl;
  }

  /* Subtle gradient overlay */
  .gradient-border {
    position: relative;
  }
  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(91,94,244,0.2), rgba(91,94,244,0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* Chat background tile pattern */
.chat-bg {
  background-image: url('/chat-bg.png');
  background-repeat: repeat;
  background-position: center;
  background-color: #EFEFF3;
}

.dark .chat-bg {
  background-color: #0e1621;
  filter: brightness(0.5) saturate(0.8);
}

/* Message animation classes */
.message-enter {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth transitions for all interactive elements */
button, a {
  @apply transition-all duration-200;
}

/* Improved selection color */
::selection {
  @apply bg-brand/20 text-gray-900 dark:text-white;
}

/* Pulse animation for online status */
@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); }
}
.online-pulse {
  animation: onlinePulse 2s infinite;
}
