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

/* Telegram Mini App CSS Variables */
:root {
  /* Safe area environment variables with fallbacks */
  --safe-area-inset-top: env(safe-area-inset-top, 20px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);

  /* Legacy support variables (can be overridden by JS if needed) */
  --tg-safe-area-inset-top: var(--safe-area-inset-top);
  --tg-safe-area-inset-bottom: var(--safe-area-inset-bottom);
  --tg-safe-area-inset-left: var(--safe-area-inset-left);
  --tg-safe-area-inset-right: var(--safe-area-inset-right);
}

svg {
  fill: currentColor;
}

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer components {
  /* Safe Area Utility Classes */
  .pt-safe {
    padding-top: var(--safe-area-inset-top);
  }

  .pb-safe {
    padding-bottom: var(--safe-area-inset-bottom);
  }

  .px-safe {
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }

  .p-safe {
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }

  /* Fullscreen mode adjustments (optional, if needed) */
  .tg-fullscreen-mode {
    /* Additional fullscreen-specific styling if needed */
    /* Note: Safe areas are handled by body padding now */
  }

  .push-button-animation {
    transition: transform 50ms ease-in-out;
    transform: scale(0.97);
  }

  .turbo-progress-bar {
    @apply bg-tg-button !important;
  }

  .cta_whatsapp_main {
    @apply items-center justify-center gap-1 px-8 py-4 font-bold text-white rounded-full shadow transition cursor-pointer bg-gradient-to-r from-[#24D366] to-[#24D366] duration-200 hover:from-purple-600 hover:via-red-400 hover:to-amber-400 animate-text;
  }
  .cta_whisper_main {
    @apply items-center justify-center gap-1 px-8 py-4 font-bold text-white rounded-full shadow transition cursor-pointer bg-gradient-to-r hover:from-[#24D366] hover:to-[#24D366] duration-200 from-purple-600 via-red-400 to-amber-400 animate-text;
  }

  .bg-whatsapp {
    @apply bg-gradient-to-r hover:from-[#24D366] hover:to-[#24D366] animate-text;
  }
  .hover-gradient {
    @apply hover:from-purple-600 hover:via-red-400 hover:to-amber-400;
  }
  .hover-whatsapp {
    @apply hover:from-[#24D366] hover:to-[#24D366];
  }
  .text-gradient {
    @apply text-transparent animate-text bg-gradient-to-r from-purple-600 via-red-400 to-amber-400 bg-clip-text;
  }

  .bg-gradient-joi {
    @apply bg-gradient-to-r from-joi-pink-300 via-joi-pink-200 to-joi-pink-100 animate-text;
  }
  .text-gradient-joi {
    @apply text-transparent animate-text bg-gradient-to-r from-joi-pink-300 via-joi-pink-200 to-joi-pink-100 bg-clip-text;
  }

  .cta_joi_main {
    @apply items-center justify-center gap-1 px-8 py-4 font-bold transition duration-200 transform rounded-full shadow cursor-pointer bg-tg-button text-tg-button-text hover:scale-110;
  }

  .cta_joi_main_v2 {
    @apply items-center justify-center gap-1 px-8 py-4 font-bold text-white transition duration-200 transform rounded-full shadow cursor-pointer hover:scale-110 bg-joi-pink-200;
  }

  .gradient-text {
    @apply text-transparent animate-text bg-gradient-to-r from-joi-red-200 to-joi-pink-200 bg-clip-text;
  }

  .gradient-bg {
    @apply bg-gradient-to-r from-joi-red-200 to-joi-pink-200 animate-text;
  }

  /* Heart icon states for post interactions */
  .heart-liked {
    @apply text-red-500 transition-colors duration-200;
  }

  .heart-unliked {
    @apply text-gray-600 transition-colors duration-200;
  }

  .heart-unliked:hover {
    @apply text-red-500;
  }

  .bottom-padding {
    bottom: calc(2rem + env(safe-area-inset-bottom));
  }

  /* Line clamp utilities */
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Match Room specific styles */
  .match-card-stack {
    perspective: 1000px;
  }

  .match-card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  .match-card.dragging {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
  }

  /* Smooth spring animations for card snapping */
  .card-spring-back {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  /* Match modal entrance animation */
  .match-modal-enter {
    animation: matchModalEnter 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @keyframes matchModalEnter {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Pulse animation for matched heart */
  .heart-pulse {
    animation: heartPulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  @keyframes heartPulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */