<div class="mb-2 flex justify-start items-center gap-2" id="typing">
    <div
        class="w-[25px] h-[25px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
            <img class="w-full h-full rounded-full object-cover" src="{{chat_room.chatroomguest.visitor.flag_image_url}}">
    </div>
    <div
        class="w-fit rounded-r-3xl rounded-tl-3xl px-3 py-3 bg-gray-50 border border-gray-100 shadow-md flex space-x-1 justify-start items-center">
        <div class="h-1.5 w-1.5 bg-secondosiblue rounded-full animate-typing"></div>
        <div class="h-1.5 w-1.5 bg-osiblue rounded-full animate-typing" style="animation-delay: 0.2s;"></div>
        <div class="h-1.5 w-1.5 bg-fifthosiblue rounded-full animate-typing" style="animation-delay: 0.4s;">
        </div>
    </div>
</div>
