채팅 창

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl">
    <!-- Chat Header -->
    <div class="flex items-center justify-between p-4 bg-lime-100 dark:bg-lime-800 border-b border-lime-200 dark:border-lime-700">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-white dark:border-gray-800 mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div>
          <h3 class="text-lg font-semibold text-lime-800 dark:text-lime-100">Travel Agent Support</h3>
          <p class="text-sm text-lime-700 dark:text-lime-200">Online</p>
        </div>
      </div>
      <button class="text-lime-700 dark:text-lime-200 hover:text-lime-900 dark:hover:text-lime-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Chat Body -->
    <div class="h-80 overflow-y-auto p-4 bg-lime-50 dark:bg-gray-700 transition-colors duration-200">
      <!-- Incoming Message -->
      <div class="flex items-start mb-4">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div class="bg-white dark:bg-gray-600 p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-gray-800 dark:text-gray-100">Hello! How can I assist you with your travel plans today?</p>
          <span class="block text-right text-xs text-gray-500 dark:text-gray-300 mt-1">10:00 AM</span>
        </div>
      </div>

      <!-- Outgoing Message -->
      <div class="flex justify-end mb-4">
        <div class="bg-lime-200 dark:bg-lime-600 p-3 rounded-tl-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-lime-900 dark:text-lime-50">Hi there! I'm planning a trip to Europe next summer and need some advice on itineraries.</p>
          <span class="block text-left text-xs text-lime-700 dark:text-lime-200 mt-1">10:02 AM</span>
        </div>
      </div>

      <!-- Incoming Message -->
      <div class="flex items-start mb-4">
        <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Agent Avatar">
        <div class="bg-white dark:bg-gray-600 p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg shadow-md max-w-xs transition-colors duration-200">
          <p class="text-sm text-gray-800 dark:text-gray-100">Excellent! Europe offers so many possibilities. Are you looking for historical tours, scenic routes, or something more adventurous?</p>
          <span class="block text-right text-xs text-gray-500 dark:text-gray-300 mt-1">10:05 AM</span>
        </div>
      </div>
    </div>

    <!-- Chat Footer (Input Area) -->
    <div class="p-4 bg-lime-100 dark:bg-lime-800 border-t border-lime-200 dark:border-lime-700 flex items-center">
      <input type="text" placeholder="Type your message..." class="flex-grow p-3 rounded-full border border-lime-300 dark:border-lime-600 bg-white dark:bg-lime-700 text-lime-900 dark:text-lime-50 placeholder-lime-500 dark:placeholder-lime-300 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:border-transparent transition-all duration-200">
      <button class="ml-3 p-3 bg-lime-500 dark:bg-lime-400 text-white rounded-full hover:bg-lime-600 dark:hover:bg-lime-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-opacity-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>
              

                <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>
              

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans">

  <!-- Chat Window Wrapper -->
  <div class="flex-1 flex overflow-hidden rounded-lg shadow-xl m-4 lg:m-8 bg-white dark:bg-gray-800">

    <!-- Left Panel: Contacts List (Hidden on Mobile, shown on larger screens) -->
    <div class="hidden md:flex flex-col w-1/4 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850">
      <div class="p-4 border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Chats</h2>
        <input type="text" placeholder="Search chats..." class="w-full mt-3 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400">
      </div>
      <div class="flex-1 overflow-y-auto">
        <!-- Contact 1 (Active) -->
        <a href="#" class="flex items-center p-4 hover:bg-purple-100 dark:hover:bg-purple-900 transition-colors duration-200 bg-purple-50 dark:bg-purple-800 border-l-4 border-purple-600 dark:border-purple-400">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-purple-800 dark:text-purple-200">John Doe</p>
            <p class="text-sm text-purple-600 dark:text-purple-400 truncate">Hey, are you free for a call?</p>
          </div>
          <span class="text-xs text-purple-500 dark:text-purple-300">10:30 AM</span>
        </a>
        <!-- Contact 2 -->
        <a href="#" class="flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">That's great news!</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-300">Yesterday</span>
        </a>
        <!-- Contact 3 -->
        <a href="#" class="flex items-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/51.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Michael Johnson</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Let me know if you need anything.</p>
          </div>
          <span class="text-xs text-gray-500 dark:text-gray-300">2 days ago</span>
        </a>
      </div>
    </div>

    <!-- Right Panel: Chat Messages -->
    <div class="flex flex-col flex-1">
      <!-- Chat Header -->
      <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
            <p class="text-sm text-green-500 dark:text-green-400">Online</p>
          </div>
        </div>
        <div class="flex space-x-4">
          <button aria-label="Call" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
          </button>
          <button aria-label="Video Call" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages Area -->
      <div class="flex-1 overflow-y-auto p-4 space-y-4">
        <!-- Incoming Message -->
        <div class="flex items-start">
          <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl max-w-sm">
            <p class="text-sm text-gray-800 dark:text-gray-100">Hey, good morning! Hope you're having a productive day.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">10:28 AM</p>
          </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end">
          <div class="bg-purple-600 dark:bg-purple-700 text-white p-3 rounded-xl max-w-sm">
            <p class="text-sm">Good morning! I am. Just finishing up the Q3 report. Have you reviewed the client proposal?</p>
            <p class="text-xs text-purple-200 dark:text-purple-300 text-right mt-1">10:29 AM</p>
          </div>
        </div>

        <!-- Incoming Message -->
        <div class="flex items-start">
          <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-xl max-w-sm">
            <p class="text-sm text-gray-800 dark:text-gray-100">Yes, I have. Looks solid. Just a minor tweak on the budget section, I'll send you the revised version in a bit.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right mt-1">10:30 AM</p>
          </div>
        </div>

        <!-- Outgoing Message (Last message) -->
        <div class="flex justify-end">
          <div class="bg-purple-600 dark:bg-purple-700 text-white p-3 rounded-xl max-w-sm">
            <p class="text-sm">Perfect, looking forward to it. Are you free for a quick call to discuss the next steps on project 'Alpha'?</p>
            <p class="text-xs text-purple-200 dark:text-purple-300 text-right mt-1">10:30 AM</p>
          </div>
        </div>

      </div>

      <!-- Chat Input Area -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-850 flex items-center space-x-3">
        <button aria-label="Attach file" class="text-gray-600 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.414a4 4 0 00-5.656-5.656l-6.415 6.415a3 3 0 104.243 4.243l.707-.707m1.414-.707l.707-.707m1.414-.707l.707-.707m0 0l1 1m0-1v1" />
          </svg>
        </button>
        <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400">
        <button aria-label="Send message" class="bg-purple-600 dark:bg-purple-500 text-white p-3 rounded-full hover:bg-purple-700 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-850">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-90 -mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
          </svg>
        </button>
      </div>
    </div>

  </div>

</div>
              

                <div class="flex flex-col h-screen bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-800 dark:to-gray-900">
  <header class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Chat Window</h1>
  </header>

  <div class="flex-1 p-4 overflow-y-auto">
    <!-- Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        Hi there! This is an example of an incoming message in 3D.
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And this is an outgoing message, also with a cool 3D effect!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        The pastel colors give it a soft and inviting feel.
      </div>
    </div>

    <!-- Another Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And it's simple enough for a portfolio showcase!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

  </div>

  <footer class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <div class="flex">
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:focus:ring-indigo-600 shadow-inner">
      <button class="ml-3 px-6 py-3 bg-indigo-400 dark:bg-indigo-600 text-white rounded-lg font-semibold shadow-md hover:bg-indigo-500 dark:hover:bg-indigo-700 transition-colors duration-300">Send</button>
    </div>
  </footer>
</div>
              

                <div class="flex flex-col h-screen antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200">
  <div class="flex flex-row items-center justify-between flex-shrink-0 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
    <div class="flex items-center gap-3">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <div class="flex flex-col">
        <div class="font-semibold">John Doe</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">Active now</div>
      </div>
    </div>
    <button class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>

  <div class="flex-1 p-4 overflow-y-auto">
    <!-- Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
        <div>
          <span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
            Hey there! How are you doing?
          </span>
        </div>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-end justify-end mb-4">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-1 items-end">
        <div>
          <span class="inline-block px-4 py-2 text-white bg-blue-500 rounded-lg">
            I'm doing great, thanks for asking! How about you?
          </span>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 ml-3 rounded-full">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-8 h-8 mr-3 rounded-full">
      <div class="flex flex-col space-y-2 text-xs max-w-xs mx-2 order-2 items-start">
        <div>
          <span class="inline-block px-4 py-2 text-gray-700 bg-gray-200 rounded-lg dark:bg-gray-700 dark:text-gray-200">
            I'm doing good too! Just chilling and working on some projects.
          </span>
        </div>
      </div>
    </div>
  </div>

  <div class="flex-shrink-0 px-4 py-2 border-t border-gray-200 dark:border-gray-700">
    <div class="relative flex items-center">
      <input type="text" placeholder="Type your message..." class="flex-grow w-full h-10 px-4 pr-10 text-gray-700 placeholder-gray-400 bg-gray-100 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
      <button class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-blue-500 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
      </button>
    </div>
  </div>
</div>
              

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black flex items-center justify-center p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20">
    <div class="font-sans text-gray-800 dark:text-white mb-4 text-xl font-semibold">Chat Window</div>
    <div class="space-y-4 h-64 overflow-y-auto pr-2 scrollbar-thumb-purple-300 scrollbar-track-purple-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thin">

      <!-- Incoming Message -->
      <div class="flex items-end">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-300 dark:border-gray-500"/>
        <div class="bg-purple-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">Hello! This is a simple chat message. How are you?</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:00 AM</span>
        </div>
      </div>

      <!-- Outgoing Message -->
      <div class="flex justify-end items-end">
        <div class="bg-pink-200 dark:bg-gray-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">I'm doing great, thanks for asking! This design is simple and elegant.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
        </div>
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-pink-300 dark:border-gray-500"/>
      </div>

      <!-- Incoming Message 2 -->
      <div class="flex items-end">
        <img src="https://randomuser.me/api/portraits/women/70.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-300 dark:border-gray-500"/>
        <div class="bg-purple-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">I totally agree! The Glassmorphism effect adds a nice touch.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:10 AM</span>
        </div>
      </div>

      <!-- Outgoing Message 2 -->
      <div class="flex justify-end items-end">
        <div class="bg-pink-200 dark:bg-gray-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">And the pastel colors are very soothing for reading.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:15 AM</span>
        </div>
        <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-pink-300 dark:border-gray-500"/>
      </div>

    </div>
    <div class="mt-4 flex">
      <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-lg bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-gray-500 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"/>
      <button class="ml-3 px-4 py-2 bg-purple-400 hover:bg-purple-500 dark:bg-gray-600 dark:hover:bg-gray-500 text-white rounded-lg transition duration-200 ease-in-out shadow-md">Send</button>
    </div>
  </div>
</div>

<style>
/* Custom Scrollbar for Webkit browsers */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-scrollbar-track-color);
  border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--tw-scrollbar-thumb-color);
  border-radius: 10px;
}

/* Define custom properties for scrollbar colors */
.scrollbar-thumb-purple-300 {
  --tw-scrollbar-thumb-color: #d1b1e8;
}

.scrollbar-track-purple-100 {
  --tw-scrollbar-track-color: #ede9fe;
}

.dark\:scrollbar-thumb-gray-600 {
  --tw-scrollbar-thumb-color: #4b5563;
}

.dark\:scrollbar-track-gray-800 {
  --tw-scrollbar-track-color: #1f2937;
}
</style>
              

                <div class="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden font-sans">

  <!-- Chat Header -->
  <div class="w-full bg-purple-600 dark:bg-purple-800 p-4 flex items-center justify-between shadow-md">
    <div class="flex items-center">
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-white animate-pulse-slow" />
      <h2 class="text-white text-lg font-semibold">Customer Support</h2>
    </div>
    <div class="relative">
      <div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0 ring-2 ring-purple-600 dark:ring-purple-800 animate-ping-slow"></div>
      <div class="w-3 h-3 bg-green-400 rounded-full absolute right-0 bottom-0"></div>
    </div>

  </div>

  <!-- Chat Messages -->
  <div class="flex-1 p-4 overflow-y-auto space-y-4 scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-gray-100 dark:scrollbar-track-gray-900">

    <!-- Receiver Message -->
    <div class="flex items-end justify-start animate-fade-in-down">
      <img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
      <div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
        <p>Hello! How can I help you today?</p>
        <span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:00 AM</span>
      </div>
    </div>

    <!-- Sender Message -->
    <div class="flex items-end justify-end animate-fade-in-up">
      <div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-right hover:scale-105">
        <p>I'm looking for information about my recent order, #12345.</p>
        <span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">10:02 AM</span>
      </div>
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
    </div>

    <!-- Receiver Message with Image -->
    <div class="flex items-end justify-start animate-fade-in-down">
      <img src="https://www.randomuser.me/api/portraits/women/76.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600" />
      <div class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-lg max-w-xs transition-all duration-300 ease-in-out transform origin-bottom-left hover:scale-105">
        <p>Certainly! Could you please provide your full name and the email address associated with the order?</p>
        <img src="https://picsum.photos/id/237/200/150" alt="Order details" class="mt-2 rounded-md transition-all duration-300 ease-in-out transform hover:scale-105" />
        <span class="text-xs text-gray-600 dark:text-gray-400 block mt-1 text-right">10:05 AM</span>
      </div>
    </div>

    <!-- Sender Message with Typing Indicator -->
    <div class="flex items-end justify-end animate-fade-in-up">
      <div class="bg-blue-400 dark:bg-blue-600 text-white p-3 rounded-lg max-w-xs transform origin-bottom-right">
        <div class="flex items-center space-x-1">
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot"></span>
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-200"></span>
          <span class="h-2 w-2 bg-white rounded-full animate-bounce-dot animation-delay-400"></span>
        </div>
        <span class="text-xs text-blue-100 dark:text-blue-200 block mt-1 text-right">Typing...</span>
      </div>
      <img src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-blue-400 dark:border-blue-600" />
    </div>

  </div>

  <!-- Message Input -->
  <div class="bg-cyan-500 dark:bg-cyan-700 p-4 flex items-center shadow-lg">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out transform focus:scale-105" />
    <button class="ml-4 bg-blue-500 dark:bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 transform hover:scale-110 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
        <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.543 60.543 0 0018.445-8.986.75.75 0 000-1.218A60.543 60.543 0 003.478 2.405z" />
      </svg>
    </button>
  </div>

</div>

<!-- Custom Tailwind CSS for microinteractions and scrollbar styling -->
<style>
  @keyframes pulse-slow {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

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

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

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

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

  .animate-slide-in-bottom {
    animation: slide-in-bottom 0.5s ease-out;
  }

  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out;
  }

  @keyframes bounce-dot {
    0%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-5px);
    }
  }

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

  .animation-delay-200 {
    animation-delay: 0.2s;
  }

  .animation-delay-400 {
    animation-delay: 0.4s;
  }

  /* Custom Scrollbar Styles */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc; /* thumb track */
  }

  .dark .scrollbar-thin {
    scrollbar-color: #4a5568 #1a202c; /* thumb track for dark mode */
  }

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

  .scrollbar-thin::-webkit-scrollbar-track {
    background: #f7fafc; /* Light mode track */
    border-radius: 10px;
  }

  .dark .scrollbar-thin::-webkit-scrollbar-track {
    background: #1a202c; /* Dark mode track */
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #cbd5e0; /* Light mode thumb */
    border-radius: 10px;
    border: 2px solid #f7fafc; /* Light mode border around thumb */
  }

  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #4a5568; /* Dark mode thumb */
    border: 2px solid #1a202c; /* Dark mode border around thumb */
  }
</style>
              

                <div class="flex flex-col h-screen antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="flex flex-row h-full w-full overflow-x-hidden">
    <div class="flex flex-col flex-auto h-full p-6">
      <div class="flex flex-col flex-auto flex-shrink-0 rounded-lg bg-gray-200 dark:bg-gray-800 h-full p-4">
        <div class="flex flex-col h-full overflow-x-auto mb-4">
          <div class="flex flex-col h-full">
            <div class="grid grid-cols-12 gap-y-2">
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Hey How are you doing today?</div>
                  </div>
                </div>
              </div>
              <div class="col-start-1 col-end-8 p-3 rounded-lg">
                <div class="flex flex-row items-center">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    A
                  </div>
                  <div
                    class="relative ml-3 text-sm bg-white dark:bg-gray-700 py-2 px-4 shadow rounded-xl"
                  >
                    <div>
                      Wow, I'm loving this retro chat window design! The pastel colors are so calming.
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>I'm fine living large</div>
                  </div>
                </div>
              </div>
              <div class="col-start-6 col-end-13 p-3 rounded-lg">
                <div class="flex items-center justify-start flex-row-reverse">
                  <div
                    class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"
                  >
                    B
                  </div>
                  <div
                    class="relative mr-3 text-sm bg-indigo-100 dark:bg-indigo-900 py-2 px-4 shadow rounded-xl"
                  >
                    <div>Looks like something out of a late 80s computer interface. Totally tubular!</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex flex-row items-center h-16 rounded-xl bg-white dark:bg-gray-700 w-full px-4"
        >
          <div class="flex-grow ml-4">
            <div class="relative w-full">
              <input
                type="text"
                class="flex w-full border rounded-xl focus:outline-none focus:border-indigo-300 pl-4 h-10 dark:bg-gray-800 dark:text-white"
              />
            </div>
          </div>
          <div class="ml-4">
            <button
              class="flex items-center justify-center bg-indigo-500 hover:bg-indigo-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
            >
              <span>Send</span>
              <span class="ml-2">
                <svg
                  class="w-4 h-4 transform rotate-45 -mt-px"
                  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 19l9 2-9-18-9 18 9-2zm0 0v-8"
                  ></path>
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
              

                <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6">
    <div class="mb-4 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-300 dark:border-gray-600 shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Chat Support</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400">Available 24/7</p>
        </div>
    </div>
    <div class="h-64 overflow-y-auto rounded-lg border border-gray-300 dark:border-gray-600 p-4 bg-gray-50 dark:bg-gray-700 shadow-inner">
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Hello! How can I assist you today?</p>
            </div>
        </div>
        <div class="mb-2 flex items-start justify-end">
            <div class="mr-2 bg-blue-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">I'm looking for some information on your services.</p>
            </div>
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-purple-300 dark:border-gray-600">
        </div>
        <div class="mb-2 flex items-start">
            <img src="https://picsum.photos/60/60" alt="Image" class="w-10 h-10 rounded-full border border-green-300 dark:border-gray-600">
            <div class="ml-2 bg-green-100 dark:bg-gray-800 p-3 rounded-lg shadow-md">
                <p class="text-sm text-gray-800 dark:text-gray-200">Sure! Here’s what you need to know...</p>
            </div>
        </div>
    </div>
    <form class="mt-4">
        <div class="flex items-center border rounded-lg border-gray-300 dark:border-gray-600 overflow-hidden">
            <input type="text" placeholder="Type your message..." class="flex-grow p-2 text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg focus:outline-none" />
            <button type="submit" class="bg-pink-400 dark:bg-pink-600 text-white px-4 py-2 rounded-lg">Send</button>
        </div>
    </form>
</div>
              

                <div class="flex flex-col h-screen bg-white dark:bg-black border border-black dark:border-white">
  <!-- Chat Header -->
  <div class="flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-800 border-b border-black dark:border-white">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
      <h2 class="text-lg font-bold text-black dark:text-white">Simple Chat</h2>
    </div>
    <button class="text-black dark:text-white font-bold">X</button>
  </div>

  <!-- Chat Body -->
  <div class="flex-1 overflow-y-auto p-4">
    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Hey, this is a simple message.</p>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm">This is a reply message.</p>
      </div>
    </div>

    <!-- Incoming Message -->
    <div class="flex mb-4">
      <div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm text-black dark:text-white">Another simple incoming message to show the scroll.</p>
      </div>
    </div>

      <!-- Outgoing Message -->
    <div class="flex justify-end mb-4">
      <div class="bg-black dark:bg-white text-white dark:text-black p-3 rounded-lg max-w-xs border border-black dark:border-white">
        <p class="text-sm max-w-xs">And a longer outgoing message to test wrapping and responsiveness. It should wrap when the screen is smaller.</p>
      </div>
    </div>

  </div>

  <!-- Chat Footer -->
  <div class="flex p-4 bg-gray-200 dark:bg-gray-800 border-t border-black dark:border-white">
    <input type="text" placeholder="Type a message..." class="flex-1 p-2 rounded-lg border border-black dark:border-white bg-white dark:bg-black text-black dark:text-white placeholder-gray-500 dark:placeholder-gray-400">
    <button class="ml-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-bold rounded-lg border border-black dark:border-white">Send</button>
  </div>
</div>