{#
NPC Dialogue partial - displays conversation history with current exchange.

Expected context:
- npc_name: Name of the NPC
- character_name: Name of the player character
- conversation_history: List of previous exchanges [{player_line, npc_response}, ...]
- player_line: What the player just said
- dialogue: NPC's current response
- session_id: For any follow-up actions
#}

<div class="npc-conversation">
    <div class="npc-conversation-header">
        <span class="npc-conversation-title">Conversation with {{ npc_name }}</span>
    </div>

    <div class="npc-conversation-history">
        {# Show previous exchanges #}
        {% if conversation_history %}
            {% for exchange in conversation_history %}
            <div class="dialogue-exchange dialogue-exchange-past">
                <div class="dialogue-player">
                    <span class="dialogue-speaker">{{ character_name }}:</span>
                    <span class="dialogue-text">{{ exchange.player_line }}</span>
                </div>
                <div class="dialogue-npc">
                    <span class="dialogue-speaker">{{ npc_name }}:</span>
                    <span class="dialogue-text">{{ exchange.npc_response }}</span>
                </div>
            </div>
            {% endfor %}
        {% endif %}

        {# Show current exchange (highlighted) #}
        <div class="dialogue-exchange dialogue-exchange-current">
            <div class="dialogue-player">
                <span class="dialogue-speaker">{{ character_name }}:</span>
                <span class="dialogue-text">{{ player_line }}</span>
            </div>
            <div class="dialogue-npc">
                <span class="dialogue-speaker">{{ npc_name }}:</span>
                <span class="dialogue-text">{{ dialogue }}</span>
            </div>
        </div>
    </div>
</div>

<style>
.npc-conversation {
    background: #1a1a2a;
    border-radius: 6px;
    overflow: hidden;
}

.npc-conversation-header {
    background: #2a2a3a;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #4a4a5a;
}

.npc-conversation-title {
    color: #f59e0b;
    font-weight: 600;
    font-size: 0.95rem;
}

.npc-conversation-history {
    padding: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.dialogue-exchange {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #3a3a4a;
}

.dialogue-exchange:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.dialogue-exchange-past {
    opacity: 0.7;
}

.dialogue-exchange-current {
    background: #2a2a3a;
    margin: 0 -1rem;
    padding: 1rem;
    border-radius: 0;
    opacity: 1;
}

.dialogue-player {
    margin-bottom: 0.5rem;
}

.dialogue-npc {
    padding-left: 0.5rem;
    border-left: 2px solid #f59e0b;
}

.dialogue-speaker {
    font-weight: 600;
    margin-right: 0.5rem;
}

.dialogue-player .dialogue-speaker {
    color: #60a5fa;
}

.dialogue-npc .dialogue-speaker {
    color: #f59e0b;
}

.dialogue-text {
    color: #e5e7eb;
    line-height: 1.5;
    white-space: pre-wrap;
}

.dialogue-exchange-past .dialogue-text {
    color: #9ca3af;
}
</style>