<div id="msg-{{ msg.message.message_id }}" class="message-item message-card px-4 py-3 group" data-seq="{{ msg.message.seq }}" data-reply-to="{{ msg.message.reply_to or '' }}">
    <div class="flex items-start gap-3">
        <!-- Collapse/expand toggle (hidden by default, shown when message has replies) -->
        <button
            class="thread-toggle hidden flex-shrink-0 w-5 h-8 flex items-center justify-center opacity-40 hover:opacity-100 transition-opacity"
            type="button"
            onclick="toggleThread('{{ msg.message.message_id }}')"
            title="Toggle replies"
            aria-expanded="true"
        >
            <svg class="thread-chevron w-3 h-3 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
        </button>

        <!-- Selection checkbox (hidden by default, shown in select mode) -->
        <label class="message-checkbox hidden flex-shrink-0 flex items-center justify-center w-5 h-8 cursor-pointer">
            <input
                type="checkbox"
                class="checkbox checkbox-xs"
                onchange="toggleMessageSelection('{{ msg.message.message_id }}', this)"
            >
        </label>

        <!-- Sender indicator -->
        <div class="flex-shrink-0 w-8 h-8 rounded flex items-center justify-center text-xs font-bold
            {% if msg.color == 'cyan' %}bg-cyan-500/20 text-cyan-400
            {% elif msg.color == 'magenta' %}bg-fuchsia-500/20 text-fuchsia-400
            {% elif msg.color == 'amber' %}bg-amber-500/20 text-amber-400
            {% elif msg.color == 'emerald' %}bg-emerald-500/20 text-emerald-400
            {% elif msg.color == 'blue' %}bg-blue-500/20 text-blue-400
            {% elif msg.color == 'rose' %}bg-rose-500/20 text-rose-400
            {% else %}bg-base-300 text-base-content/60{% endif %}
        ">
            {{ msg.message.sender[:2]|upper }}
        </div>

        <div class="flex-1 min-w-0">
            <!-- Header -->
            <div class="flex items-center gap-2 flex-wrap mb-1">
                <span class="font-semibold text-sm
                    {% if msg.color == 'cyan' %}text-cyan-400
                    {% elif msg.color == 'magenta' %}text-fuchsia-400
                    {% elif msg.color == 'amber' %}text-amber-400
                    {% elif msg.color == 'emerald' %}text-emerald-400
                    {% elif msg.color == 'blue' %}text-blue-400
                    {% elif msg.color == 'rose' %}text-rose-400
                    {% endif %}
                ">{{ msg.message.sender }}</span>
                <span class="text-xs opacity-40">#{{ msg.message.seq }}</span>
                <span class="text-xs opacity-40">{{ msg.age }}</span>
                {% if msg.message.message_type != 'message' %}
                <span class="badge badge-sm badge-outline opacity-60">{{ msg.message.message_type|upper }}</span>
                {% endif %}
                {% if msg.message.reply_to %}
                <a
                    href="#msg-{{ msg.message.reply_to }}"
                    data-hx-boost="false"
                    class="flex items-center gap-1 text-xs opacity-40 hover:opacity-80"
                    title="Jump to replied message"
                >
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                    </svg>
                    <span>{{ msg.reply_to_sender }}</span>
                </a>
                {% endif %}
                <!-- Reply count badge (populated by JS when replies exist) -->
                <span class="reply-count hidden text-xs opacity-40"></span>
                <!-- Source toggle and copy buttons -->
                <div class="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    <button
                        onclick="toggleSource('{{ msg.message.message_id }}')"
                        class="toggle-source-btn btn btn-xs btn-ghost opacity-40 hover:opacity-100"
                        title="Show source"
                    >
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                        </svg>
                    </button>
                    <button
                        onclick="copySource('{{ msg.message.message_id }}')"
                        class="copy-source-btn btn btn-xs btn-ghost opacity-40 hover:opacity-100"
                        title="Copy source"
                    >
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Rendered content (default view) -->
            <div class="message-rendered">
                <div class="markdown-content text-sm opacity-80" data-raw="{{ msg.message.content_markdown|e }}"></div>
            </div>

            <!-- Source content (hidden by default) -->
            <div class="message-source text-sm opacity-80 hidden">{{ msg.message.content_markdown }}</div>
        </div>
    </div>
</div>
