:root {
  /* WhatsApp Light Mode Colors */
  --background: 0 0% 93%;
  --foreground: 0 0% 8%;

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

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

  /* WhatsApp Teal Green */
  --primary: 168 76% 42%;
  --primary-foreground: 0 0% 100%;

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

  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 45%;

  --accent: 168 76% 42%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 0 0% 85%;
  --input: 0 0% 85%;
  --ring: 168 76% 42%;

  --radius: 0.5rem;

  /* WhatsApp specific — warm, authentic WhatsApp Web palette */
  --chat-bg: 30 18% 88%;         /* #EFEAE2 warm beige */
  --message-out: 120 54% 89%;    /* #D9FDD3 light green */
  --message-in: 0 0% 100%;       /* #FFFFFF white */
  --sidebar-bg: 0 0% 100%;
  --header-bg: 168 76% 26%;      /* #00A884 teal header */
  --search-bg: 0 0% 100%;
  --panel-header: 220 13% 95%;   /* #F0F2F5 */
  --icon-color: 0 0% 45%;
  --timestamp: 0 0% 55%;
  --unread-badge: 168 76% 42%;
  --online: 134 61% 41%;
  --typing: 168 76% 42%;
  --contact-border: #F0F2F5;
}

.dark {
  /* WhatsApp Dark Mode Colors */
  --background: 210 8% 12%;
  --foreground: 0 0% 93%;

  --card: 210 8% 18%;
  --card-foreground: 0 0% 93%;

  --popover: 210 8% 18%;
  --popover-foreground: 0 0% 93%;

  --primary: 168 76% 42%;
  --primary-foreground: 0 0% 100%;

  --secondary: 210 8% 22%;
  --secondary-foreground: 0 0% 93%;

  --muted: 210 8% 25%;
  --muted-foreground: 0 0% 60%;

  --accent: 168 76% 42%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 62% 45%;
  --destructive-foreground: 0 0% 100%;

  --border: 210 8% 25%;
  --input: 210 8% 25%;
  --ring: 168 76% 42%;

  /* WhatsApp Dark specific colors */
  --chat-bg: 210 6% 7%;
  --message-out: 168 41% 18%;
  --message-in: 210 8% 22%;
  --sidebar-bg: 210 8% 12%;
  --header-bg: 210 8% 18%;
  --search-bg: 210 8% 22%;
  --panel-header: 210 8% 18%;
  --icon-color: 0 0% 60%;
  --timestamp: 0 0% 50%;
  --unread-badge: 168 76% 42%;
  --online: 134 61% 41%;
  --typing: 168 76% 42%;
  --contact-border: #222D34;
}

/* Base styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Chat pattern background — WhatsApp doodle */
.chat-pattern {
  background-color: hsl(var(--chat-bg));
  background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23A49E96' fill-opacity='0.12'%3E%3Ccircle cx='25' cy='25' r='2'/%3E%3Ccircle cx='75' cy='45' r='1.5'/%3E%3Ccircle cx='125' cy='20' r='2'/%3E%3Ccircle cx='175' cy='50' r='1.5'/%3E%3Ccircle cx='225' cy='30' r='2'/%3E%3Ccircle cx='275' cy='55' r='1.5'/%3E%3Ccircle cx='50' cy='90' r='1.5'/%3E%3Ccircle cx='100' cy='75' r='2'/%3E%3Ccircle cx='150' cy='95' r='1.5'/%3E%3Ccircle cx='200' cy='80' r='2'/%3E%3Ccircle cx='250' cy='100' r='1.5'/%3E%3Ccircle cx='25' cy='130' r='2'/%3E%3Ccircle cx='75' cy='150' r='1.5'/%3E%3Ccircle cx='125' cy='125' r='2'/%3E%3Ccircle cx='175' cy='155' r='1.5'/%3E%3Ccircle cx='225' cy='135' r='2'/%3E%3Ccircle cx='275' cy='160' r='1.5'/%3E%3Ccircle cx='50' cy='195' r='1.5'/%3E%3Ccircle cx='100' cy='180' r='2'/%3E%3Ccircle cx='150' cy='200' r='1.5'/%3E%3Ccircle cx='200' cy='185' r='2'/%3E%3Ccircle cx='250' cy='205' r='1.5'/%3E%3Ccircle cx='25' cy='235' r='2'/%3E%3Ccircle cx='75' cy='255' r='1.5'/%3E%3Ccircle cx='125' cy='230' r='2'/%3E%3Ccircle cx='175' cy='260' r='1.5'/%3E%3Ccircle cx='225' cy='240' r='2'/%3E%3Ccircle cx='275' cy='265' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

.dark .chat-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='25' cy='25' r='2'/%3E%3Ccircle cx='75' cy='45' r='1.5'/%3E%3Ccircle cx='125' cy='20' r='2'/%3E%3Ccircle cx='175' cy='50' r='1.5'/%3E%3Ccircle cx='225' cy='30' r='2'/%3E%3Ccircle cx='275' cy='55' r='1.5'/%3E%3Ccircle cx='50' cy='90' r='1.5'/%3E%3Ccircle cx='100' cy='75' r='2'/%3E%3Ccircle cx='150' cy='95' r='1.5'/%3E%3Ccircle cx='200' cy='80' r='2'/%3E%3Ccircle cx='250' cy='100' r='1.5'/%3E%3Ccircle cx='25' cy='130' r='2'/%3E%3Ccircle cx='75' cy='150' r='1.5'/%3E%3Ccircle cx='125' cy='125' r='2'/%3E%3Ccircle cx='175' cy='155' r='1.5'/%3E%3Ccircle cx='225' cy='135' r='2'/%3E%3Ccircle cx='275' cy='160' r='1.5'/%3E%3Ccircle cx='50' cy='195' r='1.5'/%3E%3Ccircle cx='100' cy='180' r='2'/%3E%3Ccircle cx='150' cy='200' r='1.5'/%3E%3Ccircle cx='200' cy='185' r='2'/%3E%3Ccircle cx='250' cy='205' r='1.5'/%3E%3Ccircle cx='25' cy='235' r='2'/%3E%3Ccircle cx='75' cy='255' r='1.5'/%3E%3Ccircle cx='125' cy='230' r='2'/%3E%3Ccircle cx='175' cy='260' r='1.5'/%3E%3Ccircle cx='225' cy='240' r='2'/%3E%3Ccircle cx='275' cy='265' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Custom scrollbar */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted)) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

/* Typing animation */
@keyframes typing-dot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.animate-typing-dot {
  animation: typing-dot 1.4s infinite ease-in-out;
}

/* ── Login Page ── */
.hero-gradient {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 20%, #047857 40%, #0d9488 60%, #065f46 80%, #064e3b 100%);
  background-size: 200% 200%;
  animation: hero-gradient-shift 15s ease infinite;
}

@keyframes hero-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes login-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}