Chat Window Component

<div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="relative w-full max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex flex-row-reverse transform transition-all duration-300 ease-in-out hover:shadow-2xl">

    <!-- Chat Details / Active Chat Area -->
    <div class="flex-1 flex flex-col h-[80vh] md:h-[calc(100vh-6rem)] lg:h-[calc(100vh-8rem)]">
      <!-- Chat Header -->
      <div class="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
        <div class="flex items-center space-x-3">
          <button class="md:hidden p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 dark:focus:ring-offset-gray-800">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
          </button>
          <div class="relative">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name">
            <span class="absolute bottom-0 right-0 block w-3 h-3 bg-green-500 rounded-full ring-2 ring-white dark:ring-gray-800"></span>
          </div>
          <div>
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Online</p>
          </div>
        </div>
        <div class="flex space-x-3">
          <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 animate-pulse-once">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5-2.5-2.5m-3 3l2.5 2.5m-2.5 2.5L10.5 9m-2.5 2.5L10.5 9m4.5 4.5l-2.5 2.5-2.5-2.5m3-3l-2.5 2.5m-2.5-2.5l2.5-2.5-2.5-2.5m-3-3l2.5-2.5-2.5-2.5"></path></svg>
          </button>
          <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-800 animate-pulse-once">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages -->
      <div class="flex-1 p-4 sm:p-6 overflow-y-auto custom-scrollbar-thin space-y-4 bg-gray-50 dark:bg-gray-850">

        <!-- Agent Message -->
        <div class="flex items-end space-x-3 group animate-slide-in-left">
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Avatar">
          <div class="bg-green-100 dark:bg-green-700 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-gray-800 dark:text-gray-50 relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Hello! I'm John, your agent for the property at 123 Elm St. How can I assist you today?</p>
            <span class="block text-xs text-right text-gray-500 dark:text-gray-300 mt-1">10:00 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -right-8 space-x-1.5 animation-fade-in-right">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
        </div>

        <!-- User Message -->
        <div class="flex items-end justify-end space-x-3 group animate-slide-in-right">
          <div class="bg-blue-500 dark:bg-blue-600 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-white relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Hi John! I'm interested in scheduling a virtual tour for that property. When are you available?</p>
            <span class="block text-xs text-right text-blue-100 dark:text-blue-200 mt-1">10:05 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -left-8 space-x-1.5 animation-fade-in-left">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        </div>

        <!-- Agent Message with Property Card -->
        <div class="flex items-end space-x-3 group animate-slide-in-left">
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Avatar">
          <div class="bg-green-100 dark:bg-green-700 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-gray-800 dark:text-gray-50 relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm mb-2">Great! How about this Thursday at 2 PM PST? Also, here are some details about the property:</p>
            <!-- Property Card in Chat -->
            <div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-md border border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row mb-2">
              <img src="https://picsum.photos/300/200?random=1" alt="Property Image" class="w-full sm:w-24 md:w-32 h-24 sm:h-auto object-cover">
              <div class="p-3 flex-1">
                <h4 class="font-semibold text-gray-900 dark:text-gray-100 text-base">Modern Family Home</h4>
                <p class="text-gray-600 dark:text-gray-300 text-sm">123 Elm St, Springfield</p>
                <p class="text-pink-600 dark:text-pink-400 text-base font-bold mt-1">$550,000</p>
                <button class="mt-2 text-blue-600 dark:text-blue-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-md transition-colors duration-200">View Details</button>
              </div>
            </div>
            <span class="block text-xs text-right text-gray-500 dark:text-gray-300 mt-1">10:08 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -right-8 space-x-1.5 animation-fade-in-right">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
        </div>

        <!-- User Message with Confirmation -->
        <div class="flex items-end justify-end space-x-3 group animate-slide-in-right">
          <div class="bg-blue-500 dark:bg-blue-600 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-white relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Thursday at 2 PM works perfectly! Thank you for the property details.</p>
            <span class="block text-xs text-right text-blue-100 dark:text-blue-200 mt-1">10:10 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -left-8 space-x-1.5 animation-fade-in-left">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        </div>

      </div>

      <!-- Chat Input -->
      <div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex items-center space-x-3">
        <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 animate-jiggle">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        </button>
        <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-200 ease-in-out focus:scale-[1.01] shadow-sm">
        <button class="p-3 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95 shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-800 animate-pop-in">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </button>
      </div>
    </div>

    <!-- Chat List / Sidebar -->
    <div class="hidden md:flex flex-col w-72 lg:w-80 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-none h-[80vh] md:h-[calc(100vh-6rem)] lg:h-[calc(100vh-8rem)]">
      <!-- Search and New Chat -->
      <div class="p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
        <div class="relative">
          <input type="text" placeholder="Search chats..." class="w-full p-2 pl-10 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 transition-all duration-200 ease-in-out focus:scale-[1.01] shadow-sm">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </div>
        <button class="mt-3 w-full bg-pink-500 text-white py-2 rounded-lg hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 transform active:scale-98 animate-button-pop">
          + New Chat
        </button>
      </div>

      <!-- Conversations List -->
      <div class="flex-1 overflow-y-auto custom-scrollbar-thin">
        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 relative group active:bg-blue-50 dark:active:bg-blue-900 border-l-4 border-l-blue-500 dark:border-l-blue-600 animate-fade-in-up">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-transparent group-hover:border-blue-400 transition-colors duration-200" src="https://randomuser.me/api/portraits/men/45.jpg" alt="John Doe">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">John Doe</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Hi! How can I assist you today?</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">10:10 AM</p>
          <div class="absolute hidden group-hover:block right-4 top-1/2 -translate-y-1/2 transition-opacity duration-200 opacity-0 group-hover:opacity-100 animate-slide-in-right-sm">
            <span class="block w-2 h-2 bg-blue-500 dark:bg-blue-600 rounded-full"></span>
          </div>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group animate-fade-in-up animate-delay-100">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-transparent group-hover:border-green-400 transition-colors duration-200" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Jane Smith">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">About the property at 456 Oak Ave...</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-200">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Robert Johnson">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Can we reschedule the viewing?</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Mon</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-300">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/77.jpg" alt="Emily White">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Emily White</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Looking for apartments in downtown.</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Last week</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-400">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Agent Name">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Michael Brown</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">New property listed near campus!</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">2 weeks ago</p>
        </a>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom scrollbar for better aesthetics */
  .custom-scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(156 163 175 / 0.5);
    border-radius: 3px;
  }

  .custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(156 163 175 / 0.7);
  }

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

  /* Dark mode scrollbar */
  .dark .custom-scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99 / 0.5);
  }

  .dark .custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(75 85 99 / 0.7);
  }

  /* Keyframe animations for microinteractions */
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }

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

  @keyframes slideInRightSm {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
  }

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

  @keyframes fadeItIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes pulseOnce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  @keyframes jiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
  }

  @keyframes popIn {
    0% { transform: scale(0.8); opacity: 0;}
    100% { transform: scale(1); opacity: 1;}
  }

  @keyframes buttonPop {
    0% { transform: scale(1);}
    20% { transform: scale(1.02);}
    40% { transform: scale(0.98);}
    60% { transform: scale(1.01);}
    80% { transform: scale(0.99);}
    100% { transform: scale(1);}
  }

  /* Tailwind classes for animations */
  .animate-slide-in-left {
    animation: slideInLeft 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-slide-in-right-sm {
    animation: slideInRightSm 0.2s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-delay-100 { animation-delay: 0.1s; }
  .animate-delay-200 { animation-delay: 0.2s; }
  .animate-delay-300 { animation-delay: 0.3s; }
  .animate-delay-400 { animation-delay: 0.4s; }

  .animation-fade-in-right {
    animation: fadeItIn 0.2s ease-out forwards, slideInRightSm 0.2s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after hover */
  }

  .animation-fade-in-left {
    animation: fadeItIn 0.2s ease-out forwards, slideInLeftSm 0.2s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after hover */
  }

  .animate-pulse-once {
    animation: pulseOnce 0.6s ease-in-out;
  }

  .animate-jiggle {
    animation: jiggle 0.4s ease-in-out;
  }

  .animate-pop-in {
    animation: popIn 0.3s ease-out;
  }

  .animate-button-pop {
    animation: buttonPop 0.5s ease-in-out;
  }

  /* Microinteraction for hover state on chat bubbles */
  .group:hover .group-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

</style>