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/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;
     }
 }