{% if quotes %}
    {% for quote in quotes %}
    <div class="miku-quote-row" style="margin-bottom: 25px; display: flex; flex-direction: column; align-items: {% if loop.index0 is even %}flex-start{% else %}flex-end{% endif %};">
        <div class="miku-quote-wrap" style="display: flex; gap: 15px; max-width: 85%; {% if loop.index0 is odd %}flex-direction: row-reverse;{% endif %}">
            <div style="width: 48px; height: 48px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px var(--miku-light); flex-shrink: 0; overflow: hidden; background: var(--bg-page-base);">
                {% if quote.avatar_url %}<img src="{{ quote.avatar_url }}" style="width: 100%; height: 100%; object-fit: cover;">{% endif %}
            </div>
            <div class="miku-quote-body" style="{% if loop.index0 is odd %}text-align: right;{% endif %}">
                <div style="font-size: 0.85rem; color: var(--text-sub); margin-bottom: 6px; font-weight: bold;">{{ quote.sender }}</div>
                
                <div style="background: rgba(255, 255, 255, 0.95); padding: 16px 22px; border: 1px solid var(--border-miku-light); box-shadow: 0 4px 10px rgba(57,197,187,0.05); border-radius: {% if loop.index0 is even %}4px 18px 18px 18px{% else %}18px 4px 18px 18px{% endif %}; margin-bottom: 12px;">
                    <div style="font-weight: 600; font-size: 1.05rem; color: var(--text-main); line-height: 1.6;">{{ quote.content }}</div>
                </div>
                
                <div style="display: inline-block; background: var(--bg-page-base); padding: 12px 18px; border-radius: 12px; border-left: 4px solid var(--miku-pink-light); text-align: left;">
                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 6px;">
                        <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" style="width: 18px; height: 18px; color: var(--miku-dark);">
                            <path d="M9 18V5l12-2v13"/>
                            <circle cx="6" cy="18" r="3"/>
                            <circle cx="18" cy="16" r="3"/>
                        </svg>                        <span style="font-weight: bold; color: var(--miku-dark); font-size: 0.95rem;">Nhận xét của Miku</span>
                    </div>
                    <div style="font-size: 0.9rem; color: var(--text-sub); line-height: 1.6;">{{ quote.reason | safe }}</div>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
{% endif %}