Componente de ventana de chat

<div class="flex justify-center items-center h-screen bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="relative w-full max-w-sm lg:max-w-md xl:max-w-lg bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out transform hover:scale-105 group">
    <!-- Organic Top Shape -->
    <div class="absolute top-0 left-0 right-0 h-40 bg-gradient-to-r from-teal-400 via-blue-500 to-indigo-600 dark:from-teal-600 dark:via-blue-700 dark:to-indigo-800 rounded-bl-[40%] rounded-br-[30%] group-hover:from-teal-300 group-hover:via-blue-400 group-hover:to-indigo-500 transition-all duration-300 ease-in-out"></div>

    <!-- Header -->
    <div class="relative z-10 flex items-center justify-between p-6 pb-2 pt-8">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-teal-300 dark:border-teal-500 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <h2 class="text-xl font-bold text-white drop-shadow-md">Scheduler Bot</h2>
          <p class="text-sm text-blue-100 dark:text-blue-200 text-opacity-80">Online</p>
        </div>
      </div>
      <button class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
        <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="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Chat Body -->
    <div class="relative z-0 p-6 pt-4 h-96 overflow-y-auto custom-scrollbar-neon" style="scrollbar-width: thin; -ms-overflow-style: none;">
      <!-- Receiver Message -->
      <div class="flex items-start mb-4 animate-fade-in" style="animation-delay: 0.1s;">
        <img class="w-8 h-8 rounded-full mr-2 shadow-sm" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Bot Avatar">
        <div class="bg-gradient-to-tr from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 text-white p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg transition-transform duration-300 ease-in-out hover:scale-105">
          <p class="text-sm">Hello! How can I assist you with your booking today?</p>
          <span class="block text-xs text-blue-100 text-opacity-75 mt-1">10:00 AM</span>
        </div>
      </div>

      <!-- User Message -->
      <div class="flex justify-end mb-4 animate-fade-in" style="animation-delay: 0.2s;">
        <div class="bg-gradient-to-tr from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-800 text-white p-3 rounded-tl-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg transition-transform duration-300 ease-in-out hover:scale-105">
          <p class="text-sm">I'd like to book an appointment for a health check-up next week.</p>
          <span class="block text-xs text-purple-100 text-opacity-75 mt-1">10:02 AM</span>
        </div>
      </div>

      <!-- Receiver Message (Options) -->
      <div class="flex items-start mb-4 animate-fade-in" style="animation-delay: 0.3s;">
        <img class="w-8 h-8 rounded-full mr-2 shadow-sm" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Bot Avatar">
        <div class="bg-gradient-to-tr from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 text-white p-3 rounded-tr-lg rounded-bl-lg rounded-br-lg max-w-[80%] shadow-lg">
          <p class="text-sm mb-2">Great! Please select your preferred day:</p>
          <div class="flex flex-wrap gap-2">
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Monday</button>
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Wednesday</button>
            <button class="px-3 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white hover:bg-opacity-30 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-blue-300">Friday</button>
          </div>
          <span class="block text-xs text-blue-100 text-opacity-75 mt-2">10:03 AM</span>
        </div>
      </div>
    </div>

    <!-- Input Area -->
    <div class="relative p-4 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-850">
      <div class="flex items-center space-x-2">
        <input type="text" placeholder="Type your message..." class="flex-grow py-2 px-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 transition-shadow duration-200 ease-in-out placeholder-gray-400 dark:placeholder-gray-500 shadow-inner" />
        <button class="bg-gradient-to-r from-teal-400 to-blue-500 dark:from-teal-600 dark:to-blue-700 p-3 rounded-full text-white shadow-lg hover:from-teal-300 hover:to-blue-400 dark:hover:from-teal-500 dark:hover:to-blue-600 transition-all duration-300 ease-in-out transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.108 5.768a2 2 0 0 1 2.828 0L20 12l-12.064 6.232a2 2 0 0 1-2.828-2.828L14.172 12 5.108 5.768z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Scrollbar Styles (can be moved to a <style> tag or CSS file) -->
  <style>
    .custom-scrollbar-neon::-webkit-scrollbar {
      width: 6px;
    }

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

    .custom-scrollbar-neon::-webkit-scrollbar-thumb {
      background-image: linear-gradient(to bottom, #0ea5e9, #a855f7);
      border-radius: 10px;
    }
    
    .dark .custom-scrollbar-neon::-webkit-scrollbar-thumb {
      background-image: linear-gradient(to bottom, #2563eb, #7c3aed);
    }

    .custom-scrollbar-neon {
      scrollbar-color: #0ea5e9 #f1f5f9; /* thumb and track for Firefox */
    }

    .dark .custom-scrollbar-neon {
      scrollbar-color: #2563eb #1f2937; /* thumb and track for Firefox in dark mode */
    }

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

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

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

    .animate-fade-in-up {
      animation: fade-in-up 0.6s ease-out forwards;
    }
  </style>
</div>