{% extends "base.html" %}
{% from '_upsell.html' import crown_badge, max_badge, beta_pill %}
{% block title %}Ticket #{{ provider_thread_id or ticket.id }}{% endblock %}
{% block content %}
<script>
  /* Upgrade-modal feature labels. They live here as constants because their
     call sites sit inside double-quoted onclick attributes that already contain
     single quotes and a Jinja conditional — there is no quoting left to emit a
     translated literal into safely. */
  var T_CREDENTIAL_VAULT = {{ _("Credential Vault") | tojson }};
  var T_CONVERSATION_EXPORT = {{ _("Conversation Export") | tojson }};
  var T_GUIDE_GENERATION = {{ _("Guide Generation") | tojson }};
  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 }};
  window._guideCandidate = {{ is_guide_candidate | tojson }};

  // 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 bar (tier 1) --
       Mobile: only this slim row pins under the top nav (see media query
       below); the meta block (#ticket-header-meta) scrolls away so the
       thread gets the vertical space back. Desktop (lg+): the column is
       its own scroll container, both blocks are always visible — the
       lg:border-b-0 / lg:pb-0 keep the two divs rendering as one box. #}
    <div id="ticket-header" class="border-b lg:border-b-0 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 sm:px-6 pt-3 pb-2 lg:pb-0 flex-shrink-0">
      {# Row 1: back, subject, ID, external link … refresh #}
      <div class="flex items-center gap-2">
        {# Hidden below lg: the top nav already injects a mobile back button (nav_mobile_back) #}
        <a href="{{ url_for('inbox') }}" id="back-to-inbox" class="hidden lg:flex 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>

        {# Mobile status chip — the meta block (with #status-select) scrolls
           away, so the pinned bar gets a tappable chip to change status while
           deep in the thread. Colors mirror the inbox badges; JS keeps it in
           sync with the select via setTicketStatusUI (app.js). #}
        {% set _chip_cls = {
          'open': 'bg-yellow-100 dark:bg-yellow-500/10 text-yellow-800 dark:text-yellow-300',
          'in_progress': 'bg-blue-100 dark:bg-blue-500/10 text-blue-800 dark:text-blue-300',
          'waiting_customer': 'bg-orange-100 dark:bg-orange-500/10 text-orange-800 dark:text-orange-300',
          'answered': 'bg-teal-100 dark:bg-teal-500/10 text-teal-800 dark:text-teal-300',
          'closed': 'bg-green-100 dark:bg-green-500/10 text-green-800 dark:text-green-300'
        } %}
        {% set _chip_lbl = {'open':_('Open'),'in_progress':_('In Progress'),'waiting_customer':_('Waiting'),'answered':_('Answered'),'closed':_('Closed')} %}
        <div class="relative lg:hidden flex-shrink-0">
          <button type="button" id="status-chip" onclick="toggleStatusChipMenu(event)"
                  aria-haspopup="true" aria-expanded="false" title="{{ _('Change status') }}"
                  class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ _chip_cls.get(ticket.status, 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300') }}">{{ _chip_lbl.get(ticket.status, ticket.status) }}</button>
          <div id="status-chip-menu" class="hidden absolute left-0 top-full mt-1 w-36 z-30 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1">
            {% for _val, _lbl in [('open',_('Open')),('in_progress',_('In Progress')),('waiting_customer',_('Waiting')),('answered',_('Answered')),('closed',_('Closed'))] %}
            <button type="button" onclick='updateStatus({{ _val | tojson }})'
                    class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="w-2 h-2 rounded-full flex-shrink-0 {{ {'open':'bg-yellow-400','in_progress':'bg-blue-400','waiting_customer':'bg-orange-400','answered':'bg-teal-400','closed':'bg-green-500'}[_val] }}"></span>
              {{ _lbl }}
            </button>
            {% endfor %}
          </div>
        </div>
        {% 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="hidden lg:flex 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="{% if has_feature('credentials') %}showCredentialModal('{{ ticket.thread.customer_hash }}'){% else %}showUpgradeModal('max', T_CREDENTIAL_VAULT){% endif %}"
                title="{% if has_feature('credentials') %}{{ _('Saved Credentials') }}{% else %}{{ _('Credential Vault (MAX plan)') }}{% endif %}"
                class="hidden lg: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>
          {% if not has_feature('credentials') %}{{ max_badge() }}{% else %}
          <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>
          {% endif %}
        </button>
        {% endif %}
        <button id="scroll-top-btn" type="button" onclick="scrollToTop()"
                title="{{ _('Scroll to first message') }}"
                class="hidden lg: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="hidden lg: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="hidden lg: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>
        <div id="mode-pill-container" class="flex-shrink-0"></div>
        <button type="button" onclick="fetchNextTicketSuggestion(window._ticketId)"
                title="{{ _('Suggest next ticket to work on') }}"
                class="hidden lg: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 type="button" onclick="window.NTS.postpone(window._ticketId)"
                title="{{ _('Send to back of queue') }}"
                class="hidden lg:inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 bg-gray-100 dark:bg-gray-700 hover:bg-orange-50 dark:hover:bg-orange-500/10 rounded-lg transition-colors flex-shrink-0">
          <span class="material-symbols-outlined text-sm">update</span>
          <span class="hidden sm:inline">{{ _('Postpone') }}</span>
        </button>
        <button id="refresh-btn" type="button" onclick="refreshMessages()"
                title="{{ _('Fetch latest messages from Addons') }}"
                class="hidden lg: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>
        <button id="export-conv-btn" type="button"
                onclick="{% if has_feature('export_conversation') %}openExportModal(){% else %}showUpgradeModal('max', T_CONVERSATION_EXPORT){% endif %}"
                title="{% if has_feature('export_conversation') %}{{ _('Export conversation as Markdown') }}{% else %}{{ _('Conversation Export (MAX plan)') }}{% endif %}"
                class="hidden lg: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">ios_share</span>
          <span class="hidden sm:inline">{{ _('Export') }}</span>
          {% if not has_feature('export_conversation') %}{{ max_badge() }}{% endif %}
        </button>

        {# Mobile overflow menu — the icon buttons above are hidden below lg
           (duplicated in the bottom quick-action bar or rarely used); the
           non-duplicated ones live here so nothing is lost on mobile. #}
        <div class="relative lg:hidden flex-shrink-0">
          <button type="button" id="ticket-more-btn" onclick="toggleTicketMoreMenu(event)"
                  aria-haspopup="true" aria-expanded="false" aria-label="{{ _('More ticket actions') }}"
                  class="inline-flex items-center px-1.5 py-0.5 text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 rounded-lg transition-colors">
            <span class="material-symbols-outlined text-lg">more_vert</span>
          </button>
          <div id="ticket-more-menu" class="hidden absolute right-0 top-full mt-1 w-56 z-30 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1">
            <button type="button" onclick="refreshMessages()"
                    class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="material-symbols-outlined text-base text-gray-400">refresh</span> {{ _('Refresh messages') }}
            </button>
            <button type="button" onclick="scrollToTop()"
                    class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="material-symbols-outlined text-base text-gray-400">vertical_align_top</span> {{ _('First message') }}
            </button>
            <button type="button" onclick="scrollToLastCustomerMessage()"
                    class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="material-symbols-outlined text-base text-gray-400">keyboard_double_arrow_down</span> {{ _('Last customer message') }}
            </button>
            <button type="button" onclick="window.NTS.postpone(window._ticketId)"
                    class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="material-symbols-outlined text-base text-gray-400">update</span> {{ _('Postpone') }}
            </button>
            {% if not ticket.first_response_at %}
            <button type="button" onclick="answeredOutside()"
                    class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="material-symbols-outlined text-base text-gray-400">done_all</span> {{ _('Replied externally') }}
            </button>
            {% endif %}
            {% if provider_thread_id %}
            <a href="https://addons.prestashop.com/seller-contact.php?ict={{ provider_thread_id }}"
               target="_blank" rel="noopener"
               class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="material-symbols-outlined text-base text-gray-400">open_in_new</span> {{ _('Open in Addons') }}
            </a>
            {% endif %}
            <button type="button" onclick="{% if has_feature('export_conversation') %}openExportModal(){% else %}showUpgradeModal('max', T_CONVERSATION_EXPORT){% endif %}"
                    class="w-full flex items-center gap-2 px-3 py-2 text-left text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="material-symbols-outlined text-base text-gray-400">ios_share</span> {{ _('Export conversation') }}{% if not has_feature('export_conversation') %} 👑{% endif %}
            </button>
          </div>
        </div>
      </div>
    </div>

    {# -- Header meta block (tier 2): product, site, status, badges --
       Not sticky on mobile: triage info is read once at the top of the
       ticket, so it scrolls away with the page instead of permanently
       eating viewport. On lg+ it is always visible (column scrolls). #}
    <div id="ticket-header-meta" class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-3 sm:px-6 pb-3 flex-shrink-0">

      {# Row 1b: product icon + name + customer website #}
      {% if ticket.thread.product_name or ticket.thread.customer_website %}
      {# ml-8 aligns under the subject past the back arrow — desktop only;
         the back arrow is hidden below lg so the indent would be orphaned #}
      <div id="ticket-product-info" class="flex items-center gap-2 mt-1 lg: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 %}
        {% if customer_thread_count and customer_thread_count > 0 and ticket.thread.customer_hash %}
        <button type="button"
                onclick='openCustomerThreads({{ ticket.thread.customer_hash | tojson }}, {{ ticket.thread.id }})'
                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors flex-shrink-0"
                title="{{ _('Other threads from this customer') }}">
          <span class="material-symbols-outlined" style="font-size:14px">forum</span>
          {% trans count=customer_thread_count %}{{ count }} thread{% pluralize %}{{ count }} threads{% endtrans %}
        </button>
        {% 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', _('Angry')],
              'escalation': ['red', 'priority_high', _('Escalation')],
              'complaint': ['orange', 'feedback', _('Complaint')],
              'refund': ['orange', 'currency_exchange', _('Refund')],
              'bug': ['amber', 'bug_report', _('Bug')],
              'question': ['blue', 'help', _('Question')],
              'config': ['blue', 'settings', _('Config')],
              'help': ['blue', 'support_agent', _('Help')],
              'feature_request': ['purple', 'lightbulb', _('Feature Request')],
              'thanks_solved': ['green', 'check_circle', _('Thanks / Solved')]
            } %}
            {% set _style = _intent_map.get(_intent, ['gray', 'label', _intent | replace('_', ' ') | title]) %}
        <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>
          {{ _style[2] }}
        </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-[11px] lg:text-xs max-w-[7.5rem] lg:max-w-none px-1 lg: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>

        {# Wrapper hides these below lg (duplicated in the mobile bottom bar /
           overflow menu); JS toggles .hidden on the buttons themselves, so the
           breakpoint gate must live on this wrapper, not on the buttons. #}
        <div class="hidden lg:flex items-center gap-3">
        <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>
    </div>

    <script>
      // Mobile menus in the sticky header bar (⋯ actions + status chip).
      // Item clicks bubble to the document listener, so a menu closes itself
      // after any action; opening one closes the other.
      function _closeHeaderMenu(menuId, btnId) {
        var menu = document.getElementById(menuId);
        if (menu && !menu.classList.contains('hidden')) {
          menu.classList.add('hidden');
          document.getElementById(btnId).setAttribute('aria-expanded', 'false');
        }
      }
      function _toggleHeaderMenu(e, menuId, btnId, otherMenuId, otherBtnId) {
        e.stopPropagation();
        _closeHeaderMenu(otherMenuId, otherBtnId);
        var menu = document.getElementById(menuId);
        var open = !menu.classList.toggle('hidden');
        document.getElementById(btnId).setAttribute('aria-expanded', open ? 'true' : 'false');
      }
      function toggleTicketMoreMenu(e) {
        _toggleHeaderMenu(e, 'ticket-more-menu', 'ticket-more-btn', 'status-chip-menu', 'status-chip');
      }
      function toggleStatusChipMenu(e) {
        _toggleHeaderMenu(e, 'status-chip-menu', 'status-chip', 'ticket-more-menu', 'ticket-more-btn');
      }
      document.addEventListener('click', function() {
        _closeHeaderMenu('ticket-more-menu', 'ticket-more-btn');
        _closeHeaderMenu('status-chip-menu', 'status-chip');
      });
    </script>

    {# -- 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 --
       Shown whenever a genuine thanks was detected on a ticket we replied to
       (the review-request tag), regardless of status. Removed by replying,
       "Already Sent", or "Not now"; re-armed by the next genuine thanks. #}
    {% if is_review_request %}
    <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">
            {% trans %}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>.{% endtrans %}
          </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="postponeReviewRequest()"
                    title="{{ _('Hide this suggestion for now — it comes back if the customer sends another thank-you') }}"
                    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">schedule</span>
              {{ _('Not now') }}
            </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 #}
        {# min-w-0: without it, unbreakable content (long URLs) props up the
           flex min-width and the row overflows — the hover/translate action
           buttons get clipped off-screen on mobile. #}
        <div class="flex items-stretch gap-1 min-w-0 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>
              {% if msg.is_auto_response %}<span class="ml-1 px-1 py-0 rounded text-[9px] font-semibold bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-300">{{ _('Auto') }}</span>{% endif %}
              <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ msg.created_at|localdt('%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') %}
              {# tojson emits a JS literal in DOUBLE quotes and escapes ' < > & as \uXXXX,
                 leaving " raw — so it is only safe inside a SINGLE-quoted attribute.
                 (`| e` alone emitted &#39;, which the attribute parser decoded back into a
                 real quote inside the JS literal, which is the bug this replaces.) #}
              <a href="{{ att_url }}" onclick='openLightbox({{ att_url | tojson }}, {{ att.filename | tojson }}, {{ ext | tojson }}); 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. The column stretches to the bubble height and the
             buttons stick to the top of #message-thread inside it, so on a long
             message they stay reachable instead of sitting in the middle of the
             bubble, far off-screen. z-10 keeps them under the topic overlay. #}
          <div class="flex-shrink-0 lg:opacity-0 lg:group-hover:opacity-100 transition-opacity">
            <div class="sticky top-2 z-10 flex flex-col gap-1">
            <button type="button"
                    title="{{ _('Copy message text') }}"
                    onclick='copyMessage(this, {{ msg.id }})'
                    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">content_copy</span>
            </button>
            {% if has_feature('ai_translate') %}
            <button type="button"
                    title="{{ _('Translate to %(lang)s', lang=preferred_language|upper) }}"
                    onclick='translateMessage(this, {{ msg.id }}, {{ preferred_language | tojson }})'
                    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>
            {% else %}
            <button type="button"
                    title="{{ _('Translate (Premium feature)') }}"
                    onclick='showUpgradeModal("premium", {{ _("Message Translation")|tojson }})'
                    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-amber-500 dark:hover:text-amber-400 shadow-sm transition-colors relative">
              <span class="material-symbols-outlined text-sm" style="font-size:16px">translate</span>
              <span class="absolute -top-1 -right-1">{{ crown_badge() }}</span>
            </button>
            {% endif %}
            {% 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>
      </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 FAB: opens the bottom-sheet side panel (Credentials, Notes, Topics,
         Tags). Anchored to the reply bar so it always floats just above the
         composer. The toggle/close JS (toggleAISidebar) predates this button —
         the trigger was never rendered, leaving the panel unreachable on mobile. #}
      <button type="button" id="ai-sidebar-toggle" onclick="toggleAISidebar()" aria-expanded="false"
              aria-label="{{ _('Open ticket panel (credentials, notes, topics)') }}"
              class="lg:hidden absolute -top-16 right-3 z-30 w-12 h-12 rounded-full bg-brand-600 text-white shadow-lg hover:bg-brand-700 active:scale-95 transition-all flex items-center justify-center">
        <span id="ai-fab-icon" class="material-symbols-outlined">key</span>
      </button>
      {# Mobile-only quick-action bar — the ticket header scrolls away on mobile,
         so the per-ticket actions (skip to last message, mark read/unread, next
         ticket) are surfaced here, riding with the fixed reply bar. Hidden at lg+
         where the header is permanently pinned. The .mobile-ticket-actions class
         is excluded from the "expand composer on click" handler below. #}
      <div class="mobile-ticket-actions lg:hidden flex items-stretch gap-1.5 mb-2 pb-2 border-b border-gray-100 dark:border-gray-700/60">
        <button type="button" onclick="scrollToBottom()" title="{{ _('Skip to last message') }}"
                class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-600 dark:hover:text-brand-400 rounded-lg transition-colors">
          <span class="material-symbols-outlined text-base">vertical_align_bottom</span>
          <span>{{ _('Latest') }}</span>
        </button>
        <button id="m-mark-as-read-btn" type="button" onclick="markAsRead()" title="{{ _('Mark as read') }}"
                class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-600 dark:hover:text-brand-400 rounded-lg transition-colors {% if ticket.is_read %}hidden{% endif %}">
          <span class="material-symbols-outlined text-base">mark_email_read</span>
          <span>{{ _('Read') }}</span>
        </button>
        <button id="m-mark-as-unread-btn" type="button" onclick="markAsUnread()" title="{{ _('Mark as unread') }}"
                class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-600 dark:hover:text-brand-400 rounded-lg transition-colors {% if not ticket.is_read %}hidden{% endif %}">
          <span class="material-symbols-outlined text-base">mark_email_unread</span>
          <span>{{ _('Unread') }}</span>
        </button>
        <button type="button" onclick="fetchNextTicketSuggestion(window._ticketId)" title="{{ _('Suggest next ticket to work on') }}"
                class="flex-1 inline-flex items-center justify-center gap-1 px-2 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-brand-50 dark:hover:bg-brand-500/10 hover:text-brand-600 dark:hover:text-brand-400 rounded-lg transition-colors">
          <span class="material-symbols-outlined text-base">skip_next</span>
          <span>{{ _('Next') }}</span>
        </button>
      </div>
      {# 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>

      {# Desktop collapsed state — a single cohesive card replacing the disjointed
         bare AI button + plain editor. Visible only when reply-bar.minimized on lg+.
         Mobile uses #reply-open-btn instead (see @media rule below). #}
      <div id="composer-collapsed-bar" class="hidden items-center gap-2">
        <button type="button" onclick="toggleReplyBarMinimize()"
                class="flex-1 flex items-center gap-2.5 px-3 py-2.5 text-left text-sm text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
          <span class="material-symbols-outlined text-base leading-none select-none">reply</span>
          {{ _('Write your reply…') }}
        </button>
        <button type="button" onclick="aiWriteReply()"
                class="inline-flex items-center gap-1.5 px-3 py-2.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 flex-shrink-0 shadow-sm">
          <span class="material-symbols-outlined text-sm leading-none">auto_awesome</span>
          <span>{{ _('Write reply') }}</span>
        </button>
      </div>

      {# 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: %(name)s%(ver)s', name=product_release.original_filename, ver=(' v' ~ product_release.version) if product_release.version else '') }}">
          <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>
        {% if not has_feature('ai_classify') or not has_feature('ai_draft') %}
        {# Write Reply locked entirely — shouldn't happen given matrix, but guard #}
        {% endif %}
        {# Proofread, Shorter, Context, Check — Premium+ (ai_polish) only #}
        {% if has_feature('ai_polish') %}
        <button type="button" onclick="aiProofread()"
                title="{{ _("Fixes spelling, punctuation, and grammar. Doesn't shorten or restructure — use Shorter for that.") }}"
                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()"
                title="{{ _('Removes filler and repetition. Keeps every fact, link, version, and step.') }}"
                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()"
                title="{{ _('Adds 1–3 facts from the product knowledge base. Never removes your text.') }}"
                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>
        {% else %}
        {# Free plan: show locked versions with crown badge #}
        <button type="button" onclick='showUpgradeModal("premium", {{ _("Proofread")|tojson }})'
                title="{{ _('Available on Premium plan') }}"
                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') }}{{ crown_badge() }}
        </button>
        <button type="button" onclick='showUpgradeModal("premium", {{ _("Shorter")|tojson }})'
                title="{{ _('Available on Premium plan') }}"
                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') }}{{ crown_badge() }}
        </button>
        <button type="button" onclick='showUpgradeModal("premium", {{ _("Context Enrichment")|tojson }})'
                title="{{ _('Available on Premium plan') }}"
                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') }}{{ crown_badge() }}
        </button>
        <button type="button" onclick='showUpgradeModal("premium", {{ _("Check Reply")|tojson }})'
                title="{{ _('Available on Premium plan') }}"
                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') }}{{ crown_badge() }}
        </button>
        {% endif %}
      </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-diff-btn" onclick="aiToggleDiff()" 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">difference</span><span id="ai-diff-btn-label">{{ _('Show diff') }}</span>
            </button>
            <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>
            {% if has_feature('generated_guides') %}
            <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') }}{{ beta_pill() }}
            </button>
            {% else %}
            <button id="ai-guide-btn" onclick="showUpgradeModal('premium', T_GUIDE_GENERATION); return false;" 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') }}{{ crown_badge() }}{{ beta_pill() }}
            </button>
            {% endif %}
            <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-warning" class="hidden px-3 py-2 text-xs font-medium text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 border-b border-amber-200 dark:border-amber-500/30 flex items-center gap-1.5">
          <span class="material-symbols-outlined text-sm">warning</span>
          <span id="ai-result-warning-text">{{ _('Significant changes — review before using.') }}</span>
        </div>
        {# Phase 3: Confidence badge — shown for 'write' type only, hidden otherwise #}
        <div id="ai-confidence-badge" class="hidden px-3 pt-2 pb-1 flex items-center gap-1.5">
          <span id="ai-confidence-dot" class="inline-block w-2 h-2 rounded-full flex-shrink-0"></span>
          <span id="ai-confidence-text" class="text-[11px] font-medium"></span>
        </div>
        <div id="ai-result-summary" class="hidden px-3 pt-2 text-[11px] italic text-gray-500 dark:text-gray-400"></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 max-h-[45vh] overflow-y-auto overscroll-contain"></div>
        <div id="ai-result-diff" class="hidden px-3 py-3 text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap leading-relaxed max-h-[45vh] overflow-y-auto overscroll-contain"></div>
        <div id="ai-result-checklist" class="hidden px-3 py-3 max-h-[55vh] overflow-y-auto overscroll-contain">
          {# New tasks — pre-checked checkboxes #}
          <div id="ai-checklist-new-tasks" class="space-y-1"></div>
          {# Resolved items — pre-checked checkboxes with evidence tag #}
          <div id="ai-checklist-resolved" class="space-y-1"></div>
          {# Still needed from customer — amber, non-actionable #}
          <div id="ai-checklist-missing" class="space-y-1"></div>
          {# All-caught-up message #}
          <div id="ai-checklist-all-clear" class="hidden text-xs text-gray-500 dark:text-gray-400 italic py-1">{{ _('All caught up — nothing new, nothing unresolved.') }}</div>
          {# Apply button #}
          <div id="ai-checklist-apply-row" class="hidden pt-3">
            <button type="button" onclick="applyAIChecklist()"
                    class="w-full px-3 py-2 text-xs font-semibold rounded-lg bg-brand-600 dark:bg-brand-500 text-white hover:bg-brand-700 dark:hover:bg-brand-600 transition-colors">
              {{ _('Apply') }}
            </button>
          </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"
               {% if org_plan != 'free' %}multiple{% endif %}
               onchange="onAttachmentSelected(this)">
        {% if org_plan == 'free' %}
        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
          {% trans %}Free plan: 1 attachment per reply.{% endtrans %}
          <button type="button" onclick='showUpgradeModal("premium", {{ _("Multiple Attachments")|tojson }})'
                  class="text-brand-500 dark:text-brand-400 underline hover:no-underline">{{ _('Upgrade for unlimited') }}</button>
        </p>
        {% endif %}
        {# 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>
        {% if reply_signature %}
        <div id="sig-chip" class="mt-0.5 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
          <div onclick="toggleSigPreview()"
               class="w-full flex items-center gap-2 px-3 py-1.5 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-700/60 transition-colors cursor-pointer">
            <span class="material-symbols-outlined text-gray-400 select-none flex-shrink-0" style="font-size:14px">draw</span>
            <span id="sig-chip-label" class="flex-1 text-xs text-gray-500 dark:text-gray-400 truncate"></span>
            <span id="sig-chip-hint" class="text-[11px] text-gray-400 dark:text-gray-500 flex-shrink-0">{{ _('click to preview signature') }}</span>
            <a id="sig-chip-edit" href="/settings#settings-signature"
               onclick="event.stopPropagation()"
               class="hidden text-[11px] text-brand-500 dark:text-brand-400 hover:underline flex-shrink-0">{{ _('(edit)') }}</a>
          </div>
          <div id="sig-chip-preview" class="hidden border-t border-gray-200 dark:border-gray-700 px-3 py-2 bg-white dark:bg-gray-900 text-xs text-gray-400 dark:text-gray-500 whitespace-pre-wrap"></div>
        </div>
        {% endif %}
        <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="copyDraftTranslation()"
                      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 #}
        {% if has_feature('ai_translate') %}
        <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 | tojson }}); this.closest(".draft-lang-menu").classList.add("hidden")'>
                {{ lang | upper }}
              </button>
              {% endfor %}
            </div>
          </div>
        </div>
        {% else %}
        {# Translate locked — Free plan #}
        <button type="button" onclick='showUpgradeModal("premium", {{ _("Draft Translation")|tojson }})'
                title="{{ _('Translate reply (Premium feature)') }}"
                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-blue-200 dark:border-blue-500/30 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>
          {{ _('Translate') }}{{ crown_badge() }}
        </button>
        {% endif %}

        <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 #ai-instruction-row,
        #reply-bar.minimized #ai-result-panel,
        #reply-bar.minimized #link-builder-container { display: none; }
        /* Reading mode (minimized): the signature preview and the draft-polish
           buttons (Proofread/Shorter/Context/Check) act on a draft that isn't
           open yet, so hide them. "Write reply" (#ai-write-btn) stays — it
           generates a draft from cold as a one-tap shortcut from the reading view. */
        #reply-bar.minimized #sig-chip { display: none; }
        #reply-bar.minimized #ai-toolbar { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
        #reply-bar.minimized #ai-toolbar button:not(#ai-write-btn) { display: none; }
        /* The mobile reading-mode actions (Latest/Read/Unread/Next) belong to
           reading mode only. Hide them whenever the composer is open for writing
           (expanded) or while the AI is generating, so they don't compete with
           the draft / eat space above the keyboard. They return when the bar is
           minimized back to reading mode. */
        #reply-bar:not(.minimized) .mobile-ticket-actions,
        #reply-bar.ai-generating .mobile-ticket-actions { 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.
           Must be `clip`, not `hidden`: overflow-x hidden turns #ticket-page
           into a scroll container, which silently disables position:sticky
           on the ticket header (the mobile pinning never worked because of
           it). `hidden` stays first as a fallback for pre-clip browsers. */
        #ticket-page { overflow-x: hidden; overflow-x: clip; }
        /* Breathing room above the pinned per-message action buttons (Tailwind's
           top-2 = 0.5rem was too tight against the thread's top edge). */
        #message-thread .sticky.top-2 { top: var(--msg-action-top, 2rem); }
        .ql-toolbar.ql-snow { overflow-x: auto; }
        /* Desktop minimized: show the unified collapsed card; hide the separate
           AI toolbar and editor so they don't render as two disconnected elements */
        #reply-bar.minimized #composer-collapsed-bar { display: flex !important; align-items: center; }
        #reply-bar.minimized #ai-toolbar { display: none !important; }
        #reply-bar.minimized #reply-editor-wrap { display: none; }
        /* 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; }
          /* Below lg both #ticket-page and #message-thread are h-auto, so the
             PAGE scrolls and the thread never overflows. Its overflow-y:auto
             still makes it the sticky scrollport, trapping the per-message
             action buttons in a box that never moves — sticky silently does
             nothing. Drop the overflow here so they pin to the viewport, and
             offset them below the fixed nav (56px) + sticky #ticket-header,
             the same 112px the scroll targets use. (#ticket-page keeps
             overflow-x: clip, which leaves the Y axis visible.) */
          #message-thread { overflow: visible; }
          #message-thread .sticky.top-2 { top: var(--msg-action-top, calc(112px + 2rem)); }
          /* Pin only the slim header bar (back/subject/ID/⋯) under the top
             nav (h-14 = 56px); #ticket-header-meta scrolls away with the
             page. z-index sits below reply-bar (30), nav drawer (40) and the
             bottom-sheet sidebar/top-nav (50). Requires overflow-x: clip on
             #ticket-page — see above. */
          #ticket-header { position: sticky; top: 56px; z-index: 25; }
          /* Keep programmatic scroll targets (last customer message, topic
             jumps) from landing underneath the pinned nav + header bar. */
          #message-thread [data-message-id] { scroll-margin-top: 112px; }
          /* 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; }
          /* Mobile never uses the desktop collapsed card */
          #composer-collapsed-bar { display: none !important; }
        }
      </style>
      <script>
        window._quill = new Quill('#reply-editor', {
          theme: 'snow',
          placeholder: {{ _('Write your reply...') | tojson }},
          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();
          }
        });

        // Update draft word count on every text change
        window._quill.on('text-change', function() {
          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 — but ONLY for a
          // genuine user scroll. Inserting a reply (Use / Append / translate)
          // or closing an AI panel changes the reply-bar height, which reflows
          // the flex layout and fires a synthetic 'scroll' on the thread with
          // no user intent. That must not collapse the composer. We gate on
          // real scroll-intent input (wheel / touch / keyboard) seen recently.
          var lastScrollIntent = 0;
          ['wheel', 'touchmove', 'keydown'].forEach(function(ev) {
            thread.addEventListener(ev, function() { lastScrollIntent = Date.now(); }, { passive: true });
          });
          var scrollTimer = null;
          thread.addEventListener('scroll', function() {
            if (window._quill && window._quill.hasFocus()) return;
            // Reflow / programmatic scroll (no recent user input) — ignore.
            if (Date.now() - lastScrollIntent > 500) 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'
                && !e.target.closest('.mobile-ticket-actions')
                && !e.target.closest('#ai-sidebar-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;
          // Desktop: thread is its own scroll container. Mobile (h-auto): the
          // page scrolls and the thread has no internal overflow, so scroll the window.
          if (thread.scrollHeight > thread.clientHeight + 1) {
            thread.scrollTo({top: 0, behavior: 'smooth'});
          } else {
            window.scrollTo({top: 0, behavior: 'smooth'});
          }
        }
        function scrollToBottom() {
          var thread = document.getElementById('message-thread');
          if (!thread) return;
          if (thread.scrollHeight > thread.clientHeight + 1) {
            thread.scrollTo({top: thread.scrollHeight, behavior: 'smooth'});
          } else {
            window.scrollTo({top: document.documentElement.scrollHeight, behavior: 'smooth'});
          }
        }

        // Centre the pinned per-message action buttons in the visible slice of
        // the thread, rather than parking them near its top edge. The usable
        // area is bounded by the sticky ticket header above and the reply bar
        // below, and both move (composer expands, mobile vs desktop chrome), so
        // the offset is recomputed instead of hardcoded.
        // NOTE the two reference frames: when the thread is its own scroll
        // container (>=lg) a sticky `top` is measured from the thread's top
        // edge; when the PAGE scrolls (<lg, see the media query above) it is
        // measured from the viewport top.
        function updateMessageActionOffset() {
          var thread = document.getElementById('message-thread');
          if (!thread) return;
          var col = thread.querySelector('[data-message-id] .sticky');
          if (!col) return;
          var colH = col.offsetHeight || 64;
          var rect = thread.getBoundingClientRect();
          var replyBar = document.getElementById('reply-bar');
          var usableBottom = window.innerHeight;
          if (replyBar) {
            var barTop = replyBar.getBoundingClientRect().top;
            // Only the mobile reply bar is fixed over the thread; on desktop it
            // sits below it and barTop already equals the thread's bottom.
            if (barTop > 0) usableBottom = Math.min(usableBottom, barTop);
          }
          var threadScrolls = thread.scrollHeight > thread.clientHeight + 1;
          var top, min;
          if (threadScrolls) {
            top = (Math.min(rect.bottom, usableBottom) - rect.top) / 2 - colH / 2;
            min = 8;
          } else {
            min = 112; // fixed nav (56px) + sticky #ticket-header
            top = min + (usableBottom - min) / 2 - colH / 2;
          }
          thread.style.setProperty('--msg-action-top', Math.round(Math.max(min, top)) + 'px');
        }
        window.updateMessageActionOffset = updateMessageActionOffset;
        window.addEventListener('resize', updateMessageActionOffset);
        window.addEventListener('load', updateMessageActionOffset);
        document.addEventListener('DOMContentLoaded', updateMessageActionOffset);
        // The composer changes the usable height when it expands/minimises.
        if (window.ResizeObserver) {
          var _rb = document.getElementById('reply-bar');
          if (_rb) new ResizeObserver(updateMessageActionOffset).observe(_rb);
        }

        // 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)
        var _draftWordSingular = {{ _('Draft: {count} word') | tojson }};
        var _draftWordPlural = {{ _('Draft: {count} words') | tojson }};
        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;
            var _tpl = (words !== 1) ? _draftWordPlural : _draftWordSingular;
            countEl.textContent = _tpl.replace('{count}', String(words));
            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 — preview in the AI result panel (Use as reply / Append / Cancel)
        const quickReplySelect = document.getElementById('quick-reply-select');
        if (quickReplySelect) {
          quickReplySelect.addEventListener('change', function(e) {
            const messageId = parseInt(e.target.value);
            e.target.value = '';
            if (!messageId) return;
            const meta = (window._quickReplyMeta || {})[messageId];
            if (!meta) return;
            showQuickReplyPreview(meta);
          });
        }
      </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') | tojson }}, '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') | tojson }}, 'error');
              break;
            }
            if (file.size > 10 * 1024 * 1024) {
              showToast({{ _('{name} exceeds 10 MB limit') | tojson }}.replace('{name}', file.name), 'error');
              continue;
            }
            window._attachments.push({ file: file, displayName: file.name });
            added++;
          }
          if (added > 0) renderAttachmentChips();
        });
      })();
      </script>
    </div>
  </div>

  {# ============== Right sidebar ============== #}
  {# Mobile scrim behind the bottom sheet — tap to close (sheet covers 30vh→bottom) #}
  <div id="ai-sidebar-overlay" class="hidden fixed inset-0 z-40 bg-black/40 lg:hidden" onclick="closeAISidebar()"></div>
  <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" 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"
               {% if not has_feature('credentials') %}onclick="event.preventDefault(); showUpgradeModal('max', T_CREDENTIAL_VAULT)"{% endif %}>
        <span class="flex items-center gap-1.5">
          <span class="material-symbols-outlined text-sm">key</span>
          {{ _('Credentials') }}
          {% if not has_feature('credentials') %}{{ max_badge() }}{% else %}
          <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>
          {% endif %}
        </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>
        {# Paste is the primary action — works with zero sites: parsing auto-creates the site #}
        <button type="button" onclick='showPasteCredForm({{ ticket.thread.customer_hash | tojson }})'
                class="mt-3 w-full inline-flex items-center justify-center gap-1 px-3 py-1.5 text-xs font-medium rounded-lg bg-brand-600 text-white hover:bg-brand-700 transition-colors">
          <span class="material-symbols-outlined text-sm">auto_awesome</span>
          {{ _('Paste credentials (auto)') }}
        </button>
        <button type="button" onclick="showAddSiteForm()"
                class="mt-2 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 %}

    {# -- Customer Notes -- #}
    {% if ticket.thread.customer_hash %}
    <details id="customer-notes-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">
        <span class="flex items-center gap-1.5">
          <span class="material-symbols-outlined text-sm">sticky_note_2</span>
          {{ _('Notes') }}
        </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">
        <textarea id="customer-note-textarea"
                  class="w-full text-sm text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg px-2.5 py-2 resize-none focus:outline-none focus:ring-1 focus:ring-brand-500 focus:border-brand-500 transition-colors"
                  rows="3"
                  placeholder="{{ _('Add a private note about this customer…') }}">{{ customer_note }}</textarea>
        <div class="flex items-center justify-between mt-1.5">
          <span id="customer-note-status" class="text-[10px] text-gray-400 dark:text-gray-500"></span>
          <button type="button" id="customer-note-save-btn"
                  onclick="saveCustomerNote()"
                  class="text-[11px] font-medium px-2.5 py-1 rounded-md bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-brand-50 hover:text-brand-700 dark:hover:bg-brand-900/30 dark:hover:text-brand-400 transition-colors">
            {{ _('Save') }}
          </button>
        </div>
      </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 %}
    <details id="missing-info" data-testid="missing-info" 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/60 transition-colors">
        <span class="material-symbols-outlined text-sm text-amber-500">warning</span>
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-1">{{ _('Missing Info') }}</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">
        <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>
    </details>
      {% 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">{% trans count=seg.message_count %}{{ count }} msg{% pluralize %}{{ count }} msgs{% endtrans %}</span>
        </button>
        {% endfor %}
      </div>
    </details>
    {% endif %}

    {# -- Tags -- #}
    <details id="tags-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/60 transition-colors">
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500">label</span>
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-1">{{ _('Tags') }}</span>
        {% if tags %}<span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-[10px] font-bold bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">{{ tags|length }}</span>{% endif %}
        <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">
        <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>
    </details>

    {# -- Checklist -- #}
    <details id="checklist-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/60 transition-colors">
        <span class="material-symbols-outlined text-sm text-brand-500 dark:text-brand-400">checklist</span>
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-1">{{ _('Checklist') }}</span>
        <span id="checklist-badge" class="min-w-[32px] h-[18px] px-1.5 text-[10px] font-semibold rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 inline-flex items-center justify-center">0/0</span>
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500 group-open:rotate-180 transition-transform ml-1">expand_more</span>
      </summary>
      <div class="px-4 pb-4">
        <ul id="checklist-items" class="space-y-1.5 mb-3"></ul>
        <div class="flex gap-1.5">
          <input id="checklist-new-input" type="text" placeholder="{{ _('Add an item…') }}"
                 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"
                 onkeydown="if(event.key==='Enter'){event.preventDefault();addChecklistItem();}">
          <button type="button" onclick="addChecklistItem()"
                  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"
                  title="{{ _('Add item') }}">
            <span class="material-symbols-outlined text-sm leading-none">add</span>
          </button>
        </div>
        {# Suggested items from latest AI classification — rendered by renderChecklistSuggestions() #}
        <div id="checklist-suggestions" class="hidden mt-3 pt-3 border-t border-gray-100 dark:border-gray-700"></div>
      </div>
    </details>
    {# Embed latest classification needs for the checklist suggestions panel #}
    <script type="application/json" id="ai-needs-data">{{ ai_needs_data | tojson | safe }}</script>

    {# -- Customer Info (collapsible, collapsed by default) -- #}
    <details id="customer-info-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/60 transition-colors">
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500">person</span>
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-1">{{ _('Customer') }}</span>
        {% if customer_segment %}
          {% if customer_segment.color == 'vip' %}
          <span class="rounded-full bg-amber-100 text-amber-800 dark:bg-amber-500/20 dark:text-amber-400 text-[10px] font-semibold px-2 py-0.5">{{ customer_segment.label }}</span>
          {% elif customer_segment.color == 'repeat' %}
          <span class="rounded-full bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400 text-[10px] font-semibold px-2 py-0.5">{{ customer_segment.label }}</span>
          {% else %}
          <span class="rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400 text-[10px] font-semibold px-2 py-0.5">{{ customer_segment.label }}</span>
          {% endif %}
        {% endif %}
        <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 space-y-4">

        {# Website & basic info #}
        <dl class="space-y-1.5 text-xs">
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Website') }}</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1 text-right overflow-hidden justify-end">
              {% 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 flex-shrink-0" 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 flex-shrink-0" 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 truncate max-w-[140px]">
                {{ ticket.thread.customer_website | truncate(26) }}
              </a>
              {% else %}-{% endif %}
            </dd>
          </div>
          {% if ticket.thread.product_quantity is not none %}
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Qty Purchased') }}</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 text-right">
              {{ ticket.thread.product_quantity }}{% if ticket.thread.product_quantity_refunded %} <span class="text-red-500 dark:text-red-400">({{ _("%(n)s refunded", n=ticket.thread.product_quantity_refunded) }})</span>{% endif %}
            </dd>
          </div>
          {% endif %}
          {% if customer_language %}
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Language') }}</dt>
            <dd>
              <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full 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" style="font-size:12px">translate</span>
                {{ customer_language | upper }}
              </span>
            </dd>
          </div>
          {% endif %}
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('First Seen') }}</dt>
            <dd class="text-gray-700 dark:text-gray-300 text-right">{{ ticket.first_seen_at|localdt('%Y-%m-%d %H:%M') }}</dd>
          </div>
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Last Activity') }}</dt>
            <dd class="text-gray-700 dark:text-gray-300 text-right">{{ ticket.last_activity_at|localdt('%Y-%m-%d %H:%M') }}</dd>
          </div>
        </dl>

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

        {# Order History sub-group #}
        {% if customer_orders %}
        <details class="group/orders">
          <summary class="flex items-center gap-1.5 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 [&::-webkit-details-marker]:hidden list-none">
            <span class="flex-1">{{ _('Purchase History (%(count)d)', count=customer_orders|length) }}</span>
            <span class="material-symbols-outlined text-xs group-open/orders:rotate-180 transition-transform">expand_more</span>
          </summary>
          <div class="mt-2 space-y-1.5">
            {% for o in customer_orders %}
            <div class="flex items-center justify-between text-xs rounded-lg px-2 py-1.5 {% if o.product_type == 'business_care' %}bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20{% else %}bg-gray-50 dark:bg-gray-700/40{% endif %}">
              <div class="truncate flex-1 mr-2 flex items-center gap-1.5">
                {% if o.product_type == 'business_care' %}
                <span class="inline-flex items-center px-1 rounded text-[9px] font-bold bg-indigo-100 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-300 flex-shrink-0">BC</span>
                {% endif %}
                <span class="font-medium text-gray-900 dark:text-gray-100 truncate">{{ 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 %}
                {% if o.transaction_type == 'refund' %}<span class="text-red-500 dark:text-red-400 text-[10px]">{{ _('refund') }}</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 %}

      </div>
    </details>

    {# -- Module Info (collapsible, collapsed by default) -- #}
    <details id="module-info-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/60 transition-colors">
        <span class="material-symbols-outlined text-sm text-gray-400 dark:text-gray-500">extension</span>
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider flex-1">{{ _('Module Info') }}</span>
        {% if ticket.thread.is_support_expired %}
        <span class="inline-flex items-center gap-0.5 text-[10px] font-semibold text-red-600 dark:text-red-400">
          <span class="material-symbols-outlined" style="font-size:12px">{{ _('Expired') }}
        </span>
        {% else %}
        <span class="inline-flex items-center gap-0.5 text-[10px] font-semibold text-green-600 dark:text-green-400">
          <span class="material-symbols-outlined" style="font-size:12px">{{ _('Active') }}
        </span>
        {% endif %}
        <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 space-y-4">

        {# Support status strip — prominent at top of expanded content #}
        {% if ticket.thread.is_support_expired %}
        <div class="rounded-lg px-3 py-2 bg-red-50 dark:bg-red-500/10 border border-red-200 dark:border-red-500/20 flex items-center justify-between gap-2">
          <span class="inline-flex items-center gap-1 text-xs font-semibold text-red-700 dark:text-red-400">
            <span class="material-symbols-outlined" style="font-size:14px">error</span>
            {% if ticket.thread.support_type %}{{ ticket.thread.support_type }} &middot; {% endif %}{{ _("Expired") }}
          </span>
          {% if ticket.thread.effective_days_left is not none %}
          <span class="text-xs font-medium text-red-600 dark:text-red-400">{{ ticket.thread.effective_days_left }}d</span>
          {% endif %}
        </div>
        {% elif ticket.thread.effective_days_left is not none and ticket.thread.effective_days_left < 30 %}
        <div class="rounded-lg px-3 py-2 bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 flex items-center justify-between gap-2">
          <span class="inline-flex items-center gap-1 text-xs font-semibold text-amber-700 dark:text-amber-400">
            <span class="material-symbols-outlined" style="font-size:14px">schedule</span>
            {% if ticket.thread.support_type %}{{ ticket.thread.support_type }}{% else %}{{ _("Active") }}{% endif %}
          </span>
          <span class="text-xs font-medium text-amber-700 dark:text-amber-400">{{ _("%(n)sd left", n=ticket.thread.effective_days_left) }}</span>
        </div>
        {% else %}
        <div class="rounded-lg px-3 py-2 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 flex items-center justify-between gap-2">
          <span class="inline-flex items-center gap-1 text-xs font-semibold text-emerald-700 dark:text-emerald-400">
            <span class="material-symbols-outlined" style="font-size:14px">check_circle</span>
            {% if ticket.thread.support_type %}{{ ticket.thread.support_type }}{% else %}{{ _("Active") }}{% endif %}
          </span>
          {% if ticket.thread.effective_days_left is not none %}
          <span class="text-xs font-medium text-emerald-700 dark:text-emerald-400">{{ _("%(n)sd left", n=ticket.thread.effective_days_left) }}</span>
          {% endif %}
        </div>
        {% endif %}

        {# Product details #}
        <dl class="space-y-1.5 text-xs">
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Module') }}</dt>
            <dd class="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-1.5 overflow-hidden justify-end flex-1">
              {% if product and product.product_type == 'business_care' %}
              <div class="w-5 h-5 rounded 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-[9px] 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-5 h-5 rounded flex-shrink-0" onerror="this.style.display='none'">
              {% endif %}
              <span class="truncate">{{ ticket.thread.product_name or '-' }}</span>
            </dd>
          </div>
          {% if id_product %}
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">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-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300">
                <span class="material-symbols-outlined" style="font-size:12px">open_in_new</span>
                {{ _('Product page') }}
              </a>
            </dd>
          </div>
          {% endif %}
          {% if product and product.current_version %}
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Version') }}</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 text-right">{{ product.current_version }}</dd>
          </div>
          {% endif %}
          {% if product and product.avg_rating %}
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Rating') }}</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 text-right">{{ product.avg_rating }}/5{% if product.total_ratings %} <span class="text-gray-400 dark:text-gray-500">({{ product.total_ratings }})</span>{% endif %}</dd>
          </div>
          {% endif %}
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _("PS Version") }}</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 text-right">{{ ticket.thread.ps_version or '-' }}</dd>
          </div>
          {% if ticket.thread.qualification %}
          <div class="flex justify-between items-center gap-2">
            <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Qualification') }}</dt>
            <dd class="font-medium text-gray-900 dark:text-gray-100 text-right capitalize">{{ ticket.thread.qualification }}</dd>
          </div>
          {% endif %}
        </dl>

        {# Support & SLA sub-group #}
        <div>
          <p class="text-[10px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">{{ _('Support &amp; SLA') }}</p>
          <dl class="space-y-1.5 text-xs">
            <div class="flex justify-between items-center gap-2">
              <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Status') }}</dt>
              <dd>
                {% if ticket.thread.is_support_expired %}
                  <span class="inline-flex items-center gap-0.5 font-medium text-red-600 dark:text-red-400">
                    <span class="material-symbols-outlined" style="font-size:12px">{{ _('Expired') }}
                  </span>
                {% else %}
                  <span class="inline-flex items-center gap-0.5 font-medium text-green-600 dark:text-green-400">
                    <span class="material-symbols-outlined" style="font-size:12px">{{ _('Active') }}
                  </span>
                {% endif %}
              </dd>
            </div>
            {% if ticket.thread.support_type %}
            <div class="flex justify-between items-center gap-2">
              <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Type') }}</dt>
              <dd class="font-medium text-gray-900 dark:text-gray-100 text-right">{{ ticket.thread.support_type }}</dd>
            </div>
            {% endif %}
            {% if ticket.thread.effective_days_left is not none %}
            <div class="flex justify-between items-center gap-2">
              <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Days Left') }}</dt>
              <dd class="font-medium text-right {% if ticket.thread.effective_days_left < 7 %}text-red-600 dark:text-red-400{% elif ticket.thread.effective_days_left < 30 %}text-amber-600 dark:text-amber-400{% else %}text-gray-900 dark:text-gray-100{% endif %}">
                {{ ticket.thread.effective_days_left }}d
                {% if ticket.thread.bc_active %}
                {% set _bc_until = ticket.thread.effective_support_until.strftime('%Y-%m-%d') %}
                <span class="block text-[10px] font-normal text-gray-500 dark:text-gray-400">{% trans bc_until=_bc_until %}BC until {{ bc_until }}{% endtrans %}</span>
                {% endif %}
              </dd>
            </div>
            {% endif %}
            {% if ticket.thread.zen_purchase_date %}
            <div class="flex justify-between items-center gap-2">
              <dt class="text-gray-500 dark:text-gray-400 flex-shrink-0">{{ _('Purchased') }}</dt>
              <dd class="text-gray-700 dark:text-gray-300 text-right">{{ ticket.thread.zen_purchase_date.strftime('%Y-%m-%d') }}</dd>
            </div>
            {% endif %}
          </dl>
        </div>

      </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') | tojson }}, 'warning');
        return;
      }
      var already = window._attachments.some(function(a) { return a.displayName === file.name; });
      if (already) { showToast && showToast({{ _('Module already attached') | tojson }}, 'warning'); return; }
      window._attachments.push({ file: file, displayName: file.name });
      if (typeof renderAttachmentChips === 'function') renderAttachmentChips();
      showToast && showToast({{ _('Module ZIP attached') | tojson }});
    })
    .catch(function(err) {
      console.error('attachLatestModule failed:', err);
      showToast && showToast({{ _('Failed to attach module') | tojson }}, '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;

      // Metadata lookup used by the quick-reply preview (body, attach flags)
      window._quickReplyMeta = {};
      msgs.forEach(function(m) { window._quickReplyMeta[m.id] = m; });

      // 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') | tojson }};
        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') | tojson }} + ' ' + (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');
    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',
        'X-CSRFToken': (typeof getCsrf === 'function' ? getCsrf() : (document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '')),
      },
      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);
    });

    // Clearing is driven by sendReply()'s SUCCESS callback (app.js), not by a
    // timer. The old wrapper fired clearDraft() 500ms after sendReply() was
    // *called*, so a failed send (e.g. the Addons API returning 502) deleted the
    // draft anyway: the text stayed in the editor in memory, looked fine, and
    // was gone on the next page load.
    window._clearTicketDraft = clearDraft;
  }

  // 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>
// Initialise checklist on page load
if (typeof loadChecklist === 'function') loadChecklist();
</script>

<script>
// silent=true → background refresh (after a sync / push): no spinner, and no
// "No new messages" toast; still toasts + appends when there ARE new messages.
function refreshMessages(silent) {
  const btn = document.getElementById('refresh-btn');
  const icon = document.getElementById('refresh-icon');
  if (!silent) { if (btn) btn.disabled = true; if (icon) icon.classList.add('animate-spin'); }

  const fd = new FormData();
  fd.append('csrf_token', getCsrf());
  var _newMsgSingular = {{ _('{count} new message loaded') | tojson }};
  var _newMsgPlural = {{ _('{count} new messages loaded') | tojson }};

  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));
      var _tpl = (data.new_count !== 1) ? _newMsgPlural : _newMsgSingular;
      showToast(_tpl.replace('{count}', String(data.new_count)), 'success');
    } else if (!silent) {
      showToast({{ _('No new messages') | tojson }});
    }
  })
  .catch(err => {
    console.error('Refresh failed:', err);
    if (!silent) showToast({{ _('Refresh failed') | tojson }}, 'error');
  })
  .finally(() => {
    if (!silent) { if (btn) btn.disabled = false; if (icon) 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!') | tojson }}, 'success');
    } else {
      showToast({{ _('No review template found. Create one in Quick Replies in a "Thank You" or "Review" category.') | tojson }}, 'error');
    }
  })
  .catch(function(err) {
    console.error('Failed to load review template:', err);
    showToast({{ _('Failed to load review template') | tojson }}, '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 (desktop + mobile quick-action bar)
      setTicketReadUI(true);
      // 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') | tojson }}, 'success');
    }
  })
  .catch(function(err) { console.error('Mark review sent failed:', err); });
}

// "Not now" — hide the review-request suggestion without marking the ticket
// read. Removes the review-request tag; the next genuine thank-you re-adds it
// (server-side, on sync), so the banner reappears when the real thanks lands.
function postponeReviewRequest() {
  var banner = document.getElementById('review-request-banner');
  var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  var fd = new FormData();
  fd.append('action', 'postpone_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 (banner) {
      banner.style.opacity = '0';
      banner.style.transition = 'opacity 0.3s';
      setTimeout(function() { banner.remove(); }, 300);
    }
    // Clear the sidebar review-request badge for this ticket.
    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({{ _('Hidden for now — it will reappear on the next thank-you') | tojson }}, 'success');
  })
  .catch(function(err) { console.error('Postpone review request 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 — explicit viewport size; parent wrapper is shrink-to-fit so w/h-full would collapse #}
      <iframe id="att-lb-pdf" class="hidden rounded-lg shadow-2xl bg-white" style="width:90vw;max-width:60rem;height:85vh;" frameborder="0"></iframe>
      {# Text viewer — same explicit sizing as the PDF viewer #}
      <pre id="att-lb-text" class="hidden 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" style="width:90vw;max-width:60rem;height:85vh;"></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>

{# ── Customer threads popup (lazy-loaded, inbox-style) ── #}
<div id="cust-threads-modal" class="fixed inset-0 z-[130] hidden" role="dialog" aria-modal="true">
  <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeCustomerThreads()"></div>
  {# bottom-sheet on mobile, centered card on desktop #}
  <div class="absolute inset-x-0 bottom-0 max-h-[85vh] sm:inset-0 sm:m-auto sm:h-fit sm:max-h-[80vh] sm:max-w-md
              bg-white dark:bg-gray-800 rounded-t-2xl sm:rounded-2xl shadow-2xl flex flex-col">
    <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
      <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
        <span class="material-symbols-outlined text-base text-gray-400 dark:text-gray-500">forum</span>
        {{ _('Customer threads') }}
      </h3>
      <button onclick="closeCustomerThreads()" class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors" title="{{ _('Close (Esc)') }}">
        <span class="material-symbols-outlined text-xl">close</span>
      </button>
    </div>
    <div id="cust-threads-body" class="overflow-y-auto p-2 flex-1"></div>
  </div>
</div>

<script>
function openCustomerThreads(hash, currentThreadId) {
  var modal = document.getElementById('cust-threads-modal');
  var body = document.getElementById('cust-threads-body');
  if (!modal || !body) return;
  body.innerHTML = '<div class="flex flex-col items-center gap-2 py-10 text-gray-400 dark:text-gray-500">' +
    '<span class="material-symbols-outlined text-3xl animate-spin">progress_activity</span>' +
    '<span class="text-sm">' + {{ _('Loading…') | tojson }} + '</span></div>';
  modal.classList.remove('hidden');
  document.body.style.overflow = 'hidden';
  fetch('/customer/' + encodeURIComponent(hash) + '/threads-mini?current=' + encodeURIComponent(currentThreadId))
    .then(function(r) { if (!r.ok) throw new Error(r.status); return r.text(); })
    .then(function(html) { body.innerHTML = html; })
    .catch(function() {
      body.innerHTML = '<p class="text-sm text-red-500 dark:text-red-400 text-center py-10">' + {{ _('Failed to load threads.') | tojson }} + '</p>';
    });
}
function closeCustomerThreads() {
  var modal = document.getElementById('cust-threads-modal');
  if (modal && !modal.classList.contains('hidden')) {
    modal.classList.add('hidden');
    document.body.style.overflow = '';
  }
}
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeCustomerThreads();
});
</script>

{% if has_feature('export_conversation') %}
{# ── Export conversation (Markdown) modal — MAX plan ── #}
<div id="export-modal" class="fixed inset-0 z-[130] hidden" role="dialog" aria-modal="true">
  <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeExportModal()"></div>
  <div class="absolute inset-x-0 bottom-0 max-h-[85vh] sm:inset-0 sm:m-auto sm:h-fit sm:max-w-sm
              bg-white dark:bg-gray-800 rounded-t-2xl sm:rounded-2xl shadow-2xl flex flex-col">
    <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
      <h3 class="text-sm font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
        <span class="material-symbols-outlined text-base text-gray-400 dark:text-gray-500">ios_share</span>
        {{ _('Export conversation') }}
      </h3>
      <button onclick="closeExportModal()" class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors" title="{{ _('Close (Esc)') }}">
        <span class="material-symbols-outlined text-xl">close</span>
      </button>
    </div>
    <div class="p-4 space-y-4">
      {# Default is the whole conversation; the date range is opt-in so the
         empty inputs don't read as required fields. #}
      <div class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
        <span class="material-symbols-outlined text-gray-400 dark:text-gray-500 text-base">description</span>
        <span>{% trans %}Exporting the <span class="font-semibold">whole conversation</span>{% endtrans %}</span>
      </div>

      <div>
        <button type="button" id="export-range-toggle" onclick="toggleExportRange()"
                class="flex items-center gap-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 transition-colors">
          <span class="material-symbols-outlined transition-transform" id="export-range-chevron" style="font-size:16px">chevron_right</span>
          {{ _('Limit to a date range') }}
        </button>
        <div id="export-range-fields" class="hidden mt-2 flex items-center gap-2">
          <label class="flex-1 text-xs text-gray-500 dark:text-gray-400">
            <span class="block mb-1">{{ _('From') }}</span>
            <input type="date" id="export-from" onchange="prepareExport()" class="w-full border border-gray-200 dark:border-gray-600 rounded-lg text-xs px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
          </label>
          <label class="flex-1 text-xs text-gray-500 dark:text-gray-400">
            <span class="block mb-1">{{ _('To') }}</span>
            <input type="date" id="export-to" onchange="prepareExport()" class="w-full border border-gray-200 dark:border-gray-600 rounded-lg text-xs px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
          </label>
        </div>
      </div>

      <p class="text-[11px] text-gray-400 dark:text-gray-500 flex items-start gap-1.5">
        <span class="material-symbols-outlined flex-shrink-0" style="font-size:14px">auto_awesome</span>
        {{ _('Clean Markdown for AI — translations, auto-replies and signatures are stripped out.') }}
      </p>
      <div class="flex items-center gap-2">
        <button type="button" id="export-copy-btn" onclick="copyExport(this)"
                class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium bg-brand-600 hover:bg-brand-700 text-white transition-colors disabled:opacity-60 disabled:cursor-wait">
          <span class="material-symbols-outlined text-base">content_copy</span>
          <span class="export-copy-label">{{ _('Copy .md') }}</span>
        </button>
        <button type="button" onclick="downloadExport()"
                class="inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-200 transition-colors">
          <span class="material-symbols-outlined text-base">download</span>
          {{ _('Download') }}
        </button>
      </div>
    </div>
  </div>
</div>

<script>
// Prefetched markdown for the current date selection. We fetch on open (and on
// any date change) so the Copy tap can write to the clipboard SYNCHRONOUSLY —
// iOS Safari blocks navigator.clipboard.writeText() when it runs after an await.
var _exportContent = null;
function _setCopyState(state) {
  var btn = document.getElementById('export-copy-btn');
  var label = btn ? btn.querySelector('.export-copy-label') : null;
  if (!btn) return;
  if (state === 'preparing') { btn.disabled = true; if (label) label.textContent = {{ _('Preparing…') | tojson }}; }
  else if (state === 'ready') { btn.disabled = false; if (label) label.textContent = {{ _('Copy .md') | tojson }}; }
  else if (state === 'copied') { btn.disabled = false; if (label) label.textContent = {{ _('Copied!') | tojson }}; }
  else if (state === 'retry') { btn.disabled = false; if (label) label.textContent = {{ _('Retry') | tojson }}; }
}
function prepareExport() {
  _exportContent = null;
  _setCopyState('preparing');
  fetch(_exportUrl(false))
    .then(function(r) { if (!r.ok) throw new Error(r.status); return r.text(); })
    .then(function(md) { _exportContent = md; _setCopyState('ready'); })
    .catch(function() { _setCopyState('retry'); });
}
function openExportModal() {
  var m = document.getElementById('export-modal');
  if (!m) return;
  m.classList.remove('hidden');
  document.body.style.overflow = 'hidden';
  prepareExport();  // warm the content so Copy is instant + synchronous
}
function closeExportModal() {
  var m = document.getElementById('export-modal');
  if (m && !m.classList.contains('hidden')) {
    m.classList.add('hidden');
    document.body.style.overflow = '';
  }
}
function toggleExportRange() {
  var f = document.getElementById('export-range-fields');
  var c = document.getElementById('export-range-chevron');
  if (!f) return;
  var opened = !f.classList.toggle('hidden');  // toggle returns true when now hidden
  if (c) c.style.transform = opened ? 'rotate(90deg)' : '';
  if (!opened) {
    // Collapsing reverts to the whole conversation.
    var fr = document.getElementById('export-from'), to = document.getElementById('export-to');
    if (fr) fr.value = ''; if (to) to.value = '';
    prepareExport();
  }
}
function _exportUrl(download) {
  var from = (document.getElementById('export-from') || {}).value || '';
  var to = (document.getElementById('export-to') || {}).value || '';
  var params = [];
  if (from) params.push('from=' + encodeURIComponent(from));
  if (to) params.push('to=' + encodeURIComponent(to));
  if (download) params.push('download=1');
  return '/ticket/' + window._ticketId + '/export.md' + (params.length ? '?' + params.join('&') : '');
}
function copyExport(btn) {
  if (_exportContent == null) { prepareExport(); return; }  // not ready yet
  copyToClipboard(_exportContent);  // synchronous — inside the tap gesture
  _setCopyState('copied');
  setTimeout(function() { _setCopyState('ready'); closeExportModal(); }, 900);
}
function downloadExport() {
  window.location = _exportUrl(true);
  setTimeout(closeExportModal, 400);
}
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeExportModal();
});
</script>
{% endif %}

<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 %}