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

/* Hide native browser clear button on search inputs */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

input[type="search"]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-skinny-primary text-white rounded-lg hover:bg-skinny-primary/90 transition-colors;
  }

  .btn-secondary {
    @apply px-4 py-2 bg-skinny-secondary text-white rounded-lg hover:bg-skinny-secondary/90 transition-colors;
  }

  /* Safe area handling for native apps */
  .pt-safe {
    padding-top: env(safe-area-inset-top);
  }

  .pt-navbar-safe {
    padding-top: calc(4rem + env(safe-area-inset-top));
  }

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

  .mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
  }

  /* Tab bar spacing - accounts for tab bar height + safe area */
  .pb-tabbar {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  }

  .mb-tabbar {
    margin-bottom: calc(4rem + env(safe-area-inset-bottom));
  }

  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-4;
  }

  .form-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-skinny-primary focus:ring focus:ring-skinny-primary/30 focus:ring-opacity-50;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
  }

  .dip-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all hover:shadow-lg;
  }

  .dip-image-container {
    @apply relative h-full overflow-hidden bg-gray-200 dark:bg-gray-700;
  }

  .dip-content {
    @apply p-4;
  }

  .dip-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
  }

  .dip-price {
    @apply text-skinny-secondary font-medium;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-primary {
    @apply bg-skinny-primary bg-opacity-10 text-skinny-primary dark:text-white dark:bg-opacity-20;
  }

  .badge-secondary {
    @apply bg-skinny-secondary bg-opacity-10 text-skinny-secondary dark:bg-opacity-20;
  }

  .nav-link {
    @apply inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium;
  }

  .nav-link-active {
    @apply border-skinny-primary text-gray-900 dark:text-white;
  }

  .nav-link-inactive {
    @apply border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300;
  }
  .mobile-nav-link {
    @apply block px-3 py-2 rounded-md text-base font-medium;
  }

  .mobile-nav-link-active {
    @apply bg-skinny-primary bg-opacity-10 text-skinny-primary dark:text-white dark:bg-opacity-20;
  }

  .mobile-nav-link-inactive {
    @apply text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700;
  }

  /* Dip grid responsiveness */
  .dips-grid {
    @apply grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }

  /* Sortable dip items */
  .sortable-dip-item {
    @apply flex items-center p-3 bg-white dark:bg-gray-800 rounded-lg shadow cursor-grab border-2 border-transparent hover:border-skinny-primary transition-colors;
  }

  .sortable-dip-item-active {
    @apply border-skinny-primary bg-skinny-primary bg-opacity-5;
  }

  .sortable-dip-item-placeholder {
    @apply border-dashed border-2 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800;
  }

  /* Match card styles */
  .match-card {
    @apply flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow;
  }

  .match-avatar {
    @apply h-12 w-12 rounded-full bg-gray-200 dark:bg-gray-700 flex-shrink-0 mr-4;
  }

  .match-content {
    @apply flex-1;
  }

  .match-actions {
    @apply mt-2 flex space-x-2;
  }

  .image-item {
    @apply transition-all duration-200 ease-in-out;
  }

  .image-item.ring-2 {
    @apply z-10;
  }

  .sort-slot {
    @apply w-full aspect-square
           rounded-lg overflow-hidden
           border-2 border-dashed border-gray-400
           transition-colors duration-200 ease-in-out;
  }

  .sort-slot .dip-image-container {
    @apply h-full;
  }

  .sort-slot:empty {
    @apply border-dashed;
  }

  .sort-slot.border-blue-500 {
    @apply border-solid;
  }

  .in-slot {
    @apply w-full;
  }

  /* Welcome page animation classes */
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 1s ease-in-out,
      transform 1s ease-in-out;
  }

  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .logo-fade {
    opacity: 0;
    transform: scale(0.8);
    transition:
      opacity 1.5s ease-in-out,
      transform 1.5s ease-in-out;
  }

  .logo-fade.visible {
    opacity: 1;
    transform: scale(1);
  }

  /* Touch drag styling */
  .touch-drag-image {
    @apply scale-90 shadow-lg transition-none;
  }

  /* Draggable items styling */
  [draggable="true"] {
    @apply cursor-move;
  }

  [draggable="true"]:active {
    @apply cursor-grabbing;
  }

  /* Click-to-sort functionality styles */
  .click-sort-item {
    transition:
      transform 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;
  }

  .click-sort-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .click-sort-item:active {
    transform: translateY(0);
  }

  /* Selected items get blue ring (applied by controller) */
  .click-sort-item.ring-2 {
    box-shadow:
      0 0 0 2px rgb(59 130 246 / 0.75),
      0 4px 12px rgba(0, 0, 0, 0.15);
  }

  /* Badge positioning */
  .sort-position-badge {
    z-index: 10;
    pointer-events: none;
  }

  /* Mobile Image Swiper Styles - Simplified approach */
  .mobile-swiper {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    width: 100%;
  }

  /* Force mobile behavior on small screens - show swiper, hide desktop */
  @media (max-width: 768px) {
    .dip-display[data-controller*="mobile-image-swiper"] .mobile-swiper {
      display: block !important;
    }

    .dip-display[data-controller*="mobile-image-swiper"] .desktop-view {
      display: none !important;
    }
  }

  /* Ensure swiper takes full container dimensions */
  .mobile-swiper .flex {
    width: 100%;
    /* Remove height: 100% to allow natural sizing */
  }

  .mobile-swiper [data-mobile-image-swiper-target="imageSlide"] {
    min-width: 100%;
    width: 100%;
    /* Remove height: 100% */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-swiper img {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* Changed from cover */
    object-position: center;
  }

  /* Ensure individual images have space to scale */
  .mobile-swiper .individual-image-container {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-swiper .individual-image-container img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    min-width: 100%;
    object-fit: contain;
  }

  /* Override for profile picture swiper - use contain instead of cover */
  .mobile-swiper .composite-image-wrapper img,
  .mobile-swiper .individual-image-container img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Make sure indicators are visible and clean - REMOVE the gray background */
  .mobile-swiper .absolute.bottom-4 {
    z-index: 20;
    /* Remove the gray background that was causing the overlay */
    border-radius: 9999px;
    padding: 0.25rem 0.5rem;
  }

  /* Make sure indicators are visible and clean */
  .mobile-swiper .absolute.bottom-4 {
    z-index: 20;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 9999px;
    padding: 0.5rem 0.75rem;
  }

  /* dot indicators - more specific selectors */
  .mobile-swiper [data-mobile-image-swiper-target="indicator"] {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 50% !important;
    display: block !important;
  }

  /* Default dot size (normal) */
  .mobile-swiper
    [data-mobile-image-swiper-target="indicator"][data-dot-size="normal"] {
    width: 8px !important;
    height: 8px !important;
  }

  /* Medium dot size (slightly smaller) */
  .mobile-swiper
    [data-mobile-image-swiper-target="indicator"][data-dot-size="medium"] {
    width: 6px !important;
    height: 6px !important;
  }

  /* Small dot size (smallest) */
  .mobile-swiper
    [data-mobile-image-swiper-target="indicator"][data-dot-size="small"] {
    width: 4px !important;
    height: 4px !important;
  }

  /* Active dot styling */
  .mobile-swiper [data-mobile-image-swiper-target="indicator"].active {
    background-color: rgb(59 130 246) !important;
  }

  /* Non-active dot styling */
  .mobile-swiper [data-mobile-image-swiper-target="indicator"]:not(.active) {
    background-color: rgba(255, 255, 255, 0.7) !important;
  }

  .mobile-swiper [data-mobile-image-swiper-target="indicator"].bg-opacity-100 {
    opacity: 1;
  }

  /* Prevent text selection during swipe */
  .mobile-swiper * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  /* Smooth transitions for indicators */
  .mobile-swiper [data-mobile-image-swiper-target="indicator"] {
    transition: background-color 0.2s ease;
  }

  .fixed.inset-0 {
    transition: opacity 0.3s ease;
  }

  .fixed.inset-0.hidden {
    opacity: 0;
    pointer-events: none;
  }

  .fixed.inset-0:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
  }

  /* Button hover effects */
  button.absolute:not(.search-clear-btn) {
    transition:
      transform 0.2s ease,
      background-color 0.2s ease;
  }

  button.absolute:not(.search-clear-btn):hover {
    transform: scale(1.1) translateY(-50%);
    background-color: rgba(255, 255, 255, 0.7);
  }

  /* Image transitions */
  img.max-w-full.max-h-\[80vh\] {
    transition: transform 0.3s ease;
  }

  /* Message bubble styling - modern approach with asymmetric corners */
  .message-bubble-right {
    border-radius: 1rem 1rem 0.25rem 1rem;
  }

  .message-bubble-left {
    border-radius: 1rem 1rem 1rem 0.25rem;
  }

  /* message bubbles */
  .message-tail-right::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -5px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-radius: 0 0 50% 0;
    transform: rotate(-45deg);
  }

  .message-tail-left::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -5px;
    width: 10px;
    height: 10px;
    background: inherit;
    border-radius: 0 0 0 50%;
    transform: rotate(45deg);
  }

  /* Mobile specific styles for dip sorting */
  @media (max-width: 768px) {
    .dip-sort-container {
      @apply h-[500px] max-h-[70vh];
    }

    .dip-sort-column {
      @apply w-1/2 overflow-y-auto bg-gray-100 p-3 rounded-lg;
    }

    .dip-sort-image {
      @apply max-h-[150px] w-auto mx-auto;
    }

    .dip-sort-slot {
      @apply min-h-[100px];
    }
  }

  @media (min-width: 768px) {
    .hidden.md\:block {
      display: block !important;
    }

    .hidden.md\:flex {
      display: flex !important;
    }

    [data-dip-sort-target="sourceItem"][data-view="desktop"] {
      display: block !important;
    }
  }

  /* Composite image styling for transparency support and loading states */
  .composite-image-container {
    @apply relative overflow-hidden rounded-lg;
  }

  .composite-image {
    @apply relative z-10;
  }

  /* Composite image cropping styles for mobile swiper */
  .composite-image-wrapper {
    @apply relative overflow-hidden;
    min-height: 300px; /* Reserve space before image loads */

    /* Loading state shimmer - only when loading class is present */
    background: #f0f0f0;
  }

  .composite-image-wrapper.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  /* Remove loading class and shimmer when image loads */
  .composite-image-wrapper:not(.loading) {
    background: transparent;
    animation: none;
  }

  .composite-image-wrapper .composite-swiper-image {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
  }

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

  .composite-image-wrapper.crop-to-three-rows {
    max-height: 380px;
    min-height: 380px;
    overflow: hidden;
    display: block;
  }

  .composite-image-wrapper.crop-to-three-rows .composite-swiper-image {
    width: 100%;
    height: auto;
    min-height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
    vertical-align: top;
  }

  /* Fix for individual images in cropped swiper - match composite height */
  .mobile-swiper.has-cropped-composite .individual-image-container {
    height: 380px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-swiper.has-cropped-composite .individual-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Profile picture swiper - vertical centering for all images */
  .mobile-swiper [data-mobile-image-swiper-target="imageSlide"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
  }

  .mobile-swiper .composite-image-wrapper,
  .mobile-swiper .individual-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .mobile-swiper .composite-swiper-image,
  .mobile-swiper .individual-image-container img {
    max-height: 80vh;
    object-fit: contain;
  }

  /* Image load failure handling */
  .individual-image-container.image-load-failed::after {
    content: "Image temporarily unavailable";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(243, 244, 246, 0.95);
    color: rgb(107, 114, 128);
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    z-index: 10;
  }

  @media (prefers-color-scheme: dark) {
    .individual-image-container.image-load-failed::after {
      background-color: rgba(55, 65, 81, 0.95);
      color: rgb(156, 163, 175);
    }
  }

  /* Responsive max heights for different screen sizes */
  @media (max-width: 375px) {
    .composite-image-wrapper {
      min-height: 280px;
    }

    .composite-image-wrapper.crop-to-three-rows {
      max-height: 360px;
      min-height: 360px;
    }
  }

  @media (min-width: 376px) and (max-width: 414px) {
    .composite-image-wrapper {
      min-height: 320px;
    }

    .composite-image-wrapper.crop-to-three-rows {
      max-height: 390px;
      min-height: 390px;
    }
  }

  @media (min-width: 415px) and (max-width: 768px) {
    .composite-image-wrapper {
      min-height: 350px;
    }

    .composite-image-wrapper.crop-to-three-rows {
      max-height: 420px;
      min-height: 420px;
    }
  }

  /* Remove cropping completely on desktop */
  @media (min-width: 768px) {
    .composite-image-wrapper.crop-to-three-rows {
      max-height: none;
      overflow: visible;
    }
  }

  /* Drag and drop highlighting styles */
  .drag-over-highlight {
    @apply border-2 border-solid border-skinny-primary bg-skinny-primary bg-opacity-10;
  }

  /* Picture slot base styles */
  .picture-slot {
    @apply relative transition-all duration-200 ease-in-out;
  }

  .picture-slot:not(.drag-over-highlight):hover {
    @apply bg-gray-50 dark:bg-gray-700;
  }

  /* Profile picture display swiper - override all conflicting rules */
  .mobile-swiper .composite-image-wrapper,
  .mobile-swiper .individual-image-container {
    min-height: unset !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  /* Blur preview toggle - allow hiding with inline styles */
  .mobile-swiper .composite-image-wrapper[style*="display: none"],
  .mobile-swiper .individual-image-container[style*="display: none"] {
    display: none !important;
  }

  .mobile-swiper .composite-swiper-image,
  .mobile-swiper .individual-image-container img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: unset !important;
    object-fit: contain !important;
  }

  .mobile-swiper [data-mobile-image-swiper-target="imageSlide"] {
    min-height: unset !important;
  }

  /* Pinch-to-zoom styles */
  [data-pinch-zoom-target="zoomable"] {
    touch-action: pan-y pinch-zoom;
    transform-origin: center center;
    will-change: transform;
  }

  /* During active pinch gesture - disable transition for smooth tracking */
  [data-pinch-zoom-target="zoomable"].zooming {
    transition: none !important;
  }

  /* When zoomed in - show grab cursor and allow overflow */
  [data-pinch-zoom-target="zoomable"].zoomed {
    cursor: grab;
    overflow: visible !important;
  }

  /* While panning - show grabbing cursor */
  [data-pinch-zoom-target="zoomable"].panning {
    cursor: grabbing;
  }

  /* Ensure zoomed images stay above other content and allow overflow */
  [data-controller="pinch-zoom"] {
    position: relative;
    z-index: 1;
  }

  [data-controller="pinch-zoom"].pinch-zooming {
    z-index: 9999;
    overflow: visible !important;
    position: relative;
  }

  /* Ensure zoomed images appear above friends navigation and other elements */
  [data-controller="pinch-zoom"].pinch-zooming [data-pinch-zoom-target="zoomable"] {
    z-index: 9999;
    position: relative;
  }

  /* Hide friends navigation when pinch-zooming is active */
  body:has(.pinch-zooming) #friends-navigation {
    visibility: hidden;
  }

  /* Allow overflow on parent containers when zooming */
  .mobile-swiper:has(.pinch-zooming) {
    overflow: visible !important;
  }

  .mobile-swiper:has(.pinch-zooming) .flex {
    overflow: visible !important;
  }

  .mobile-swiper:has(.pinch-zooming) [data-mobile-image-swiper-target="imageSlide"] {
    overflow: visible !important;
  }

  /* Allow overflow on lazy-swiper containers when zooming */
  [data-controller="lazy-swiper"]:has(.pinch-zooming) {
    overflow: visible !important;
  }

  [data-controller="lazy-swiper"]:has(.pinch-zooming) [data-lazy-swiper-target="container"] {
    overflow: visible !important;
  }

  [data-controller="lazy-swiper"]:has(.pinch-zooming) [data-lazy-swiper-target="slidesWrapper"] {
    overflow: visible !important;
  }

  [data-controller="lazy-swiper"]:has(.pinch-zooming) [data-lazy-swiper-target="slide"] {
    overflow: visible !important;
  }

  /* Allow overflow on composite and individual image containers when zooming */
  .mobile-swiper:has(.pinch-zooming) .composite-image-wrapper,
  .mobile-swiper:has(.pinch-zooming) .individual-image-container {
    overflow: visible !important;
  }

  /* Ensure the zoomed image can expand to fill viewport */
  .pinch-zooming [data-pinch-zoom-target="zoomable"] img {
    max-width: none !important;
    max-height: none !important;
  }

  /* Allow overflow on page-level card containers when pinch-zooming */
  body:has(.pinch-zooming) [data-controller="mobile-image-swiper"] {
    overflow: visible !important;
  }
}

/* Real-time presence indicators */
.presence-indicator {
  @apply w-2 h-2 rounded-full border border-white;
}

.presence-indicator.online {
  @apply bg-green-500;
}

.presence-indicator.away {
  @apply bg-yellow-500;
}

.presence-indicator.busy {
  @apply bg-red-500;
}

.presence-indicator.offline {
  @apply bg-gray-400;
}

.presence-status {
  @apply w-3 h-3 rounded-full border-2 border-white;
}

.presence-status.online {
  @apply bg-green-500;
  animation: pulse-green 2s infinite;
}

.presence-status.away {
  @apply bg-yellow-500;
}

.presence-status.busy {
  @apply bg-red-500;
}

.presence-status.offline {
  @apply bg-gray-400;
}

/* Connection status indicators */
.online-status.online {
  @apply text-green-600;
}

.online-status.offline {
  @apply text-red-600;
}

/* Typing indicator animation */
.typing-indicator {
  @apply flex items-center space-x-1;
}

.typing-dot {
  @apply w-2 h-2 bg-gray-400 rounded-full;
  animation: typing 1.5s infinite ease-in-out;
}

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

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

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

@keyframes pulse-green {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Real-time message animations */
.message-fade-in {
  animation: fadeInUp 0.3s ease-out;
}

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

/* Toast notifications */
.toast-notification {
  @apply fixed top-4 right-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-50 max-w-sm p-4;
  animation: slideInRight 0.3s ease-out;
}

.toast-notification.success {
  @apply border-green-500 bg-green-50 dark:bg-green-900;
}

.toast-notification.error {
  @apply border-red-500 bg-red-50 dark:bg-red-900;
}

.toast-notification.info {
  @apply border-blue-500 bg-blue-50 dark:bg-blue-900;
}

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

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* Unread message indicators */
.unread-badge {
  @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
  min-width: 20px;
  justify-content: center;
}

.unread-message {
  @apply font-semibold;
}

.read-message {
  @apply opacity-80;
}

/* CSS variables for skinny-primary RGB values */
:root {
  --skinny-primary-rgb:
    59, 130, 246; /* Adjust these values to match your skinny-primary color */
  --skinny-secondary-rgb:
    16, 185, 129; /* Adjust these values to match your skinny-secondary color */
}

/* Welcome Animation Styles - Add these to your application.tailwind.css file */

@layer components {
  /* Welcome animation specific styles */
  .welcome-container {
    @apply min-h-screen bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-900 dark:to-gray-800;
  }

  /* Smooth transitions for all animated elements */
  [data-welcome-animation-target] {
    transition: all 0.5s ease-in-out;
  }

  /* Text balloon with speech bubble styling */
  .speech-balloon {
    @apply relative bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg border dark:border-gray-700;
  }

  .speech-balloon::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
  }

  .dark .speech-balloon::after {
    border-top-color: rgb(31 41 55); /* gray-800 */
  }

  /* Clickable image hover effects */
  .clickable-image {
    @apply transition-all duration-200 ease-in-out cursor-pointer;
  }

  .clickable-image:hover {
    @apply transform scale-105 shadow-lg;
  }

  /* Number badges for clicking animation */
  .click-number-badge {
    @apply absolute bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold text-sm z-20 transform transition-all duration-300;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  /* Animated arrow styles */
  .click-arrow {
    @apply absolute pointer-events-none z-10 text-blue-600 transition-all duration-200;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }

  .matches-arrow {
    @apply text-blue-600 transition-all duration-500;
  }

  /* Match card styling */
  .match-card {
    @apply bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg border dark:border-gray-700 transform transition-all duration-500;
  }

  .match-card:hover {
    @apply shadow-xl transform scale-105;
  }

  /* Create dip mock interface */
  .create-dip-interface {
    @apply bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg border dark:border-gray-700;
  }

  /* Animation keyframes */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  @keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      transform: translateY(0);
    }
    40%,
    43% {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transform: translateY(-8px);
    }
    70% {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transform: translateY(-4px);
    }
    90% {
      transform: translateY(-2px);
    }
  }

  /* Animation utility classes */
  .animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
  }

  .animate-fade-in-down {
    animation: fadeInDown 0.6s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.8s ease-out;
  }

  .animate-pulse-slow {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-bounce-slow {
    animation: bounce 2s infinite;
  }

  /* Responsive adjustments */
  @media (max-width: 640px) {
    .welcome-container {
      @apply px-2 py-4;
    }

    .speech-balloon {
      @apply p-3 text-sm;
    }

    .match-card,
    .create-dip-interface {
      @apply p-4;
    }
  }
}