Chat Window Component

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