fix: group chat mobile UX and UI polish (#188)

* fix: group chat UI background colors and replace console.log in context-engine

- Set message list background to $bg-card to match single chat
- Set status-bar background to transparent
- Replace all console.log/warn with logger in context-engine compressor

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: group chat mobile UX improvements

- Add backdrop overlay for mobile sidebar with tap-to-close
- Auto-collapse sidebar on room select in mobile
- Move timestamp below message bubble
- Widen msg-body max-width to 85% to match single chat
- Add left padding to chat-header to avoid hamburger overlap

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/components/hermes/group-chat/GroupChatPanel.vue

@@ -72,6 +72,7 @@ async function handleDeleteRoom(roomId: string) {
 async function handleSelectRoom(roomId: string) {
     try {
         await store.joinRoom(roomId)
+        if (window.innerWidth <= 768) showSidebar.value = false
     } catch {
         message.error(t('groupChat.joinFailed'))
     }
@@ -173,6 +174,8 @@ watch(() => store.sortedMessages.length, async () => {
 
 <template>
     <div class="group-chat-panel">
+        <!-- Mobile backdrop -->
+        <div class="sidebar-backdrop" :class="{ active: showSidebar }" @click="showSidebar = false" />
         <!-- Room sidebar -->
         <div v-if="showSidebar" class="room-sidebar">
             <div class="sidebar-header">
@@ -421,6 +424,29 @@ export default defineComponent({ components: { CreateRoomForm } })
     display: flex;
     height: 100%;
     overflow: hidden;
+    position: relative;
+}
+
+.sidebar-backdrop {
+    display: none;
+}
+
+@media (max-width: $breakpoint-mobile) {
+    .sidebar-backdrop {
+        display: block;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        z-index: 99;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity $transition-fast;
+
+        &.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
 }
 
 // ─── Status Bar ──────────────────────────────────────────
@@ -428,7 +454,6 @@ export default defineComponent({ components: { CreateRoomForm } })
 .status-bar {
     flex-shrink: 0;
     padding: 6px 20px;
-    background: #ffffff;
     overflow: hidden;
 }
 
@@ -613,6 +638,7 @@ export default defineComponent({ components: { CreateRoomForm } })
     display: flex;
     flex-direction: column;
     min-width: 0;
+    background-color: transparent;
 }
 
 .chat-header {
@@ -892,5 +918,9 @@ export default defineComponent({ components: { CreateRoomForm } })
         z-index: 100;
         box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
     }
+
+    .chat-header {
+        padding-left: 56px;
+    }
 }
 </style>

packages/client/src/components/hermes/group-chat/GroupMessageItem.vue

@@ -45,11 +45,11 @@ const mentionNames = computed(() => props.agents.map(a => a.name).filter(Boolean
             <div class="msg-header">
                 <span class="sender-name">{{ message.senderName }}</span>
                 <span v-if="isAgent && agentInfo?.description" class="agent-desc">{{ agentInfo.description }}</span>
-                <span class="msg-time">{{ timeStr }}</span>
             </div>
             <div class="msg-content" :class="{ 'agent-content': isAgent }">
                 <MarkdownRenderer :content="message.content" :mention-names="mentionNames" />
             </div>
+            <span class="msg-time">{{ timeStr }}</span>
         </div>
     </div>
 </template>
@@ -102,7 +102,7 @@ const mentionNames = computed(() => props.agents.map(a => a.name).filter(Boolean
     display: flex;
     flex-direction: column;
     min-width: 0;
-    max-width: 70%;
+    max-width: 85%;
 }
 
 .msg-header {
@@ -126,7 +126,7 @@ const mentionNames = computed(() => props.agents.map(a => a.name).filter(Boolean
     .msg-time {
         font-size: 11px;
         color: $text-muted;
-        margin-left: auto;
+        margin-top: 2px;
     }
 }
 

packages/client/src/components/hermes/group-chat/GroupMessageList.vue

@@ -60,6 +60,7 @@ defineExpose({ scrollToBottom })
     display: flex;
     flex-direction: column;
     gap: 12px;
+    background-color: $bg-card;
 }
 
 .empty-state {