feat: single cycling height button, panel mutual exclusion, consistent shadows

- Replace 3 S/M/L height buttons with one cycling button (like font size)
- Fix closeAllPanels() to include ctx-panel so Context and Settings menus
  cannot be open simultaneously
- Fix ctxOpenBtn handler to use the same toggle-via-closeAllPanels pattern
  as the settings button
- Align .hdr-dropdown shadow to var(--shadow) instead of hardcoded rgba
- Align #ctx-panel z-index to 200 (match .hdr-dropdown)

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

cortex/static/app.js

@@ -25,6 +25,8 @@
             if (sessionsPanel)     { sessionsPanel.classList.remove('open'); sessionsBackdrop.classList.remove('open'); }
             const pd = document.getElementById('persona-dropdown');
             if (pd) pd.classList.remove('open');
+            const cp = document.getElementById('ctx-panel');
+            if (cp) cp.classList.remove('open');
         }
 
         // ── Toasts ────────────────────────────────────────────────────
@@ -133,7 +135,16 @@
         });
 
         // ── Textarea height ──────────────────────────────────────────
+        const HEIGHT_SIZES  = [120, 240, 480];
+        const HEIGHT_LABELS = ['S', 'M', 'L'];
+        const HEIGHT_TITLES = [
+            'Input size: Compact — click to cycle',
+            'Input size: Medium — click to cycle',
+            'Input size: Large — click to cycle',
+        ];
+
         let maxHeight = parseInt(localStorage.getItem('maxHeight') || '120');
+        const heightCycleBtn = document.getElementById('height-cycle-btn');
 
         function syncHeight() {
             inputEl.style.transition = '';
@@ -144,17 +155,20 @@
         }
 
         function updateHeightUI() {
-            document.querySelectorAll('.ctx-btn[data-height]').forEach(btn => {
-                btn.classList.toggle('active', parseInt(btn.dataset.height) === maxHeight);
-            });
+            if (!heightCycleBtn) return;
+            const idx = HEIGHT_SIZES.indexOf(maxHeight);
+            const i = idx >= 0 ? idx : 0;
+            heightCycleBtn.textContent = HEIGHT_LABELS[i];
+            heightCycleBtn.title = HEIGHT_TITLES[i];
         }
 
-        document.querySelectorAll('.ctx-btn[data-height]').forEach(btn => {
-            btn.addEventListener('click', () => {
-                maxHeight = parseInt(btn.dataset.height);
+        if (heightCycleBtn) {
+            heightCycleBtn.addEventListener('click', () => {
+                const idx = HEIGHT_SIZES.indexOf(maxHeight);
+                const nextIdx = (idx + 1) % HEIGHT_SIZES.length;
+                maxHeight = HEIGHT_SIZES[nextIdx];
                 localStorage.setItem('maxHeight', maxHeight);
                 updateHeightUI();
-                // Brief expand preview so the effect is immediately visible on an empty textarea
                 if (!inputEl.value.trim()) {
                     inputEl.style.transition = 'height 0.2s ease';
                     inputEl.style.height = maxHeight + 'px';
@@ -163,7 +177,7 @@
                     syncHeight();
                 }
             });
-        });
+        }
 
         // ── Input mode — dropdown select with MRU ordering ──────────
         const MODES = {
@@ -1619,8 +1633,12 @@
 
         ctxOpenBtn.addEventListener('click', (e) => {
             e.stopPropagation();
-            ctxPanel.classList.toggle('open');
-            if (ctxPanel.classList.contains('open')) loadSchedule();
+            const isOpen = ctxPanel.classList.contains('open');
+            closeAllPanels();
+            if (!isOpen) {
+                ctxPanel.classList.add('open');
+                loadSchedule();
+            }
         });
 
         document.addEventListener('click', (e) => {