{# Chat panel body — message list + input. Loaded into #assistant-body. #}
{% load humanize %}
<div class="flex h-full flex-col" data-conversation-id="{{ conversation.id }}" data-send-url="{{ send_url }}">

  {# Scroll region — relative for the floating "jump to latest" pill #}
  <div class="relative min-h-0 flex-1">
    <ul id="assistant-messages" class="absolute inset-0 overflow-y-auto space-y-3 px-4 py-4 scroll-smooth"
        role="log" aria-live="polite" aria-relevant="additions">
      {% if messages_qs %}
        {% for m in messages_qs %}
          {% if m.role == 'user' %}
            {% include "assistant/_message_user.html" with message=m %}
          {% elif m.role == 'assistant' %}
            {% include "assistant/_message_assistant.html" with message=m %}
          {% endif %}
        {% endfor %}
      {% else %}
        {% include "assistant/_empty_state.html" %}
      {% endif %}
    </ul>

    {# Scroll-to-latest — JS toggles `.is-visible` when user is scrolled away #}
    <button
      type="button"
      id="assistant-scroll-jump"
      class="assistant-scroll-jump"
      aria-label="Jump to latest"
    >
      <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
      </svg>
      <span>Latest</span>
    </button>
  </div>

  {# Live status strip — sits between the messages and the input form. #}
  {% include "assistant/_typing_indicator.html" %}

  {# Input row — safe-area aware on mobile, send button is disabled by default #}
  <form
    id="assistant-form"
    class="shrink-0 border-t border-ruforum-border bg-white px-3 pt-3"
    style="padding-bottom: max(0.75rem, env(safe-area-inset-bottom));"
    autocomplete="off"
  >
    <div class="flex items-end gap-2">
      <label for="assistant-input" class="sr-only">Your message</label>
      <textarea
        id="assistant-input"
        name="message"
        rows="1"
        maxlength="4000"
        placeholder="Ask about the platform or your data…"
        class="flex-1 resize-none rounded-lg border border-ruforum-border bg-white px-3 py-2 text-sm leading-snug text-ruforum-text placeholder:text-ruforum-text-muted/60 focus:border-ruforum-primary focus:outline-none focus:ring-2 focus:ring-ruforum-primary/20"
      ></textarea>
      <button
        type="submit"
        id="assistant-send"
        class="assistant-send-btn"
        aria-label="Send message"
        disabled
      >
        <svg data-icon="send" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 19V5m0 0l-6 6m6-6l6 6"/>
        </svg>
        <svg data-icon="spinner" class="hidden h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-opacity="0.25" stroke-width="2.5"/>
          <path d="M21 12a9 9 0 00-9-9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
    <div class="mt-1.5 flex items-center justify-between px-1 font-meta text-[0.62rem] uppercase tracking-[0.14em] text-ruforum-text-muted/70">
      <span data-form-hint>Enter to send · Shift + Enter for newline</span>
    </div>
  </form>
</div>