Unify active chat highlighting

public/admin.css

@@ -129,19 +129,23 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .conversation-item {
   border: 0;
   border-bottom: 1px solid var(--line);
+  border-left: 3px solid transparent;
   background: white;
   color: var(--ink);
   border-radius: 0;
-  padding: 10px;
+  padding: 10px 10px 10px 7px;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 8px;
   align-items: start;
 }
-.conversation-item.active { background: #eaf6f1; }
+.conversation-item.active {
+  background: #edf8f3;
+  border-left-color: var(--brand);
+}
 .conversation-item.fresh { animation: pulse 1.2s ease-in-out 4; }
 .conversation-item.unread { background: #fffdf4; }
-.conversation-item.unread.active { background: #eaf6f1; }
+.conversation-item.unread.active { background: #edf8f3; }
 .conversation-open {
   min-width: 0;
   text-align: left;
@@ -268,28 +272,26 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .conversation-header p { margin: 0; color: var(--muted); font-size: 13px; }
 .conversation-header select { width: 150px; align-self: start; }
 .visitor-head { width: 100%; min-width: 0; display: grid; gap: 7px; }
-.visitor-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.visitor-summary-row {
-.visitor-title-row h2 { margin: 0; }
-.country-pill {
-  border: 1px solid #e4ebe6;
-  border-radius: 999px;
-  padding: 3px 8px;
-  background: #f8fbf9;
-  color: var(--muted);
-  font-size: 12px;
-}
-.visitor-quick {
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 7px;
   color: var(--muted);
   font-size: 12px;
 }
-.visitor-quick span {
+.visitor-summary-row h2 {
+  min-width: 0;
+  margin: 0 4px 0 0;
+  color: var(--ink);
+  font-size: 20px;
+}
+.visitor-summary-row span {
   border: 1px solid #e4ebe6;
   border-radius: 999px;
   padding: 2px 7px;
   background: #f8fbf9;
+  white-space: nowrap;
 }
 .visitor-details {
   max-width: 980px;
@@ -397,13 +399,18 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   overflow: auto;
 }
 .visitor-card {
-  padding: 10px 12px;
+  padding: 10px 12px 10px 9px;
   border-bottom: 1px solid var(--line);
+  border-left: 3px solid transparent;
   background: white;
 }
 .visitor-card.bot { opacity: .68; }
 .visitor-card.clickable { cursor: pointer; }
 .visitor-card.clickable:hover { background: #f8fbf9; }
+.visitor-card.active {
+  background: #edf8f3;
+  border-left-color: var(--brand);
+}
 .visitor-card-head {
   display: grid;
   grid-template-columns: 34px minmax(0, 1fr) 10px;

public/admin.js

@@ -362,7 +362,7 @@ function renderVisitors() {
   $("#hideBotsToggle").textContent = state.hideBots ? "Skryt boty" : "Boty videt";
   $("#visitorCount").textContent = `${visitors.length} online${state.hideBots && botCount ? ` · ${botCount} bot` : ""}`;
   $("#visitorList").innerHTML = visitors.length ? visitors.map((visitor) => `
-    <article class="visitor-card ${visitor.lastConversationId ? "clickable" : ""} ${visitor.isBot ? "bot" : ""}" data-visitor-conversation="${escapeHtml(visitor.lastConversationId || "")}">
+    <article class="visitor-card ${visitor.lastConversationId ? "clickable" : ""} ${visitor.lastConversationId === state.activeId ? "active" : ""} ${visitor.isBot ? "bot" : ""}" data-visitor-conversation="${escapeHtml(visitor.lastConversationId || "")}">
       <div class="visitor-card-head">
         <span class="visitor-avatar">${escapeHtml(visitor.initials || "??")}</span>
         <div>
@@ -411,11 +411,9 @@ function renderActive() {
   const { conversation, messages } = state.active;
   $("#conversationHeader").innerHTML = `
     <div class="visitor-head">
-      <div class="visitor-title-row">
+      <div class="visitor-summary-row">
-        <h2>${escapeHtml(conversation.visitor.name || conversation.visitor.email || "Navstevnik")}</h2>
+        <h2>${escapeHtml(conversationVisitorName(conversation))}</h2>
-        <span class="country-pill">${visitorCountry(conversation)}</span>
+        <span title="Zeme">${visitorCountry(conversation)}</span>
-      </div>
-      <div class="visitor-quick">
         <span title="Doba na webu">${formatDuration(conversation.sessionSeconds)}</span>
         <span title="Navstivene stranky">${Number(conversation.pageCount || 0)} str.</span>
         <span title="Pocet chatu">${Number(conversation.visitorConversationCount || 1)}x chat</span>