{#
  Conversation timeline: message bubbles for the chat pane. Re-rendered verbatim
  by the poll endpoint, so it stays self-contained.
#}
{% set timeline_items = [] %}
{% for item in timeline %}
  {% if item.__class__.__name__ == 'Message' %}
    {% set _ = timeline_items.append((item.created_at, item)) %}
  {% endif %}
{% endfor %}
{% set me_name = current_user.profile.full_name if current_user.profile and current_user.profile.full_name else current_user.email %}
{% set other_name = (other.profile.full_name if other and other.profile and other.profile.full_name else other.email) if other else 'Participant' %}
{% set me_initial = (me_name[0]|upper) if me_name else 'Y' %}
{% set other_initial = (other_name[0]|upper) if other_name else 'P' %}
{% if timeline_items %}
  {% set ns = namespace(prev=none) %}
  {% for _, item in timeline_items|sort(attribute=0) %}
    {% set d = item.created_at.date() %}
    {% if d != ns.prev %}
      <div class="cm-daysep"><span>{{ item.created_at.strftime('%d %b %Y') }}</span></div>
      {% set ns.prev = d %}
    {% endif %}
    {% if item.message_type.value == 'system' %}
      <div class="cm-event"><i class="bi bi-info-circle" aria-hidden="true"></i> {{ item.message }}</div>
    {% else %}
      {% set mine = item.sender_id == current_user.id %}
      <div class="cm-row {{ 'cm-row--own' if mine }}">
        <span class="cm-avatar {{ 'cm-avatar--own' if mine }}" aria-hidden="true">{{ me_initial if mine else other_initial }}</span>
        <div class="cm-group">
          <div class="cm-bubble {{ 'cm-bubble--own' if mine else 'cm-bubble--other' }}">{{ item.message }}</div>
          <time class="cm-time" data-relative datetime="{{ item.created_at.isoformat() }}">{{ item.created_at.strftime('%d %b %Y') }}</time>
        </div>
      </div>
    {% endif %}
  {% endfor %}
{% else %}
  <div class="cm-empty">
    <div class="cm-empty-ico"><i class="bi bi-chat-heart" aria-hidden="true"></i></div>
    <h3 class="cm-empty-title">Start the conversation</h3>
    <p class="cm-empty-text">Say hello and ask {{ other_name }} about the listing — availability, condition, or a good time to meet on campus.</p>
  </div>
{% endif %}