Chat Window Component - Travel/Tourism Skeuomorphic

<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">

  <div class="w-full max-w-4xl h-[80vh] min-h-[600px] flex flex-col rounded-3xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-blue-200 to-indigo-200 dark:from-gray-700 dark:to-gray-900
              border-4 border-solid border-blue-300 dark:border-gray-600
              p-1 sm:p-2">

    <!-- Chat Window Glassmorphic Frame -->
    <div class="flex-1 flex flex-col bg-white/60 dark:bg-gray-800/60 backdrop-blur-md rounded-2xl shadow-inner-lg shadow-blue-400/30 dark:shadow-gray-900/30
                relative overflow-hidden">

      <!-- Header Bar -->
      <div class="flex items-center justify-between p-4 sm:p-5 border-b border-white/50 dark:border-gray-700/50
                  bg-blue-300/80 dark:bg-gray-800/80 rounded-t-2xl shadow-md z-10
                  text-blue-900 dark:text-gray-100 font-semibold text-lg sm:text-xl">
        <div class="flex items-center space-x-3">
          <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden border-2 border-blue-500 dark:border-gray-500 shadow-md">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
          </div>
          <div>
            <p>Travel Assistant</p>
            <p class="text-sm text-blue-800 dark:text-gray-300 font-normal">Online</p>
          </div>
        </div>
        <div class="flex space-x-3 text-blue-700 dark:text-gray-300">
          <button class="p-2 rounded-full hover:bg-blue-400/50 dark:hover:bg-gray-700/50 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>
          <button class="p-2 rounded-full hover:bg-blue-400/50 dark:hover:bg-gray-700/50 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="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" /></svg></button>
        </div>
      </div>

      <!-- Chat Messages Area -->
      <div class="flex-1 p-4 sm:p-6 overflow-y-auto custom-scrollbar">

        <!-- Operator Message -->
        <div class="flex items-start mb-6">
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-400 dark:border-gray-500 shadow-md flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
          </div>
          <div class="ml-3 sm:ml-4 bg-gradient-to-br from-blue-300 to-indigo-300 dark:from-gray-700 dark:to-gray-800 p-3 sm:p-4 rounded-xl rounded-bl-none max-w-[75%] shadow-lg border border-blue-400 dark:border-gray-600 relative">
            <div class="absolute -left-2 top-0 w-4 h-4 bg-blue-300 dark:bg-gray-700 rounded-br-full -z-10"></div>
            <p class="text-sm sm:text-base text-blue-900 dark:text-gray-100">Hello! I'm your travel assistant. How can I help you plan your next adventure?</p>
          </div>
        </div>

        <!-- User Message -->
        <div class="flex justify-end items-start mb-6">
          <div class="mr-3 sm:mr-4 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-600 dark:to-gray-700 p-3 sm:p-4 rounded-xl rounded-br-none max-w-[75%] shadow-lg border border-purple-300 dark:border-gray-500 relative">
            <div class="absolute -right-2 top-0 w-4 h-4 bg-purple-200 dark:bg-gray-600 rounded-bl-full -z-10"></div>
            <p class="text-sm sm:text-base text-purple-900 dark:text-gray-100">Hi! I'm looking for a tropical getaway in December. Any recommendations?</p>
          </div>
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-purple-400 dark:border-gray-500 shadow-md flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
          </div>
        </div>

        <!-- Operator Message with Image -->
        <div class="flex items-start mb-6">
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-blue-400 dark:border-gray-500 shadow-md flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-full h-full object-cover">
          </div>
          <div class="ml-3 sm:ml-4 bg-gradient-to-br from-blue-300 to-indigo-300 dark:from-gray-700 dark:to-gray-800 p-3 sm:p-4 rounded-xl rounded-bl-none max-w-[75%] shadow-lg border border-blue-400 dark:border-gray-600 relative">
            <div class="absolute -left-2 top-0 w-4 h-4 bg-blue-300 dark:bg-gray-700 rounded-br-full -z-10"></div>
            <p class="text-sm sm:text-base text-blue-900 dark:text-gray-100 mb-2">December is perfect for the Caribbean! How about a relaxing stay in Barbados?</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Barbados Beach" class="rounded-lg mt-2 shadow-md border border-blue-400/50 dark:border-gray-600/50">
            <p class="text-xs text-blue-800 dark:text-gray-300 mt-2">Click for details or more options!</p>
          </div>
        </div>

        <!-- User Message, more text -->
        <div class="flex justify-end items-start mb-6">
          <div class="mr-3 sm:mr-4 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-600 dark:to-gray-700 p-3 sm:p-4 rounded-xl rounded-br-none max-w-[75%] shadow-lg border border-purple-300 dark:border-gray-500 relative">
            <div class="absolute -right-2 top-0 w-4 h-4 bg-purple-200 dark:bg-gray-600 rounded-bl-full -z-10"></div>
            <p class="text-sm sm:text-base text-purple-900 dark:text-gray-100">Barbados sounds lovely! What about flight and accommodation packages? I'm looking for something all-inclusive and relaxing, perhaps a resort with spa facilities.</p>
          </div>
          <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full overflow-hidden border-2 border-purple-400 dark:border-gray-500 shadow-md flex-shrink-0">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-full h-full object-cover">
          </div>
        </div>

      </div>

      <!-- Input Area -->
      <div class="p-4 sm:p-5 flex items-center space-x-3 sm:space-x-4 border-t border-white/50 dark:border-gray-700/50
                  bg-gradient-to-r from-blue-300/80 to-indigo-300/80 dark:from-gray-800/80 dark:to-gray-900/80
                  rounded-b-2xl shadow-inner-lg shadow-blue-400/30 dark:shadow-gray-900/30 z-10">
        <button class="p-2 rounded-full bg-blue-400 hover:bg-blue-500 dark:bg-gray-600 dark:hover:bg-gray-500
                       text-white shadow-md transition-colors duration-200 flex-shrink-0">
          <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.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13.5" /></svg>
        </button>
        <input type="text" placeholder="Type your message..." class="flex-1 p-3 sm:p-4 rounded-xl
                      bg-white/80 dark:bg-gray-700/80 border border-blue-400 dark:border-gray-600
                      text-blue-900 dark:text-gray-100 placeholder-blue-700/70 dark:placeholder-gray-300/70
                      shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-gray-500
                      transition-all duration-200 text-sm sm:text-base">
        <button class="p-2 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-purple-600 dark:hover:bg-purple-700
                       text-white shadow-lg transition-colors duration-200 flex-shrink-0 rotate-45 -mt-1">
          <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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Custom Scrollbar Styles (typically in a separate CSS file or a style tag if compiled) -->
  <style>
    .custom-scrollbar::-webkit-scrollbar {
      width: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(var(--tw-fill-blue-200), 0.5); /* Using Tailwind var for blue-200 */
      border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(var(--tw-fill-blue-500), 0.7); /* Using Tailwind var for blue-500 */
      border-radius: 10px;
      border: 2px solid rgba(var(--tw-fill-blue-200), 0.5); /* Match track color */
    }
    .custom-scrollbar::-m-scrollbar-thumb {
      background-color: rgba(var(--tw-fill-blue-500), 0.7);
      border-radius: 10px;
      border: 2px solid rgba(var(--tw-fill-blue-200), 0.5);
    }
    /* Dark mode scrollbar styles */
    .dark .custom-scrollbar::-webkit-scrollbar-track {
      background: rgba(var(--tw-fill-gray-800), 0.5);
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: rgba(var(--tw-fill-gray-600), 0.7);
      border: 2px solid rgba(var(--tw-fill-gray-800), 0.5);
    }
    .dark .custom-scrollbar::-m-scrollbar-thumb {
      background-color: rgba(var(--tw-fill-gray-600), 0.7);
      border: 2px solid rgba(var(--tw-fill-gray-800), 0.5);
    }
    .shadow-inner-lg {
      box-shadow: inset 0 0px 15px rgba(0, 0, 0, 0.1), inset 0 0px 8px rgba(0, 0, 0, 0.05);
    }
    .dark .shadow-inner-lg {
      box-shadow: inset 0 0px 15px rgba(0, 0, 0, 0.4), inset 0 0px 8px rgba(0, 0, 0, 0.2);
    }
  </style>

  <!-- Emulate Tailwind CSS variables for custom scrollbar (for browser compatibility) -->
  <script>
    document.documentElement.style.setProperty('--tw-fill-blue-100', '219, 234, 254');
    document.documentElement.style.setProperty('--tw-fill-blue-200', '191, 219, 254');
    document.documentElement.style.setProperty('--tw-fill-blue-300', '147, 197, 253');
    document.documentElement.style.setProperty('--tw-fill-blue-400', '96, 165, 250');
    document.documentElement.style.setProperty('--tw-fill-blue-500', '59, 130, 246');
    document.documentElement.style.setProperty('--tw-fill-purple-100', '233, 213, 255');
    document.documentElement.style.setProperty('--tw-fill-purple-200', '221, 214, 254');
    document.documentElement.style.setProperty('--tw-fill-purple-300', '196, 181, 253');

    document.documentElement.style.setProperty('--tw-fill-gray-700', '55, 65, 81');
    document.documentElement.style.setProperty('--tw-fill-gray-800', '31, 41, 55');
    document.documentElement.style.setProperty('--tw-fill-gray-900', '17, 24, 39');
    document.documentElement.style.setProperty('--tw-fill-gray-600', '75, 85, 99');
    document.documentElement.style.setProperty('--tw-fill-gray-500', '107, 114, 128');

    // Toggles dark mode for demonstration
    // For a real app, integrate with your theme management
    // function toggleDarkMode() {
    //   document.documentElement.classList.toggle('dark');
    // }
    // document.addEventListener('DOMContentLoaded', () => {
    //   // Check for preferred theme or user setting
    //   if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    //     document.documentElement.classList.add('dark');
    //   } else {
    //     document.documentElement.classList.remove('dark');
    //   }
    // });
  </script>
</div>