{% if chat_message.member %}
<div class="flex 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.1.111:8000{{chat_message.member.staffprofile.image.url}}">
            {% else %}
            <p>nn</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-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 self-start">
    <p class="break-all">{{chat_message.content}}</p>
</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>