diff --git a/CLAUDE.md b/CLAUDE.md
index 50c5217c..bf879cf3 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -35,7 +35,7 @@ When user says "COM":
 1. Increment version in BOTH `package.json` AND `CLAUDE.md` (verify they match with `grep version package.json && grep Version CLAUDE.md`)
 2. Run: `git add -A && git commit -m "chore: bump version to X.XXXX" && git push && npm run build && systemctl --user restart claudeman-web`
 
-**Version**: 0.1516 (must match `package.json` for npm publish)
+**Version**: 0.1517 (must match `package.json` for npm publish)
 
 ## Project Overview
 
diff --git a/package.json b/package.json
index b38a5441..4c5eddb5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "claudeman",
-  "version": "0.1516",
+  "version": "0.1517",
   "description": "The missing control plane for Claude Code - run 20 autonomous agents with real-time monitoring and session persistence",
   "type": "module",
   "main": "dist/index.js",
diff --git a/src/web/public/app.js b/src/web/public/app.js
index e59d5ef4..8c245e71 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -14598,11 +14598,8 @@ class ClaudemanApp {
   updateMobileCaseLabel(caseName) {
     const label = document.getElementById('mobileCaseName');
     if (label) {
-      // Truncate for mobile display
-      const maxLen = 6;
-      label.textContent = caseName.length > maxLen
-        ? caseName.substring(0, maxLen) + '…'
-        : caseName;
+      // Let CSS handle truncation via text-overflow: ellipsis
+      label.textContent = caseName;
     }
   }
 
diff --git a/src/web/public/index.html b/src/web/public/index.html
index a628568b..22c15de6 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -11,6 +11,7 @@
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
   <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
   <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="mobile.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
   <!-- Defer CDN scripts — they no longer block initial HTML parsing/paint.
        'defer' preserves execution order (xterm loads before fit addon). -->
@@ -304,12 +305,12 @@
             </div>
           </div>
           <!-- Mobile-only case button + gear -->
-          <button class="btn-settings-mobile" onclick="app.openAppSettings()" title="App Settings"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
+          <button class="btn-settings-mobile" onclick="app.openAppSettings()" title="App Settings">&#x2699;</button>
           <button class="btn-toolbar btn-case-mobile" onclick="app.showMobileCasePicker()" title="Select case">
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
             <span id="mobileCaseName">Case</span>
           </button>
-          <button class="btn-case-settings-mobile" id="btnCaseSettingsMobile" onclick="app.toggleCaseSettingsMobile()" title="Case settings">&#x2699;</button>
+          <button class="btn-case-settings-mobile" id="btnCaseSettingsMobile" onclick="app.toggleCaseSettingsMobile()" title="Case settings"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
           <div class="case-settings-popover-mobile hidden" id="caseSettingsPopoverMobile">
             <label class="checkbox-inline">
               <input type="checkbox" id="caseAgentTeamsMobile" onchange="app.onCaseSettingChangedMobile()">
diff --git a/src/web/public/mobile.css b/src/web/public/mobile.css
index 4948e156..abbe50ee 100644
--- a/src/web/public/mobile.css
+++ b/src/web/public/mobile.css
@@ -226,7 +226,7 @@
     display: none !important;
   }
 
-  /* Mobile app settings gear in toolbar - next to Run Claude */
+  /* Mobile app settings gear in toolbar - far right */
   .btn-settings-mobile {
     display: inline-flex !important;
     align-items: center;
@@ -237,9 +237,11 @@
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
     color: #9ca3af;
+    font-size: 0.85rem;
     cursor: pointer;
     flex-shrink: 0;
-    order: 1; /* Right after Run Claude */
+    order: 4; /* Far right */
+    position: relative;
   }
 
   .btn-settings-mobile svg {
@@ -371,19 +373,23 @@
 
   /* Toolbar layout */
   .toolbar-left {
-    flex: 0 0 auto;
+    flex: 1 1 0;
+    min-width: 0;
     align-items: center;
     gap: 0.3rem;
   }
 
   .toolbar-left .toolbar-group {
     display: flex;
+    flex: 1 1 0;
+    min-width: 0;
     align-items: center;
     gap: 0.3rem;
   }
 
   .toolbar-left .toolbar-group:first-child {
-    flex: 1;
+    flex: 1 1 0;
+    min-width: 0;
     justify-content: space-between;
     gap: 0.3rem;
     flex-wrap: nowrap;
@@ -457,7 +463,6 @@
   /* Simplified toolbar layout - Run Claude, Shell, and Case */
   .toolbar-left .toolbar-group:first-child {
     width: 100%;
-    justify-content: center;
     gap: 8px;
   }
 
@@ -477,19 +482,24 @@
 
   /* Mobile case button - visible on mobile */
   .btn-toolbar.btn-case-mobile {
-    display: inline-flex !important;
-    flex: 0 0 auto;
-    min-width: fit-content;
-    white-space: nowrap;
+    display: flex !important;
+    flex: 1 1 0 !important;
+    min-width: 0;
     padding: 0 8px !important;
     order: 2; /* Between Run Claude and Run Shell */
+    overflow: hidden;
+    justify-content: center;
+    gap: 4px;
   }
 
   .btn-toolbar.btn-case-mobile #mobileCaseName {
-    max-width: 50px;
+    max-width: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  /* Mobile case settings gear button */
+  /* Mobile case settings gear button - next to Run Claude */
   .btn-case-settings-mobile {
     display: inline-flex !important;
     align-items: center;
@@ -500,11 +510,9 @@
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 4px;
     color: #9ca3af;
-    font-size: 0.85rem;
     cursor: pointer;
-    order: 3;
     flex-shrink: 0;
-    position: relative;
+    order: 1; /* Next to Run Claude */
   }
 
   .btn-case-settings-mobile:active {
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index c09d52d2..f25c5035 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -8107,1015 +8107,3 @@ kbd {
 .advanced-options-content {
   padding-left: 0.5rem;
 }
-
-/* ============================================================================
-   Tablet Breakpoint (430px - 768px)
-   ============================================================================ */
-@media (max-width: 768px) and (min-width: 430px) {
-  /* Compact header for tablet - fixed at top, includes safe area padding */
-  .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    min-height: 48px;
-    max-height: 48px;
-    padding: 0.35rem 0.5rem;
-    padding-left: calc(0.5rem + var(--safe-area-left));
-    padding-right: calc(0.5rem + var(--safe-area-right));
-    background: #0a0a0a;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    z-index: 200;
-  }
-
-  /* iOS safe area adjustment for fixed header - header extends into notch area */
-  .ios-device .header {
-    padding-top: calc(0.35rem + var(--safe-area-top));
-    min-height: calc(48px + var(--safe-area-top));
-    max-height: calc(48px + var(--safe-area-top));
-  }
-
-  /* Add top margin to main content to account for fixed header */
-  .main {
-    margin-top: 54px;
-  }
-
-  .ios-device .main {
-    margin-top: calc(54px + var(--safe-area-top));
-  }
-
-  /* Font controls - smaller on tablet, visibility controlled by JS */
-  .header-font-controls {
-    gap: 0.15rem;
-    padding: 0.15rem 0.25rem;
-  }
-
-  .header-font-controls .btn-icon-sm {
-    width: 18px;
-    height: 18px;
-  }
-
-  /* System stats - compact on tablet, visibility controlled by JS */
-  .header-system-stats {
-    font-size: 0.6rem;
-    gap: 0.25rem;
-  }
-
-  .header-right {
-    gap: 0.35rem;
-  }
-
-  /* Compact session tabs */
-  .session-tabs {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    max-height: 52px;
-    gap: 3px;
-  }
-
-  .session-tabs::-webkit-scrollbar {
-    display: none;
-  }
-
-  .session-tab {
-    padding: 0.4rem 0.6rem;
-    font-size: 0.75rem;
-    min-height: 40px;
-  }
-
-  .session-tab .tab-name {
-    max-width: 80px;
-  }
-
-  /* Compact toolbar - includes safe area padding */
-  .toolbar {
-    padding: 0.4rem 0.5rem;
-    padding-left: calc(0.5rem + var(--safe-area-left));
-    padding-right: calc(0.5rem + var(--safe-area-right));
-    gap: 0.4rem;
-  }
-
-  /* Hide instance count buttons on tablet too */
-  .tab-count-group {
-    display: none;
-  }
-
-  /* Compact toolbar buttons */
-  .btn-toolbar {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.8rem;
-    min-height: 40px;
-  }
-
-  .case-select-group {
-    max-width: 150px;
-  }
-
-  .toolbar-select {
-    font-size: 0.75rem;
-  }
-
-  /* Stack panels vertically */
-  .monitor-panel,
-  .subagents-panel {
-    width: 100%;
-    max-width: 100%;
-    left: 0;
-    right: 0;
-    border-radius: 8px 8px 0 0;
-    max-height: 40vh;
-  }
-
-  /* Project insights - compact on tablet, visibility controlled by JS */
-  .project-insights-panel {
-    max-width: 280px;
-    font-size: 0.7rem;
-  }
-}
-
-/* ============================================================================
-   Phone Breakpoint (<430px)
-   ============================================================================ */
-@media (max-width: 430px) {
-  /* Hide header brand on phones */
-  .header-brand {
-    display: none;
-  }
-
-  /* Font controls - compact on phones, visibility controlled by JS */
-  .header-font-controls {
-    gap: 0.1rem;
-    padding: 0.1rem 0.2rem;
-  }
-
-  .header-font-controls .btn-icon-sm {
-    width: 16px;
-    height: 16px;
-  }
-
-  .header-font-controls .font-size-display {
-    font-size: 0.6rem;
-    min-width: 14px;
-  }
-
-  /* System stats - very compact on phones, visibility controlled by JS */
-  .header-system-stats {
-    font-size: 0.55rem;
-    gap: 0.15rem;
-  }
-
-  /* Token count - compact on phones, visibility controlled by JS */
-  .header-tokens {
-    font-size: 0.6rem;
-    padding: 0.1rem 0.3rem;
-  }
-
-  /* Ultra-compact header for mobile - fixed at top */
-  .header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    min-height: 36px;
-    max-height: 36px;
-    padding: 0.15rem 0.3rem;
-    padding-left: calc(0.3rem + var(--safe-area-left));
-    padding-right: calc(0.3rem + var(--safe-area-right));
-    gap: 0.15rem;
-    overflow: hidden;
-    background: #0a0a0a;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    z-index: 200;
-  }
-
-  /* iOS safe area adjustment for fixed header - header extends into notch area */
-  .ios-device .header {
-    padding-top: calc(0.15rem + var(--safe-area-top));
-    min-height: calc(36px + var(--safe-area-top));
-    max-height: calc(36px + var(--safe-area-top));
-  }
-
-  /* Add top margin to main content to account for fixed header */
-  .main {
-    margin-top: 42px;
-  }
-
-  .ios-device .main {
-    margin-top: calc(42px + var(--safe-area-top));
-  }
-
-  .header-right {
-    padding-left: 0.2rem;
-    gap: 0.1rem;
-    flex-shrink: 0;
-    border-left: none;
-  }
-
-  /* Smaller header buttons on mobile */
-  .btn-icon-header {
-    width: 26px;
-    height: 26px;
-    padding: 0;
-  }
-
-  .btn-icon-header svg {
-    width: 12px;
-    height: 12px;
-  }
-
-  /* Larger settings gear icon for visibility */
-  .btn-icon-header.btn-settings {
-    width: 32px;
-    height: 32px;
-  }
-
-  .btn-icon-header.btn-settings svg {
-    width: 16px;
-    height: 16px;
-  }
-
-  /* App container - prevent scrolling, strict layout */
-  .app {
-    overflow: hidden;
-    position: relative;
-  }
-
-  /* Ultra-compact session tabs */
-  .session-tabs {
-    flex: 1;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    max-height: 36px;
-    gap: 2px;
-    padding: 0;
-  }
-
-  .session-tabs::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* Smaller tabs for mobile */
-  .session-tab {
-    flex-shrink: 0;
-    min-height: 32px;
-    max-height: 32px;
-    padding: 0.35rem 0.5rem;
-    font-size: 0.7rem;
-    gap: 0.25rem;
-    border-radius: 4px;
-  }
-
-  /* Smaller status indicator on mobile */
-  .session-tab .tab-status {
-    width: 4px;
-    height: 4px;
-  }
-
-  /* Truncate tab names more aggressively on mobile */
-  .session-tab .tab-name {
-    max-width: 50px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* Hide close/gear buttons on non-active tabs on mobile */
-  .session-tab .tab-close,
-  .session-tab .tab-gear {
-    display: none;
-  }
-
-  /* Gear icon on active tab - tiny, subtle */
-  .session-tab.active .tab-gear {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.5rem;
-    line-height: 1;
-    width: 12px;
-    height: 12px;
-    margin-left: auto;
-    opacity: 0.6;
-  }
-
-  /* Close button on active tab - large for easy tapping */
-  .session-tab.active .tab-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.1rem;
-    line-height: 1;
-    width: 20px;
-    height: 18px;
-    margin-left: -2px;
-  }
-
-  /* Clean dark toolbar - positioned near bottom */
-  .toolbar {
-    position: fixed;
-    bottom: var(--safe-area-bottom);
-    left: 0;
-    right: 0;
-    height: 40px;
-    min-height: 40px;
-    max-height: 40px;
-    padding: 0.3rem 0.4rem;
-    padding-left: calc(0.4rem + var(--safe-area-left));
-    padding-right: calc(0.4rem + var(--safe-area-right));
-    flex-wrap: nowrap;
-    gap: 0.3rem;
-    align-items: center;
-    justify-content: space-between;
-    background: #111111;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    z-index: 50;
-    /* Smooth transition for keyboard show/hide */
-    transition: transform 0.15s ease-out;
-    /* Ensure transform works properly */
-    will-change: transform;
-  }
-
-  /* Show case selector in center */
-  .toolbar-center {
-    display: flex !important;
-    align-items: center;
-  }
-
-  .toolbar-right {
-    display: none !important;
-  }
-
-  /* Hide version display on mobile */
-  .version-display {
-    display: none !important;
-  }
-
-  /* Toolbar layout */
-  .toolbar-left {
-    flex: 0 0 auto;
-    align-items: center;
-    gap: 0.3rem;
-  }
-
-  .toolbar-left .toolbar-group {
-    display: flex;
-    align-items: center;
-    gap: 0.3rem;
-  }
-
-  .toolbar-left .toolbar-group:first-child {
-    flex: 1;
-    justify-content: space-between;
-    gap: 0.3rem;
-    flex-wrap: nowrap;
-    align-items: center;
-  }
-
-  /* Hide instance count buttons (±) on mobile - cleaner UI */
-  .tab-count-group {
-    display: none !important;
-  }
-
-  /* Compact toolbar buttons for mobile - white text on dark */
-  .btn-toolbar {
-    min-height: 26px !important;
-    max-height: 26px !important;
-    height: 26px !important;
-    padding: 0 0.5rem !important;
-    font-size: 0.65rem !important;
-    border-radius: 4px;
-    line-height: 26px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 500;
-    letter-spacing: 0.01em;
-    color: #fff;
-  }
-
-  /* Primary action button - Run Claude */
-  .btn-toolbar.btn-claude {
-    flex: 0 0 auto;
-    padding: 0 0.75rem !important;
-    background: var(--bg-input);
-    border: 1px solid var(--border-light);
-    color: var(--text);
-    font-weight: 500;
-  }
-
-  .btn-toolbar.btn-claude:hover,
-  .btn-toolbar.btn-claude:active {
-    background: var(--bg-hover);
-    border-color: var(--accent);
-  }
-
-  .btn-toolbar.btn-claude svg {
-    width: 10px;
-    height: 10px;
-    margin-right: 4px;
-  }
-
-  /* Secondary action - Run Shell - right side */
-  .btn-toolbar.btn-shell {
-    flex: 0 0 auto;
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: #9ca3af;
-    order: 3; /* Right position */
-  }
-
-  .btn-toolbar.btn-shell:hover,
-  .btn-toolbar.btn-shell:active {
-    background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-  }
-
-  /* Hide case selector on mobile - simplified toolbar */
-  .case-select-group {
-    display: none !important;
-  }
-
-  /* Simplified toolbar layout - Run Claude, Shell, and Case */
-  .toolbar-left .toolbar-group:first-child {
-    width: 100%;
-    justify-content: center;
-    gap: 8px;
-  }
-
-  .btn-toolbar.btn-claude {
-    flex: 0 0 auto;
-    min-width: fit-content;
-    white-space: nowrap;
-    padding: 0 10px !important;
-  }
-
-  .btn-toolbar.btn-shell {
-    flex: 0 0 auto;
-    min-width: fit-content;
-    white-space: nowrap;
-    padding: 0 10px !important;
-  }
-
-  /* Mobile case button - visible on mobile */
-  .btn-toolbar.btn-case-mobile {
-    display: inline-flex !important;
-    flex: 0 0 auto;
-    min-width: fit-content;
-    white-space: nowrap;
-    padding: 0 8px !important;
-    order: 2; /* Between Run Claude and Run Shell */
-  }
-
-  .btn-toolbar.btn-case-mobile #mobileCaseName {
-    max-width: 50px;
-  }
-
-  /* Mobile case settings gear button */
-  .btn-case-settings-mobile {
-    display: inline-flex !important;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    color: #9ca3af;
-    font-size: 0.85rem;
-    cursor: pointer;
-    order: 3;
-    flex-shrink: 0;
-    position: relative;
-  }
-
-  .btn-case-settings-mobile:active {
-    background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-  }
-
-  .case-settings-popover-mobile {
-    position: fixed;
-    bottom: calc(var(--safe-area-bottom) + 46px);
-    left: 8px;
-    right: 8px;
-    background: #1e1e1e;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 8px;
-    padding: 0.6rem 0.75rem;
-    z-index: 1000;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
-    display: block;
-  }
-
-  .case-settings-popover-mobile.hidden {
-    display: none !important;
-  }
-
-  .case-settings-popover-mobile .checkbox-inline {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 0.75rem;
-    color: #e5e7eb;
-  }
-
-  .case-settings-popover-mobile .form-hint {
-    display: block;
-    margin-top: 0.2rem;
-    font-size: 0.6rem;
-    color: #6b7280;
-  }
-
-  /* Keyboard Accessory Bar - quick actions above keyboard */
-  .keyboard-accessory-bar {
-    display: none;
-    position: fixed;
-    bottom: calc(var(--safe-area-bottom) + 40px); /* Above toolbar */
-    left: 0;
-    right: 0;
-    height: 44px;
-    background: #1a1a1a;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 6px 8px;
-    padding-left: calc(8px + var(--safe-area-left));
-    padding-right: calc(8px + var(--safe-area-right));
-    gap: 8px;
-    align-items: center;
-    justify-content: center;
-    z-index: 51;
-    transition: transform 0.15s ease-out;
-    will-change: transform;
-  }
-
-  .keyboard-accessory-bar.visible {
-    display: flex;
-  }
-
-  .accessory-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 6px 12px;
-    background: #2a2a2a;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 6px;
-    color: #e5e5e5;
-    font-size: 0.65rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 0.15s, border-color 0.15s;
-  }
-
-  /* Confirm state — button turns amber and shows "Tap again" */
-  .accessory-btn.confirming {
-    background: #6b4f00;
-    border-color: #b8860b;
-    color: #ffd54f;
-  }
-
-  .accessory-btn:active {
-    background: #3a3a3a;
-  }
-
-  .accessory-btn svg {
-    width: 14px;
-    height: 14px;
-  }
-
-  .accessory-btn-dismiss {
-    margin-left: auto;
-    padding: 8px 14px;
-    background: #2a2a2a;
-    border: 1.5px solid rgba(255, 255, 255, 0.25);
-    border-radius: 6px;
-    color: #e5e5e5;
-  }
-
-  .accessory-btn-dismiss svg {
-    width: 22px;
-    height: 22px;
-    stroke-width: 3;
-  }
-
-  .accessory-btn-dismiss:active {
-    background: #3a3a3a;
-  }
-
-  /* Add case button - compact (keeping for when shown via menu) */
-  .btn-case-add {
-    display: none !important;
-  }
-
-  .btn-case-settings {
-    display: none !important;
-  }
-
-  /* When keyboard is visible, also move accessory bar up */
-  .keyboard-visible .keyboard-accessory-bar.visible {
-    /* Position is handled by JS transform along with toolbar */
-  }
-
-  /* Paste overlay for iOS clipboard access */
-  .paste-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    z-index: 10000;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    padding-bottom: env(safe-area-inset-bottom, 12px);
-  }
-
-  .paste-dialog {
-    background: var(--bg-secondary, #1e1e2e);
-    border: 1px solid var(--border-color, #444);
-    border-radius: 12px;
-    padding: 12px;
-    width: calc(100% - 24px);
-    max-width: 400px;
-    margin-bottom: 8px;
-  }
-
-  .paste-textarea {
-    width: 100%;
-    min-height: 100px;
-    background: var(--bg-primary, #0d0d14);
-    color: var(--text-primary, #e0e0e0);
-    border: 1px solid var(--border-color, #444);
-    border-radius: 8px;
-    padding: 10px;
-    font-family: inherit;
-    font-size: 14px;
-    resize: vertical;
-    box-sizing: border-box;
-  }
-
-  .paste-textarea:focus {
-    outline: none;
-    border-color: var(--accent-color, #7aa2f7);
-  }
-
-  .paste-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    margin-top: 10px;
-  }
-
-  .paste-cancel, .paste-send {
-    padding: 8px 18px;
-    border: none;
-    border-radius: 8px;
-    font-size: 14px;
-    cursor: pointer;
-  }
-
-  .paste-cancel {
-    background: var(--bg-tertiary, #333);
-    color: var(--text-secondary, #aaa);
-  }
-
-  .paste-send {
-    background: var(--accent-color, #7aa2f7);
-    color: #fff;
-    font-weight: 600;
-  }
-
-  /* LEGACY: Hide old toolbar select (no longer used on mobile) */
-  .toolbar-select {
-    display: none !important;
-  }
-
-  /* Keep btn-case-add styling for tablet/future use */
-  .toolbar .btn-case-add {
-    min-width: 26px !important;
-    max-width: 26px !important;
-    width: 26px !important;
-    min-height: 26px !important;
-    max-height: 26px !important;
-    height: 26px !important;
-    padding: 0 !important;
-    font-size: 0.9rem;
-    font-weight: bold;
-    display: inline-flex !important;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    border-radius: 4px;
-    background: transparent;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    color: #9ca3af;
-  }
-
-  .btn-case-add:hover,
-  .btn-case-add:active {
-    background: rgba(255, 255, 255, 0.1);
-    color: #fff;
-  }
-
-  /* Panels on mobile - full width, positioned above toolbar, visibility controlled by JS */
-  .monitor-panel,
-  .subagents-panel {
-    width: 100%;
-    max-width: 100%;
-    left: 0;
-    right: 0;
-    border-radius: 8px 8px 0 0;
-    bottom: calc(44px + 2rem + var(--safe-area-bottom));
-    max-height: 35vh;
-  }
-
-  /* Full-screen modals on phones */
-  .modal-content {
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100%;
-    border-radius: 0;
-    margin: 0;
-  }
-
-  /* Modal safe area padding - all sides for full-screen modals */
-  .ios-device .modal-content {
-    padding-top: var(--safe-area-top);
-    padding-bottom: var(--safe-area-bottom);
-    padding-left: var(--safe-area-left);
-    padding-right: var(--safe-area-right);
-  }
-
-  .modal-header {
-    padding: 0.75rem 1rem;
-  }
-
-  .modal-header h3 {
-    font-size: 1rem;
-  }
-
-  .modal-body {
-    padding: 0.75rem 1rem;
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  .modal-footer,
-  .form-actions {
-    padding: 0.75rem 1rem;
-    padding-bottom: calc(0.75rem + var(--safe-area-bottom));
-  }
-
-  /* Terminal container safe area */
-  .ios-device .terminal-container {
-    padding-bottom: var(--safe-area-bottom);
-  }
-
-  /* Main area must fill available space */
-  .main {
-    flex: 1;
-    min-height: 0; /* Allow flex item to shrink below content size */
-  }
-
-  /* Show CLI info bar on mobile (Claude version/model) */
-  .cli-info-bar {
-    display: block;
-  }
-
-  /* Mobile terminal - native touch scrolling via xterm-viewport */
-  .terminal-container {
-    height: 100%;
-    min-height: 0;
-    position: relative;
-    overflow: visible; /* Must not be hidden — blocks touch scroll on viewport */
-    touch-action: pan-y;
-  }
-
-  .terminal-container .xterm {
-    touch-action: pan-y;
-  }
-
-  /* xterm-viewport is the scrollable element inside xterm.js.
-     It must sit above xterm-screen to receive touch events.
-     See: https://github.com/xtermjs/xterm.js/issues/5377 */
-  .terminal-container .xterm-viewport {
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    right: 0 !important;
-    bottom: 0 !important;
-    z-index: 10 !important;
-    touch-action: pan-y;
-    -webkit-overflow-scrolling: touch;
-    overflow-y: scroll !important;
-  }
-
-  .terminal-container .xterm-screen {
-    touch-action: pan-y;
-  }
-
-  /* Compact welcome overlay for mobile */
-  .welcome-content {
-    padding: 1rem 0.75rem;
-  }
-
-  .welcome-title {
-    font-size: 1.2rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .welcome-desc {
-    font-size: 0.8rem;
-    margin-bottom: 0.4rem;
-  }
-
-  .welcome-actions {
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-top: 1rem;
-  }
-
-  .welcome-btn {
-    width: 100%;
-    justify-content: center;
-    min-height: 44px;
-    padding: 0.75rem 1rem;
-    font-size: 0.85rem;
-  }
-
-  .welcome-hint {
-    font-size: 0.7rem;
-    margin-top: 0.75rem;
-  }
-
-  /* Ralph wizard responsive */
-  .modal-wizard {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .wizard-progress {
-    padding: 0.5rem;
-  }
-
-  .wizard-step {
-    padding: 0.3rem;
-  }
-
-  .wizard-step-number {
-    width: 24px;
-    height: 24px;
-    font-size: 0.7rem;
-  }
-
-  .wizard-step-label {
-    display: none;
-  }
-
-  /* Timer banner - includes safe area padding */
-  .timer-banner {
-    padding-left: calc(0.5rem + var(--safe-area-left));
-    padding-right: calc(0.5rem + var(--safe-area-right));
-  }
-
-  /* Respawn/Ralph panels - more compact on mobile, includes safe area padding */
-  .respawn-banner {
-    padding: 0.4rem 0.5rem;
-    padding-left: calc(0.5rem + var(--safe-area-left));
-    padding-right: calc(0.5rem + var(--safe-area-right));
-    font-size: 0.7rem;
-  }
-
-  .ralph-panel {
-    font-size: 0.75rem;
-  }
-
-  .ralph-summary {
-    padding: 0.4rem 0.5rem;
-    padding-left: calc(0.5rem + var(--safe-area-left));
-    padding-right: calc(0.5rem + var(--safe-area-right));
-  }
-
-  /* Project insights panel - compact on mobile, visibility controlled by JS */
-  .project-insights-panel {
-    max-width: 100%;
-    font-size: 0.65rem;
-    bottom: calc(44px + 2rem + var(--safe-area-bottom));
-  }
-
-  /* File browser panel - compact on mobile, visibility controlled by JS */
-  .file-browser-panel {
-    max-width: 100%;
-    max-height: 50vh;
-    bottom: calc(44px + 2rem + var(--safe-area-bottom));
-  }
-
-  /* Notification drawer - full width on mobile, includes safe area padding */
-  .notification-drawer {
-    width: 100%;
-    max-width: 100%;
-    right: 0;
-    border-radius: 0;
-    padding-left: var(--safe-area-left);
-    padding-right: var(--safe-area-right);
-    padding-bottom: var(--safe-area-bottom);
-  }
-
-  /* Scroll margin for inputs - helps with keyboard visibility */
-  input, textarea, [contenteditable] {
-    scroll-margin-bottom: 200px;
-    scroll-margin-top: 80px;
-  }
-
-  /* When keyboard is visible, adjust content to account for moved toolbar */
-  .keyboard-visible .terminal-container {
-    /* Reduce terminal height when keyboard is up so it doesn't overlap toolbar */
-    padding-bottom: 50px;
-  }
-
-  /* Ensure modals scroll properly when keyboard is visible */
-  .keyboard-visible .modal-body {
-    max-height: 40vh;
-    overflow-y: auto;
-  }
-
-  /* Mobile Case Picker - Mobile-specific overrides */
-  .mobile-case-picker .modal-backdrop {
-    background: rgba(0, 0, 0, 0.5);
-  }
-
-  .mobile-case-picker-sheet {
-    max-height: 60vh;
-    padding-bottom: var(--safe-area-bottom);
-    animation: slideUp 0.2s ease-out;
-  }
-
-  @keyframes slideUp {
-    from {
-      transform: translateY(100%);
-    }
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  .mobile-case-picker-header .modal-close {
-    width: 32px;
-    height: 32px;
-    font-size: 1.5rem;
-  }
-
-  .mobile-case-picker-footer {
-    padding-bottom: calc(12px + var(--safe-area-bottom));
-  }
-}
-
-
-/* ============================================================================
-   iOS Safari Specific Fixes
-   ============================================================================ */
-.ios-device.safari-browser {
-  /* Prevent pull-to-refresh */
-  overscroll-behavior: none;
-}
-
-.ios-device.safari-browser .terminal-container {
-  /* Keep momentum scrolling but prevent page bounce */
-  -webkit-overflow-scrolling: touch;
-}
-
-.ios-device.safari-browser .terminal-container .xterm-viewport {
-  -webkit-overflow-scrolling: touch;
-}
-
-/* ============================================================================
-   Hover State Fallbacks for Touch
-   ============================================================================ */
-@media (hover: none) and (pointer: coarse) {
-  /* Remove hover-dependent UI patterns */
-  .session-tab .tab-close,
-  .session-tab .tab-gear {
-    opacity: 1;
-    width: auto;
-    padding: 0.15rem 0.25rem;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Simplify button hover states */
-  .btn-toolbar:hover {
-    transform: none;
-  }
-
-  .btn-icon-header:hover {
-    transform: none;
-  }
-
-  /* Show dropdown on tap instead of hover */
-  .subagent-dropdown-trigger:active + .subagent-dropdown-menu,
-  .subagent-dropdown-trigger:focus + .subagent-dropdown-menu {
-    display: block;
-  }
-}