<div id="typing-notification" class="flex items-center gap-3 mb-10 fade-in-up">
    <div>
        <div class="w-[35px] s:w-[60px] h-[35px] s:h-[60px] rounded-full shadow-md border border-gray-100">
            {% if typing_user.customerprofile %}
            {% if typing_user.customerprofile.image %}
            <img src="{{typing_user.customerprofile.image.url}}"
                class="w-full h-full rounded-full object-cover">
            {% else %}
            <div
                class="w-full h-full border border-secondosiblue bg-secondosiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
                {{ typing_user.first_name.0 }}{{ typing_user.last_name.0 }}
            </div>
            {% endif %}
            {% elif typing_user.staffprofile %}
            {% if typing_user.staffprofile.image %}
            <img src="{{typing_user.staffprofile.image.url}}"
                class="w-full h-full rounded-full object-cover">
            {% else %}
            <div
                class="w-full h-full border border-osiblue bg-osiblue text-white uppercase rounded-full flex justify-center items-center p-1 shadow-md">
                {{ typing_user.first_name.0 }}{{ typing_user.last_name.0 }}
            </div>
            {% endif %}
            {% endif %}
        </div>
    </div>


    <div class="w-full">
        <p class="text-secondosiblue font-light text-sm s:text-base">
            <span class="font-semibold">{{typing_user.first_name}}</span> is typing... </p>
    </div>
</div>