mobile responsive UI + spec update for mobile requirement

- sidebar collapses on mobile, opens with hamburger menu
- overlay backdrop on mobile when sidebar open
- channel select closes sidebar on mobile
- spec: mobile-responsive is now an acceptance criterion

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/colony/src/App.tsx

@@ -68,20 +68,43 @@ export default function App() {
 
   const messagesById = new Map(messages.map((m) => [m.id, m]));
   const activeChannel = channels.find((c) => c.id === activeChannelId);
-  const _currentUser = getCurrentUsername();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-    <div className="flex h-full">
-      <ChannelSidebar
-        channels={channels}
-        activeId={activeChannelId}
-        onSelect={setActiveChannelId}
-        onChannelCreated={loadChannels}
-      />
+    <div className="flex h-full relative">
+      {/* Mobile sidebar overlay */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 md:hidden"
+          onClick={() => setSidebarOpen(false)}
+          onKeyDown={() => {}}
+          role="button"
+          tabIndex={-1}
+        />
+      )}
+
+      <div className={`${sidebarOpen ? "fixed inset-y-0 left-0 z-50" : "hidden"} md:relative md:block`}>
+        <ChannelSidebar
+          channels={channels}
+          activeId={activeChannelId}
+          onSelect={(id) => {
+            setActiveChannelId(id);
+            setSidebarOpen(false);
+          }}
+          onChannelCreated={loadChannels}
+        />
+      </div>
 
       <div className="flex-1 flex flex-col min-w-0">
         {/* Channel header */}
         <div className="px-4 py-2 border-b border-border flex items-center gap-2">
+          <button
+            type="button"
+            onClick={() => setSidebarOpen(true)}
+            className="md:hidden text-muted-foreground hover:text-foreground text-[14px] mr-1"
+          >
+            =
+          </button>
           {activeChannel ? (
             <>
               <span className="text-muted-foreground">#</span>