Mobile-optimized layout: output-first, collapsible mode selector

- Output panel renders first on mobile (CSS order swap)
- Prompt + Run button immediately below output
- Mode/config hidden behind "Mode: Brainstorm" collapsible toggle
- Tapping toggle expands full mode grid + model config
- Compact header nav with smaller text
- 3-column mode grid on mobile (was 4)
- Larger run button (16px font, 14px padding) for touch
- Full-width repipe modal and history panel on mobile
- Desktop layout unchanged (toggle hidden, collapse always open)

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

llm_team_ui.py

@@ -490,7 +490,10 @@ HTML = r"""
   .output-card .card-body::-webkit-scrollbar { width: 4px; }
   .output-card .card-body::-webkit-scrollbar-track { background: transparent; }
   .output-card .card-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+  .m-toggle { display: none; }
+  .m-collapse { display: block !important; }
   @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+  @media (max-width: 768px) { .m-toggle { display: flex; } .m-collapse { display: none !important; } .m-collapse.open { display: block !important; } }
   .card-actions { display: flex; gap: 4px; padding: 4px 12px 8px; }
   .card-act { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text2); font-size: 10px; padding: 3px 8px; cursor: pointer; transition: all 0.15s; }
   .card-act:hover { border-color: var(--accent); color: var(--accent2); }
@@ -540,7 +543,43 @@ HTML = r"""
   .hp-resp { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; overflow: hidden; }
   .hp-resp-header { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
   .hp-resp-body { padding: 8px 10px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }
-  @media (max-width: 768px) { .mode-grid { grid-template-columns: repeat(2, 1fr); } .container { padding: 12px; } .history-panel { width: 100%; } }
+  @media (max-width: 768px) {
+    .container { padding: 10px; }
+    header { padding: 10px 0; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
+    header h1 { font-size: 18px; }
+    header .badge { font-size: 10px; padding: 3px 8px; }
+    header nav { gap: 3px; }
+    header nav a, header nav button, header nav span { font-size: 10px !important; padding: 3px 6px !important; }
+    .grid { grid-template-columns: 1fr; }
+    .grid > .left-scroll { order: 2; max-height: none; }
+    .grid > .panel:last-child { order: 1; }
+    .left-scroll { display: flex; flex-direction: column; gap: 8px; }
+    .left-scroll > .panel:first-child { order: 2; }
+    .left-scroll > .panel:last-child { order: 1; }
+    .m-toggle { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--accent2); }
+    .m-toggle::after { content: ''; margin-left: auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text2); transition: transform 0.2s; }
+    .m-toggle.open::after { transform: rotate(180deg); }
+    .m-collapse { display: none; }
+    .m-collapse.open { display: block; }
+    .mode-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 10px; }
+    .mode-tab { padding: 6px 3px; font-size: 10px; }
+    .mode-tab small { font-size: 7px; }
+    .model-card { padding: 6px 8px; }
+    .model-card .name { font-size: 11px; }
+    .prompt-area { min-height: 60px; font-size: 14px; }
+    .run-btn { padding: 14px; font-size: 16px; }
+    .output-card .card-body { font-size: 13px; max-height: 600px; }
+    .card-actions { flex-wrap: wrap; }
+    .panel { padding: 12px; }
+    .panel h2 { font-size: 10px; margin-bottom: 10px; }
+    .config-row { font-size: 11px; }
+    .config-row label { width: 70px; }
+    .mode-desc { font-size: 10px; padding: 6px 10px; }
+    .empty-state { padding: 40px 16px; }
+    .empty-state .icon { font-size: 24px; }
+    .history-panel { width: 100%; }
+    .repipe-modal { width: 95vw; }
+  }
 </style>
 </head>
 <body>
@@ -559,6 +598,8 @@ HTML = r"""
   </header>
   <div class="grid">
     <div class="left-scroll">
+      <div class="m-toggle" onclick="this.classList.toggle('open');document.getElementById('mode-collapse').classList.toggle('open')" id="mode-toggle">Mode: <span id="mode-label">Brainstorm</span></div>
+      <div class="m-collapse" id="mode-collapse">
       <div class="panel">
         <h2>Mode</h2>
         <div class="mode-grid">
@@ -738,6 +779,7 @@ HTML = r"""
           </select></div>
         </div>
       </div>
+      </div><!-- end m-collapse -->
       <div class="panel">
         <h2>Prompt</h2>
         <textarea class="prompt-area" id="prompt" placeholder="What should your team work on?"></textarea>
@@ -854,6 +896,8 @@ function setMode(mode) {
   const cfg = document.getElementById('config-' + mode);
   if (cfg) cfg.style.display = '';
   document.getElementById('mode-desc').textContent = MODE_DESCS[mode] || '';
+  const ml = document.getElementById('mode-label');
+  if (ml) ml.textContent = mode.charAt(0).toUpperCase() + mode.slice(1);
 }
 
 let pipelineSteps = [];