@import "tailwindcss";
@source "../../services/**/*.rb";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

/* Prevent white flash during Turbo navigation in dark mode */
html.dark {
  color-scheme: dark;
  background-color: #030712; /* gray-950 */
}

/* Custom theme extensions for gnu-rails */
@theme {
  /* Primary colors */
  --color-primary: #DC2626;
  --color-primary-dark: #B91C1C;
  --color-primary-light: #EF4444;

  /* Pinned/Notice background */
  --color-pinned-bg: #FFF9E6;
  --color-pinned-border: #DC2626;

  /* Status colors */
  --color-status-online: #2ECC71;
  --color-status-away: #F1C40F;
  --color-status-dnd: #E74C3C;
  --color-status-offline: #95A5A6;

  /* Mention highlight */
  --color-mention-bg: #DBEAFE;
  --color-mention-text: #1D4ED8;

  /* Post reference highlight */
  --color-reference-text: #7C3AED;
  --color-reference-hover: #6D28D9;
}

/* Custom utility classes */
@layer components {
  /* Unread badge styling */
  .unread-badge {
    @apply bg-red-500 text-white text-xs font-bold rounded-full px-2 py-0.5 min-w-[20px] text-center;
  }

  /* Mention styling in messages */
  .mention {
    @apply bg-blue-100 text-blue-700 px-1 rounded font-medium;
  }

  /* Post reference styling */
  .post-reference {
    @apply text-purple-600 hover:text-purple-800 underline;
  }

  /* Notice post styling */
  .notice-post {
    @apply bg-[#FFF9E6] border-l-4 border-blue-600 rounded-r-lg;
  }

  /* Chat bubble - mine */
  .chat-bubble-mine {
    @apply bg-blue-500 text-white rounded-2xl px-4 py-2.5 shadow-sm;
  }

  /* Chat bubble - theirs */
  .chat-bubble-theirs {
    @apply bg-white text-gray-900 border border-gray-200 rounded-2xl px-4 py-2.5 shadow-sm;
  }

  /* Profile avatar */
  .profile-avatar {
    @apply rounded-full flex items-center justify-center text-white font-semibold;
  }

  /* Tab button active */
  .tab-active {
    @apply border-blue-500 text-blue-600;
  }

  /* Tab button inactive */
  .tab-inactive {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
  }

  /* Post card (Skool-style) */
  .post-card {
    @apply bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 px-5 py-4 hover:shadow-md transition-shadow;
  }

  /* Pinned post card (yellow/orange left border) */
  .post-card-pinned {
    @apply border-l-4 border-l-amber-400;
  }

  /* Bottom nav item */
  .bottom-nav-item {
    @apply flex flex-col items-center justify-center px-3 py-1;
  }

  /* Level badge on avatar (green like Skool) */
  .level-badge {
    @apply absolute -bottom-0.5 -right-0.5 w-5 h-5 bg-green-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white;
  }

  /* Safe area for bottom nav on notch devices */
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Custom animations */
@layer utilities {
  /* Fade in animation for new messages */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

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

  /* AI typing indicator - bouncing dots */
  .ai-typing-dot {
    animation: aiBounce 1.4s ease-in-out infinite;
  }
  .ai-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  .ai-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes aiBounce {
    0%, 60%, 100% {
      transform: translateY(0);
      opacity: 0.4;
    }
    30% {
      transform: translateY(-6px);
      opacity: 1;
    }
  }

  /* Hide scrollbar but keep scrolling */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Slide in from right for notifications */
  .animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Toast popup */
  .animate-toast {
    animation: toastIn 0.3s ease-out;
  }

  @keyframes toastIn {
    from {
      opacity: 0;
      transform: translate(-50%, -20px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}