チャットウィンドウ

                <div class="flex flex-col h-[700px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-md lg:max-w-lg">
    <!-- Header -->
    <div class="flex items-center justify-between p-4 bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700 text-white shadow-md">
        <div class="flex items-center space-x-3">
            <img class="h-10 w-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div>
                <h3 class="text-lg font-semibold">Olivia Martin</h3>
                <p class="text-sm opacity-90">Online</p>
            </div>
        </div>
        <button class="p-1 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white">
            <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
    </div>

    <!-- Chat Messages Area -->
    <div class="flex-1 p-4 overflow-y-auto bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
        <!-- Incoming Message -->
        <div class="flex items-start mb-4">
            <img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Hello! How can I assist you today regarding your last order?</p>
                <span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:05 AM</span>
            </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end mb-4">
            <div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Hi Olivia, I have a question about the shipping status. My order number is #12345.</p>
                <span class="block text-xs text-right text-white text-opacity-80 mt-1">10:07 AM</span>
            </div>
        </div>

        <!-- Incoming Message -->
        <div class="flex items-start mb-4">
            <img class="h-9 w-9 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Chat User Avatar">
            <div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Certainly! Let me check that for you. Please wait a moment.</p>
                <span class="block text-xs text-right text-gray-500 dark:text-gray-400 mt-1">10:08 AM</span>
            </div>
        </div>

        <!-- Outgoing Message -->
        <div class="flex justify-end mb-4">
            <div class="bg-red-500 dark:bg-red-600 text-white p-3 rounded-xl max-w-[75%] shadow-sm">
                <p class="text-sm">Thanks!</p>
                <span class="block text-xs text-right text-white text-opacity-80 mt-1">10:09 AM</span>
            </div>
        </div>
    </div>

    <!-- Message Input -->
    <div class="p-4 bg-white dark:bg-gray-800 flex items-center space-x-3 border-t border-gray-200 dark:border-gray-700">
        <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-gray-100 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-orange-500 dark:focus:ring-orange-600 shadow-inner transition-colors duration-200">
        <button class="bg-orange-500 dark:bg-orange-600 text-white p-3 rounded-full hover:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 shadow-md transition-colors duration-200">
            <svg class="w-6 h-6 -rotate-45" 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>
        </button>
    </div>
</div>
              

                <div class="min-h-screen bg-orange-50 dark:bg-stone-950 flex items-center justify-center p-4 sm:p-6 md:p-8 font-serif text-stone-800 dark:text-stone-300">
  <div class="w-full max-w-2xl bg-white dark:bg-stone-900 rounded-lg shadow-xl overflow-hidden border border-stone-200 dark:border-stone-800 flex flex-col" style="box-shadow: 8px 8px 0px 0px rgba(100, 70, 0, 0.1);">

    <!-- Header -->
    <div class="p-4 bg-stone-100 dark:bg-stone-800 border-b border-stone-200 dark:border-stone-700 flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div>
          <h2 class="font-bold text-lg leading-tight text-amber-800 dark:text-amber-300">Elara Vance</h2>
          <p class="text-sm text-stone-600 dark:text-stone-400">Online now</p>
        </div>
      </div>
      <div class="flex space-x-3">
        <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <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="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l.293-.293A1 1 0 017 8.586V10h4V7a1 1 0 011-1h2.586l.293-.293A1 1 0 0117 4.586V6h4a1 1 0 011 1v4a1 1 0 01-1 1h-1.586l-.293.293A1 1 0 0117 15.414V14H7a1 1 0 01-1-1v-4a1 1 0 011-1h10a1 1 0 001-1V7a1 1 0 00-1-1h-2v4z" />
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
          <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="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Chat Messages Container -->
    <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 bg-orange-50 dark:bg-stone-950 border-t border-b border-stone-200 dark:border-stone-800" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPGcgZmlsbD0iI0FBQjBBQiIgZmlsbC1vcGFjaXR5PSIuMDgiPgogICAgICA8cGF0aCBkPSJNNiAxOXY0Mmg0OFYxOUg2em00MCA1aDJhMSA0IDEgNCAxIDQ0LTQgMWgxMmE0IDEgNFY3SDQyem0xMiA0MmE0IDEgNCAxIDQgMWgtMzJhMSA0IDEgNC4wNi00LjA2IDEtMy45NC0xem0tNDAgNHYaMWExIDEgMSAwIDAxLjAxLS41MiAxIDEgMSAwIDAgMSA0LjE2LTQwLjMzIDEtMy44Ny0xem00Mi45NiAyYzAtMi42NiA4LjMtNC4zMiAxMi00Ljc0VjE0SDM4VjEwSDIyVjdIMTkgMi45M0E0IDEgNCAxIDQuMDIgMS4zNSA0IDEgNCAxIDQuMDJWMmgwTTAgNzBoNDh2MTJMMzYgODJMMjQgOTRMMTUgMTAzSDR6bTYwLTQwaC0xMnYxMmwxMiA4LS43NC0uNjJWMTEyem0yMCAyaDNhMSAxIDEgMCAxIDAtNiAwTTAgMGgwVjIwaDQ4djcuNjlhMSAxIDEgMCAxLS42OC41OGwtLjIyLS4wMiAxLjQ4LTQuOTZhMSA1IDEgNSAxMC4wMi0uNTQgMyAxIDMgMSAyLjItLjg0ek01MSAyMEE0IDEgNCAxIDI0LjAyIDUwem0tMjYtMTguMjNhMSA1IDEgNSAxMC4wMi0uNTQgMyAxIDMgMSAyLjItLjg0ek0xMyA3MmgwVjU2QTYgNiA2IDAgMDE2IDYySDUwYTYgNiA2IDAgMDE1LTUgNTYtNWExIDUgMSA1IDEwLjAyLS41NCazPgogICAgPC9nPgo8L3N2Zz4=');
      background-size: 60px 60px; background-repeat: repeat;">

      <!-- Received message -->
      <div class="flex items-start">
        <img class="w-8 h-8 rounded-full object-cover mr-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="bg-stone-100 dark:bg-stone-800 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-stone-200 dark:border-stone-700 relative text-sm sm:text-base">
          <p>Hey there! Your profile looked really interesting. I love your passion for classic literature.</p>
          <span class="absolute bottom-1 right-2 text-xs text-stone-500 dark:text-stone-400">10:30 AM</span>
        </div>
      </div>

      <!-- Sent message -->
      <div class="flex justify-end items-end">
        <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-amber-200 dark:border-amber-700 relative text-sm sm:text-base">
          <p>Oh, thank you! I spend a lot of time in libraries. What kind of books are you into?</p>
          <span class="absolute bottom-1 left-2 text-xs text-stone-500 dark:text-stone-400">10:32 AM</span>
        </div>
        <img class="w-8 h-8 rounded-full object-cover ml-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/8.jpg" alt="My Avatar">
      </div>

      <!-- Received message with image -->
      <div class="flex items-start">
        <img class="w-8 h-8 rounded-full object-cover mr-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
        <div class="bg-stone-100 dark:bg-stone-800 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-stone-200 dark:border-stone-700 relative text-sm sm:text-base">
          <p>I'm a big fan of historical fiction and anything that transports me to another era.</p>
          <img src="https://picsum.photos/300/200?random=1" alt="Shared Image" class="mt-2 rounded-lg object-cover w-full h-auto max-h-48">
          <span class="absolute bottom-1 right-2 text-xs text-stone-500 dark:text-stone-400">10:35 AM</span>
        </div>
      </div>

      <!-- Sent message -->
      <div class="flex justify-end items-end">
        <div class="bg-amber-100 dark:bg-amber-800 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl shadow-sm max-w-[75%] md:max-w-[60%] border border-amber-200 dark:border-amber-700 relative text-sm sm:text-base">
          <p>That's awesome! I just finished 'The Nightingale' by Kristin Hannah. Have you read it?</p>
          <span class="absolute bottom-1 left-2 text-xs text-stone-500 dark:text-stone-400">10:38 AM</span>
        </div>
        <img class="w-8 h-8 rounded-full object-cover ml-3 border border-amber-300 dark:border-stone-700" src="https://randomuser.me/api/portraits/men/8.jpg" alt="My Avatar">
      </div>

    </div>

    <!-- Message Input -->
    <div class="p-4 bg-stone-100 dark:bg-stone-800 border-t border-stone-200 dark:border-stone-700 flex items-center space-x-3">
      <button class="p-2 rounded-full hover:bg-stone-200 dark:hover:bg-stone-700 text-stone-600 dark:text-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500">
        <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 py-2 px-4 rounded-full bg-white dark:bg-stone-900 border border-stone-300 dark:border-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 text-sm sm:text-base placeholder:text-stone-500 dark:placeholder:text-stone-400">
      <button class="p-2 rounded-full bg-amber-600 hover:bg-amber-700 text-white dark:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
        </svg>
      </button>
    </div>

  </div>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden flex flex-col h-[70vh] md:h-[80vh] lg:h-[75vh]">
    <!-- Chat Header -->
    <div class="flex items-center justify-between p-4 bg-orange-700 dark:bg-orange-900 text-white shadow-md">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-300" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Chat User Avatar">
        <h2 class="text-lg font-semibold">Sarah Jenkins</h2>
      </div>
      <div class="flex space-x-3">
        <button aria-label="Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <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="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <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.872-3.248A1 1 0 0122 7.744v8.512a1 1 0 01-2.128.536L15 14m-5 4v-4a4 4 0 014-4h.5a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5H10zm0 0a2 2 0 100-4 2 2 0 000 4z"/>
          </svg>
        </button>
        <button aria-label="More Options" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <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 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" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Chat Body (Messages) -->
    <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-800 scrollbar-thumb-orange-800 dark:scrollbar-thumb-orange-600 scrollbar-track-orange-100 dark:scrollbar-track-gray-700 scrollbar-thin">

      <!-- Received Message -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">Hello! Thank you so much for reaching out. We appreciate your interest in our 'Harvest Hope' initiative.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
        </div>
      </div>

      <!-- Sent Message -->
      <div class="flex items-end justify-end">
        <div class="bg-orange-600 dark:bg-orange-700 text-white p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
          <p class="text-sm">I'm excited to learn more! How can I make a donation, and what impact will it have?</p>
          <span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:07 AM</span>
        </div>
      </div>

      <!-- Received Message with longer text -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">You can donate directly through our website at <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">[Your Charity Website Link]</a>. Every contribution helps us provide food, shelter, and education to those in need, especially during this season.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:08 AM</span>
        </div>
      </div>

      <!-- Sent Message with image -->
      <div class="flex items-end justify-end">
        <div class="bg-orange-600 dark:bg-orange-700 text-white p-2 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
          <img src="https://picsum.photos/300/200?random=1" alt="Image attachment" class="rounded-lg mb-2 shadow-lg w-full h-auto object-cover">
          <p class="text-sm">This looks like a wonderful cause! Here's a photo from our recent charity drive to share some inspiration.</p>
          <span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:10 AM</span>
        </div>
      </div>

      <!-- Received message with another user -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Another User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">Thanks for sharing that, John! It's inspiring to see the community come together.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:12 AM</span>
        </div>
      </div>

    </div>

    <!-- Chat Input -->
    <div class="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-inner flex items-center space-x-2">
      <button aria-label="Attach File" class="p-2 text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 rounded-full">
        <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" />
        </svg>
      </button>
      <input type="text" placeholder="Type a message..." aria-label="Chat message input" class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:border-transparent text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400">
      <button aria-label="Send Message" class="p-2 bg-orange-600 dark:bg-orange-700 text-white rounded-full shadow-md hover:bg-orange-700 dark:hover:bg-orange-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-45 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </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, transparent);
    border-radius: 10px;
  }

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

  /* Fallback for Firefox and other browsers, using standard properties where possible */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-scrollbar-thumb-color) var(--tw-scrollbar-track-color);
  }

  /* Tailwind utility classes for scrollbar */
  .scrollbar-thumb-orange-800 {
    --tw-scrollbar-thumb-color: #9A3412;
  }
  .dark\:scrollbar-thumb-orange-600 {
    --tw-scrollbar-thumb-color: #DDAA55;
  }
  .scrollbar-track-orange-100 {
    --tw-scrollbar-track-color: #FFF7ED;
  }
  .dark\:scrollbar-track-gray-700 {
    --tw-scrollbar-track-color: #374151;
  }

  /* Material Design-inspired blob shapes for message bubbles */
  .material-blob-left {
    border-top-left-radius: 4px; /* Slight adjustment for a less sharp corner */
  }
  .material-blob-right {
    border-top-right-radius: 4px; /* Slight adjustment for a less sharp corner */
  }
</style>
              

                <div class="flex flex-col h-screen bg-amber-50 dark:bg-zinc-950 font-mono text-zinc-800 dark:text-zinc-200 p-4 sm:p-6 lg:p-8">

  <!-- Top Bar / Header -->
  <div class="flex items-center justify-between p-4 bg-orange-800 dark:bg-zinc-800 text-white rounded-t-lg shadow-md mb-4">
    <div class="flex items-center space-x-3">
      <img src="https://picsum.photos/id/1018/60/60" alt="Team Logo" class="w-10 h-10 rounded-full border-2 border-white object-cover">
      <h2 class="text-lg sm:text-xl font-bold flex flex-col sm:flex-row items-baseline">
        <span class="block sm:mr-2">Team 'Apex Predators'</span>
        <span class="text-orange-200 text-sm sm:text-base">(Workout 05/11 Chat)</span>
      </h2>
    </div>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
        <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>
      <button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
        <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="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
  </div>

  <!-- Chat Area -->
  <div class="flex-1 overflow-y-auto p-4 bg-orange-50 dark:bg-zinc-900 rounded-lg shadow-inner mb-4 border border-orange-200 dark:border-zinc-800 space-y-4 sm:space-y-6">

    <!-- Message 1 (Other User) -->
    <div class="flex items-start">
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
      <div class="flex-1">
        <div class="flex items-baseline mb-1">
          <span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Coach Mike</span>
          <span class="text-xs text-orange-600 dark:text-zinc-400">10:15 AM</span>
        </div>
        <div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Alright team, focus on form today. We're hitting those high-intensity reps. Hydrate well!</p>
          <div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
        </div>
      </div>
    </div>

    <!-- Message 2 (Self) -->
    <div class="flex items-start justify-end">
      <div class="flex-1 text-right">
        <div class="flex items-baseline justify-end mb-1">
          <span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:17 AM</span>
          <span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
        </div>
        <div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Got it, Coach! Ready to push hard. 💪 Any specific warm-up routine you recommend?</p>
          <div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
    </div>

    <!-- Message 3 (Other user with image) -->
    <div class="flex items-start">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
      <div class="flex-1">
        <div class="flex items-baseline mb-1">
          <span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Alex G.</span>
          <span class="text-xs text-orange-600 dark:text-zinc-400">10:20 AM</span>
        </div>
        <div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Checking in! Here's my progress from yesterday's cardio:</p>
          <img src="https://picsum.photos/id/237/300/200" alt="Activity Progress" class="mt-2 rounded-md max-w-full h-auto object-cover">
          <div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
        </div>
      </div>
    </div>

    <!-- Message 4 (Self - long message) -->
    <div class="flex items-start justify-end">
      <div class="flex-1 text-right">
        <div class="flex items-baseline justify-end mb-1">
          <span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:22 AM</span>
          <span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
        </div>
        <div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Awesome work, Alex! That's a solid run. Keep it up! I'm struggling a bit with my squat depth, considering filming a set today to review it later. Any tips for getting lower without losing form?</p>
          <div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
    </div>

    <!-- System message / separator -->
    <div class="text-center text-xs text-orange-700 dark:text-zinc-500 font-semibold italic my-4">
      --- Today --- 
    </div>

    <!-- Pinned message / announcement -->
    <div class="flex items-start p-3 bg-brown-700 dark:bg-brown-900 text-white rounded-lg shadow-md border border-brown-600 dark:border-brown-800">
        <svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4H9V9h2v5zm-2-7a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path></svg>
        <p class="text-sm sm:text-base font-semibold">Reminder: <span class="font-normal">Warm-up drills posted in the 'Resources' channel.</span></p>
    </div>

  </div>

  <!-- Input Area -->
  <div class="flex flex-col sm:flex-row items-center p-4 bg-orange-800 dark:bg-zinc-800 rounded-b-lg shadow-md space-y-3 sm:space-y-0 sm:space-x-3">
    <button class="p-2 rounded-full text-white bg-orange-700 dark:bg-zinc-700 hover:bg-orange-600 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600 w-full sm:w-auto">
      <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.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.486L18 14"></path></svg>
      <span class="sr-only">Attach File</span>
    </button>
    <textarea type="text" placeholder="Message #team-chat (Press Alt+Enter for new line)" class="flex-1 p-3 rounded-lg bg-orange-100 dark:bg-zinc-700 text-orange-900 dark:text-zinc-200 placeholder-orange-400 dark:placeholder-zinc-400 border border-orange-300 dark:border-zinc-600 focus:outline-none focus:border-orange-500 dark:focus:border-zinc-500 resize-none h-12 sm:h-auto min-h-[48px] max-h-[150px]"></textarea>
    <button class="p-3 rounded-lg bg-burgundy dark:bg-purple-800 text-white hover:bg-brown-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-burgundy dark:focus:ring-purple-600 w-full sm:w-auto font-semibold">
      <svg class="w-6 h-6 inline-block sm:hidden" 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>
      <span class="hidden sm:inline-block">Send</span>
    </button>
  </div>

</div>

<style>
  /* Define custom colors for better autumn scheme representation */
  .bg-burgundy {
    background-color: #8B0000;
  }
  .text-burgundy {
    color: #8B0000;
  }
  .border-burgundy {
    border-color: #8B0000;
  }
  .hover\:bg-burgundy-light:hover {
    background-color: #A52A2A;
  }

  /* Dark mode variants for custom colors */
  .dark .bg-burgundy {
    background-color: #6a0000;
  }
  .dark .text-burgundy {
    color: #ae4747;
  }
  .dark .border-burgundy {
    border-color: #6a0000;
  }
  .dark .hover\:bg-burgundy-light:hover {
    background-color: #7c0000;
  }

  /* Add some brown tones */
  .bg-brown-700 {
    background-color: #795548;
  }
  .dark\:bg-brown-900 {
    background-color: #4e342e;
  }
  .border-brown-600 {
    border-color: #6d4c41;
  }
  .dark\:border-brown-800 {
    border-color: #3e2723;
  }
  .hover\:bg-brown-600:hover {
    background-color: #6d4c41;
  }

  /* Adjust max-h for textarea on smaller screens */
  @media (max-width: 639px) {
    textarea {
      max-height: 100px; /* Limit height on mobile */
    }
  }
</style>
              

                <div class="flex flex-col h-full w-full max-w-lg mx-auto bg-warm-gray-900 border border-warm-gray-700 rounded-lg shadow-lg overflow-hidden dark:bg-zinc-900 dark:border-zinc-700 md:max-w-xl lg:max-w-2xl font-mono">

  <!-- Chat Header -->
  <div class="flex items-center justify-between p-4 bg-warm-gray-800 border-b border-warm-gray-600 dark:bg-zinc-800 dark:border-zinc-600">
    <div class="flex items-center space-x-3">
      <div class="w-3 h-3 rounded-full bg-lime-500 animate-pulse"></div>
      <h2 class="text-lg font-bold text-lime-400">System Chat</h2>
    </div>
    <div class="flex space-x-2">
      <button class="p-1 text-warm-gray-400 hover:text-lime-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 rounded-md">
        <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
  </div>

  <!-- Chat Messages Area -->
  <div class="flex-1 p-4 overflow-y-auto space-y-4 text-sm scrollbar-thin scrollbar-thumb-lime-600 scrollbar-track-warm-gray-700 dark:scrollbar-thumb-lime-700 dark:scrollbar-track-zinc-800">

    <!-- Incoming Message -->
    <div class="flex items-start">
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
      <div>
        <div class="flex items-baseline space-x-2 mb-1">
          <span class="font-semibold text-lime-400">Neo_Matrix</span>
          <span class="text-xs text-warm-gray-500">10:30 AM</span>
        </div>
        <div class="p-3 bg-warm-gray-700 text-warm-gray-200 rounded-br-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-zinc-700 dark:text-zinc-200">
          Hey, anyone online for a quick data-stream?
        </div>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-start justify-end">
      <div>
        <div class="flex items-baseline justify-end space-x-2 mb-1">
          <span class="text-xs text-warm-gray-500">10:31 AM</span>
          <span class="font-semibold text-lime-400">You</span>
        </div>
        <div class="p-3 bg-lime-700 text-white rounded-bl-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-lime-800">
          Affirmative. Ready to link up.
        </div>
      </div>
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 ml-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Your Avatar">
    </div>

    <!-- Incoming Message with Image -->
    <div class="flex items-start">
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
      <div>
        <div class="flex items-baseline space-x-2 mb-1">
          <span class="font-semibold text-lime-400">Neo_Matrix</span>
          <span class="text-xs text-warm-gray-500">10:35 AM</span>
        </div>
        <div class="p-3 bg-warm-gray-700 text-warm-gray-200 rounded-br-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-zinc-700 dark:text-zinc-200">
          Check out this new system schematic.
          <img src="https://picsum.photos/400/250" alt="System Schematic" class="mt-2 w-full max-w-sm rounded-md border border-lime-600 object-cover">
        </div>
      </div>
    </div>

    <!-- Outgoing Message with longer text -->
    <div class="flex items-start justify-end">
        <div>
            <div class="flex items-baseline justify-end space-x-2 mb-1">
                <span class="text-xs text-warm-gray-500">10:40 AM</span>
                <span class="font-semibold text-lime-400">You</span>
            </div>
            <div class="p-3 bg-lime-700 text-white rounded-bl-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-lime-800 max-w-xs md:max-w-sm">
                Intriguing. The flow seems optimized for neural processing. What's the projected efficiency gain on this version?
            </div>
        </div>
        <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 ml-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Your Avatar">
    </div>

  </div>

  <!-- Chat Input Area -->
  <div class="flex items-center p-4 bg-warm-gray-800 border-t border-warm-gray-600 dark:bg-zinc-800 dark:border-zinc-600">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 bg-warm-gray-900 border border-warm-gray-600 rounded-lg text-warm-gray-100 placeholder-warm-gray-400 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:bg-zinc-900 dark:border-zinc-600 dark:text-zinc-100 dark:placeholder-zinc-400">
    <button class="ml-3 p-3 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-offset-2 focus:ring-offset-warm-gray-800 dark:focus:ring-offset-zinc-800">
      <svg class="w-5 h-5 -rotate-45" 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>
    </button>
  </div>
</div>

<style>
/* Custom scrollbar for better visual integration with Cyberpunk theme */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--tw-lime-600) var(--tw-warm-gray-700);
}

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

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-warm-gray-700);
  border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tw-lime-600);
  border-radius: 4px;
  border: 2px solid var(--tw-warm-gray-700);
}

/* Dark mode adjustments for scrollbar */
.dark .scrollbar-thin {
  scrollbar-color: var(--tw-lime-700) var(--tw-zinc-800);
}

.dark .scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-zinc-800);
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tw-lime-700);
  border: 2px solid var(--tw-zinc-800);
}

/* Define custom colors for better theming (optional, could be in tailwind config) */
:root {
  --tw-warm-gray-900: #1a1a1a;
  --tw-warm-gray-800: #262626;
  --tw-warm-gray-700: #3f3f3f;
  --tw-warm-gray-600: #525252;
  --tw-warm-gray-500: #737373;
  --tw-warm-gray-400: #a3a3a3;
  --tw-warm-gray-200: #e5e5e5;
  --tw-warm-gray-100: #f5f5f5;
  --tw-lime-500: #84cc16;
  --tw-lime-600: #65a30d;
  --tw-lime-700: #4d7c0f;
  --tw-lime-400: #a3e635;
}

/* Tailwind JIT or custom config can define these */
/* Example for dark mode zinc colors */
.dark {
  --tw-zinc-900: #18181b;
  --tw-zinc-800: #27272a;
  --tw-zinc-700: #3f3f46;
  --tw-zinc-600: #52525b;
  --tw-zinc-500: #71717a;
  --tw-zinc-400: #a1a1aa;
  --tw-zinc-200: #e4e4e7;
  --tw-zinc-100: #f4f4f5;
  --tw-lime-800: #3f6212;
  --tw-lime-700: #4d7c0f; /* Reusing for dark scrollbar thumb */
}

</style>
              

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

                <div class="flex h-screen w-full bg-gradient-to-br from-green-50 to-green-100 p-4 dark:from-gray-900 dark:to-gray-800 lg:p-8">
  <div class="relative flex w-full max-w-7xl mx-auto overflow-hidden rounded-3xl bg-white shadow-2xl dark:bg-gray-800 lg:flex-row flex-col">

    <!-- Left Sidebar - Contacts/Channels -->
    <div class="relative w-full lg:w-1/4 bg-gradient-to-b from-green-600 to-green-700 p-6 shadow-inner-xl dark:from-green-900 dark:to-green-800 flex flex-col overflow-hidden transform perspective-1000 rotateY-minus-2deg origin-left transition duration-700 hover:rotateY-0 lg:transform-none">
        <div class="absolute inset-0 bg-pattern-grid opacity-10 pointer-events-none"></div>

      <div class="flex items-center justify-between mb-6 pb-4 border-b border-green-500 dark:border-green-700 z-10">
        <h2 class="text-2xl font-bold text-white shadow-text-sm">Contacts</h2>
        <button class="p-2 rounded-full bg-green-500 text-white hover:bg-green-400 dark:bg-green-700 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400"><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="M12 6v6m0 0v6m0-6h6m-6 0H6" /></svg></button>
      </div>

      <div class="mb-6 z-10">
        <div class="relative flex items-center">
          <input type="text" placeholder="Search..." class="w-full p-3 pl-10 rounded-full bg-green-500 bg-opacity-70 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-green-400 focus:bg-opacity-100 dark:bg-green-700 dark:bg-opacity-70 dark:focus:ring-green-600 dark:focus:bg-opacity-100">
          <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 text-white h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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" /></svg>
        </div>
      </div>

      <div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar z-10 pt-2">
        <!-- Contact Item -->
        <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
          <div class="ml-4 flex-1">
            <p class="text-lg font-semibold text-white shadow-text-sm">John Doe</p>
            <p class="text-white text-sm opacity-80 truncate">Ok, the new batch is ready...</p>
          </div>
          <span class="text-xs text-white opacity-70 ml-2">11:30 AM</span>
        </div>
        <!-- Active Contact Item -->
        <div class="flex items-center p-3 rounded-xl bg-green-400 bg-opacity-70 border border-green-300 dark:bg-green-600 dark:bg-opacity-70 transform translateZ-20 shadow-lg">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
          <div class="ml-4 flex-1">
            <p class="text-lg font-bold text-white shadow-text-sm">Jane Smith</p>
            <p class="text-white text-sm opacity-90 truncate">Confirmed order #123.</p>
          </div>
          <span class="text-xs text-white font-medium ml-2">Now</span>
        </div>
        <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            <div class="ml-4 flex-1">
              <p class="text-lg font-semibold text-white shadow-text-sm">Robert Garcia</p>
              <p class="text-white text-sm opacity-80 truncate">Machine A-3 needs maintenance.</p>
            </div>
            <span class="text-xs text-white opacity-70 ml-2">Yesterday</span>
          </div>
          <div class="flex items-center p-3 rounded-xl bg-green-500 bg-opacity-40 hover:bg-opacity-60 transition duration-200 cursor-pointer dark:bg-green-800 dark:bg-opacity-40 dark:hover:bg-opacity-60 transform translateZ-10 hover:translateZ-20">
            <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
            <div class="ml-4 flex-1">
              <p class="text-lg font-semibold text-white shadow-text-sm">Emily White</p>
              <p class="text-white text-sm opacity-80 truncate">About the next production run...</p>
            </div>
            <span class="text-xs text-white opacity-70 ml-2">Fri</span>
          </div>
      </div>
    </div>

    <!-- Right Chat Area -->
    <div class="relative flex-1 flex flex-col bg-green-50 bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60 p-6 transform translateZ-10 transition-transform duration-700 hover:translateZ-20 lg:transform-none">
        <div class="absolute inset-0 bg-texture-subtle opacity-10 pointer-events-none"></div>

      <!-- Chat Header -->
      <div class="flex items-center justify-between pb-4 border-b border-green-200 dark:border-gray-600 mb-6 z-10">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-14 h-14 rounded-full border-2 border-green-500 dark:border-green-400 shadow-lg">
          <div class="ml-4">
            <h3 class="text-xl font-bold text-green-800 dark:text-white">Jane Smith</h3>
            <p class="text-green-600 dark:text-green-300 text-sm">Online <span class="text-green-500 dark:text-green-400 text-xs">(Production Manager)</span></p>
          </div>
        </div>
        <div class="flex space-x-3">
          <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
            <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="M3 5v10a2 2 0 002 2h2v4l4-4h4a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2zM7 7h10M7 11h10M7 15h6" /></svg>
          </button>
          <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
            <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="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" /></svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages -->
      <div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar z-10 pt-2">
        <!-- Received Message -->
        <div class="flex items-end">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border border-green-300 shadow-md">
          <div class="max-w-[70%] bg-white p-4 rounded-tl-xl rounded-tr-xl rounded-br-xl shadow-lg border border-green-200 dark:bg-gray-600 dark:border-gray-500 transform translateZ-5">
            <p class="text-sm text-gray-700 dark:text-gray-200">Good morning, John. The new batch of components for the A-series assembly line is ready for inspection. We've just completed the QC checks.</p>
            <span class="block text-right text-xs text-gray-500 mt-2 dark:text-gray-400">10:45 AM</span>
          </div>
        </div>

        <!-- Sent Message -->
        <div class="flex justify-end">
          <div class="max-w-[70%] bg-green-500 text-white p-4 rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-lg border border-green-400 dark:bg-green-700 dark:border-green-600 transform translateZ-5">
            <p class="text-sm">Excellent! Please send over the inspection report and high-res photos. I'll need to forward it to the clients by end of day.</p>
            <span class="block text-right text-xs text-white opacity-80 mt-2">10:48 AM</span>
          </div>
        </div>

        <!-- Received Message with Image -->
        <div class="flex items-end">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border border-green-300 shadow-md">
          <div class="max-w-[70%] bg-white p-3 rounded-tl-xl rounded-tr-xl rounded-br-xl shadow-lg border border-green-200 dark:bg-gray-600 dark:border-gray-500 transform translateZ-5">
            <p class="text-sm text-gray-700 mb-2 dark:text-gray-200">Here's a preview of the report and some detailed shots:</p>
            <img src="https://picsum.photos/400/250?random=1" alt="Factory Image" class="w-full rounded-lg mb-2 shadow-md">
            <img src="https://picsum.photos/400/250?random=2" alt="Product Image" class="w-full rounded-lg shadow-md">
            <span class="block text-right text-xs text-gray-500 mt-2 dark:text-gray-400">10:55 AM</span>
          </div>
        </div>

        <!-- Sent Message -->
        <div class="flex justify-end">
            <div class="max-w-[70%] bg-green-500 text-white p-4 rounded-tl-xl rounded-tr-xl rounded-bl-xl shadow-lg border border-green-400 dark:bg-green-700 dark:border-green-600 transform translateZ-5">
              <p class="text-sm">Looks good, Jane. The precision on these is impeccable. Great work by the team!</p>
              <span class="block text-right text-xs text-white opacity-80 mt-2">10:58 AM</span>
            </div>
        </div>

      </div>

      <!-- Chat Input -->
      <div class="mt-6 pt-4 border-t border-green-200 dark:border-gray-600 flex items-center space-x-3 z-10">
        <button class="p-3 rounded-full bg-green-200 text-green-700 hover:bg-green-300 dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-5 hover:translateZ-10 transition duration-200">
          <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="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-4 rounded-full bg-green-100 border border-green-300 text-gray-800 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400 transform translateZ-5">
        <button class="p-3 rounded-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-10 hover:translateZ-20 transition duration-200">
          <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="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>
        </button>
        <button class="p-3 rounded-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 transform translateZ-10 hover:translateZ-20 transition duration-200">
          <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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
        </button>
      </div>
    </div>
  </div>
</div>

<style>
/* Define CSS variables for easier theme switching if needed (though Tailwind dark: handles most) */
:root {
  --green-primary: #34d399; /* emerald-500 */
  --green-dark: #059669; /* emerald-600 */
  --green-light: #a7f3d0; /* emerald-200 */
}

.dark {
  --green-primary: #10b981; /* emerald-600 */
  --green-dark: #065f46; /* emerald-800 */
  --green-light: #047857; /* emerald-700 */
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(var(--green-light-rgb, 240, 253, 244), 0.3); /* green-100 with opacity */
  border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(var(--gray-700-rgb, 55, 65, 81), 0.3);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--green-dark);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--green-primary);
}

/* 3D Effects */
.perspective-1000 {
  perspective: 1000px;
}

.rotateY-minus-2deg {
  transform: rotateY(-2deg); /* Initial slight rotation for 3D depth */
}

.shadow-inner-xl {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.dark .shadow-inner-xl {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.shadow-text-sm {
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Pseudo 3D transforms */
.transform {
  transform-style: preserve-3d;
}

.translateZ-5 {
  transform: translateZ(5px);
}
.hover\:translateZ-10:hover {
  transform: translateZ(10px);
}
.translateZ-1_5-2deg { /* for active contact */
    transform: translateZ(20px);
}
.translateZ-10 {
  transform: translateZ(10px);
}
.hover\:translateZ-20:hover {
  transform: translateZ(20px);
}

/* Background Patterns for 3D depth */
.bg-pattern-grid {
  background-image: linear-gradient(0deg, transparent 24%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 26%, transparent 27%, transparent 74%, rgba(0,0,0,.15) 75%, rgba(0,0,0,.15) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
}

.bg-texture-subtle {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239e9e9e' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z' /%3E%3C/g%3E%3C/svg%3E");
}

.dark .bg-texture-subtle {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234a4a4a' fill-opacity='0.25' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z' /%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 1023px) {
    /* For smaller screens, remove 3D rotation and flatten perspective */
    .lg\:transform-none {
        transform: none !important;
        perspective: none !important;
    }
    .lg\:w-1\/4 {
        width: 100%;
        height: 300px; /* Limit height of sidebar on smaller screens */
    }
    .lg\:flex-col {
        flex-direction: column;
    }
}
</style>
              

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

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="relative w-full max-w-4xl h-[calc(100vh-4rem)] md:h-[600px] flex flex-col bg-gradient-to-br from-warm-beige-100 to-warm-beige-200 dark:from-gray-800 dark:to-gray-850 rounded-3xl shadow-2xl overflow-hidden transform perspective-1000">

    <!-- 3D Overlay/Bevel Effect -->
    <div class="absolute inset-0 rounded-3xl pointer-events-none" style="
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.05) 100%),
                  linear-gradient(225deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 0 0 2px rgba(255,255,255,0.05),
                    inset 5px 5px 10px rgba(0,0,0,0.1), inset -5px -5px 10px rgba(255,255,255,0.05);
        filter: blur(0.5px);
    "></div>

    <!-- Header -->
    <div class="flex items-center justify-between p-4 sm:p-5 lg:p-6 border-b border-warm-beige-300/50 dark:border-gray-700/50 shadow-inner-top z-10" 
         style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full object-cover shadow-md transition-transform duration-300 hover:scale-105" 
             src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h2>
          <p class="text-sm text-gray-600 dark:text-gray-300">Online</p>
        </div>
      </div>
      <div class="flex space-x-3">
        <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
          <svg class="w-5 h-5" 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.3 11a1 1 0 00.729.584l4.249.708a1 1 0 01.921.235l4.629 4.629a1 1 0 01.235.921l-.708 4.249a1 1 0 00-.584.729L14 20.7a1 1 0 01-.684.948H5a2 2 0 01-2-2V5z"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
          <svg class="w-5 h-5" 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 10a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 1.5V6a2 2 0 002 2h3.5m-3.5 13.5v-4.5a2 2 0 00-2-2H8"></path></svg>
        </button>
      </div>
    </div>

    <!-- Chat Messages Area -->
    <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 md:space-y-6 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-warm-beige-200 dark:scrollbar-track-gray-800">

      <!-- Received Message Example (3D card) -->
      <div class="flex justify-start">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>Hi Alice, how are you doing today? I wanted to check in on the latest project updates.</p>
          <span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:30 AM</span>
          <div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Sent Message Example (3D card) -->
      <div class="flex justify-end">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>I'm good, thanks! The project's on track. I'll send you a brief update document by the end of the day.</p>
          <span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:35 AM</span>
          <div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Another Received Message -->
      <div class="flex justify-start">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>Sounds perfect! Looking forward to it.</p>
          <span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:36 AM</span>
          <div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Image Message (Sent) -->
      <div class="flex justify-end">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-2 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <img src="https://picsum.photos/400/300" alt="Image attachment" class="rounded-lg mb-2 shadow-md">
          <p class="text-sm">Check out this new dashboard mock-up.</p>
          <span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:40 AM</span>
          <div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

    </div>

    <!-- Message Input Area -->
    <div class="p-4 sm:p-5 lg:p-6 border-t border-warm-beige-300/50 dark:border-gray-700/50 flex items-center space-x-3 sm:space-x-4 shadow-inner-bottom z-10" 
         style="box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);">
      <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
        <svg class="w-5 h-5" 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.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"></path></svg>
      </button>
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-warm-beige-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 border border-warm-beige-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-warm-beige-400 dark:focus:ring-blue-500 shadow-inner 3d-input-effect" 
             style="box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,255,255,0.1);">
      <button class="p-2 rounded-full bg-gradient-to-br from-blue-400 to-blue-500 dark:from-blue-600 dark:to-blue-700 text-white hover:from-blue-500 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-blue-800 transition-colors duration-200 transform hover:scale-105 shadow-lg message-send-button">
        <svg class="w-5 h-5" 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>
</div>

<!-- Custom Styles for 3D effect / Scrollbar / Colors -->
<style>
  /* Warm Neutral Colors */
  .bg-warm-beige-100 { background-color: #f7f3ed; } /* Lightest */
  .bg-warm-beige-200 { background-color: #ede7de; } /* Light */
  .bg-warm-beige-300 { background-color: #dcd3c4; } /* Medium */
  .bg-warm-beige-300\/70 { background-color: rgba(220, 211, 196, 0.7); }
  .bg-warm-beige-400 { background-color: #c9bfb0; } /* Dark */
  .border-warm-beige-300 { border-color: #dcd3c4; }
  .border-warm-beige-300\/50 { border-color: rgba(220, 211, 196, 0.5); }
  .focus\:ring-warm-beige-400:focus { --tw-ring-color: #c9bfb0; }

  /* Dark Mode specific background-colors for gradients */
  .dark\:from-gray-850 { --tw-gradient-from: #1f2937; --tw-gradient-to: rgba(31, 41, 55, 0); }
  .dark\:to-gray-850 { --tw-gradient-to: #1f2937; }
  .dark\:from-gray-750 { --tw-gradient-from: #374151; --tw-gradient-to: rgba(55, 65, 81, 0); }
  .dark\:to-gray-750 { --tw-gradient-to: #374151; }

  /* Custom Scrollbar for Webkit */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
  }
  .scrollbar-thumb-gray-400 { --tw-scrollbar-thumb: #9ca3af; }
  .scrollbar-track-warm-beige-200 { --tw-scrollbar-track: #ede7de; }
  .dark .scrollbar-thumb-gray-600 { --tw-scrollbar-thumb: #4b5563; }
  .dark .scrollbar-track-gray-800 { --tw-scrollbar-track: #1f2937; }

  /* For Chrome, Safari, etc. */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--tw-scrollbar-track);
    border-radius: var(--tw-scrollbar-track-rounded);
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--tw-scrollbar-thumb);
    border-radius: var(--tw-scrollbar-thumb-rounded);
    border: 2px solid var(--tw-scrollbar-track);
  }
  /* Tailwind utility placeholders */
  .scrollbar-thumb-rounded-full::-webkit-scrollbar-thumb { border-radius: 9999px; }
  .scrollbar-track-rounded-full::-webkit-scrollbar-track { border-radius: 9999px; }

  /* 3D specific effects */
  .perspective-1000 {
    perspective: 1000px;
  }
  .transform-rotate-x-1 {
    transform: rotateX(1deg);
  }
  .transform--rotate-x-1 {
    transform: rotateX(-1deg);
  }
  .shadow-inner-top {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);
  }
   .shadow-inner-bottom {
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);
  }

  /* Hide the triangle using clip-path on the bubble pseudo-elements */
  .message-send-button {
    position: relative;
    overflow: hidden;
  }

  .message-send-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease-out;
    opacity: 0;
  }

  .message-send-button:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

</style>
              

                <div class="flex flex-col h-[500px] w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden font-sans">

  <!-- Chat Header -->
  <div class="flex items-center justify-between p-4 bg-blue-600 dark:bg-blue-800 text-white shadow-md">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full border-2 border-white dark:border-blue-300" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div>
        <p class="font-semibold text-lg">Support Agent</p>
        <p class="text-sm text-blue-100 dark:text-blue-200">Online</p>
      </div>
    </div>
    <button class="text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 rounded-full p-1">
      <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="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>

  <!-- Chat Messages Area -->
  <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-blue-50 dark:bg-gray-700">

    <!-- Incoming Message Example -->
    <div class="flex items-end">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div class="bg-blue-200 dark:bg-blue-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">Hello! How can I assist you with your fashion queries today?</p>
        <span class="text-xs text-gray-500 dark:text-blue-100 block text-right mt-1">10:00 AM</span>
      </div>
    </div>

    <!-- Outgoing Message Example -->
    <div class="flex justify-end">
      <div class="bg-blue-500 dark:bg-blue-700 text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">I'm looking for advice on styling a new dress for a professional event.</p>
        <span class="text-xs text-blue-100 dark:text-blue-200 block text-right mt-1">10:02 AM</span>
      </div>
    </div>

    <!-- Incoming Message Example 2 -->
    <div class="flex items-end">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Agent Avatar">
      <div class="bg-blue-200 dark:bg-blue-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
        <p class="text-sm">Certainly! Could you tell me more about the dress's color and cut?</p>
        <span class="text-xs text-gray-500 dark:text-blue-100 block text-right mt-1">10:03 AM</span>
      </div>
    </div>

  </div>

  <!-- Chat Input Area -->
  <div class="flex items-center p-4 bg-blue-100 dark:bg-gray-900 border-t border-blue-200 dark:border-gray-700">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full border border-blue-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 text-sm">
    <button class="ml-3 p-3 bg-blue-600 dark:bg-blue-700 text-white rounded-full hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-blue-100 dark:focus:ring-offset-gray-900">
      <svg class="w-5 h-5 -rotate-45" 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>
    </button>
  </div>

</div>