Tighten admin visitor facts and add widget branding

public/admin.css

@@ -117,21 +117,22 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   font-size: 12px;
 }
 .snippet, .preview, .meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.list-photo {
-  grid-column: 1 / -1;
-  width: 100%;
-  height: 74px;
-  padding: 0;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  overflow: hidden;
-  background: #edf3ef;
+.visitor-facts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  color: var(--muted);
+  font-size: 11px;
 }
-.list-photo img {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
+.visitor-facts span {
+  max-width: 96px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: 1px solid #e4ebe6;
+  border-radius: 999px;
+  padding: 2px 6px;
+  background: #f8fbf9;
 }
 .conversation-actions {
   grid-column: 1 / -1;

public/admin.js

@@ -192,9 +192,13 @@ function renderConversations() {
       <button class="conversation-open" type="button" data-open="${item.id}">
         <span class="row"><strong>${escapeHtml(item.visitor.name || item.visitor.email || "Navstevnik")}</strong>${item.imageCount ? `<span class="photo-count">foto ${item.imageCount}</span>` : ""}</span>
         <span class="preview">${escapeHtml(item.lastBody || "")}</span>
-        <span class="meta">${flag(item.countryCode)} ${escapeHtml(item.language || "")} ${escapeHtml(item.currentUrl || "")}</span>
+        <span class="visitor-facts">
+          <span title="Zeme">${visitorCountry(item)}</span>
+          <span title="Doba na webu">${formatDuration(item.sessionSeconds)}</span>
+          <span title="Navstivene stranky">${Number(item.pageCount || 0)} str.</span>
+          <span title="Pocet chatu">${Number(item.visitorConversationCount || 1)}x chat</span>
+        </span>
       </button>
-      ${item.firstImageUrl ? `<button class="list-photo" type="button" data-photo-url="${escapeHtml(item.firstImageUrl)}" data-photo-name="Fotka v chatu"><img src="${escapeHtml(item.firstImageUrl)}" alt="Fotka v chatu"></button>` : ""}
       <div class="conversation-actions">
         <select class="status-select ${item.status}" data-status-for="${item.id}" aria-label="Zmenit stav chatu">
           ${statusOptions(item.status)}
@@ -242,6 +246,18 @@ function statusOptions(currentStatus) {
   ].map(([value, label]) => `<option value="${value}" ${value === currentStatus ? "selected" : ""}>${label}</option>`).join("");
 }
 
+function visitorCountry(item) {
+  return item.countryCode ? `${flag(item.countryCode)} ${escapeHtml(item.countryCode)}` : "zeme ?";
+}
+
+function formatDuration(seconds) {
+  const value = Number(seconds || 0);
+  if (value < 60) return `${Math.max(0, value)}s`;
+  const minutes = Math.floor(value / 60);
+  if (minutes < 60) return `${minutes}m`;
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}
+
 async function updateConversationStatus(id, status) {
   await api(`/api/admin/conversations/${id}/status`, {
     method: "PATCH",

public/widget.js

@@ -53,6 +53,7 @@
           </label>
           <div class="mf-attachment-list"></div>
           <p class="mf-note">Odeslanim zpravy nam predavate udaje potrebne pro odpoved.</p>
+          <a class="mf-powered" href="https://app.black-week.cz" target="_blank" rel="noopener noreferrer">Powered by MaalFlows</a>
         </form>
       </section>
     `;
@@ -276,6 +277,8 @@
       .mf-attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
       .mf-attachment-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #e8eee9; color: ${c.text}; cursor: pointer; padding: 0; }
       .mf-note { margin: 0; color: ${c.muted}; font-size: 11px; line-height: 1.3; }
+      .mf-powered { justify-self: center; color: ${c.muted}; font-size: 11px; text-decoration: none; }
+      .mf-powered:hover { color: ${c.brand}; text-decoration: underline; }
       @media (max-width: 640px) {
         .mf-launcher { ${mobile.side}: ${mobile.sideOffsetPx}px; bottom: ${mobile.bottomPx}px; }
         .mf-panel { ${mobile.side}: ${mobile.sideOffsetPx}px; bottom: ${mobile.bottomPx + 68}px; width: min(${mobile.widthPx}px, calc(100vw - 24px)); max-height: calc(100vh - 96px); }