/* Import performance optimizations first */
@import './styles/performance.css';

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

@layer utilities {
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Globally hide scrollbars across the app (scroll still works) */
*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Safe Area Insets for mobile devices */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    
    /* Header height constant */
    --header-height: 56px;
    
    --background: 0 0% 100%;
    --foreground: 218 15% 15%;

    --card: 0 0% 100%;
    --card-foreground: 218 15% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 218 15% 15%;

    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;

    --secondary: 217 20% 95%;
    --secondary-foreground: 218 15% 20%;

    --muted: 217 20% 95%;
    --muted-foreground: 218 10% 50%;

    --accent: 217 40% 88%;
    --accent-foreground: 218 15% 20%;

    /* Modern gradients and effects */
    --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(217 91% 70%));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(217 20% 98%));
    --shadow-soft: 0 2px 8px -2px hsl(217 20% 30% / 0.08);
    --shadow-medium: 0 8px 25px -8px hsl(217 20% 30% / 0.15);
    --border-light: hsl(217 20% 92%);

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;

    /* WhatsApp-inspired chat colors */
    --chat-bg: 230 20% 95%;
    --chat-bubble-sent: 142 70% 88%;
    --chat-bubble-received: 0 0% 100%;
    --chat-header: 142 70% 34%;
  }

  .dark {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;

    --card: 0 0% 0%;
    --card-foreground: 0 0% 100%;

    --popover: 0 0% 0%;
    --popover-foreground: 0 0% 100%;

    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;

    --secondary: 0 0% 8%;
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 8%;
    --muted-foreground: 0 0% 70%;

    --accent: 0 0% 10%;
    --accent-foreground: 0 0% 100%;

    /* Dark mode gradients and effects */
    --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(217 91% 70%));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 0%), hsl(0 0% 5%));
    --shadow-soft: 0 2px 8px -2px hsl(0 0% 0% / 0.5);
    --shadow-medium: 0 8px 25px -8px hsl(0 0% 0% / 0.7);
    --border-light: hsl(0 0% 12%);

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 12%;
    --input: 0 0% 8%;
    --ring: 0 0% 80%;
    --sidebar-background: 0 0% 0%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 217 91% 60%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 8%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 0 0% 12%;
    --sidebar-ring: 217 91% 60%;

    /* WhatsApp-inspired chat colors (dark mode) - pure black */
    --chat-bg: 0 0% 0%;
    --chat-bubble-sent: 142 70% 18%;
    --chat-bubble-received: 0 0% 8%;
    --chat-header: 0 0% 0%;
  }
}

@layer base {
  * {
    @apply border-border;
    /* Prevent layout thrashing */
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    /* Prevent scroll jank */
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    /* Stable text rendering */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-background text-foreground;
    /* Prevent content shift during load */
    min-height: 100vh;
    min-height: 100dvh;
    /* Stable scrolling */
    overscroll-behavior-y: contain;
    /* Prevent tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Stable image loading */
  img, video {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  /* Prevent button text selection on double click */
  button {
    user-select: none;
    touch-action: manipulation;
  }
  
  /* Stable input styling */
  input, textarea, select {
    font-size: 16px; /* Prevent iOS zoom */
    color: hsl(var(--foreground));
    -webkit-text-fill-color: hsl(var(--foreground));
    caret-color: hsl(var(--foreground));
  }

  input.otp-native-input,
  input[data-input-otp].otp-native-input {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    caret-color: transparent !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
  }

  /* Override browser autofill blue text/background */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
    -webkit-box-shadow: 0 0 0px 1000px hsl(var(--background)) inset !important;
    box-shadow: 0 0 0px 1000px hsl(var(--background)) inset !important;
    caret-color: hsl(var(--foreground)) !important;
    transition: background-color 9999s ease-in-out 0s;
  }

  /* Ghost touch prevention - disable pointer events during scroll */
  .touch-none-on-scroll {
    pointer-events: none;
  }
  
  /* Disable all hover/active states during scroll */
  html.is-scrolling * {
    pointer-events: none !important;
  }
  
  html.is-scrolling button,
  html.is-scrolling a,
  html.is-scrolling [role="button"] {
    pointer-events: none !important;
  }

  /* FB Messenger-style Header with blur gradient 0-50 from top to bottom */
  /* 0 = solid color at top (connects with safe area), 50 = 50% blur at bottom */
  .header-blur {
    @apply border-0 shadow-none;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    /* Gradient from top (100% solid #fff) to bottom (50% transparent) */
    background: linear-gradient(
      to bottom,
      #ffffff 0%,
      rgba(255, 255, 255, 0.75) 50%,
      rgba(255, 255, 255, 0.50) 100%
    );
  }

  /* Safe area - pure white only, no gray */
  .safe-area-header {
    @apply border-0 shadow-none;
    background-color: #ffffff;
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Dark mode - header gradient 0-50 from top to bottom */
  .dark .header-blur {
    background: linear-gradient(
      to bottom,
      #000000 0%,
      rgba(0, 0, 0, 0.75) 50%,
      rgba(0, 0, 0, 0.50) 100%
    );
    -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(0.95);
    backdrop-filter: blur(20px) saturate(200%) brightness(0.95);
  }

  /* Dark mode - safe area pure black only */
  .dark .safe-area-header {
    background-color: #000000;
  }

  /* iOS-style translucent surface for modals/sheets/drawers.
     Pulls top padding from the safe area so the blur extends under the status bar. */
  .modal-translucent {
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
  }
  .dark .modal-translucent {
    background-color: rgba(0, 0, 0, 0.72);
  }

  /* WhatsApp-style chat background - pure white */
  .chat-body {
    @apply bg-background;
  }

  /* Performance optimizations */
  .will-change-auto {
    will-change: auto;
  }

  .will-change-scroll {
    will-change: scroll-position;
  }

  .will-change-contents {
    will-change: contents;
  }

  /* Splash Screen Animations */
  @keyframes scale-in {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes shimmer-fast {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(200%);
    }
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
      transform: translateY(10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-up {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translate(0, 0) rotate(0deg);
    }
    33% {
      transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
      transform: translate(-20px, 20px) rotate(240deg);
    }
  }

  @keyframes float-delayed {
    0%, 100% {
      transform: translate(0, 0) rotate(0deg);
    }
    33% {
      transform: translate(-30px, 30px) rotate(-120deg);
    }
    66% {
      transform: translate(20px, -20px) rotate(-240deg);
    }
  }

  @keyframes scale-bounce {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes pulse-slow {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }

  @keyframes ping-slow {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }

  @keyframes ping-slower {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(1.8);
      opacity: 0;
    }
  }

  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes bounce-smooth {
    0%, 100% {
      transform: translateY(0);
      opacity: 1;
    }
    50% {
      transform: translateY(-8px);
      opacity: 0.7;
    }
  }

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

  .animate-shimmer {
    animation: shimmer 2s infinite;
  }

  .animate-shimmer-fast {
    animation: shimmer-fast 1.5s infinite;
  }

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

  .animate-fade-up {
    animation: fade-up 0.6s ease-out both;
  }

  .animate-float {
    animation: float 20s ease-in-out infinite;
  }

  .animate-float-delayed {
    animation: float-delayed 25s ease-in-out infinite;
  }

  .animate-scale-bounce {
    animation: scale-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  .animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
  }

  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-ping-slower {
    animation: ping-slower 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-spin-slow {
    animation: spin-slow 8s linear infinite;
  }

  .animate-bounce-smooth {
    animation: bounce-smooth 1.2s ease-in-out infinite;
  }
}

/* Enable native-like overscroll bounce on iOS */
html {
  overscroll-behavior-y: auto;
}

body {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* iOS Safari - allow natural scrolling with bounce */
@supports (-webkit-touch-callout: none) {
  html, body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  
  #root {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
}