feat(helpdesk): add skeleton loader and lightbox for image previews

- Skeleton shimmer placeholder shown while SOAP image loads
- onload hides skeleton, onerror hides entire preview
- data-fslightbox="ticket-files" on image link enables FsLightbox
  overlay (auto-detected by global MutationObserver)
- cursor: zoom-in on preview images
- Gallery name "ticket-files" groups all images in the feed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

modules/helpdesk/web/js/helpdesk-communication.js

@@ -126,7 +126,10 @@ export function renderCommunicationFeed(entries, options = {}) {
       html += `<span class="helpdesk-chat-activity-pill">${esc(actor)} ${esc(t('attached a file'))}`;
       if (timeLabel) html += ` ${esc(t('on'))} ${esc(timeLabel)}`;
       html += `</span>`;
-      html += `<a href="${esc(fileUrl)}" target="_blank" rel="noopener noreferrer" class="helpdesk-chat-file-preview" aria-label="${esc(fileName)}"><img src="${esc(imgUrl)}" alt="${esc(fileName)}" loading="lazy" onerror="this.parentElement.hidden=true"></a>`;
+      html += `<span class="helpdesk-chat-file-preview">`;
+      html += `<span class="helpdesk-chat-file-skeleton helpdesk-skeleton"></span>`;
+      html += `<a data-fslightbox="ticket-files" href="${esc(imgUrl)}" aria-label="${esc(fileName)}"><img src="${esc(imgUrl)}" alt="${esc(fileName)}" loading="lazy" onload="this.closest('.helpdesk-chat-file-preview').querySelector('.helpdesk-chat-file-skeleton').hidden=true" onerror="this.closest('.helpdesk-chat-file-preview').hidden=true"></a>`;
+      html += `</span>`;
       html += `<a href="${esc(fileUrl)}" target="_blank" rel="noopener noreferrer" class="helpdesk-chat-file-link"><i class="bi bi-download" aria-hidden="true"></i> ${esc(fileName)}</a>`;
       html += '</div>';
       html += '</li>';