{# Read-only chat transcript. Expects `messages` (list of SupportChatMessage). #}
<style>
  .ctranscript { background:#f8f9fa; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
  .cbubble-row { display:flex; align-items:flex-start; }
  .cbubble {
    max-width:72%;
    width:fit-content;
    padding:.45rem .7rem;
    border-radius:.9rem;
    font-size:.85rem;
    line-height:1.4;
    word-break:break-word;
  }
  .cbubble-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.2rem; }
  .cbubble-ai   { background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.2rem; }
  .cbubble-text { white-space:pre-wrap; }
  .cbubble-meta { font-size:.66rem; opacity:.55; margin-top:.15rem; }
</style>
<div class="ctranscript">
  {% for m in messages %}
  <div class="cbubble-row {{ 'justify-content-end' if m.role == 'user' else 'justify-content-start' }}">
    <div class="cbubble {{ 'cbubble-user' if m.role == 'user' else 'cbubble-ai' }}">
      <div class="cbubble-text">{{ m.content }}</div>
      <div class="cbubble-meta">{{ 'You' if m.role == 'user' else 'JQC Assistant' }} · {{ m.created_at.strftime('%b %d, %I:%M %p') }}</div>
    </div>
  </div>
  {% else %}
  <div class="text-muted text-center small">This conversation has no messages.</div>
  {% endfor %}
</div>