{% if chat_message.member %}
<div class="w-full flex justify-start items-end gap-2 fade-in-up">
    <div>
        <div
            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
            {% if chat_message.member.staffprofile.image %}
            <img class="w-full h-full rounded-full"
                src="http://192.168.0.100:8000{{chat_message.member.staffprofile.image.url}}">
            {% else %}
            <p>{{chat_message.member.first_name.0}}{{chat_message.member.last_name.0}}</p>
            {% endif %}
        </div>
    </div>
    <div
        class="w-fit bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
        <p class="break-all">{{chat_message.content}}</p>
    </div>
</div>
{% else %}
<div class="w-full flex justify-end">
    <div
        class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue fade-in-up">
        <p class="break-all">{{chat_message.content}}</p>
    </div>
</div>
{% endif %}

<style>
    @keyframes fadeInAndUp {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0px); }
    }
    .fade-in-up {
        animation: fadeInAndUp 0.6s ease;
    }
</style>