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>