{% extends "base.html" %}
{% block title %}Ticket #{{ provider_thread_id or ticket.id }}{% endblock %}
{% block content %}
<script>
  window._ticketId = {{ ticket.id }};
  window._preferredLanguage = '{{ preferred_language }}';
  window._knownLanguages = {{ known_languages | tojson }};
  window._customerLanguage = '{{ customer_language or "" }}';
  window._ticketProductId = '{{ id_product or "" }}';
  window._customerHash = '{{ ticket.thread.customer_hash or "" }}';
  window._replySignature = {{ reply_signature | tojson }};
  window._segmentData = {{ segments | tojson }};
  window._classificationJson = {{ (suggestions[0].classification_json if suggestions else '{}') | tojson | safe }};

  // Prefetch uncached image attachments so lightbox feels instant
  window.addEventListener('load', function() {
    var imgExts = ['jpg','jpeg','png','gif','webp','bmp','svg','pdf'];
    var links = document.querySelectorAll('a[onclick*="openLightbox"]');
    var queue = [];
    links.forEach(function(a) {
      var m = a.getAttribute('onclick').match(/openLightbox\('([^']+)',\s*'[^']+',\s*'([^']+)'\)/);
      if (m && imgExts.indexOf(m[2].toLowerCase()) !== -1) queue.push(m[1]);
    });
    // Fetch sequentially (one Playwright at a time on server)
    (function next(i) {
      if (i >= queue.length) return;
      fetch(queue[i] + '?check=1').then(function() { next(i + 1); }).catch(function() { next(i + 1); });
    })(0);
  });
</script>
<div id="ticket-page" class="flex flex-col lg:flex-row h-auto lg:h-[calc(100vh-3.5rem)]" data-ticket-id="{{ ticket.id }}">

  {# ============== Left: conversation column ============== #}
  <div class="flex-1 flex flex-col min-w-0">

    {# -- Sticky header -- #}
    <div id="ticket-header" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 sm:px-6 py-3 flex-shrink-0">
      {# Row 1: back, subject, ID, external link … refresh #}
      <div class="flex items-center gap-2">
        <a href="{{ url_for('inbox') }}" id="back-to-inbox" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0" title="Back to Inbox">
          <span class="material-symbols-outlined text-lg">arrow_back</span>
        </a>
        <script>
          (function() {
            var saved = sessionStorage.getItem('inboxReturnUrl');
            if (saved) document.getElementById('back-to-inbox').href = saved;
          })();
        </script>
        <h1 id="ticket-subject" class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate min-w-0" title="{{ ticket.thread.subject }}">{{ ticket.thread.subject }}</h1>
        <div class="h-4 w-px bg-gray-200 dark:bg-gray-700 flex-shrink-0"></div>
        <span id="ticket-id" class="text-xs font-medium text-gray-500 dark:text-gray-400 flex-shrink-0">#{{ provider_thread_id or ticket.id }}</span>
        {% if provider_thread_id %}
        <a href="https://addons.prestashop.com/seller-contact.php?ict={{ provider_thread_id }}"
           target="_blank" rel="noopener" title="Open in Addons Marketplace"
           id="ticket-external-link" data-testid="external-link" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0">
          <span class="material-symbols-outlined text-base">open_in_new</span>
        </a>
        {% endif %}
        <div class="flex-1"></div>
        {% if ticket.thread.customer_hash %}
        <button id="cred-topbar-btn" type="button" onclick="showCredentialModal('{{ ticket.thread.customer_hash }}')"
                title="Saved Credentials"
                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors flex-shrink-0 relative">
          <span class="material-symbols-outlined text-sm">key</span>
          <span id="cred-topbar-count" class="hidden absolute -top-1.5 -right-1.5 min-w-[16px] h-4 px-1 text-[10px] font-bold rounded-full bg-brand-600 text-white flex items-center justify-center">0</span>
        </button>
        {% endif %}
        <button id="scroll-top-btn" type="button" onclick="scrollToTop()"
                title="Scroll to first message"
                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors flex-shrink-0">
          <span class="material-symbols-outlined text-sm">vertical_align_top</span>
        </button>
        <button id="scroll-bottom-btn" type="button" onclick="scrollToBottom()"
                title="Scroll to last message"
                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors flex-shrink-0">
          <span class="material-symbols-outlined text-sm">vertical_align_bottom</span>
        </button>
        <button id="scroll-last-customer-btn" type="button" onclick="scrollToLastCustomerMessage()"
                title="Scroll to customer's last message"
                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors flex-shrink-0">
          <span class="material-symbols-outlined text-sm">keyboard_double_arrow_down</span>
        </button>
        <button type="button" onclick="fetchNextTicketSuggestion(window._ticketId)"
                title="Suggest next ticket to work on"
                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors flex-shrink-0">
          <span class="material-symbols-outlined text-sm">skip_next</span>
          <span class="hidden sm:inline">Next</span>
        </button>
        <button id="refresh-btn" type="button" onclick="refreshMessages()"
                title="Fetch latest messages from Addons"
                class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors flex-shrink-0">
          <span class="material-symbols-outlined text-sm" id="refresh-icon">refresh</span>
          <span class="hidden sm:inline">Refresh</span>
        </button>
      </div>

      {# Row 1b: product icon + name + customer website #}
      {% if ticket.thread.product_name or ticket.thread.customer_website %}
      <div id="ticket-product-info" class="flex items-center gap-2 mt-1 ml-8">
        {% if product and product.product_type == 'business_care' %}
        <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center flex-shrink-0"
             title="{{ ticket.thread.product_name or '' }}">
          <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">BC</span>
        </div>
        {% elif product and product.pico_url %}
        <img src="{{ product.pico_url }}" alt="" class="w-8 h-8 rounded-lg flex-shrink-0"
             title="{{ ticket.thread.product_name or '' }}" onerror="this.style.display='none'">
        {% endif %}
        {% if ticket.thread.product_name %}
        <span class="text-xs font-medium text-gray-600 dark:text-gray-400 truncate" title="{{ ticket.thread.product_name }}">{{ ticket.thread.product_name }}</span>
        {% endif %}
        {% if ticket.thread.customer_website %}
        {% set ws_href = ticket.thread.customer_website if ticket.thread.customer_website.startswith('http') else 'https://' + ticket.thread.customer_website %}
        {% if site_check and site_check.is_online == true %}
          {% set tip = 'Online' %}
          {% if site_check.error_message %}{% set tip = 'Online (' ~ site_check.http_status ~ ' — ' ~ site_check.error_message ~ ')' %}
          {% elif site_check.http_status %}{% set tip = 'Online (' ~ site_check.http_status ~ ', ' ~ (site_check.response_time_ms or '?') ~ 'ms)' %}{% endif %}
          <span class="inline-block w-2 h-2 rounded-full bg-green-500" title="{{ tip }}"></span>
        {% elif site_check and site_check.is_online == false %}
          {% set tip = 'Offline' %}
          {% if site_check.error_message %}{% set tip = 'Offline — ' ~ site_check.error_message %}{% endif %}
          <span class="inline-block w-2 h-2 rounded-full bg-red-500" title="{{ tip }}"></span>{% endif %}
        <a href="{{ ws_href }}" target="_blank" rel="noopener"
           class="text-xs text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 truncate max-w-[200px]" title="{{ ticket.thread.customer_website }}">
          {{ ticket.thread.customer_website | truncate(32) }}
        </a>
        {% endif %}
      </div>
      {% endif %}

      {# -- Second row: controls + info -- #}
      <div id="ticket-controls" class="flex items-center gap-3 mt-2 flex-wrap">

        <label class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
          <span class="hidden sm:inline">Status:</span>
          <select id="status-select" onchange="updateStatus(this.value)"
                  class="border border-gray-200 dark:border-gray-600 rounded-lg text-xs px-2 py-1 bg-white dark:bg-gray-700 font-medium text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="open" {% if ticket.status == 'open' %}selected{% endif %}>Open</option>
            <option value="in_progress" {% if ticket.status == 'in_progress' %}selected{% endif %}>In Progress</option>
            <option value="waiting_customer" {% if ticket.status == 'waiting_customer' %}selected{% endif %}>Waiting</option>
            <option value="answered" {% if ticket.status == 'answered' %}selected{% endif %}>Answered</option>
            <option value="closed" {% if ticket.status == 'closed' %}selected{% endif %}>Closed</option>
          </select>
        </label>

        <label class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
          <span class="hidden sm:inline">Priority:</span>
          <select id="priority-select" onchange="updatePriority(this.value)"
                  class="border border-gray-200 dark:border-gray-600 rounded-lg text-xs px-2 py-1 bg-white dark:bg-gray-700 font-medium text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="p1" {% if ticket.priority == 'p1' %}selected{% endif %}>Critical</option>
            <option value="p2" {% if ticket.priority == 'p2' %}selected{% endif %}>High</option>
            <option value="p3" {% if ticket.priority == 'p3' %}selected{% endif %}>Normal</option>
            <option value="p4" {% if ticket.priority == 'p4' %}selected{% endif %}>Low</option>
          </select>
        </label>

        {# Support contract status — only show if we have actual support data (zen_type or has_support) #}
        {% if ticket.thread.zen_type or ticket.thread.has_support is not none %}
          {% if ticket.thread.has_support %}
          <span data-testid="support-status" class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-500/30">
            <span class="material-symbols-outlined" style="font-size:11px">verified</span>
            {{ ticket.thread.support_type or 'Support Active' }}
          </span>
          {% elif ticket.thread.is_support_expired %}
          <span data-testid="support-status" class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 border border-red-200 dark:border-red-500/30">
            <span class="material-symbols-outlined" style="font-size:11px">error</span>
            Support Expired
          </span>
          {% else %}
          <span data-testid="support-status" class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-medium bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 border border-green-200 dark:border-green-500/30">
            <span class="material-symbols-outlined" style="font-size:11px">check_circle</span>
            Support Active
          </span>
          {% endif %}
        {% endif %}

        {# Intent / sentiment badge from latest AI classification #}
        {% if suggestions %}
          {% set _latest_s = suggestions|sort(attribute='created_at', reverse=True)|first %}
          {% set _intent = (_latest_s.classification_json|fromjson).get('intent_category', '') %}
          {% if _intent %}
            {% set _intent_map = {
              'angry': ['red', 'sentiment_very_dissatisfied'],
              'escalation': ['red', 'priority_high'],
              'complaint': ['orange', 'feedback'],
              'refund': ['orange', 'currency_exchange'],
              'bug': ['amber', 'bug_report'],
              'question': ['blue', 'help'],
              'config': ['blue', 'settings'],
              'help': ['blue', 'support_agent'],
              'feature_request': ['purple', 'lightbulb'],
              'thanks_solved': ['green', 'check_circle']
            } %}
            {% set _style = _intent_map.get(_intent, ['gray', 'label']) %}
        <span data-testid="intent-badge" class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-medium
          bg-{{ _style[0] }}-50 text-{{ _style[0] }}-700 border border-{{ _style[0] }}-200
          dark:bg-{{ _style[0] }}-500/10 dark:text-{{ _style[0] }}-300 dark:border-{{ _style[0] }}-500/30">
          <span class="material-symbols-outlined" style="font-size:11px">{{ _style[1] }}</span>
          {{ _intent | replace('_', ' ') | title }}
        </span>
          {% endif %}
        {% endif %}

        {# Customer language — manual override (any language, not limited to what support knows) #}
        <div class="h-3 w-px bg-gray-200 dark:bg-gray-700"></div>
        <label class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
          <span class="material-symbols-outlined" style="font-size:13px">translate</span>
          <select id="customer-lang-select" onchange="setCustomerLanguage(this.value)"
                  class="border border-gray-200 dark:border-gray-600 rounded-lg text-xs px-1.5 py-0.5 bg-white dark:bg-gray-700 font-medium text-blue-700 dark:text-blue-400 focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="">Auto</option>
            <option value="ar" {% if customer_language == 'ar' %}selected{% endif %}>AR — Arabic</option>
            <option value="ca" {% if customer_language == 'ca' %}selected{% endif %}>CA — Catalan</option>
            <option value="cs" {% if customer_language == 'cs' %}selected{% endif %}>CS — Czech</option>
            <option value="da" {% if customer_language == 'da' %}selected{% endif %}>DA — Danish</option>
            <option value="de" {% if customer_language == 'de' %}selected{% endif %}>DE — German</option>
            <option value="el" {% if customer_language == 'el' %}selected{% endif %}>EL — Greek</option>
            <option value="en" {% if customer_language == 'en' %}selected{% endif %}>EN — English</option>
            <option value="es" {% if customer_language == 'es' %}selected{% endif %}>ES — Spanish</option>
            <option value="fi" {% if customer_language == 'fi' %}selected{% endif %}>FI — Finnish</option>
            <option value="fr" {% if customer_language == 'fr' %}selected{% endif %}>FR — French</option>
            <option value="he" {% if customer_language == 'he' %}selected{% endif %}>HE — Hebrew</option>
            <option value="hr" {% if customer_language == 'hr' %}selected{% endif %}>HR — Croatian</option>
            <option value="hu" {% if customer_language == 'hu' %}selected{% endif %}>HU — Hungarian</option>
            <option value="id" {% if customer_language == 'id' %}selected{% endif %}>ID — Indonesian</option>
            <option value="it" {% if customer_language == 'it' %}selected{% endif %}>IT — Italian</option>
            <option value="ja" {% if customer_language == 'ja' %}selected{% endif %}>JA — Japanese</option>
            <option value="ko" {% if customer_language == 'ko' %}selected{% endif %}>KO — Korean</option>
            <option value="nl" {% if customer_language == 'nl' %}selected{% endif %}>NL — Dutch</option>
            <option value="no" {% if customer_language == 'no' %}selected{% endif %}>NO — Norwegian</option>
            <option value="pl" {% if customer_language == 'pl' %}selected{% endif %}>PL — Polish</option>
            <option value="pt" {% if customer_language == 'pt' %}selected{% endif %}>PT — Portuguese</option>
            <option value="ro" {% if customer_language == 'ro' %}selected{% endif %}>RO — Romanian</option>
            <option value="ru" {% if customer_language == 'ru' %}selected{% endif %}>RU — Russian</option>
            <option value="sk" {% if customer_language == 'sk' %}selected{% endif %}>SK — Slovak</option>
            <option value="sv" {% if customer_language == 'sv' %}selected{% endif %}>SV — Swedish</option>
            <option value="tr" {% if customer_language == 'tr' %}selected{% endif %}>TR — Turkish</option>
            <option value="uk" {% if customer_language == 'uk' %}selected{% endif %}>UK — Ukrainian</option>
            <option value="zh" {% if customer_language == 'zh' %}selected{% endif %}>ZH — Chinese</option>
          </select>
        </label>

        <div class="flex-1 hidden sm:block"></div>

        <button id="mark-as-read-btn" onclick="markAsRead()" title="Mark as read"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors {% if ticket.is_read %}hidden{% endif %}">
          <span class="material-symbols-outlined text-sm">mark_email_read</span>
          <span class="hidden sm:inline">Mark as Read</span>
        </button>
        <button id="mark-as-unread-btn" onclick="markAsUnread()" title="Mark as unread"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors {% if not ticket.is_read %}hidden{% endif %}">
          <span class="material-symbols-outlined text-sm">mark_email_unread</span>
          <span class="hidden sm:inline">Mark as Unread</span>
        </button>
        {% if not ticket.first_response_at %}
        <button id="answered-outside-btn" onclick="answeredOutside()"
                title="Record that this ticket was answered outside ModuleDesk"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
          <span class="material-symbols-outlined text-sm">done_all</span>
          <span class="hidden sm:inline">Mark as Replied Externally</span>
        </button>
        {% endif %}
      </div>
    </div>

    {# -- Thread Summary / TL;DR -- shown when no segments, otherwise integrated into topic overlay #}
    {% if thread_summary and segments|length <= 1 %}
    <details id="thread-summary" data-testid="thread-summary" class="mx-6 mt-3 mb-0 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
      <summary class="px-4 py-2.5 cursor-pointer text-xs font-semibold text-blue-700 dark:text-blue-400 flex items-center gap-1.5 select-none">
        <span class="material-symbols-outlined text-sm">summarize</span>
        Thread Summary
      </summary>
      <div class="px-4 pb-3 text-xs text-blue-800 dark:text-blue-200 leading-relaxed">{{ thread_summary }}</div>
    </details>
    {% endif %}

    {# -- Review request banner -- #}
    {% if is_review_request and ticket.status == 'closed' and not ticket.is_read %}
    <div id="review-request-banner" class="mx-6 mt-3 mb-0 rounded-lg border border-green-200 dark:border-green-500/30 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-500/10 dark:to-emerald-500/10 px-5 py-4">
      <div class="flex items-start gap-3">
        <span class="material-symbols-outlined text-green-600 dark:text-green-400 text-2xl flex-shrink-0 mt-0.5">sentiment_very_satisfied</span>
        <div class="flex-1 min-w-0">
          <h3 class="text-sm font-semibold text-green-800 dark:text-green-200">Happy customer — time for a review request!</h3>
          <p class="text-xs text-green-700 dark:text-green-400 mt-1 leading-relaxed">
            This customer sent a thank-you on a closed ticket. Reply to
            <strong>clear the Addons "unanswered" counter</strong> and
            <strong>earn a positive rating</strong>.
          </p>
          <div class="flex items-center gap-2 mt-3">
            <button type="button" id="load-review-template-btn" onclick="loadReviewRequest()"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
              <span class="material-symbols-outlined text-sm">rate_review</span>
              Load Review Request
            </button>
            <button type="button" onclick="markReviewSent()"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-green-700 dark:text-green-400 bg-white dark:bg-gray-700 border border-green-300 dark:border-green-500/30 rounded-lg hover:bg-green-50 dark:hover:bg-green-500/10 transition-colors">
              <span class="material-symbols-outlined text-sm">check_circle</span>
              Already Sent
            </button>
            <button type="button" id="dismiss-review-btn" onclick="dismissReviewBanner()"
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
              <span class="material-symbols-outlined text-sm">close</span>
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    {# -- Conversation thread -- #}
    <div id="message-thread" class="flex-1 overflow-y-auto px-3 sm:px-6 py-3 space-y-4 relative min-h-[50vh] lg:min-h-0">
      {# Floating topic overlay — single pill, updated via JS #}
      {% if segments|length > 1 %}
      <div id="topic-overlay" class="sticky top-0 z-20 flex flex-col items-center pointer-events-none transition-opacity duration-200"
           style="opacity:0; margin-bottom:-0.375rem;">
        <div class="flex justify-center py-1.5">
          <button id="topic-overlay-pill" type="button"
                  class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium cursor-pointer
                         bg-purple-100/95 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 border border-purple-200 dark:border-purple-500/30 shadow-sm backdrop-blur-sm pointer-events-auto
                         hover:bg-purple-200/95 dark:hover:bg-purple-500/30 transition-colors focus:outline-none focus:ring-2 focus:ring-purple-300"
                  aria-expanded="false" aria-controls="topic-summary-panel">
            <span class="material-symbols-outlined text-sm">topic</span>
            <span id="topic-overlay-text"></span>
            <span class="material-symbols-outlined text-sm transition-transform duration-200" id="topic-overlay-chevron" style="font-size:14px">expand_more</span>
          </button>
        </div>
        {# Expandable per-topic summary panel under the pill #}
        <div id="topic-summary-panel" class="hidden pointer-events-auto max-w-lg w-full mx-auto px-4 pb-2">
          <div class="bg-purple-50/95 dark:bg-purple-500/15 backdrop-blur-sm border border-purple-200 dark:border-purple-500/30 rounded-lg px-4 py-3 shadow-md">
            <p id="topic-summary-text" class="text-xs text-purple-800 dark:text-purple-200 leading-relaxed"></p>
          </div>
        </div>
      </div>
      {% endif %}

      {% set ns = namespace(prev_seg=-1) %}
      {% for msg in messages %}
      {% set cur_seg = message_segment_map.get(msg.id, -1) %}
      {% if cur_seg != ns.prev_seg and cur_seg >= 0 %}
      {# Inline topic marker (not sticky — observed by JS) #}
      <div class="segment-marker flex justify-center py-1.5" id="segment-{{ cur_seg }}" data-seg-index="{{ cur_seg }}"
           data-seg-label="{{ segments[cur_seg].label if cur_seg < segments|length else 'Topic ' ~ (cur_seg + 1) }}">
        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium
                     bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 border border-purple-200 dark:border-purple-500/30 shadow-sm">
          <span class="material-symbols-outlined text-sm">topic</span>
          {{ segments[cur_seg].label if cur_seg < segments|length else 'Topic' }}
        </span>
      </div>
      {% set ns.prev_seg = cur_seg %}
      {% endif %}
      {% if scroll_to_message_id and msg.id == scroll_to_message_id %}
      <div class="flex items-center gap-3 py-2" id="unread-marker">
        <div class="flex-1 border-t border-blue-300 dark:border-blue-500/50"></div>
        <span class="text-xs text-blue-500 dark:text-blue-400 font-medium whitespace-nowrap">Your last reply</span>
        <div class="flex-1 border-t border-blue-300 dark:border-blue-500/50"></div>
      </div>
      {% endif %}
      {% set outbound = msg.direction == 'outbound' %}
      <div class="flex items-start gap-3 group {{ 'flex-row-reverse' if outbound }}" data-message-id="{{ msg.id }}" data-direction="{{ msg.direction }}">
        {# Avatar #}
        <div class="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center text-xs font-semibold
                    {{ 'bg-blue-100 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400' if not outbound else 'bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400' }}">
          {{ 'C' if not outbound else 'A' }}
        </div>
        {# Bubble + hover actions #}
        <div class="flex items-center gap-1 max-w-[95%] sm:max-w-[75%] {{ 'flex-row-reverse' if outbound }}">
          {# Bubble #}
          <div class="min-w-0 rounded-xl px-4 py-3 text-sm
                      {{ 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700' if not outbound else 'bg-green-50 dark:bg-green-500/10 border border-green-200 dark:border-green-500/30' }}">
            <div class="flex items-center gap-2 mb-1.5 {{ 'flex-row-reverse' if outbound }}">
              <span class="font-semibold text-gray-900 dark:text-gray-100 text-xs">{{ msg.author_display }}</span>
              <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ msg.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
            </div>
            <div class="message-body text-gray-700 dark:text-gray-300 break-words whitespace-pre-wrap [&>p]:mb-2 [&>ul]:my-2 [&>ol]:my-2 [&>li]:ml-4 [&>strong]:font-bold [&>em]:italic [&>u]:underline">
              {% if msg.body_raw %}{{ msg.body_raw | safe }}{% else %}{{ msg.body_text | e | replace('\n', '<br>') | safe }}{% endif %}
            </div>
            {# Translation result area — pre-populated from cache when available #}
            {% set cached_tr = cached_translations.get(msg.id) %}
            <div class="translated-content {{ '' if cached_tr else 'hidden' }} mt-2 pt-2 border-t border-blue-100 dark:border-blue-500/30 text-xs text-blue-800 dark:text-blue-200 break-words [&>p]:mb-2 [&>ul]:my-2 [&>ol]:my-2 [&>li]:ml-4 [&>strong]:font-bold [&>em]:italic [&>u]:underline"
                 {% if cached_tr %}data-lang="{{ preferred_language }}"{% endif %}>
              {% if cached_tr %}{{ cached_tr | safe }}{% endif %}
            </div>
            {# Attachments #}
            {% if msg.attachments %}
            <div class="mt-2 pt-2 border-t border-gray-100 dark:border-gray-700 flex flex-wrap gap-2">
              {% for att in msg.attachments %}
              {% set ext = att.filename.rsplit('.', 1)[-1].lower() if '.' in att.filename else '' %}
              {% if ext in ('jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg') %}
                {% set att_icon = 'image' %}
                {% set att_color = 'bg-blue-50 hover:bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/10 dark:hover:bg-blue-500/20 dark:text-blue-400 dark:border-blue-500/30' %}
                {% set att_label = 'Image' %}
              {% elif ext == 'pdf' %}
                {% set att_icon = 'picture_as_pdf' %}
                {% set att_color = 'bg-red-50 hover:bg-red-100 text-red-700 border-red-200 dark:bg-red-500/10 dark:hover:bg-red-500/20 dark:text-red-400 dark:border-red-500/30' %}
                {% set att_label = 'PDF' %}
              {% elif ext in ('zip', 'rar', '7z', 'tar', 'gz') %}
                {% set att_icon = 'folder_zip' %}
                {% set att_color = 'bg-amber-50 hover:bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/10 dark:hover:bg-amber-500/20 dark:text-amber-400 dark:border-amber-500/30' %}
                {% set att_label = ext.upper() %}
              {% elif ext in ('doc', 'docx', 'odt', 'txt') %}
                {% set att_icon = 'description' %}
                {% set att_color = 'bg-indigo-50 hover:bg-indigo-100 text-indigo-700 border-indigo-200 dark:bg-indigo-500/10 dark:hover:bg-indigo-500/20 dark:text-indigo-400 dark:border-indigo-500/30' %}
                {% set att_label = ext.upper() %}
              {% else %}
                {% set att_icon = 'attach_file' %}
                {% set att_color = 'bg-gray-100 hover:bg-gray-200 text-gray-700 border-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-300 dark:border-gray-600' %}
                {% set att_label = ext.upper() if ext else 'File' %}
              {% endif %}
              {% set att_url = url_for('attachment_view', attachment_id=att.id) %}
              {% if ext in ('jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg', 'pdf', 'txt') %}
              <a href="{{ att_url }}" onclick="openLightbox('{{ att_url }}', '{{ att.filename | e }}', '{{ ext }}'); return false;"
                 class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-colors cursor-pointer {{ att_color }}"
                 title="{{ att.filename }}">
                <span class="material-symbols-outlined text-base leading-none">{{ att_icon }}</span>
                <span>{{ att_label }}</span>
                <span class="opacity-60">.{{ ext }}</span>
              </a>
              {% else %}
              <a href="{{ att_url }}"
                 target="_blank" rel="noopener"
                 class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-colors {{ att_color }}"
                 title="{{ att.filename }}">
                <span class="material-symbols-outlined text-base leading-none">{{ att_icon }}</span>
                <span>{{ att_label }}</span>
                <span class="opacity-60">.{{ ext }}</span>
              </a>
              {% endif %}
              {% endfor %}
            </div>
            {% endif %}
          </div>

          {# Hover action bar #}
          <div class="flex flex-col gap-1 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity">
            <button type="button"
                    title="Translate to {{ preferred_language | upper }}"
                    onclick="translateMessage(this, {{ msg.id }}, '{{ preferred_language }}')"
                    class="w-7 h-7 flex items-center justify-center rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 shadow-sm transition-colors">
              <span class="material-symbols-outlined text-sm" style="font-size:16px">translate</span>
            </button>
            {% if known_languages | length > 1 %}
            <div class="relative">
              <button type="button" onclick="toggleTranslateLangMenu(this)"
                      class="w-7 h-7 flex items-center justify-center rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500 hover:text-blue-600 dark:hover:text-blue-400 shadow-sm transition-colors">
                <span class="material-symbols-outlined text-sm" style="font-size:16px">expand_more</span>
              </button>
              <div class="translate-lang-menu hidden absolute {{ 'right-0' if outbound else 'left-0' }} top-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-10 py-1 min-w-[80px]">
                {% for lang in known_languages %}
                {% if lang != preferred_language %}
                <button type="button"
                        class="w-full text-left px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                        onclick="translateMessage(this.closest('.relative').previousElementSibling, {{ msg.id }}, '{{ lang }}'); this.closest('.translate-lang-menu').classList.add('hidden')">
                  {{ lang | upper }}
                </button>
                {% endif %}
                {% endfor %}
              </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    {# -- Reply bar -- #}
    <div id="reply-bar" class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 sm:px-6 py-3 flex-shrink-0 relative minimized" style="transition:none">
      {# Mobile: full-width tap target replaces the minimized editor #}
      <button type="button" id="reply-open-btn" onclick="toggleReplyBarMinimize()"
              class="w-full items-center gap-2 px-3 py-2.5 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 text-gray-400 dark:text-gray-500 text-sm font-normal">
        <span class="material-symbols-outlined text-base">reply</span>
        Write a reply...
      </button>

      {# Minimize/expand toggle #}
      <button type="button" id="reply-bar-toggle" onclick="toggleReplyBarMinimize()"
              class="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 flex items-center justify-center bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-full shadow-sm text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors z-10"
              title="Minimize reply area">
        <span class="material-symbols-outlined reply-toggle-icon transition-transform duration-150" style="font-size:16px">expand_more</span>
      </button>
      <span id="draft-word-count" class="hidden absolute -top-3 left-1/2 translate-x-5 text-[10px] text-brand-500 dark:text-brand-400 font-medium bg-white dark:bg-gray-700 px-1.5 py-0.5 rounded-full border border-brand-200 dark:border-brand-500/30 shadow-sm z-10"></span>

      {# Tool strip — compact icon buttons that expand panels on click #}
      <div class="reply-bar-tools flex items-center gap-1 mb-2">
        {% if id_product %}
        <button type="button" onclick="toggleReplyTool('quick-reply-container')"
                class="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors"
                title="Quick Reply">
          <span class="material-symbols-outlined text-sm">quickreply</span>
          <span class="hidden sm:inline">Quick Reply</span>
        </button>
        {% endif %}
        <button type="button" onclick="toggleReplyTool('link-builder-container')"
                class="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors"
                title="Insert Product Link">
          <span class="material-symbols-outlined text-sm">link</span>
          <span class="hidden sm:inline">Product Link</span>
        </button>
        {% if product_has_release %}
        <button type="button" onclick="attachLatestModule()"
                class="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors"
                title="Attach latest module ZIP: {{ product_release.original_filename }}{% if product_release.version %} v{{ product_release.version }}{% endif %}">
          <span class="material-symbols-outlined text-sm">extension</span>
          <span class="hidden sm:inline">Attach module</span>
        </button>
        {% endif %}
      </div>

      {# Collapsible: Quick Reply panel #}
      {% if id_product %}
      <div class="hidden mb-2" id="quick-reply-container">
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500">quickreply</span>
          <select id="quick-reply-select"
                  class="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2.5 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="">-- Quick Reply --</option>
          </select>
        </div>
      </div>
      {% endif %}

      {# Collapsible: Product URL builder panel #}
      <div class="hidden mb-2" id="link-builder-container">
        <div class="flex items-center gap-2">
          <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500">link</span>
          <select id="link-product-select"
                  class="border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium focus:ring-2 focus:ring-brand-500 outline-none max-w-[220px]">
            <option value="">Loading products…</option>
          </select>
          <select id="link-lang-select"
                  class="border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium focus:ring-2 focus:ring-brand-500 outline-none w-16">
            {% set _link_langs = ['en','es','fr','de','it','pt','nl','pl','ru','ar','ca','cs','da','el','fi','he','hr','hu','id','ja','ko','no','ro','sk','sv','tr','uk','zh'] %}
            {% for lang in _link_langs %}
            <option value="{{ lang }}" {% if lang == (customer_language or 'en') %}selected{% endif %}>{{ lang | upper }}</option>
            {% endfor %}
          </select>
          <select id="link-platform-select"
                  class="border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 font-medium focus:ring-2 focus:ring-brand-500 outline-none">
            <option value="addons" selected>Addons</option>
            <option value="website" disabled>Website (soon)</option>
          </select>
          <button type="button" onclick="insertProductLink()"
                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/10 border border-brand-200 dark:border-brand-500/30 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-500/20 transition-colors">
            <span class="material-symbols-outlined text-sm">add_link</span>
            Insert
          </button>
        </div>
      </div>

      {# AI Toolbar #}
      <div id="ai-toolbar" class="flex flex-wrap items-center gap-1.5 px-1 py-2 border-b border-gray-100 dark:border-gray-700 mb-2">
        <button id="ai-write-btn" type="button" onclick="aiWriteReply()"
                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg bg-violet-600 dark:bg-violet-700 text-white hover:bg-violet-700 dark:hover:bg-violet-600 transition-colors">
          <span class="material-symbols-outlined text-sm">auto_awesome</span>
          <span id="ai-write-label">Write reply</span>
        </button>
        <button type="button" onclick="aiProofread()"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-lg border border-violet-200 dark:border-violet-500/40 text-violet-700 dark:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-500/10 hover:border-violet-400 dark:hover:border-violet-400 transition-colors">
          <span class="material-symbols-outlined text-sm">spellcheck</span>
          Proofread
        </button>
        <button type="button" onclick="aiMakeShorter()"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-lg border border-violet-200 dark:border-violet-500/40 text-violet-700 dark:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-500/10 hover:border-violet-400 dark:hover:border-violet-400 transition-colors">
          <span class="material-symbols-outlined text-sm">compress</span>
          Shorter
        </button>
        <button type="button" onclick="aiEnrich()"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-lg border border-violet-200 dark:border-violet-500/40 text-violet-700 dark:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-500/10 hover:border-violet-400 dark:hover:border-violet-400 transition-colors">
          <span class="material-symbols-outlined text-sm">library_books</span>
          Context
        </button>
        <button type="button" onclick="aiCheckReply()"
                class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-lg border border-violet-200 dark:border-violet-500/40 text-violet-700 dark:text-violet-300 hover:bg-violet-50 dark:hover:bg-violet-500/10 hover:border-violet-400 dark:hover:border-violet-400 transition-colors">
          <span class="material-symbols-outlined text-sm">checklist</span>
          Check
        </button>
      </div>

      {# AI instruction row (shown when Write reply is clicked) #}
      <div id="ai-instruction-row" class="hidden px-1 pb-2 mb-1">
        <div class="flex gap-2 items-center">
          <input id="ai-instruction-input" type="text"
                 placeholder="Optional: 'be concise', 'apologize', 'ask for logs'…"
                 class="flex-1 text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2.5 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-violet-500 outline-none"
                 onkeydown="if(event.key==='Enter') aiWriteReplyExecute()">
          <button type="button" onclick="aiWriteReplyExecute()"
                  class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-semibold rounded-lg bg-violet-600 text-white hover:bg-violet-700 transition-colors">
            <span class="material-symbols-outlined text-sm">send</span>
            Generate
          </button>
          <button type="button" onclick="closeAIInstruction()"
                  class="p-1.5 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
            <span class="material-symbols-outlined text-sm">close</span>
          </button>
        </div>
        <div id="ai-instruction-chips" class="flex flex-wrap gap-1 mt-1.5"></div>
      </div>

      {# AI result panel #}
      <div id="ai-result-panel" class="hidden mb-2 border border-violet-200 dark:border-violet-500/30 rounded-xl bg-violet-50 dark:bg-violet-500/5 overflow-hidden">
        <div class="flex items-center justify-between px-3 py-2 border-b border-violet-200 dark:border-violet-500/30 bg-violet-100/50 dark:bg-violet-500/10">
          <span id="ai-result-label" class="text-xs font-semibold text-violet-800 dark:text-violet-300">AI suggestion</span>
          <div class="flex items-center gap-1.5" id="ai-result-actions">
            <button id="ai-use-btn" onclick="aiUseResult()" class="hidden inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-lg bg-violet-600 text-white hover:bg-violet-700 transition-colors">
              <span class="material-symbols-outlined text-sm">reply</span>Use as reply
            </button>
            <button id="ai-append-btn" onclick="aiAppendResult()" class="hidden inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-lg border border-violet-300 dark:border-violet-500 text-violet-700 dark:text-violet-300 hover:bg-violet-100 dark:hover:bg-violet-500/20 transition-colors">
              <span class="material-symbols-outlined text-sm">add</span>Append
            </button>
            <button id="ai-save-tpl-btn" onclick="aiSaveTemplate()" class="hidden inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-lg border border-emerald-200 dark:border-emerald-500/30 text-emerald-700 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 transition-colors">
              <span class="material-symbols-outlined text-sm">bookmark_add</span>Save template
            </button>
            <button id="ai-guide-btn" onclick="aiGuideResult()" class="hidden inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-lg border border-indigo-200 dark:border-indigo-500/30 text-indigo-700 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors">
              <span class="material-symbols-outlined text-sm">menu_book</span>Guide
            </button>
            <button id="ai-thumbup-btn" onclick="aiThumbsFeedback('thumbs_up')" class="hidden p-1 rounded text-gray-400 hover:text-green-600 dark:hover:text-green-400 transition-colors" title="Good result">
              <span class="material-symbols-outlined text-sm">thumb_up</span>
            </button>
            <button id="ai-thumbdown-btn" onclick="aiThumbsFeedback('thumbs_down')" class="hidden p-1 rounded text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors" title="Bad result">
              <span class="material-symbols-outlined text-sm">thumb_down</span>
            </button>
            <button onclick="closeAIResult()" class="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-violet-200 dark:hover:bg-violet-500/20 transition-colors">
              <span class="material-symbols-outlined text-sm">close</span>
            </button>
          </div>
        </div>
        <div id="ai-result-text" class="hidden px-3 py-3 text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap leading-relaxed"></div>
        <div id="ai-result-checklist" class="hidden px-3 py-3 space-y-3">
          <div id="ai-checklist-covers" class="space-y-1"></div>
          <div id="ai-checklist-missing" class="space-y-1"></div>
        </div>
        <div id="ai-result-loading" class="hidden px-3 py-4 flex items-center gap-2 text-xs text-violet-600 dark:text-violet-400">
          <span class="material-symbols-outlined text-sm animate-spin">sync</span>
          <span id="ai-loading-label">Generating…</span>
        </div>
      </div>

      {# Editor — full width #}
      <div class="w-full relative" id="reply-editor-wrap">
        <input type="file" id="reply-attachment" class="hidden"
               accept="image/*,.pdf,.doc,.docx,.zip,.txt"
               multiple
               onchange="onAttachmentSelected(this)">
        {# Drag-and-drop overlay #}
        <div id="drop-overlay" class="hidden absolute inset-0 z-20 rounded-lg border-2 border-dashed border-brand-400 bg-brand-50/90 dark:bg-brand-900/80 flex flex-col items-center justify-center gap-1 pointer-events-none">
          <span class="material-symbols-outlined text-3xl text-brand-500">upload_file</span>
          <span class="text-sm font-medium text-brand-600 dark:text-brand-400">Drop to attach</span>
        </div>
        <div id="reply-editor"></div>
        <div id="attachment-chips" class="hidden flex-wrap gap-2 mt-2 px-1"></div>
        <div id="attachment-zip-notice" class="hidden text-xs text-gray-400 dark:text-gray-500 px-1 mt-0.5">Multiple files will be sent as attachments.zip</div>

        {# Draft translation result panel #}
        <div id="draft-translate-panel" class="hidden mt-2 pt-2 border-t border-gray-100 dark:border-gray-700 space-y-2">
          <input type="hidden" id="draft-target-lang" value="{{ customer_language or preferred_language }}">
          <div id="draft-translation-result" class="hidden">
            <div class="bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-3 text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap" id="draft-translation-text"></div>
            <div class="flex items-center gap-2 mt-1.5">
              <button type="button" onclick="useDraftTranslation()"
                      class="inline-flex items-center gap-1 text-xs font-medium text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300">
                <span class="material-symbols-outlined text-xs" style="font-size:14px">arrow_upward</span>
                Use translation
              </button>
              <span class="text-gray-300 dark:text-gray-600">|</span>
              <button type="button" onclick="useDualLanguage()"
                      title="Insert translated text + separator + original text into editor"
                      class="inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
                <span class="material-symbols-outlined text-xs" style="font-size:14px">translate</span>
                Dual language
              </button>
              <span class="text-gray-300 dark:text-gray-600">|</span>
              <button type="button" onclick="copyToClipboard(document.getElementById('draft-translation-text').innerText)"
                      class="inline-flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                <span class="material-symbols-outlined text-xs" style="font-size:14px">content_copy</span>
                Copy
              </button>
            </div>
          </div>
        </div>
      </div>

      {# Action bar — horizontal below editor #}
      {% set _translate_lang = customer_language or preferred_language %}
      <div class="reply-bar-actions flex items-center gap-2 mt-2">
        {# Attach #}
        <button type="button" onclick="document.getElementById('reply-attachment').click()"
                title="Attach files (up to 5 files, 10 MB each — multiple files sent as zip)"
                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
          <span class="material-symbols-outlined text-sm">attach_file</span>
          Attach
        </button>

        {# Translate — with dropdown #}
        <div class="flex rounded-lg border border-blue-200 dark:border-blue-500/30 overflow-visible">
          <button type="button"
                  onclick="translateDraftTo(document.getElementById('draft-target-lang').value)"
                  title="Translate draft to customer language"
                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors">
            <span class="material-symbols-outlined text-sm">translate</span>
            <span id="translate-badge" class="text-[10px] font-semibold px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30">{{ _translate_lang | upper }}</span>
          </button>
          {% set _all_common_langs = ['ar','ca','cs','da','de','el','en','es','fi','fr','he','hr','hu','id','it','ja','ko','nl','no','pl','pt','ro','ru','sk','sv','tr','uk','zh'] %}
          <div class="relative border-l border-blue-200 dark:border-blue-500/30">
            <button type="button" onclick="toggleDraftLangMenu(this)"
                    class="h-full px-1.5 text-blue-500 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors flex items-center">
              <span class="material-symbols-outlined text-sm" style="font-size:16px">expand_more</span>
            </button>
            <div class="draft-lang-menu hidden absolute right-0 bottom-full mb-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg z-20 py-1 min-w-[80px] max-h-52 overflow-y-auto">
              {% for lang in _all_common_langs %}
              <button type="button"
                      class="w-full text-left px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
                      onclick="translateDraftTo('{{ lang }}'); this.closest('.draft-lang-menu').classList.add('hidden')">
                {{ lang | upper }}
              </button>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="flex-1"></div>

        {# Send — right-aligned #}
        <button type="button" id="send-reply-btn" onclick="sendReply(window._quill)"
                title="Send reply (Ctrl+Enter)"
                class="inline-flex items-center gap-1.5 px-4 py-1.5 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors">
          <span class="material-symbols-outlined text-base">send</span>
          Send
          <kbd class="hidden sm:inline text-[10px] font-normal opacity-70 ml-0.5 px-1 py-0.5 rounded bg-brand-700 border border-brand-500">Ctrl+↵</kbd>
        </button>
      </div>

      {# Quill.js WYSIWYG Editor #}
      <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
      <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
      <style>
        #reply-editor .ql-editor { min-height: 80px; max-height: 200px; overflow-y: auto; transition: min-height 0.15s ease, max-height 0.15s ease; font-size: 16px; }
        #reply-editor .ql-editor .sig-line { color: #9ca3af; }
        /* Minimized state — compact but readable (~3 lines visible) */
        #reply-bar.minimized .ql-toolbar.ql-snow { display: none; }
        #reply-bar.minimized #reply-editor .ql-editor { min-height: 60px; max-height: 72px; overflow: hidden; cursor: text; }
        #reply-bar.minimized .reply-bar-tools,
        #reply-bar.minimized .reply-bar-actions,
        #reply-bar.minimized #attachment-chips,
        #reply-bar.minimized #attachment-zip-notice,
        #reply-bar.minimized #draft-translate-panel,
        #reply-bar.minimized #quick-reply-container,
        #reply-bar.minimized #link-builder-container { display: none; }
        #reply-bar.minimized { padding-top: 4px; padding-bottom: 4px; }
        #reply-bar.minimized .reply-toggle-icon { transform: rotate(180deg); }
        /* Draft indicator when minimized */
        #reply-bar.minimized.has-draft { border-top-color: #6366f1; border-top-width: 2px; }
        .dark #reply-bar.minimized.has-draft { border-top-color: #818cf8; }
        /* Mobile: hide global sync FAB on ticket page (covered by reply bar) */
        #mobile-sync-fab { display: none !important; }
        /* Prevent horizontal overflow; Quill toolbar scrolls within itself */
        #ticket-page { overflow-x: hidden; }
        .ql-toolbar.ql-snow { overflow-x: auto; }
        /* Mobile: reply bar fixed at bottom (always visible above keyboard) */
        #reply-open-btn { display: none; }
        @media (max-width: 1023px) {
          #reply-bar { position: fixed !important; bottom: 0; left: 0; right: 0; z-index: 30; }
          #message-thread { padding-bottom: 300px; }
          /* Replace minimized state with a single tap-target button */
          #reply-bar.minimized #reply-editor { display: none; }
          #reply-bar.minimized #reply-bar-toggle { display: none; }
          #reply-bar.minimized #reply-open-btn { display: flex !important; }
          #reply-bar.minimized { padding: 12px; }
        }
      </style>
      <script>
        window._quill = new Quill('#reply-editor', {
          theme: 'snow',
          placeholder: 'Write your reply...',
          modules: {
            toolbar: [
              ['bold', 'italic', 'underline'],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              ['clean']
            ],
            clipboard: { matchers: [] }
          }
        });

        // Block Quill from ever inserting images — strip them via clipboard matcher
        window._quill.clipboard.addMatcher('IMG', function() {
          var Delta = Quill.import('delta');
          return new Delta();
        });

        // Guard: prevent selection-change from expanding during init
        window._replyBarReady = false;

        // Expand reply bar on focus — only after init is complete
        window._quill.on('selection-change', function(range) {
          if (!window._replyBarReady) return;
          var replyBar = document.getElementById('reply-bar');
          if (!replyBar) return;
          if (range) {
            replyBar.classList.remove('minimized');
            updateDraftWordCount();
          }
        });

        // Style signature + update draft word count on every text change
        window._quill.on('text-change', function() {
          if (typeof styleSignature === 'function') styleSignature();
          updateDraftWordCount();
          if (typeof updateAIWriteLabel === 'function') updateAIWriteLabel();
        });

        // Ctrl+Enter / Cmd+Enter to send — use DOM keydown since Quill's
        // built-in Enter handler has higher priority than addBinding
        window._quill.root.addEventListener('keydown', function(e) {
          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
            e.preventDefault();
            e.stopPropagation();
            sendReply(window._quill);
          }
        });

        // Insert signature on load — poll until app.js has loaded initSignature
        (function waitForAppJs() {
          if (typeof initSignature === 'function') {
            initSignature();
            window._quill.root.scrollTop = 0;
            // Enable transitions after paint (reply-bar starts minimized via HTML class)
            setTimeout(function() {
              document.getElementById('reply-bar').style.transition = '';
              window._replyBarReady = true;
            }, 200);
          } else {
            setTimeout(waitForAppJs, 50);
          }
        })();

        // Toggle collapsible tool panels (Quick Reply, Link Builder)
        function toggleReplyTool(containerId) {
          var el = document.getElementById(containerId);
          if (!el) return;
          var isHidden = el.classList.contains('hidden');
          // Close all tool panels first
          ['quick-reply-container', 'link-builder-container'].forEach(function(id) {
            var panel = document.getElementById(id);
            if (panel) panel.classList.add('hidden');
          });
          // Toggle the requested one
          if (isHidden) el.classList.remove('hidden');
        }

        // --- Reply bar minimize/expand logic ---
        (function() {
          var replyBar = document.getElementById('reply-bar');
          var thread = document.getElementById('message-thread');
          var editor = document.getElementById('reply-editor');
          if (!replyBar || !thread || !editor) return;

          function minimizeReply() {
            if (window._quill) window._quill.blur();
            replyBar.classList.add('minimized');
            document.body.classList.remove('reply-expanded');
            // Draft indicator
            var hasDraft = typeof getBodyWithoutSignature === 'function' && getBodyWithoutSignature().trim();
            replyBar.classList.toggle('has-draft', !!hasDraft);
            updateDraftWordCount();
          }

          function expandReply() {
            replyBar.classList.remove('minimized');
            document.body.classList.add('reply-expanded');
            var countEl = document.getElementById('draft-word-count');
            if (countEl) countEl.classList.add('hidden');
          }

          // Minimize when user clicks on the message thread
          thread.addEventListener('mousedown', function(e) {
            if (e.target.closest('button, a, select, input')) return;
            minimizeReply();
          });

          // Minimize on sustained scroll of message thread
          var scrollTimer = null;
          thread.addEventListener('scroll', function() {
            if (window._quill && window._quill.hasFocus()) return;
            if (!replyBar.classList.contains('minimized')) {
              if (scrollTimer) clearTimeout(scrollTimer);
              scrollTimer = setTimeout(minimizeReply, 300);
            }
          }, { passive: true });

          // Expand when clicking editor area
          editor.addEventListener('mousedown', function() { expandReply(); });

          // Expand when clicking any reply-bar interactive element
          replyBar.addEventListener('click', function(e) {
            if (e.target.closest('button, select, input, .ql-toolbar') && e.target.id !== 'reply-bar-toggle') {
              expandReply();
            }
          });
        })();

        // Manual toggle
        function toggleReplyBarMinimize() {
          var replyBar = document.getElementById('reply-bar');
          if (!replyBar) return;
          if (replyBar.classList.contains('minimized')) {
            replyBar.classList.remove('minimized');
            document.body.classList.add('reply-expanded');
            document.getElementById('draft-word-count')?.classList.add('hidden');
            if (window._quill) window._quill.focus();
          } else {
            replyBar.classList.add('minimized');
            document.body.classList.remove('reply-expanded');
            if (window._quill) window._quill.blur();
            var hasDraft = typeof getBodyWithoutSignature === 'function' && getBodyWithoutSignature().trim();
            replyBar.classList.toggle('has-draft', !!hasDraft);
            updateDraftWordCount();
          }
        }

        // Scroll to top/bottom of thread
        function scrollToTop() {
          var thread = document.getElementById('message-thread');
          if (!thread) return;
          thread.scrollTo({top: 0, behavior: 'smooth'});
        }
        function scrollToBottom() {
          var thread = document.getElementById('message-thread');
          if (!thread) return;
          thread.scrollTo({top: thread.scrollHeight, behavior: 'smooth'});
        }

        // Scroll to customer's last message
        function scrollToLastCustomerMessage() {
          var msgs = document.querySelectorAll('[data-message-id][data-direction="inbound"]');
          if (!msgs.length) return;
          var last = msgs[msgs.length - 1];
          last.scrollIntoView({behavior:'smooth', block:'center'});
          var bubble = last.querySelector('.message-body')?.closest('.rounded-xl');
          if (bubble) {
            bubble.classList.add('ring-2','ring-blue-400','ring-offset-2');
            setTimeout(function(){ bubble.classList.remove('ring-2','ring-blue-400','ring-offset-2'); }, 1500);
          }
        }

        // Draft word count badge (visible only when minimized with draft)
        function updateDraftWordCount() {
          var countEl = document.getElementById('draft-word-count');
          var replyBar = document.getElementById('reply-bar');
          if (!countEl || !replyBar) return;
          var body = typeof getBodyWithoutSignature === 'function' ? getBodyWithoutSignature().trim() : '';
          if (body && replyBar.classList.contains('minimized')) {
            var words = body.split(/\s+/).filter(Boolean).length;
            countEl.textContent = 'Draft: ' + words + ' word' + (words !== 1 ? 's' : '');
            countEl.classList.remove('hidden');
          } else {
            countEl.classList.add('hidden');
          }
        }

        // Warn before navigating away with unsent draft
        window.addEventListener('beforeunload', function(e) {
          if (typeof getBodyWithoutSignature === 'function' && getBodyWithoutSignature().trim()) {
            e.preventDefault();
            e.returnValue = '';
          }
        });

        // Paste image detection — capture on document to fire before ANY Quill handler
        document.addEventListener('paste', function(e) {
          // Only act when focus is inside the reply editor
          var editor = document.querySelector('#reply-editor');
          if (!editor || !editor.contains(e.target)) return;
          var items = (e.clipboardData || {}).items;
          if (!items) return;
          for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image/') === 0) {
              e.preventDefault();
              e.stopImmediatePropagation();
              var file = items[i].getAsFile();
              if (!file) return;
              showPasteImageDialog(file);
              return;
            }
          }
        }, true);

        // Quick reply integration - populate Quill editor
        const quickReplySelect = document.getElementById('quick-reply-select');
        if (quickReplySelect) {
          // Build a lookup of message metadata from the for-product response
          var _quickReplyMeta = {};
          {% if id_product %}
          fetch('/api/predefined-messages/for-product/{{ id_product }}')
            .then(function(r) { return r.json(); })
            .then(function(msgs) {
              msgs.forEach(function(m) { _quickReplyMeta[m.id] = m; });
            }).catch(function() {});
          {% endif %}

          quickReplySelect.addEventListener('change', function(e) {
            const messageId = e.target.value;
            if (!messageId) return;
            fetch(`/api/predefined-messages/${messageId}`)
              .then(res => res.json())
              .then(data => {
                window._quill.root.innerHTML = data.body + buildSignatureHtml();
                styleSignature();
                document.getElementById('reply-bar')?.classList.remove('minimized');
                e.target.value = '';

                // Auto-attach module if flagged
                var meta = _quickReplyMeta[parseInt(messageId)];
                if (meta && meta.attach_latest_module) {
                  if (meta.product_has_release) {
                    attachLatestModule();
                  } else {
                    showToast && showToast('No module uploaded yet — upload in Products first', 'warning');
                  }
                }
              })
              .catch(err => console.error('Failed to load predefined message:', err));
          });
        }
      </script>

      {# Paste image confirmation dialog #}
      <div id="paste-image-dialog" class="hidden fixed inset-0 z-[200] flex items-center justify-center">
        <div class="absolute inset-0 bg-black/40" onclick="closePasteImageDialog()"></div>
        <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-700 w-[340px] overflow-hidden">
          <div class="px-5 py-4">
            <div class="flex items-center gap-2 mb-3">
              <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">image</span>
              <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Image Preview</h3>
            </div>
            <div class="flex justify-center mb-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 p-2">
              <img id="paste-image-preview" src="" alt="Pasted image" class="max-h-48 max-w-full rounded object-contain">
            </div>
            <p class="text-xs text-gray-600 dark:text-gray-400 text-center">Do you want to add this image as an attachment?</p>
          </div>
          <div class="flex border-t border-gray-200 dark:border-gray-700">
            <button type="button" onclick="closePasteImageDialog()"
                    class="flex-1 px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border-r border-gray-200 dark:border-gray-700">
              Cancel
            </button>
            <button type="button" onclick="confirmPasteImage()"
                    class="flex-1 px-4 py-3 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-colors">
              Add it
            </button>
          </div>
        </div>
      </div>
      <script>
        var _pastedImageFile = null;

        function showPasteImageDialog(file) {
          _pastedImageFile = file;
          var reader = new FileReader();
          reader.onload = function(e) {
            document.getElementById('paste-image-preview').src = e.target.result;
            document.getElementById('paste-image-dialog').classList.remove('hidden');
          };
          reader.readAsDataURL(file);
        }

        function closePasteImageDialog() {
          document.getElementById('paste-image-dialog').classList.add('hidden');
          document.getElementById('paste-image-preview').src = '';
          _pastedImageFile = null;
        }

        function confirmPasteImage() {
          if (!_pastedImageFile) { closePasteImageDialog(); return; }
          // Create a DataTransfer to inject the file into the hidden file input
          var dt = new DataTransfer();
          // Give it a meaningful filename
          var ext = _pastedImageFile.type.split('/')[1] || 'png';
          if (ext === 'jpeg') ext = 'jpg';
          var namedFile = new File([_pastedImageFile], 'pasted-image.' + ext, { type: _pastedImageFile.type });
          if (!window._attachments) window._attachments = [];
          if (window._attachments.length < 5) {
            window._attachments.push({ file: namedFile, displayName: namedFile.name });
            renderAttachmentChips();
          } else {
            showToast('Max 5 attachments allowed', 'error');
          }
          closePasteImageDialog();
        }

        // Close on Escape
        document.addEventListener('keydown', function(e) {
          if (e.key === 'Escape' && !document.getElementById('paste-image-dialog').classList.contains('hidden')) {
            closePasteImageDialog();
          }
        });
      </script>

      {# ── Drag-and-drop on reply bar ── #}
      <script>
      (function() {
        var wrap = document.getElementById('reply-editor-wrap');
        var overlay = document.getElementById('drop-overlay');
        if (!wrap || !overlay) return;

        var dragDepth = 0; // track nested dragenter/dragleave

        wrap.addEventListener('dragenter', function(e) {
          e.preventDefault();
          if (dragDepth === 0) overlay.classList.remove('hidden');
          dragDepth++;
        });

        wrap.addEventListener('dragover', function(e) {
          e.preventDefault();
          e.dataTransfer.dropEffect = 'copy';
        });

        wrap.addEventListener('dragleave', function(e) {
          dragDepth--;
          if (dragDepth === 0) overlay.classList.add('hidden');
        });

        wrap.addEventListener('drop', function(e) {
          e.preventDefault();
          dragDepth = 0;
          overlay.classList.add('hidden');

          var files = Array.from(e.dataTransfer.files);
          if (!files.length) return;

          if (!window._attachments) window._attachments = [];
          var added = 0;
          for (var i = 0; i < files.length; i++) {
            var file = files[i];
            if (window._attachments.length >= 5) {
              showToast('Max 5 attachments allowed', 'error');
              break;
            }
            if (file.size > 10 * 1024 * 1024) {
              showToast(file.name + ' exceeds 10 MB limit', 'error');
              continue;
            }
            window._attachments.push({ file: file, displayName: file.name });
            added++;
          }
          if (added > 0) renderAttachmentChips();
        });
      })();
      </script>
    </div>
  </div>

  {# ============== Right sidebar ============== #}
  <aside id="ticket-sidebar" class="
    w-full lg:w-80
    border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700
    bg-gray-50 dark:bg-gray-800 flex-shrink-0 overflow-y-auto
    fixed lg:static inset-x-0 bottom-0 top-[30vh] z-50 lg:z-auto
    rounded-t-2xl lg:rounded-none shadow-2xl lg:shadow-none
    translate-y-full lg:translate-y-0 transition-transform duration-300 ease-in-out
  ">
    {# Drag handle (mobile only) #}
    <div class="lg:hidden flex justify-center pt-2 pb-1">
      <div class="w-10 h-1 rounded-full bg-gray-300 dark:bg-gray-600"></div>
    </div>

    {# -- Credentials (collapsible, top of sidebar) -- #}
    {% if ticket.thread.customer_hash %}
    <details id="credentials-section" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 group">
      <summary class="p-4 cursor-pointer list-none flex items-center justify-between
                      text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider
                      hover:text-gray-700 dark:hover:text-gray-300 [&::-webkit-details-marker]:hidden">
        <span class="flex items-center gap-1.5">
          <span class="material-symbols-outlined text-sm">key</span>
          Credentials
          <span id="cred-count-badge" class="hidden min-w-[18px] h-[18px] px-1 text-[10px] font-semibold rounded-full bg-brand-600 text-white inline-flex items-center justify-center">0</span>
        </span>
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500 group-open:rotate-180 transition-transform">
          expand_more
        </span>
      </summary>
      <div class="px-4 pb-4" id="cred-sidebar-content">
        <div id="cred-sites-list" class="space-y-2 text-sm">
          <p class="text-xs text-gray-400 dark:text-gray-500 italic">Loading...</p>
        </div>
        <button type="button" onclick="showAddSiteForm()"
                class="mt-3 w-full inline-flex items-center justify-center gap-1 px-3 py-1.5 text-xs font-medium rounded-lg border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:border-brand-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
          <span class="material-symbols-outlined text-sm">add</span>
          Add Site
        </button>
      </div>
    </details>
    {% endif %}

    {# -- Missing Info Checklist -- #}
    {% if suggestions %}
      {% set latest = suggestions|sort(attribute='created_at', reverse=True)|first %}
      {% set latest_cls = latest.classification_json|fromjson %}
      {% if latest_cls.missing_info and latest_cls.missing_info|length > 0 %}
    <div id="missing-info" data-testid="missing-info" class="p-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center gap-1.5 mb-2">
        <span class="material-symbols-outlined text-sm text-amber-500">warning</span>
        <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Missing Info</h3>
      </div>
      <div class="flex flex-wrap gap-1.5">
        {% for item in latest_cls.missing_info %}
        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 border border-amber-200 dark:border-amber-500/30">{{ item }}</span>
        {% endfor %}
      </div>
    </div>
      {% endif %}
    {% endif %}

    {# -- Topics (collapsible, closed by default) -- #}
    {% if segments|length > 1 %}
    <details id="topics-section" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 group">
      <summary class="p-4 cursor-pointer list-none flex items-center gap-1.5
                      [&::-webkit-details-marker]:hidden hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <span class="material-symbols-outlined text-sm text-purple-500 dark:text-purple-400">topic</span>
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-1">Topics</span>
        <span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-[10px] font-bold bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400">{{ segments|length }}</span>
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500 group-open:rotate-180 transition-transform">expand_more</span>
      </summary>
      <div class="px-4 pb-3 space-y-1.5">
        {% for seg in segments %}
        <button type="button" data-seg-btn="{{ seg.index }}"
                onclick="document.getElementById('segment-{{ seg.index }}').scrollIntoView({behavior:'smooth', block:'center'})"
                class="seg-sidebar-btn w-full flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-left hover:bg-purple-50 dark:hover:bg-purple-500/10 transition-colors group/topic">
          <span class="flex-shrink-0 w-5 h-5 rounded-full bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 flex items-center justify-center text-[10px] font-bold">{{ seg.index + 1 }}</span>
          <span class="flex-1 text-xs text-gray-700 dark:text-gray-300 truncate group-hover/topic:text-purple-700 dark:group-hover/topic:text-purple-300">{{ seg.label }}</span>
          <span class="text-[10px] text-gray-400 dark:text-gray-500">{{ seg.message_count }} msg</span>
        </button>
        {% endfor %}
      </div>
    </details>
    {% endif %}

    {# -- Tags -- #}
    <div id="tags-section" class="p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
      <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">Tags</h3>
      <div id="tags-display" class="flex flex-wrap gap-1.5 mb-3">
        {% for t in tags %}
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 font-medium">{{ t }}</span>
        {% else %}
          <span class="text-xs text-gray-400 dark:text-gray-500">No tags</span>
        {% endfor %}
      </div>
      <div class="flex gap-1.5">
        <input id="tags-input" type="text" value="{{ tags|join(', ') if tags else '' }}" placeholder="bug, urgent, ..."
               class="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg text-xs px-2.5 py-1.5 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
        <button type="button" onclick="saveTags(document.getElementById('tags-input'))"
                class="px-2.5 py-1.5 text-xs font-medium text-brand-600 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/10 rounded-lg hover:bg-brand-100 dark:hover:bg-brand-500/20 transition-colors">
          Save
        </button>
      </div>
    </div>

    {# -- Properties (collapsible) -- #}
    <details id="properties-section" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 group" open>
      <summary class="p-4 cursor-pointer list-none flex items-center justify-between
                      text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider
                      hover:text-gray-700 dark:hover:text-gray-300 [&::-webkit-details-marker]:hidden">
        Properties
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500 group-open:rotate-180 transition-transform">
          expand_more
        </span>
      </summary>
      <div class="px-4 pb-4">

        {# Customer group #}
        <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1.5 mt-0">Customer</p>
        <dl class="space-y-2 text-sm mb-4">
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Website</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1.5">
              {% set ws_href = ticket.thread.customer_website | normalize_url %}
              {% if ws_href %}
              {% if site_check and site_check.is_online == true %}
                {% set tip = 'Online' %}
                {% if site_check.error_message %}{% set tip = 'Online (' ~ site_check.http_status ~ ' — ' ~ site_check.error_message ~ ')' %}
                {% elif site_check.http_status %}{% set tip = 'Online (' ~ site_check.http_status ~ ', ' ~ (site_check.response_time_ms or '?') ~ 'ms)' %}{% endif %}
                <span class="inline-block w-2 h-2 rounded-full bg-green-500" title="{{ tip }}"></span>
              {% elif site_check and site_check.is_online == false %}
                {% set tip = 'Offline' %}
                {% if site_check.error_message %}{% set tip = 'Offline — ' ~ site_check.error_message %}{% endif %}
                <span class="inline-block w-2 h-2 rounded-full bg-red-500" title="{{ tip }}"></span>{% endif %}
              <a href="{{ ws_href }}" target="_blank" rel="noopener" class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 underline">
                {{ ticket.thread.customer_website | truncate(30) }}
              </a>
              {% else %}-{% endif %}
            </dd>
          </div>
          {% if ticket.thread.product_quantity is not none %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Quantity Purchased</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">
              {{ ticket.thread.product_quantity }}
              {% if ticket.thread.product_quantity_refunded %}
                <span class="text-red-500 dark:text-red-400 text-xs">({{ ticket.thread.product_quantity_refunded }} refunded)</span>
              {% endif %}
            </dd>
          </div>
          {% endif %}
          {% if customer_language %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Customer Language</dt>
            <dd>
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-500/30">
                <span class="material-symbols-outlined text-xs" style="font-size:14px">translate</span>
                {{ customer_language | upper }}
              </span>
            </dd>
          </div>
          {% endif %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">First Seen</dt>
            <dd class="text-gray-700 dark:text-gray-300">{{ ticket.first_seen_at.strftime('%Y-%m-%d %H:%M') }}</dd>
          </div>
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Last Activity</dt>
            <dd class="text-gray-700 dark:text-gray-300">{{ ticket.last_activity_at.strftime('%Y-%m-%d %H:%M') }}</dd>
          </div>
        </dl>

        {# Customer Value group #}
        {% if customer_profile %}
        <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1.5">Customer Value</p>
        <dl data-testid="customer-value" class="space-y-2 text-sm mb-4">
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Total Revenue</dt>
            <dd class="font-medium text-emerald-700 dark:text-emerald-400">&euro;{{ customer_profile.total_revenue or '0' }}</dd>
          </div>
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Total Orders</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ customer_profile.total_orders }}</dd>
          </div>
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Products Purchased</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ customer_profile.total_products_purchased }}</dd>
          </div>
          {% if customer_profile.first_order_date %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Customer Since</dt>
            <dd class="text-gray-700 dark:text-gray-300">{{ customer_profile.first_order_date.strftime('%Y-%m-%d') }}</dd>
          </div>
          {% endif %}
          {% if customer_profile.country_code %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Country</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ customer_profile.country_code | upper }}</dd>
          </div>
          {% endif %}
        </dl>

        {% if customer_orders %}
        <details class="mb-4">
          <summary class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-600 dark:hover:text-gray-300">
            Order History ({{ customer_orders|length }})
          </summary>
          <div class="mt-2 space-y-1.5">
            {% for o in customer_orders %}
            <div class="flex items-center justify-between text-xs bg-gray-50 dark:bg-gray-800 rounded px-2 py-1.5">
              <div class="truncate flex-1 mr-2">
                <span class="font-medium text-gray-900 dark:text-gray-100">{{ o.product_name }}</span>
                {% if o.quantity and o.quantity > 1 %}<span class="text-gray-400 dark:text-gray-500">x{{ o.quantity }}</span>{% endif %}
              </div>
              <div class="text-right whitespace-nowrap">
                <span class="font-medium text-emerald-700 dark:text-emerald-400">&euro;{{ o.amount or '0' }}</span>
                {% if o.order_date %}
                <span class="text-gray-400 dark:text-gray-500 ml-1">{{ o.order_date.strftime('%Y-%m-%d') }}</span>
                {% endif %}
              </div>
            </div>
            {% endfor %}
          </div>
        </details>
        {% endif %}
        {% endif %}

        {# Product group #}
        <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1.5">Product</p>
        <dl class="space-y-2 text-sm mb-4">
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Name</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">
              <span class="inline-flex items-center gap-1.5">
                {% if product and product.product_type == 'business_care' %}
                <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/30 flex items-center justify-center flex-shrink-0">
                  <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400">BC</span>
                </div>
                {% elif product and product.pico_url %}
                <img src="{{ product.pico_url }}" alt="" class="w-8 h-8 rounded-lg flex-shrink-0" onerror="this.style.display='none'">
                {% endif %}
                {{ ticket.thread.product_name or '-' }}
              </span>
            </dd>
          </div>
          {% if id_product %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">View on Addons</dt>
            <dd>
              <a href="https://addons.prestashop.com/en/product.php?id_product={{ id_product }}"
                 target="_blank" rel="noopener"
                 class="inline-flex items-center gap-1 text-xs text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300">
                <span class="material-symbols-outlined" style="font-size:14px">open_in_new</span>
                Product page
              </a>
            </dd>
          </div>
          {% endif %}
          {% if product and product.current_version %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Module Version</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ product.current_version }}</dd>
          </div>
          {% endif %}
          {% if product and product.avg_rating %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Rating</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ product.avg_rating }} / 5{% if product.total_ratings %} <span class="text-xs text-gray-400 dark:text-gray-500">({{ product.total_ratings }} ratings)</span>{% endif %}</dd>
          </div>
          {% endif %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">PrestaShop Version</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ ticket.thread.ps_version or '-' }}</dd>
          </div>
          {% if ticket.thread.qualification %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Qualification</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 capitalize">{{ ticket.thread.qualification }}</dd>
          </div>
          {% endif %}
        </dl>

        {# Support / SLA group #}
        <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-1.5">Support &amp; SLA</p>
        <dl class="space-y-2 text-sm">
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Status</dt>
            <dd>
              {% if ticket.thread.is_support_expired %}
                <span class="inline-flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400">
                  <span class="material-symbols-outlined text-sm">error</span>Expired
                </span>
              {% else %}
                <span class="inline-flex items-center gap-1 text-xs font-medium text-green-600 dark:text-green-400">
                  <span class="material-symbols-outlined text-sm">check_circle</span>Active
                </span>
              {% endif %}
            </dd>
          </div>
          {% if ticket.thread.support_type %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Support Type</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100">{{ ticket.thread.support_type }}</dd>
          </div>
          {% endif %}
          {% if ticket.thread.zen_nb_days_left is not none %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Days Left</dt>
            <dd class="font-medium {% if ticket.thread.zen_nb_days_left < 7 %}text-red-600 dark:text-red-400{% elif ticket.thread.zen_nb_days_left < 30 %}text-amber-600 dark:text-amber-400{% else %}text-gray-900 dark:text-gray-100{% endif %}">
              {{ ticket.thread.zen_nb_days_left }} days
            </dd>
          </div>
          {% endif %}
          {% if ticket.thread.zen_purchase_date %}
          <div>
            <dt class="text-xs text-gray-500 dark:text-gray-400">Purchase Date</dt>
            <dd class="text-gray-700 dark:text-gray-300">{{ ticket.thread.zen_purchase_date.strftime('%Y-%m-%d') }}</dd>
          </div>
          {% endif %}
        </dl>

      </div>
    </details>

  </aside>
</div>

{# ── Credential Modal ── #}
{# Credential panel — non-blocking slide-out, no overlay #}
<div id="cred-modal" class="hidden fixed top-14 right-0 z-[120] w-96 max-w-[calc(100vw-2rem)] h-[calc(100vh-3.5rem)] bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 shadow-2xl flex flex-col transition-transform duration-200">
  <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
    <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600">key</span>
      <span id="cred-modal-title">Credentials</span>
    </h3>
    <button type="button" onclick="closeCredModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <span class="material-symbols-outlined">close</span>
    </button>
  </div>
  <div class="flex-1 overflow-y-auto p-4" id="cred-modal-body">
    {# Dynamic content via JS #}
  </div>
</div>

{% if product_has_release %}
<script>
function attachLatestModule() {
  fetch('/api/products/{{ product.id }}/download-latest')
    .then(function(r) {
      if (!r.ok) throw new Error('Download failed');
      var filename = '{{ product_release.original_filename | e }}';
      return r.blob().then(function(blob) {
        return new File([blob], filename, { type: 'application/zip' });
      });
    })
    .then(function(file) {
      if (!window._attachments) window._attachments = [];
      if (window._attachments.length >= 5) {
        showToast && showToast('Max 5 attachments reached', 'warning');
        return;
      }
      var already = window._attachments.some(function(a) { return a.displayName === file.name; });
      if (already) { showToast && showToast('Module already attached', 'warning'); return; }
      window._attachments.push({ file: file, displayName: file.name });
      if (typeof renderAttachmentChips === 'function') renderAttachmentChips();
      showToast && showToast('Module ZIP attached');
    })
    .catch(function(err) {
      console.error('attachLatestModule failed:', err);
      showToast && showToast('Failed to attach module', 'error');
    });
}
</script>
{% endif %}

{% if id_product %}
<script>
(function() {
  fetch('/api/predefined-messages/for-product/{{ id_product }}')
    .then(function(r) { return r.json(); })
    .then(function(msgs) {
      var select = document.getElementById('quick-reply-select');
      if (!select) return;

      // Group by category
      var groups = {};      // category_name -> [{id, title, is_global}]
      var uncategorized = [];
      msgs.forEach(function(m) {
        if (m.category_name) {
          if (!groups[m.category_name]) groups[m.category_name] = [];
          groups[m.category_name].push(m);
        } else {
          uncategorized.push(m);
        }
      });

      function makeOpt(m) {
        var opt = document.createElement('option');
        opt.value = m.id;
        opt.textContent = m.title + (m.is_global ? ' ·' : '');
        return opt;
      }

      // Render groups
      Object.keys(groups).forEach(function(catName) {
        var grp = document.createElement('optgroup');
        grp.label = catName;
        groups[catName].forEach(function(m) { grp.appendChild(makeOpt(m)); });
        select.appendChild(grp);
      });

      // Uncategorized at bottom
      if (uncategorized.length) {
        var grp = document.createElement('optgroup');
        grp.label = 'Other';
        uncategorized.forEach(function(m) { grp.appendChild(makeOpt(m)); });
        select.appendChild(grp);
      }
    })
    .catch(function() {});
})();
</script>
{% endif %}

<script>
(function() {
  // Auto-scroll to unread marker
  var marker = document.getElementById('unread-marker');
  if (marker) marker.scrollIntoView({behavior: 'smooth', block: 'center'});

  // Topic overlay: single sticky pill that crossfades between segments
  var overlay = document.getElementById('topic-overlay');
  var overlayText = document.getElementById('topic-overlay-text');
  var summaryText = document.getElementById('topic-summary-text');
  var container = document.getElementById('message-thread');
  if (!overlay || !overlayText || !container) return;

  var markers = container.querySelectorAll('.segment-marker');
  if (markers.length < 2) return;

  // Build label + summary maps from window._segmentData
  var segLabels = {};
  var segSummaries = {};
  (window._segmentData || []).forEach(function(seg) {
    segLabels[seg.index] = seg.label || ('Topic ' + (seg.index + 1));
    segSummaries[seg.index] = seg.summary || '';
  });

  var currentSeg = -1;
  var summaryPanel = document.getElementById('topic-summary-panel');
  var chevron = document.getElementById('topic-overlay-chevron');
  var pillBtn = document.getElementById('topic-overlay-pill');
  var sidebarBtns = document.querySelectorAll('.seg-sidebar-btn');

  function closeSummary() {
    if (summaryPanel) summaryPanel.classList.add('hidden');
    if (chevron) chevron.style.transform = '';
    if (pillBtn) pillBtn.setAttribute('aria-expanded', 'false');
  }

  function highlightSidebarTopic(idx) {
    sidebarBtns.forEach(function(btn) {
      var btnIdx = parseInt(btn.dataset.segBtn, 10);
      if (btnIdx === idx) {
        btn.classList.add('bg-purple-50', 'ring-1', 'ring-purple-200');
      } else {
        btn.classList.remove('bg-purple-50', 'ring-1', 'ring-purple-200');
      }
    });
  }

  // Toggle summary panel on pill click
  if (pillBtn && summaryPanel) {
    pillBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      if (summaryText && currentSeg >= 0) {
        var txt = segSummaries[currentSeg] || '';
        if (!txt) return;
        summaryText.textContent = txt;
      }
      var isHidden = summaryPanel.classList.contains('hidden');
      if (isHidden) {
        summaryPanel.classList.remove('hidden');
        if (chevron) chevron.style.transform = 'rotate(180deg)';
        pillBtn.setAttribute('aria-expanded', 'true');
      } else {
        closeSummary();
      }
    });
  }

  // Escape key dismisses summary panel
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && summaryPanel && !summaryPanel.classList.contains('hidden')) {
      closeSummary();
    }
  });

  // Click outside overlay dismisses summary panel
  document.addEventListener('click', function(e) {
    if (summaryPanel && !summaryPanel.classList.contains('hidden') && overlay && !overlay.contains(e.target)) {
      closeSummary();
    }
  });

  function updateOverlay() {
    var bestIdx = -1;
    var cRect = container.getBoundingClientRect();

    markers.forEach(function(m) {
      var idx = parseInt(m.dataset.segIndex, 10);
      var rect = m.getBoundingClientRect();
      if (rect.top <= cRect.top + 40) {
        bestIdx = idx;
      }
    });

    if (bestIdx < 0) {
      overlay.style.opacity = '0';
      closeSummary();
      highlightSidebarTopic(-1);
      currentSeg = -1;
      return;
    }

    // Check if the inline marker for bestIdx is still visible
    var activeMarker = document.getElementById('segment-' + bestIdx);
    if (activeMarker) {
      var mRect = activeMarker.getBoundingClientRect();
      if (mRect.top >= cRect.top && mRect.bottom <= cRect.bottom) {
        overlay.style.opacity = '0';
        closeSummary();
        // Still highlight sidebar even when inline marker is visible
        highlightSidebarTopic(bestIdx);
        currentSeg = -1;
        return;
      }
    }

    if (bestIdx !== currentSeg) {
      overlay.style.opacity = '0';
      closeSummary();
      setTimeout(function() {
        overlayText.textContent = segLabels[bestIdx] || '';
        if (summaryText) summaryText.textContent = segSummaries[bestIdx] || '';
        overlay.style.opacity = '1';
      }, 150);
      currentSeg = bestIdx;
      highlightSidebarTopic(bestIdx);
    } else {
      overlay.style.opacity = '1';
    }
  }

  container.addEventListener('scroll', updateOverlay, {passive: true});
  setTimeout(updateOverlay, 100);
})();
</script>

<script>
// Reply draft persistence — synced to server so drafts survive across devices
(function() {
  var ticketId = window._ticketId;
  if (!ticketId) return;
  var saveTimer = null;

  function applyDraft(quill, html) {
    var delta = quill.clipboard.convert(html);
    quill.setContents(delta, 'silent');
    if (typeof styleSignature === 'function') styleSignature();
    var replyBar = document.getElementById('reply-bar');
    if (replyBar) {
      replyBar.classList.add('has-draft');
      if (typeof updateDraftWordCount === 'function') updateDraftWordCount();
    }
  }

  function saveDraft(html) {
    fetch('/ticket/' + ticketId + '/draft', {
      method: 'POST',
      headers: {'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest'},
      credentials: 'same-origin',
      body: JSON.stringify({html: html}),
    });
  }

  function clearDraft() {
    clearTimeout(saveTimer);
    saveDraft(null);
  }

  function restoreAndWatch() {
    var quill = window._quill;

    // Fetch draft from server and restore if present
    fetch('/ticket/' + ticketId + '/draft', {credentials: 'same-origin'})
      .then(function(r) { return r.json(); })
      .then(function(data) {
        if (data.html) applyDraft(quill, data.html);
      })
      .catch(function() {});

    // Debounced save on every text change (1.5s after last keystroke)
    quill.on('text-change', function() {
      clearTimeout(saveTimer);
      saveTimer = setTimeout(function() {
        saveDraft(quill.root.innerHTML);
      }, 1500);
    });

    // Clear draft after successful send
    var origSendReply = window.sendReply;
    if (origSendReply) {
      window.sendReply = function() {
        var result = origSendReply.apply(this, arguments);
        setTimeout(clearDraft, 500);
        return result;
      };
    }
  }

  // Wait for Quill AND the reply bar (signature inserted) before restoring
  function waitForReady() {
    if (!window._quill || !window._replyBarReady) { setTimeout(waitForReady, 100); return; }
    restoreAndWatch();
  }
  waitForReady();
})();
</script>

<script>
function refreshMessages() {
  const btn = document.getElementById('refresh-btn');
  const icon = document.getElementById('refresh-icon');
  btn.disabled = true;
  icon.classList.add('animate-spin');

  const fd = new FormData();
  fd.append('csrf_token', getCsrf());

  fetch('/ticket/{{ ticket.id }}/refresh', {
    method: 'POST',
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
    body: fd,
    credentials: 'same-origin',
  })
  .then(r => r.json())
  .then(data => {
    if (data.new_messages && data.new_messages.length > 0) {
      data.new_messages.forEach(msg => appendMessage(msg));
      showToast(data.new_count + ' new message' + (data.new_count !== 1 ? 's' : '') + ' loaded', 'success');
    } else {
      showToast('No new messages');
    }
  })
  .catch(err => {
    console.error('Refresh failed:', err);
    showToast('Refresh failed', 'error');
  })
  .finally(() => {
    btn.disabled = false;
    icon.classList.remove('animate-spin');
  });
}

/* ── Review request banner actions ── */
function loadReviewRequest() {
  var lang = window._customerLanguage || 'en';
  var productId = window._ticketProductId || '';
  var url = '/api/review-request-template?lang=' + encodeURIComponent(lang) + '&product_id=' + encodeURIComponent(productId);
  var btn = document.getElementById('load-review-template-btn');
  if (btn) btn.disabled = true;

  fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
  .then(function(r) { return r.json(); })
  .then(function(data) {
    if (data.found && data.body && window._quill) {
      window._quill.root.innerHTML = '<p>' + data.body.replace(/\n/g, '</p><p>') + '</p>';
      showToast('Review template loaded — personalize and send!', 'success');
    } else {
      showToast('No review template found. Create one in Quick Replies with [Review] prefix.', 'error');
    }
  })
  .catch(function(err) {
    console.error('Failed to load review template:', err);
    showToast('Failed to load review template', 'error');
  })
  .finally(function() {
    if (btn) btn.disabled = false;
  });
}

function markReviewSent() {
  var banner = document.getElementById('review-request-banner');
  var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  var fd = new FormData();
  fd.append('action', 'dismiss_review_request');
  fd.append('csrf_token', csrfToken);
  fetch('/ticket/' + window._ticketId, {
    method: 'POST',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    body: fd
  })
  .then(function(resp) { return resp.json(); })
  .then(function(data) {
    if (data.success) {
      if (banner) {
        banner.style.opacity = '0';
        banner.style.transition = 'opacity 0.3s';
        setTimeout(function() { banner.remove(); }, 300);
      }
      // Sync read/unread buttons
      document.getElementById('mark-as-read-btn')?.classList.add('hidden');
      document.getElementById('mark-as-unread-btn')?.classList.remove('hidden');
      // Update sidebar badge
      var reviewBadge = document.getElementById('sidebar-review-request');
      if (reviewBadge) {
        var count = parseInt(reviewBadge.textContent) || 0;
        if (count <= 1) { reviewBadge.remove(); }
        else { reviewBadge.textContent = count - 1; }
      }
      showToast('Review request marked as sent', 'success');
    }
  })
  .catch(function(err) { console.error('Mark review sent failed:', err); });
}

function dismissReviewBanner() {
  var banner = document.getElementById('review-request-banner');
  // Mark as read via AJAX
  var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  var fd = new FormData();
  fd.append('action', 'mark_as_read');
  fd.append('csrf_token', csrfToken);
  fetch('/ticket/' + window._ticketId, {
    method: 'POST',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    body: fd
  })
  .then(function() {
    if (banner) {
      banner.style.opacity = '0';
      banner.style.transition = 'opacity 0.3s';
      setTimeout(function() { banner.remove(); }, 300);
    }
    // Sync read/unread buttons
    document.getElementById('mark-as-read-btn')?.classList.add('hidden');
    document.getElementById('mark-as-unread-btn')?.classList.remove('hidden');
  })
  .catch(function(err) { console.error('Dismiss failed:', err); });
}
</script>

{# ── Attachment Lightbox Modal ── #}
<div id="att-lightbox" class="fixed inset-0 z-50 hidden" role="dialog" aria-modal="true">
  {# Backdrop #}
  <div id="att-lb-backdrop" class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="closeLightbox()"></div>
  {# Top bar #}
  <div class="absolute top-0 left-0 right-0 flex items-center justify-between px-4 py-3 z-10">
    <span id="att-lb-filename" class="text-white text-sm font-medium truncate max-w-[60%]"></span>
    <div class="flex items-center gap-2">
      <a id="att-lb-open" href="#" target="_blank" rel="noopener"
         class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white text-xs font-medium transition-colors">
        <span class="material-symbols-outlined text-base">open_in_new</span> Open original
      </a>
      <a id="att-lb-download" href="#" download=""
         class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white text-xs font-medium transition-colors">
        <span class="material-symbols-outlined text-base">download</span> Download
      </a>
      <button onclick="closeLightbox()" class="p-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors" title="Close (Esc)">
        <span class="material-symbols-outlined text-xl">close</span>
      </button>
    </div>
  </div>
  {# Content area #}
  <div id="att-lb-content" class="absolute inset-0 flex items-center justify-center pt-14 pb-4 px-4"
       onclick="if(event.target===this)closeLightbox()">
    {# Wrapper for content + floating copy button #}
    <div id="att-lb-wrapper" class="relative max-h-[90vh] max-w-[90vw] flex items-center justify-center">
      {# Image viewer #}
      <img id="att-lb-img" class="hidden max-h-[90vh] max-w-[90vw] object-contain rounded-lg shadow-2xl cursor-zoom-in" alt="">
      {# PDF viewer — needs explicit size, sits outside the auto-sizing wrapper #}
      <iframe id="att-lb-pdf" class="hidden w-full h-full max-w-4xl rounded-lg shadow-2xl bg-white" frameborder="0"></iframe>
      {# Text viewer #}
      <pre id="att-lb-text" class="hidden w-full h-full max-w-4xl overflow-auto rounded-lg shadow-2xl bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 p-6 text-sm font-mono"></pre>
      {# Floating copy button — anchored to content top-right #}
      <button id="att-lb-copy" onclick="event.stopPropagation(); copyLightboxContent()"
              class="hidden absolute top-3 right-3 z-10 inline-flex items-center gap-1.5 px-3 py-2 rounded-xl bg-black/50 hover:bg-black/70 backdrop-blur text-white text-xs font-medium transition-all shadow-lg">
        <span class="material-symbols-outlined text-sm">content_copy</span>
        <span id="att-lb-copy-label">Copy</span>
      </button>
    </div>
    {# Loading spinner #}
    <div id="att-lb-loading" class="hidden flex flex-col items-center gap-3">
      <span class="material-symbols-outlined text-4xl text-white animate-spin">progress_activity</span>
      <span class="text-white/70 text-sm">Loading preview...</span>
    </div>
  </div>
</div>

<script>
// iOS PWA: shift fixed reply bar up when soft keyboard opens
(function() {
  if (!window.visualViewport) return;
  var bar = document.getElementById('reply-bar');
  if (!bar) return;
  function adjust() {
    if (window.innerWidth >= 1024) return;
    var offset = window.innerHeight - window.visualViewport.height - window.visualViewport.offsetTop;
    bar.style.bottom = Math.max(0, Math.round(offset)) + 'px';
  }
  window.visualViewport.addEventListener('resize', adjust);
  window.visualViewport.addEventListener('scroll', adjust);
})();
</script>
{% endblock %}

{% block nav_mobile_back %}
<a href="{{ url_for('inbox') }}" id="nav-back-btn"
   class="lg:hidden flex items-center justify-center w-8 h-8 -ml-1 mr-1 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0"
   title="Back to inbox">
  <span class="material-symbols-outlined text-xl">arrow_back</span>
</a>
<script>
  (function() {
    var saved = sessionStorage.getItem('inboxReturnUrl');
    if (saved) document.getElementById('nav-back-btn').href = saved;
  })();
</script>
{% endblock %}