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/css/helpdesk.css

@@ -1318,6 +1318,14 @@
     display: block;
     max-width: 16rem;
     margin-left: 1.35rem;
+    position: relative;
+  }
+
+  .helpdesk-chat-file-skeleton {
+    display: block;
+    width: 12rem;
+    height: 8rem;
+    border-radius: var(--app-radius, 0.375rem);
   }
 
   .helpdesk-chat-file-preview img {
@@ -1326,6 +1334,7 @@
     height: auto;
     border-radius: var(--app-radius, 0.375rem);
     border: 1px solid var(--app-muted-border-color);
+    cursor: zoom-in;
   }
 
   .helpdesk-chat-file-link {

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>';