create-walle 0.9.21 → 0.9.23

package/template/claude-task-manager/public/m/app.css

@@ -3,7 +3,9 @@ html[data-theme="dark"] {
   color-scheme: dark;
   --bg: #101419;
   --bg-elev: #151b22;
+  --bg-elev-2: #111820;
   --bg-soft: #1d252d;
+  --panel: #151b22;
   --line: #33404d;
   --line-strong: #4b5a67;
   --fg: #edf2f7;
@@ -15,13 +17,18 @@ html[data-theme="dark"] {
   --red: #ff7f8f;
   --ink: #0c1116;
   --nav-h: 70px;
+  --status-tabs-h: 58px;
+  --app-topbar-h: 72px;
+  --app-shell-top: calc(var(--app-topbar-h) + env(safe-area-inset-top));
 }
 
 html[data-theme="light"] {
   color-scheme: light;
   --bg: #f6f7f9;
   --bg-elev: #ffffff;
+  --bg-elev-2: #f8fafc;
   --bg-soft: #eceef2;
+  --panel: #ffffff;
   --line: rgba(15,23,42,0.10);
   --line-strong: rgba(15,23,42,0.18);
   --fg: #0f172a;
@@ -37,17 +44,34 @@ html[data-theme="light"] {
 * { box-sizing: border-box; }
 
 html {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
   min-height: 100%;
   background: var(--bg);
+  overflow-x: clip;
 }
 
 body {
   margin: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
   min-height: 100vh;
+  min-height: 100dvh;
   background: var(--bg);
   color: var(--fg);
   font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   letter-spacing: 0;
+  overflow-x: clip;
+  overscroll-behavior-x: none;
+}
+
+@supports not (overflow: clip) {
+  html,
+  body {
+    overflow-x: hidden;
+  }
 }
 
 button,
@@ -85,6 +109,7 @@ body.detail-sheet-open {
 
 body.detail-sheet-open .app-main,
 body.detail-sheet-open .bottom-nav,
+body.detail-sheet-open .status-summary,
 body.detail-sheet-open .app-topbar {
   pointer-events: none;
   user-select: none;
@@ -111,7 +136,12 @@ body.detail-sheet-open .app-topbar {
 }
 
 .mobile-app {
-  padding: env(safe-area-inset-top) 0 calc(var(--nav-h) + env(safe-area-inset-bottom));
+  max-width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  padding: 0;
+  overflow: hidden;
+  overscroll-behavior: none;
 }
 
 .app-topbar,
@@ -130,6 +160,64 @@ body.detail-sheet-open .app-topbar {
   backdrop-filter: blur(12px);
 }
 
+.app-topbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  min-height: var(--app-shell-top);
+  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
+}
+
+.app-reload-banner {
+  position: fixed;
+  top: var(--app-shell-top);
+  left: 10px;
+  right: 10px;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border: 1px solid var(--line-strong);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--amber) 14%, var(--bg-elev));
+  color: var(--fg);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
+}
+
+.app-reload-banner[hidden] {
+  display: none;
+}
+
+.app-reload-banner div {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.app-reload-banner strong {
+  display: block;
+  font-size: 13px;
+  line-height: 1.2;
+}
+
+.app-reload-banner span {
+  display: block;
+  margin-top: 2px;
+  color: var(--fg-dim);
+  font-size: 12px;
+  line-height: 1.3;
+}
+
+.app-reload-banner button {
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  background: var(--blue);
+  color: #fff;
+  font-weight: 800;
+}
+
 .app-kicker {
   color: var(--fg-muted);
   font-size: 11px;
@@ -178,6 +266,32 @@ h3 {
   font-size: 18px;
 }
 
+.detail-back-btn {
+  grid-auto-flow: column;
+  gap: 6px;
+  width: auto;
+  min-width: 52px;
+  padding: 0 12px;
+  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--blue) 12%, var(--bg-soft));
+  color: var(--blue);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
+}
+
+.detail-back-glyph {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.detail-back-label {
+  display: none;
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  line-height: 1;
+}
+
 .connection-chip,
 .state-chip,
 .scope-chip {
@@ -193,12 +307,29 @@ h3 {
   white-space: nowrap;
 }
 
+.connection-chip {
+  min-height: 40px;
+  padding-inline: 12px;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.connection-chip:active {
+  transform: translateY(1px);
+}
+
 .connection-chip.live,
 .state-chip.running {
   border-color: rgba(113, 167, 255, 0.45);
   color: var(--blue);
 }
 
+.state-chip.resuming {
+  border-color: rgba(224, 175, 104, 0.48);
+  color: var(--yellow);
+}
+
 .connection-chip.secure,
 .state-chip.fresh {
   border-color: rgba(139, 209, 124, 0.45);
@@ -213,11 +344,25 @@ h3 {
 }
 
 .app-main {
-  min-height: calc(100vh - var(--nav-h) - 72px);
+  position: fixed;
+  top: var(--app-shell-top);
+  left: 0;
+  right: 0;
+  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
+  min-width: 0;
+  max-width: 100%;
+  min-height: 0;
+  overflow-x: clip;
+  overflow-y: auto;
+  overflow-anchor: none;
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 .mobile-view {
   display: none;
+  min-width: 0;
+  max-width: 100%;
   padding: 14px 0 18px;
 }
 
@@ -235,11 +380,13 @@ h3 {
 .view-content {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .section-block {
   padding: 14px 16px 4px;
-  scroll-margin-top: calc(84px + env(safe-area-inset-top));
+  scroll-margin-top: 16px;
   transition: background 160ms ease, box-shadow 160ms ease;
 }
 
@@ -262,132 +409,453 @@ h3 {
   text-transform: uppercase;
 }
 
+.section-rows {
+  display: grid;
+  min-width: 0;
+  margin: 8px -16px -4px;
+}
+
+.section-rows > .empty-state {
+  border-top: 1px solid var(--line);
+}
+
 .status-summary {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
+  z-index: 19;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-  padding: 12px 16px 6px;
+  gap: 4px;
+  min-height: var(--status-tabs-h);
+  padding: 6px 10px;
+  border-top: 1px solid var(--line);
+  background: rgba(16, 20, 25, 0.96);
+  backdrop-filter: blur(12px);
+}
+
+body.mobile-app:not([data-mobile-tab="status"]) .status-summary {
+  display: none;
+}
+
+#view-status .view-content {
+  padding-bottom: calc(var(--status-tabs-h) + 16px);
 }
 
 .summary-tile {
   appearance: none;
-  text-align: left;
-  min-height: 72px;
-  padding: 10px;
-  border: 1px solid var(--line);
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  gap: 2px;
+  min-width: 0;
+  min-height: 44px;
+  padding: 4px 6px;
+  border: 1px solid transparent;
   border-radius: 8px;
-  background: var(--bg-elev);
+  background: transparent;
+  color: var(--fg-dim);
   cursor: pointer;
+  text-align: center;
   touch-action: manipulation;
 }
 
 .summary-tile:active {
-  background: color-mix(in srgb, var(--blue) 8%, var(--bg-elev));
+  background: color-mix(in srgb, var(--blue) 10%, transparent);
 }
 
 .summary-tile strong {
   display: block;
-  font-size: 24px;
+  color: var(--fg);
+  font-size: 18px;
   line-height: 1;
 }
 
 .summary-tile span {
   display: block;
-  margin-top: 6px;
-  color: var(--fg-dim);
-  font-size: 12px;
-  line-height: 1.2;
+  margin-top: 0;
+  overflow: hidden;
+  max-width: 100%;
+  color: currentColor;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .summary-tile.urgent {
   border-color: rgba(255, 127, 143, 0.45);
+  background: color-mix(in srgb, var(--red) 10%, transparent);
+  color: var(--red);
 }
 
 .summary-tile.active {
   border-color: rgba(113, 167, 255, 0.4);
+  background: color-mix(in srgb, var(--blue) 10%, transparent);
+  color: var(--blue);
 }
 
-.home-search {
-  display: grid;
-  gap: 6px;
-  padding: 6px 16px 10px;
+.worktree-summary {
+  margin: 4px 0 8px;
+  padding: 10px 16px 8px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
 }
 
-.home-search-box {
-  display: grid;
-  grid-template-columns: 22px minmax(0, 1fr) 38px;
-  align-items: center;
-  min-height: 48px;
-  border: 1px solid var(--line-strong);
-  border-radius: 8px;
-  background: var(--bg-elev);
-  color: var(--fg);
+.worktree-summary-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 6px;
 }
 
-.home-search-icon {
-  justify-self: end;
+.worktree-summary-head > span:first-child {
+  min-width: 0;
+}
+
+.worktree-summary-kicker {
+  display: block;
   color: var(--fg-muted);
-  font-size: 15px;
+  font-size: 10px;
   font-weight: 900;
+  line-height: 1.1;
+  text-transform: uppercase;
 }
 
-.home-search-box input {
-  min-width: 0;
-  height: 46px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
+.worktree-summary-head strong {
+  display: block;
+  margin-top: 2px;
   color: var(--fg);
-  outline: none;
+  font-size: 14px;
+  line-height: 1.15;
 }
 
-.home-search-box input::placeholder {
-  color: var(--fg-muted);
+.worktree-summary-stats {
+  color: var(--fg-dim);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.2;
+  white-space: nowrap;
 }
 
-.home-search-box:focus-within {
-  border-color: color-mix(in srgb, var(--blue) 70%, var(--line-strong));
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
+.worktree-summary-list {
+  display: grid;
 }
 
-.home-search-clear {
-  justify-self: center;
-  display: inline-grid;
-  place-items: center;
-  width: 38px;
-  min-width: 38px;
+.worktree-summary-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 56px;
+  padding: 6px 0;
+  border-top: 1px solid rgba(120, 135, 180, 0.16);
+}
+
+.worktree-summary-row:first-child {
+  border-top: 0;
+}
+
+.worktree-summary-open {
+  appearance: none;
+  display: grid;
+  min-width: 0;
+  width: 100%;
   min-height: 44px;
+  padding: 7px 0;
+  border: 0;
   border-radius: 8px;
   background: transparent;
-  color: var(--fg-muted);
-  font-size: 20px;
-  line-height: 1;
-  opacity: 0;
-  pointer-events: none;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  touch-action: manipulation;
 }
 
-.home-search.has-query .home-search-clear {
-  opacity: 1;
-  pointer-events: auto;
+.worktree-summary-open:active {
+  background: color-mix(in srgb, var(--blue) 8%, transparent);
 }
 
-.home-search-clear:active {
-  background: var(--bg-soft);
-  color: var(--fg);
+.worktree-summary-open:focus-visible,
+.session-diff-chip-action:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
 }
 
-.home-search-status {
-  min-height: 15px;
-  padding: 0 2px;
-  color: var(--fg-muted);
-  font-size: 11px;
-  font-weight: 800;
+.worktree-summary-copy {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.worktree-summary-title {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 900;
   line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.session-row,
-.result-row,
+.worktree-summary-row.main .worktree-summary-title {
+  color: #f6c177;
+}
+
+.worktree-summary-meta {
+  min-width: 0;
+  color: var(--fg-dim);
+  font-size: 11px;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.worktree-summary-row .session-diff-tags {
+  justify-content: flex-end;
+  margin-top: 0;
+}
+
+.worktree-summary-toggle {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  width: 100%;
+  min-height: 44px;
+  margin-top: 6px;
+  padding: 9px 12px;
+  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--blue) 9%, transparent);
+  color: var(--blue);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 1.15;
+  text-align: center;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.worktree-summary-toggle::before {
+  content: "";
+  width: 7px;
+  height: 7px;
+  margin-top: -3px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform 150ms ease, margin 150ms ease;
+}
+
+.worktree-summary-toggle[aria-expanded="true"]::before {
+  margin-top: 3px;
+  transform: rotate(225deg);
+}
+
+.worktree-summary-toggle:active {
+  background: color-mix(in srgb, var(--blue) 16%, transparent);
+}
+
+.worktree-summary-toggle:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+}
+
+.home-search {
+  display: grid;
+  gap: 6px;
+  padding: 6px 16px 10px;
+}
+
+.home-search-box {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr) 38px;
+  align-items: center;
+  min-height: 48px;
+  border: 1px solid var(--line-strong);
+  border-radius: 8px;
+  background: var(--bg-elev);
+  color: var(--fg);
+}
+
+.home-search-icon {
+  justify-self: end;
+  color: var(--fg-muted);
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.home-search-box input {
+  min-width: 0;
+  height: 46px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--fg);
+  outline: none;
+}
+
+.home-search-box input::placeholder {
+  color: var(--fg-muted);
+}
+
+.home-search-box:focus-within {
+  border-color: color-mix(in srgb, var(--blue) 70%, var(--line-strong));
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
+}
+
+.home-search-clear {
+  justify-self: center;
+  display: inline-grid;
+  place-items: center;
+  width: 38px;
+  min-width: 38px;
+  min-height: 44px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fg-muted);
+  font-size: 20px;
+  line-height: 1;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.home-search.has-query .home-search-clear {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.home-search-clear:active {
+  background: var(--bg-soft);
+  color: var(--fg);
+}
+
+.home-search-status {
+  min-height: 15px;
+  padding: 0 2px;
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.status-focus-panel {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  max-width: calc(100vw - 32px);
+  margin: 8px 16px 10px;
+  padding: 14px;
+  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, transparent), transparent 58%),
+    color-mix(in srgb, var(--bg-elev) 92%, var(--bg));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
+}
+
+.status-focus-panel.needs_user,
+.status-focus-panel.waiting,
+.status-focus-panel.waiting_input {
+  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--red) 12%, transparent), transparent 58%),
+    color-mix(in srgb, var(--bg-elev) 92%, var(--bg));
+}
+
+.status-focus-panel.ready_review {
+  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
+}
+
+.status-focus-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.status-focus-head > span:first-child {
+  min-width: 0;
+}
+
+.status-focus-head .state-chip {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 42%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.status-focus-kicker {
+  display: block;
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-weight: 900;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.status-focus-head h2 {
+  margin-top: 3px;
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--fg);
+  font-size: 18px;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-focus-meta,
+.status-focus-goal {
+  min-width: 0;
+  max-width: 100%;
+  color: var(--fg-dim);
+  font-size: 13px;
+  line-height: 1.38;
+  overflow-wrap: anywhere;
+}
+
+.status-focus-goal {
+  color: var(--fg);
+}
+
+.status-focus-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.status-focus-actions .row-action {
+  min-width: 118px;
+}
+
+.status-cockpit {
+  display: grid;
+  gap: 10px;
+}
+
+.status-cockpit-column {
+  min-width: 0;
+}
+
+.session-row,
+.result-row,
 .device-row,
 .walle-row,
 .more-row {
@@ -396,11 +864,16 @@ h3 {
   grid-template-columns: 8px 1fr auto;
   gap: 12px;
   align-items: start;
+  min-width: 0;
+  max-width: 100%;
   min-height: 72px;
   padding: 13px 16px;
   border-top: 1px solid var(--line);
   background: var(--bg);
   text-align: left;
+  color: inherit;
+  cursor: pointer;
+  touch-action: manipulation;
 }
 
 .session-row:active,
@@ -409,6 +882,15 @@ h3 {
   background: var(--bg-soft);
 }
 
+.session-row:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: -2px;
+}
+
+.session-row.dismissed {
+  background: color-mix(in srgb, var(--fg-muted) 5%, var(--bg));
+}
+
 .rail {
   width: 5px;
   height: 100%;
@@ -427,6 +909,10 @@ h3 {
   background: var(--blue);
 }
 
+.rail.resuming {
+  background: var(--yellow);
+}
+
 .rail.ready_review {
   background: var(--green);
 }
@@ -515,6 +1001,12 @@ h3 {
   background: rgba(143, 180, 255, 0.11);
 }
 
+.mobile-provider-cursor {
+  color: #d6dcff;
+  border-color: rgba(214, 220, 255, 0.34);
+  background: rgba(214, 220, 255, 0.10);
+}
+
 .mobile-provider-google {
   color: #8ab4f8;
   border-color: rgba(138, 180, 248, 0.34);
@@ -566,7 +1058,32 @@ h3 {
   margin-top: 7px;
 }
 
+.session-runtime-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  margin-top: 7px;
+}
+
+.session-runtime-chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 3px 8px;
+  border: 1px solid rgba(103, 232, 249, 0.30);
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(96, 165, 250, 0.10));
+  color: #99f6e4;
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 1.1;
+  white-space: nowrap;
+}
+
 .session-diff-chip {
+  appearance: none;
   display: inline-flex;
   align-items: center;
   gap: 5px;
@@ -577,6 +1094,7 @@ h3 {
   border-radius: 6px;
   background: rgba(120, 135, 180, 0.10);
   color: var(--fg-dim);
+  font-family: inherit;
   font-size: 11px;
   font-weight: 900;
   line-height: 1.1;
@@ -585,6 +1103,11 @@ h3 {
   white-space: nowrap;
 }
 
+.session-diff-chip-action {
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
 .session-diff-chip::before {
   content: "";
   display: inline-block;
@@ -609,20 +1132,45 @@ h3 {
   color: #74d7c7;
 }
 
-.session-goal,
-.result-preview {
-  margin-top: 7px;
-  color: var(--fg);
-  font-size: 13px;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
+.session-diff-chip-action {
+  appearance: none;
+  cursor: pointer;
+  touch-action: manipulation;
 }
 
-.session-evidence {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: 8px;
+.worktree-summary-row .session-diff-tags {
+  justify-content: flex-end;
+  margin-top: 0;
+}
+
+.worktree-summary-row .session-diff-chip-action {
+  min-height: 44px;
+  padding: 9px 10px;
+  border-radius: 9px;
+}
+
+.worktree-summary-row .session-diff-chip-action:active {
+  transform: translateY(1px);
+  filter: brightness(1.08);
+}
+
+.session-goal,
+.result-preview {
+  margin-top: 7px;
+  color: var(--fg);
+  font-size: 13px;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.session-evidence {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  margin-top: 8px;
+  overflow: hidden;
 }
 
 .home-search-match {
@@ -646,6 +1194,7 @@ h3 {
 }
 
 .evidence-chip {
+  min-width: 0;
   max-width: 100%;
   min-height: 24px;
   padding: 3px 7px;
@@ -659,6 +1208,16 @@ h3 {
 }
 
 @media (max-width: 380px) {
+  .worktree-summary-row {
+    grid-template-columns: 1fr;
+    gap: 6px;
+    align-items: start;
+  }
+
+  .worktree-summary-row .session-diff-tags {
+    justify-content: flex-start;
+  }
+
   .session-diff-tags {
     gap: 5px;
   }
@@ -716,6 +1275,24 @@ h3 {
   color: var(--ink);
 }
 
+.row-action.secondary {
+  border: 1px solid var(--line);
+  background: transparent;
+  color: var(--fg-dim);
+}
+
+.row-action.secondary:active {
+  background: var(--bg-soft);
+  color: var(--fg);
+}
+
+.row-action.compact {
+  min-height: 36px;
+  min-width: 72px;
+  padding-inline: 10px;
+  font-size: 12px;
+}
+
 .secondary-btn {
   border: 1px solid var(--line);
   background: var(--bg-soft);
@@ -739,6 +1316,25 @@ h3 {
   color: var(--red);
 }
 
+.mobile-auth-recovery-card {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 14px;
+  padding: 14px;
+  border: 1px solid rgba(255, 110, 130, 0.38);
+  border-radius: 8px;
+  background: rgba(255, 110, 130, 0.08);
+  color: var(--fg);
+}
+
+.mobile-auth-recovery-card strong {
+  color: var(--red);
+}
+
+.mobile-auth-recovery-card .primary-action {
+  margin-top: 2px;
+}
+
 .bottom-nav {
   position: fixed;
   left: 0;
@@ -760,6 +1356,12 @@ html[data-theme="light"] .bottom-nav {
   box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.06);
 }
 
+html[data-theme="light"] .status-summary {
+  background: rgba(255, 255, 255, 0.96);
+  border-top: 1px solid rgba(15,23,42,0.06);
+  box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.06);
+}
+
 html[data-theme="light"] .nav-item.active {
   color: var(--blue);
 }
@@ -775,6 +1377,8 @@ html[data-theme="light"] .nav-item.active {
   color: var(--fg-dim);
   font-size: 11px;
   font-weight: 800;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .nav-item span {
@@ -911,10 +1515,36 @@ html[data-theme="light"] .nav-item.active {
   background: rgba(255, 127, 143, 0.08);
 }
 
+.detail-alert-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
 .detail-alert h3 {
   color: var(--red);
 }
 
+.detail-alert-dismiss {
+  flex: 0 0 auto;
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid rgba(255, 127, 143, 0.42);
+  border-radius: 999px;
+  background: rgba(255, 127, 143, 0.08);
+  color: var(--red);
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  touch-action: manipulation;
+}
+
+.detail-alert-dismiss:focus-visible {
+  outline: 2px solid var(--red);
+  outline-offset: 2px;
+}
+
 .detail-alert p {
   margin-top: 4px;
   color: var(--fg-dim);
@@ -924,10 +1554,28 @@ html[data-theme="light"] .nav-item.active {
 
 .detail-alert .alert-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px;
 }
 
+.detail-alert .approval-actions .control-btn {
+  min-height: 42px;
+}
+
+.detail-alert .approval-primary {
+  border-color: color-mix(in srgb, var(--blue) 68%, var(--line));
+  background: color-mix(in srgb, var(--blue) 20%, var(--bg-soft));
+  color: var(--blue);
+}
+
+.detail-alert #detail-control-status {
+  margin-top: 8px;
+  min-height: 16px;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
 .detail-controls {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -982,6 +1630,12 @@ html[data-theme="light"] .nav-item.active {
   font-weight: 800;
 }
 
+.control-btn.primary {
+  border-color: color-mix(in srgb, var(--blue) 72%, var(--line));
+  background: var(--blue);
+  color: #08101f;
+}
+
 .control-btn.warn {
   border-color: rgba(229, 181, 103, 0.55);
   color: var(--amber);
@@ -996,11 +1650,178 @@ html[data-theme="light"] .nav-item.active {
   min-height: 0;
   overflow: auto;
   overflow-x: hidden;
+  overflow-anchor: none;
   padding: 12px 12px 32px;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
 }
 
+#detail-composer[hidden],
+#detail-status[hidden],
+#detail-timeline-toggle[hidden] {
+  display: none !important;
+}
+
+.mobile-doc-state {
+  margin: 10px 0;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--bg-elev);
+  color: var(--fg-dim);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.mobile-doc-state.error {
+  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
+  color: var(--red);
+}
+
+.mobile-doc-viewer {
+  display: grid;
+  gap: 10px;
+}
+
+.mobile-doc-heading {
+  position: sticky;
+  top: -12px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 2px 10px;
+  background: color-mix(in srgb, var(--bg) 92%, transparent);
+  backdrop-filter: blur(10px);
+  color: var(--fg-dim);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.mobile-doc-heading strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--fg);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-doc-heading span {
+  flex: 0 0 auto;
+  padding: 4px 8px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--bg-soft);
+  color: var(--fg-dim);
+  font-weight: 800;
+}
+
+.mobile-doc-block {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 10px;
+  padding: 12px 12px 12px 0;
+  border: 1px solid var(--line);
+  border-left: 3px solid transparent;
+  border-radius: 10px;
+  background: var(--bg-elev);
+}
+
+.mobile-doc-block.active {
+  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
+  border-left-color: var(--blue);
+  background: color-mix(in srgb, var(--blue) 8%, var(--bg-elev));
+}
+
+.mobile-doc-lines {
+  padding-top: 2px;
+  color: var(--fg-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.45;
+  text-align: right;
+  user-select: none;
+}
+
+.mobile-doc-markdown {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 14px;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+
+.mobile-doc-markdown > :first-child { margin-top: 0; }
+.mobile-doc-markdown > :last-child { margin-bottom: 0; }
+
+.mobile-doc-markdown p,
+.mobile-doc-markdown ul,
+.mobile-doc-markdown ol,
+.mobile-doc-markdown blockquote,
+.mobile-doc-markdown pre,
+.mobile-doc-markdown table {
+  margin: 0 0 10px;
+}
+
+.mobile-doc-markdown h1,
+.mobile-doc-markdown h2,
+.mobile-doc-markdown h3,
+.mobile-doc-markdown h4 {
+  margin: 14px 0 8px;
+  color: var(--fg);
+  line-height: 1.25;
+}
+
+.mobile-doc-markdown h1 { font-size: 20px; }
+.mobile-doc-markdown h2 { font-size: 18px; }
+.mobile-doc-markdown h3 { font-size: 16px; }
+.mobile-doc-markdown h4 { font-size: 14px; color: var(--fg-dim); }
+
+.mobile-doc-markdown ul,
+.mobile-doc-markdown ol {
+  padding-left: 20px;
+}
+
+.mobile-doc-markdown li + li {
+  margin-top: 4px;
+}
+
+.mobile-doc-markdown pre {
+  max-width: 100%;
+  overflow: auto;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg-soft);
+}
+
+.mobile-doc-markdown code {
+  padding: 1px 4px;
+  border-radius: 5px;
+  background: var(--bg-soft);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+}
+
+.mobile-doc-markdown pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.mobile-doc-markdown a,
+.ctm-doc-review-link {
+  color: var(--blue);
+  text-decoration: none;
+}
+
+.mobile-doc-markdown a:focus-visible,
+.ctm-doc-review-link:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+}
+
 .detail-messages .msg,
 .detail-messages .review-msg,
 .detail-messages .turn,
@@ -1119,6 +1940,12 @@ html[data-theme="light"] .nav-item.active {
   box-shadow: 0 1px 0 rgba(113, 167, 255, 0.08) inset;
 }
 
+.detail-messages .prompt-turn-prompt.review-msg.subagent-prompt {
+  border-color: color-mix(in srgb, var(--amber) 48%, var(--line));
+  background: color-mix(in srgb, var(--amber) 12%, var(--bg-soft));
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--amber) 14%, transparent) inset;
+}
+
 .detail-messages .live-prompt-turn .prompt-turn-prompt.review-msg {
   border-color: color-mix(in srgb, var(--green) 38%, var(--line));
   background: color-mix(in srgb, var(--green) 11%, var(--bg-soft));
@@ -1135,7 +1962,8 @@ html[data-theme="light"] .nav-item.active {
   background: color-mix(in srgb, var(--green) 8%, var(--bg-soft));
 }
 
-.detail-messages .prompt-turn-live-title > span:first-child {
+.detail-messages .prompt-turn-live-title > span:first-child,
+.detail-messages .prompt-turn-live-title .live-terminal-kicker {
   color: var(--green);
   font-size: 11px;
   font-weight: 850;
@@ -1143,50 +1971,184 @@ html[data-theme="light"] .nav-item.active {
   text-transform: uppercase;
 }
 
-.detail-messages .prompt-turn-prompt .msg-header {
-  margin-bottom: 5px;
+.detail-messages .live-terminal-prompt-title {
+  gap: 6px;
 }
 
-.detail-messages .prompt-turn-header .prompt-turn-prompt,
-.detail-messages .prompt-turn-header .prompt-turn-prompt .msg-text,
-.detail-messages .prompt-turn-header .prompt-turn-prompt .msg-text * {
-  cursor: text;
-  user-select: text;
-  -webkit-user-select: text;
+.detail-messages .live-terminal-helper {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1.25;
 }
 
-.detail-messages .prompt-turn-header .prompt-turn-meta,
-.detail-messages .prompt-turn-header .prompt-turn-prompt .msg-header {
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
+.detail-messages .prompt-turn-live-title .live-terminal-prompt-text {
+  padding-top: 2px;
 }
 
-.detail-messages .prompt-turn-meta {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 4px;
-  min-height: 18px;
-  margin: 0;
-  grid-column: 2;
+.detail-messages .terminal-choice-title {
+  gap: 8px;
 }
 
-.detail-messages .prompt-turn:not(.setup-turn) .prompt-turn-meta {
-  display: flex;
+.terminal-choice-context {
+  margin: 1px 0 0;
+  color: var(--fg);
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 1.4;
 }
 
-.detail-messages .prompt-turn.setup-turn .prompt-turn-meta {
-  margin: 0;
-  justify-content: flex-end;
+.terminal-choice-context.muted {
+  color: var(--fg-dim);
+  font-weight: 600;
 }
 
-.detail-messages .prompt-turn-badge {
-  display: inline-flex;
-  align-items: center;
-  min-height: 18px;
-  padding: 1px 7px;
-  border: 1px solid var(--line);
+.terminal-choice-options {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.terminal-choice-button {
+  display: grid;
+  grid-template-columns: 32px minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  min-height: 44px;
+  padding: 7px 10px;
+  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--green) 12%, var(--bg-elev));
+  color: var(--fg);
+  text-align: left;
+  font: inherit;
+}
+
+.terminal-choice-button.selected {
+  border-color: color-mix(in srgb, var(--green) 72%, var(--line));
+  background: color-mix(in srgb, var(--green) 18%, var(--bg-elev));
+}
+
+.terminal-choice-button.checked {
+  border-color: color-mix(in srgb, var(--accent) 62%, var(--green));
+}
+
+.terminal-choice-button.pending,
+.terminal-choice-submit.pending {
+  border-color: color-mix(in srgb, var(--accent) 66%, var(--green));
+  background: color-mix(in srgb, var(--accent) 20%, var(--bg-elev));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+
+.terminal-choice-button:active {
+  transform: translateY(1px);
+}
+
+.terminal-choice-button:focus-visible {
+  outline: 2px solid var(--green);
+  outline-offset: 2px;
+}
+
+.terminal-choice-number {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--green) 24%, var(--bg-soft));
+  color: var(--green);
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.terminal-choice-label {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 15px;
+  font-weight: 850;
+  line-height: 1.2;
+}
+
+.terminal-choice-check {
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  margin-right: 7px;
+  border: 1px solid color-mix(in srgb, var(--green) 58%, var(--line));
+  border-radius: 5px;
+  color: var(--green);
+  font-size: 12px;
+  font-weight: 900;
+  vertical-align: -2px;
+}
+
+.terminal-choice-submit {
+  width: 100%;
+  min-height: 44px;
+  margin-top: 2px;
+  border: 1px solid color-mix(in srgb, var(--accent) 64%, var(--line));
+  border-radius: 10px;
+  background: var(--accent);
+  color: #111827;
+  font: inherit;
+  font-weight: 900;
+}
+
+.terminal-choice-submit:active {
+  transform: translateY(1px);
+}
+
+.detail-messages .prompt-turn-prompt .msg-header {
+  margin-bottom: 5px;
+}
+
+.detail-messages .prompt-turn-header .prompt-turn-prompt,
+.detail-messages .prompt-turn-header .prompt-turn-prompt .msg-text,
+.detail-messages .prompt-turn-header .prompt-turn-prompt .msg-text *,
+.detail-messages .prompt-turn-header .live-terminal-prompt-text,
+.detail-messages .prompt-turn-header .live-terminal-prompt-text * {
+  cursor: text;
+  user-select: text;
+  -webkit-user-select: text;
+  -webkit-touch-callout: default;
+}
+
+.detail-messages .prompt-turn-header .prompt-turn-meta,
+.detail-messages .prompt-turn-header .prompt-turn-prompt .msg-header {
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.detail-messages .prompt-turn-meta {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 4px;
+  min-height: 18px;
+  margin: 0;
+  grid-column: 2;
+}
+
+.detail-messages .prompt-turn:not(.setup-turn) .prompt-turn-meta {
+  display: flex;
+}
+
+.detail-messages .prompt-turn.setup-turn .prompt-turn-meta {
+  margin: 0;
+  justify-content: flex-end;
+}
+
+.detail-messages .prompt-turn-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 18px;
+  padding: 1px 7px;
+  border: 1px solid var(--line);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.035);
   color: var(--fg-muted);
@@ -1218,6 +2180,49 @@ html[data-theme="light"] .nav-item.active {
   color: var(--green);
 }
 
+.detail-messages .live-prompt-turn .live-terminal-submit-action {
+  min-height: 26px;
+  gap: 6px;
+  padding: 4px 10px 4px 7px;
+  border-color: color-mix(in srgb, var(--green) 62%, var(--line));
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--green) 23%, var(--bg-soft)), color-mix(in srgb, var(--green) 11%, var(--bg-elev)));
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--green) 12%, transparent) inset,
+    0 6px 16px color-mix(in srgb, var(--green) 13%, transparent);
+  font-size: 11px;
+  letter-spacing: 0.01em;
+}
+
+.detail-messages .live-terminal-submit-action .live-terminal-submit-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 17px;
+  height: 17px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--green) 28%, transparent);
+  color: color-mix(in srgb, var(--green) 88%, white);
+  font-size: 12px;
+  font-weight: 950;
+  line-height: 1;
+}
+
+.detail-messages .live-terminal-submit-action:disabled {
+  cursor: default;
+  opacity: 0.78;
+}
+
+.detail-messages .live-terminal-submit-action.sent {
+  border-color: color-mix(in srgb, var(--green) 78%, var(--line));
+  background: color-mix(in srgb, var(--green) 72%, white);
+  color: #111827;
+}
+
+.detail-messages .live-terminal-submit-action.sent .live-terminal-submit-icon {
+  background: rgba(17, 24, 39, 0.18);
+  color: #111827;
+}
+
 .detail-messages .prompt-turn-action:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
@@ -1281,6 +2286,11 @@ html[data-theme="light"] .nav-item.active {
   background: var(--bg-elev);
 }
 
+.detail-messages .review-msg.walle-error-msg {
+  background: color-mix(in srgb, var(--red) 8%, var(--bg-elev));
+  border-color: color-mix(in srgb, var(--red) 36%, var(--line));
+}
+
 .message-row.self {
   max-width: calc(100% - 28px);
   margin-left: 28px;
@@ -1317,6 +2327,106 @@ html[data-theme="light"] .nav-item.active {
   border-color: rgba(113, 167, 255, 0.38);
 }
 
+.detail-messages .mobile-final-summary-card,
+.message-row.mobile-final-summary-card {
+  max-width: 100%;
+  margin: 12px 0 14px;
+  padding: 13px 14px 14px;
+  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
+  border-left: 4px solid var(--green);
+  border-radius: 12px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--green) 10%, var(--bg-elev)) 0%, var(--bg-elev) 78%),
+    var(--bg-elev);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
+  cursor: text;
+}
+
+.detail-messages .prompt-turn.has-final-summary {
+  border-color: color-mix(in srgb, var(--green) 36%, var(--line));
+  border-left-color: var(--green);
+}
+
+.detail-messages .prompt-turn-response > .mobile-final-summary-card {
+  margin-top: 10px;
+}
+
+.detail-messages .mobile-final-summary-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 10px;
+  text-transform: none;
+}
+
+.mobile-final-summary-title {
+  display: inline-grid;
+  gap: 3px;
+  min-width: 0;
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 850;
+  line-height: 1.2;
+}
+
+.mobile-final-summary-kicker {
+  width: fit-content;
+  padding: 2px 7px;
+  border: 1px solid color-mix(in srgb, var(--green) 48%, var(--line));
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--green) 14%, var(--bg-soft));
+  color: var(--green);
+  font-size: 10px;
+  font-weight: 850;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.mobile-final-summary-meta {
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 5px;
+  max-width: 46%;
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-weight: 750;
+  line-height: 1.2;
+}
+
+.detail-messages .mobile-final-summary-card .mobile-final-summary-body,
+.detail-messages .review-msg.mobile-final-summary-card .msg-text,
+.message-row.mobile-final-summary-card .message-body {
+  display: block;
+  max-height: none;
+  color: var(--fg);
+  line-height: 1.58;
+  overflow: visible;
+  mask-image: none;
+  -webkit-mask-image: none;
+  user-select: text;
+  -webkit-user-select: text;
+  -webkit-touch-callout: default;
+}
+
+.detail-messages .mobile-final-summary-card .msg-text h1,
+.detail-messages .mobile-final-summary-card .msg-text h2,
+.detail-messages .mobile-final-summary-card .msg-text h3,
+.detail-messages .mobile-final-summary-card .message-body h1,
+.detail-messages .mobile-final-summary-card .message-body h2,
+.detail-messages .mobile-final-summary-card .message-body h3 {
+  margin-top: 12px;
+}
+
+.detail-messages .mobile-final-summary-card .msg-text ul,
+.detail-messages .mobile-final-summary-card .msg-text ol,
+.detail-messages .mobile-final-summary-card .message-body ul,
+.detail-messages .mobile-final-summary-card .message-body ol {
+  margin-bottom: 10px;
+}
+
 .live-pill {
   display: inline-flex;
   align-items: center;
@@ -1460,6 +2570,8 @@ html[data-theme="light"] .nav-item.active {
 }
 
 .detail-messages .review-msg.user .msg-role { color: var(--blue); }
+.detail-messages .review-msg.subagent-prompt .msg-role { color: var(--amber); }
+.detail-messages .review-msg.walle-error-msg .msg-role { color: var(--red); }
 
 .detail-messages .msg-time {
   color: var(--fg-muted);
@@ -1499,6 +2611,76 @@ html[data-theme="light"] .nav-item.active {
   word-break: normal;
 }
 
+.detail-messages .msg-text > img,
+.detail-messages .msg-text :where(p, li, figure) > img,
+.message-body > img,
+.message-body :where(p, li, figure) > img,
+.mobile-doc-markdown > img,
+.mobile-doc-markdown :where(p, li, figure) > img {
+  box-sizing: border-box;
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  max-height: min(62vh, 620px);
+  object-fit: contain;
+  margin: 10px 0;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--bg);
+}
+
+.detail-messages .msg-attachment-strip,
+.message-row .msg-attachment-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.detail-messages .msg-image-attachment,
+.message-row .msg-image-attachment {
+  display: inline-grid;
+  grid-template-columns: 86px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  width: min(100%, 300px);
+  min-height: 72px;
+  padding: 6px 10px 6px 6px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--blue) 7%, var(--bg-elev));
+  color: var(--fg);
+  text-decoration: none;
+}
+
+.detail-messages .msg-image-attachment:active,
+.message-row .msg-image-attachment:active {
+  transform: translateY(1px);
+}
+
+.detail-messages .msg-image-attachment img,
+.message-row .msg-image-attachment img {
+  width: 86px;
+  height: 64px;
+  border: 1px solid var(--line-strong);
+  border-radius: 9px;
+  object-fit: cover;
+  background: var(--bg);
+}
+
+.detail-messages .msg-image-attachment span,
+.message-row .msg-image-attachment span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--blue);
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .detail-messages .msg-text > :first-child { margin-top: 0; }
 .detail-messages .msg-text > :last-child { margin-bottom: 0; }
 .message-body > :first-child { margin-top: 0; }
@@ -1824,10 +3006,12 @@ html[data-theme="light"] .nav-item.active {
   line-height: 1;
 }
 
-/* Skill-body and local-cmd collapsed rows */
+/* Skill-body and local-cmd collapsed rows (+ structured-capture cards) */
 .detail-messages .review-msg.skill-body,
 .detail-messages .review-msg.local-cmd,
 .detail-messages .review-msg.tool-result,
+.detail-messages .review-msg.tool-card,
+.detail-messages .review-msg.thinking-block,
 .detail-messages .review-msg.summary {
   cursor: pointer;
   background: var(--bg-soft);
@@ -1836,6 +3020,8 @@ html[data-theme="light"] .nav-item.active {
 .detail-messages .review-msg.skill-body .msg-text,
 .detail-messages .review-msg.local-cmd .msg-text,
 .detail-messages .review-msg.tool-result .msg-text,
+.detail-messages .review-msg.tool-card .msg-text,
+.detail-messages .review-msg.thinking-block .msg-text,
 .detail-messages .review-msg.summary .msg-text {
   display: none;
   margin-top: 8px;
@@ -1844,6 +3030,8 @@ html[data-theme="light"] .nav-item.active {
 .detail-messages .review-msg.skill-body.expanded .msg-text,
 .detail-messages .review-msg.local-cmd.expanded .msg-text,
 .detail-messages .review-msg.tool-result.expanded .msg-text,
+.detail-messages .review-msg.tool-card.expanded .msg-text,
+.detail-messages .review-msg.thinking-block.expanded .msg-text,
 .detail-messages .review-msg.summary.expanded .msg-text {
   display: block;
 }
@@ -1851,11 +3039,25 @@ html[data-theme="light"] .nav-item.active {
 .detail-messages .review-msg.skill-body .thought-chevron,
 .detail-messages .review-msg.local-cmd .thought-chevron,
 .detail-messages .review-msg.tool-result .thought-chevron,
+.detail-messages .review-msg.tool-card .thought-chevron,
+.detail-messages .review-msg.thinking-block .thought-chevron,
 .detail-messages .review-msg.summary .thought-chevron {
   display: inline-block;
   transition: transform 0.15s ease;
 }
 
+/* Structured-capture extras on mobile: compact divider + hide the hover-only
+   raw-JSON inspector (no hover on touch). */
+.detail-messages .compact-divider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 10px 0;
+}
+.detail-messages .compact-divider-line { flex: 1; height: 1px; background: var(--border); }
+.detail-messages .compact-divider-label { font-size: 10px; color: var(--fg-dim); text-transform: uppercase; }
+.detail-messages .msg-raw-btn { display: none; }
+
 .detail-messages .review-msg.skill-body.expanded .thought-chevron,
 .detail-messages .review-msg.local-cmd.expanded .thought-chevron,
 .detail-messages .review-msg.tool-result.expanded .thought-chevron,
@@ -1927,6 +3129,17 @@ html[data-theme="light"] .nav-item.active {
   box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.18);
 }
 
+.composer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 12px;
+  right: 12px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 36%, var(--line)), transparent);
+  opacity: 0.65;
+}
+
 .composer.has-model-picker {
   grid-template-columns: minmax(0, 1fr) 58px 52px;
 }
@@ -2036,6 +3249,7 @@ html[data-theme="light"] .nav-item.active {
   user-select: text;
   -webkit-user-select: text;
   overscroll-behavior: contain;
+  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
 }
 
 .composer-editor:empty::before {
@@ -2237,18 +3451,80 @@ html[data-theme="light"] .nav-item.active {
   color: var(--red);
 }
 
-.send-btn {
-  align-self: start;
-  width: 52px;
-  min-width: 52px;
-  height: 52px;
-  min-height: 52px;
-  padding: 0;
-  font-size: 18px;
+.remote-submission-row {
+  margin: 12px 0;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--panel-2) 82%, transparent);
+  color: var(--fg);
+}
+
+.remote-submission-row.pending {
+  border-color: color-mix(in srgb, var(--blue) 42%, var(--border));
+}
+
+.remote-submission-row.attention {
+  border-color: color-mix(in srgb, var(--red) 52%, var(--border));
+  background: color-mix(in srgb, var(--red) 8%, var(--panel-2));
+}
+
+.remote-submission-head {
+  margin-bottom: 4px;
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.remote-submission-message {
+  color: var(--fg);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.remote-submission-preview {
+  margin-top: 8px;
+  color: var(--fg-muted);
+  font-size: 12px;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.remote-submission-repeat {
+  margin-top: 8px;
+  color: var(--fg-soft);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.send-btn {
+  align-self: start;
+  display: grid;
+  place-items: center;
+  width: 52px;
+  min-width: 52px;
+  height: 52px;
+  min-height: 52px;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
+  font-size: 18px;
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent),
+    0 8px 20px rgba(0, 0, 0, 0.2);
   touch-action: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
+  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
+}
+
+.send-btn:active {
+  transform: translateY(1px) scale(0.98);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent),
+    0 4px 12px rgba(0, 0, 0, 0.18);
 }
 
 .send-btn:disabled {
@@ -2404,6 +3680,55 @@ html[data-theme="light"] .nav-item.active {
   color: var(--red);
 }
 
+.send-menu-model {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  min-height: 54px;
+  color: var(--blue);
+  text-align: left;
+}
+
+.send-menu-model[hidden] {
+  display: none;
+}
+
+.send-menu-queue {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  min-height: 54px;
+  color: var(--blue);
+  text-align: left;
+}
+
+.send-menu-item-kicker,
+.send-menu-item-main {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.send-menu-item-kicker {
+  color: var(--fg-dim);
+  font-size: 10px;
+  font-weight: 950;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.send-menu-item-main {
+  color: var(--blue);
+  font-size: 14px;
+  font-weight: 950;
+}
+
 .send-menu-item[data-send-menu-attach] {
   color: var(--blue);
 }
@@ -2416,6 +3741,13 @@ html[data-theme="light"] .nav-item.active {
   color: var(--green);
 }
 
+.send-menu-item[data-send-menu-queue] {
+  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--blue) 14%, transparent), transparent 72%),
+    color-mix(in srgb, var(--bg-soft) 88%, transparent);
+}
+
 .send-menu-item + .send-menu-item {
   margin-top: 0;
 }
@@ -2650,6 +3982,11 @@ html[data-theme="light"] .nav-item.active {
   min-width: 0;
 }
 
+.more-row > div,
+.more-row > span {
+  min-width: 0;
+}
+
 .more-action-row {
   align-items: center;
   gap: 14px;
@@ -2662,6 +3999,10 @@ html[data-theme="light"] .nav-item.active {
   padding-inline: 16px;
 }
 
+.more-action-card .row-action {
+  min-height: 44px;
+}
+
 .restart-row {
   grid-template-columns: 1fr;
   padding-block: 16px;
@@ -2796,6 +4137,124 @@ html[data-theme="light"] .nav-item.active {
   white-space: nowrap;
 }
 
+.more-shell {
+  display: grid;
+  gap: 12px;
+  padding: 12px 16px 24px;
+}
+
+.more-hero-card,
+.more-section-card,
+.more-action-card {
+  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--blue));
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--bg-elev) 92%, var(--bg));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent);
+}
+
+.more-hero-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: start;
+  padding: 16px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, transparent), transparent 46%),
+    color-mix(in srgb, var(--bg-elev) 94%, var(--bg));
+}
+
+.more-hero-copy {
+  min-width: 0;
+}
+
+.more-kicker {
+  display: block;
+  color: var(--fg-muted);
+  font-size: 10px;
+  font-weight: 900;
+  line-height: 1.1;
+  text-transform: uppercase;
+}
+
+.more-hero-card h2,
+.more-section-card h3 {
+  margin-top: 4px;
+  color: var(--fg);
+}
+
+.more-hero-card p,
+.more-section-copy {
+  margin-top: 6px;
+  color: var(--fg-dim);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.more-scope-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 12px;
+}
+
+.more-section-card {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+}
+
+.more-section-head,
+.more-action-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.more-section-head > span,
+.more-action-card > span:first-child {
+  min-width: 0;
+}
+
+.more-action-card {
+  width: 100%;
+  min-height: 72px;
+  padding: 14px;
+  color: inherit;
+  text-align: left;
+  text-decoration: none;
+}
+
+button.more-action-card {
+  cursor: pointer;
+}
+
+.more-action-card:active {
+  background: color-mix(in srgb, var(--blue) 8%, var(--bg-elev));
+}
+
+.more-action-card.inline-danger {
+  border-color: color-mix(in srgb, var(--red) 24%, var(--line));
+  background: color-mix(in srgb, var(--bg-elev) 90%, var(--red) 4%);
+}
+
+.more-danger-card {
+  border-color: color-mix(in srgb, var(--red) 22%, var(--line));
+}
+
+.more-section-card .restart-notice {
+  margin-top: 2px;
+}
+
+.more-section-card .push-main {
+  display: grid;
+  gap: 10px;
+}
+
+.more-section-card .push-actions {
+  margin-top: 0;
+}
+
 .switch-row {
   display: flex;
   gap: 10px;
@@ -2834,7 +4293,9 @@ html[data-theme="light"] .nav-item.active {
 
 #view-walle.mobile-view {
   min-height: calc(100dvh - var(--nav-h) - 72px - env(safe-area-inset-top));
+  height: calc(100dvh - var(--nav-h) - 72px - env(safe-area-inset-top));
   padding: 0;
+  overflow: hidden;
 }
 
 #view-walle.mobile-view.active {
@@ -2845,27 +4306,36 @@ html[data-theme="light"] .nav-item.active {
 #walle-content {
   flex: 1;
   min-height: 0;
+  overflow: hidden;
 }
 
 .walle-chat-shell {
   display: flex;
   flex: 1;
+  height: 100%;
   min-height: 0;
   flex-direction: column;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at top right, color-mix(in srgb, var(--blue) 10%, transparent), transparent 34%),
+    var(--bg);
 }
 
 .walle-chat-context {
-  position: sticky;
-  top: calc(72px + env(safe-area-inset-top));
+  position: relative;
+  top: auto;
   z-index: 12;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 10px;
-  padding: 10px 12px;
-  border-top: 1px solid var(--line);
-  border-bottom: 1px solid var(--line);
-  background: color-mix(in srgb, var(--bg) 94%, transparent);
-  backdrop-filter: blur(12px);
+  margin: 12px 12px 0;
+  padding: 13px;
+  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
+  border-radius: 16px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent 54%),
+    color-mix(in srgb, var(--bg-elev) 94%, var(--bg));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
 }
 
 .walle-context-main,
@@ -2877,7 +4347,15 @@ html[data-theme="light"] .nav-item.active {
 }
 
 .walle-context-actions {
-  justify-content: space-between;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.walle-context-actions .row-action {
+  border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--line));
+  background: color-mix(in srgb, var(--blue) 14%, var(--bg-soft));
+  color: var(--fg);
+  text-decoration: none;
 }
 
 .walle-avatar {
@@ -2943,70 +4421,309 @@ html[data-theme="light"] .nav-item.active {
 
 .walle-chat-messages {
   flex: 1;
-  min-height: 240px;
-  padding-bottom: 14px;
-}
-
-.walle-chat-composer {
-  position: sticky;
-  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
-}
-
-.walle-composer-tools {
-  display: flex;
-  justify-content: flex-end;
-  gap: 2px;
+  min-height: 0;
+  padding: 12px 12px 18px;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
-.walle-chat-composer .composer-clear {
-  top: 45px;
+.mobile-health-card {
+  margin: 10px 12px 0;
+  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--bg-elev) 88%, var(--blue) 6%);
+  overflow: hidden;
 }
 
-.walle-tool-btn {
-  display: inline-grid;
-  place-items: center;
-  width: 44px;
-  min-width: 44px;
-  min-height: 44px;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--fg-dim);
-  font-size: 15px;
+.mobile-health-card.error {
+  border-color: color-mix(in srgb, var(--red) 44%, var(--line));
+  background: color-mix(in srgb, var(--bg-elev) 90%, var(--red) 7%);
 }
 
-.walle-tool-btn:active,
-.walle-tool-btn:focus-visible {
-  background: var(--bg-soft);
-  color: var(--blue);
+.mobile-health-card.warning {
+  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
+  background: color-mix(in srgb, var(--bg-elev) 90%, var(--amber) 7%);
 }
 
-.walle-activity-row {
+.mobile-health-header {
   display: grid;
-  grid-template-columns: 12px minmax(0, 1fr);
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 12px;
-  padding: 9px 11px;
-  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--blue) 7%, var(--bg-elev));
-  color: var(--fg-dim);
-  font-size: 12px;
-  font-weight: 800;
+  grid-template-columns: 10px minmax(0, 1fr);
+  gap: 10px;
+  padding: 12px;
 }
 
-.walle-activity-dot {
+.mobile-health-dot {
   width: 8px;
   height: 8px;
+  margin-top: 6px;
   border-radius: 999px;
-  background: var(--blue);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
+  background: var(--green);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent);
 }
 
-.walle-activity-copy {
-  display: flex;
-  min-width: 0;
-  align-items: center;
+.mobile-health-card.error .mobile-health-dot {
+  background: var(--red);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 14%, transparent);
+}
+
+.mobile-health-card.warning .mobile-health-dot {
+  background: var(--amber);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 16%, transparent);
+}
+
+.mobile-health-kicker {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.mobile-health-copy h3 {
+  margin: 2px 0 0;
+  color: var(--fg);
+  font-size: 14px;
+  line-height: 1.25;
+}
+
+.mobile-health-copy p {
+  margin: 4px 0 0;
+  color: var(--fg-dim);
+  font-size: 12px;
+  line-height: 1.42;
+}
+
+.mobile-health-meta,
+.mobile-health-current-meta,
+.mobile-health-more {
+  margin-top: 6px;
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.mobile-health-current {
+  margin: 0 12px 12px;
+  padding: 10px;
+  border: 1px solid color-mix(in srgb, var(--red) 32%, var(--line));
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--bg) 62%, transparent);
+}
+
+.mobile-health-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 8px;
+  margin-top: 10px;
+  align-items: center;
+}
+
+.mobile-health-btn,
+.mobile-health-icon-btn {
+  min-height: 40px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg-soft);
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+.mobile-health-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 12px;
+}
+
+.mobile-health-btn.primary {
+  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
+  background: var(--blue);
+  color: #07111f;
+}
+
+.mobile-health-icon-btn {
+  width: 40px;
+  min-width: 40px;
+  padding: 0;
+  color: var(--fg-dim);
+  font-size: 20px;
+}
+
+.mobile-health-test {
+  margin: 0 12px 12px;
+  padding: 8px 10px;
+  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
+  border-radius: 8px;
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.mobile-health-test.error {
+  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
+}
+
+.mobile-health-group {
+  border-top: 1px solid var(--line);
+}
+
+.mobile-health-group summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 12px;
+  color: var(--fg);
+  font-size: 12px;
+  font-weight: 900;
+  list-style: none;
+}
+
+.mobile-health-group summary::-webkit-details-marker {
+  display: none;
+}
+
+.mobile-health-group summary span {
+  min-width: 0;
+}
+
+.mobile-health-group summary strong {
+  display: inline-grid;
+  min-width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--fg-dim);
+  font-size: 11px;
+}
+
+.mobile-health-group-body {
+  display: grid;
+  gap: 6px;
+  padding: 0 12px 12px;
+}
+
+.mobile-health-row {
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: start;
+  color: var(--fg-dim);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.mobile-health-row-dot {
+  width: 5px;
+  height: 5px;
+  margin-top: 6px;
+  border-radius: 999px;
+  background: var(--fg-muted);
+}
+
+.mobile-health-row-copy {
+  overflow-wrap: anywhere;
+}
+
+.mobile-health-row-action {
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line));
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--blue) 14%, var(--bg-soft));
+  color: var(--fg);
+  font-size: 11px;
+  font-weight: 900;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+a.mobile-health-row-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-health-footer {
+  padding: 10px 12px 12px;
+  border-top: 1px solid var(--line);
+}
+
+.mobile-health-link {
+  color: var(--blue);
+  font-size: 12px;
+  font-weight: 900;
+  text-decoration: none;
+}
+
+.walle-chat-composer {
+  position: relative;
+  bottom: auto;
+  margin: 0;
+  border-top-color: color-mix(in srgb, var(--blue) 24%, var(--line));
+  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.24);
+}
+
+.walle-composer-tools {
+  display: flex;
+  justify-content: flex-end;
+  gap: 2px;
+}
+
+.walle-chat-composer .composer-clear {
+  top: 45px;
+}
+
+.walle-tool-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 44px;
+  min-width: 44px;
+  min-height: 44px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fg-dim);
+  font-size: 15px;
+}
+
+.walle-tool-btn:active,
+.walle-tool-btn:focus-visible {
+  background: var(--bg-soft);
+  color: var(--blue);
+}
+
+.walle-activity-row {
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 12px;
+  padding: 9px 11px;
+  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--blue) 7%, var(--bg-elev));
+  color: var(--fg-dim);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.walle-activity-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--blue);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 16%, transparent);
+}
+
+.walle-activity-copy {
+  display: flex;
+  min-width: 0;
+  align-items: center;
   justify-content: space-between;
   gap: 8px;
 }
@@ -3020,15 +4737,31 @@ html[data-theme="light"] .nav-item.active {
 
 .walle-empty-chat {
   display: grid;
-  gap: 6px;
-  padding: 42px 20px;
+  justify-items: center;
+  gap: 10px;
+  max-width: 380px;
+  margin: 0 auto;
+  padding: 56px 22px;
   text-align: center;
 }
 
+.walle-empty-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--blue) 12%, var(--bg-soft));
+  color: var(--blue);
+  font-size: 16px;
+}
+
 .walle-empty-chat h3 {
   margin: 0;
   color: var(--fg);
-  font-size: 18px;
+  font-size: 19px;
+  line-height: 1.2;
 }
 
 .walle-empty-chat p {
@@ -3038,6 +4771,17 @@ html[data-theme="light"] .nav-item.active {
   line-height: 1.4;
 }
 
+.walle-empty-actions {
+  width: min(100%, 240px);
+  padding-top: 8px;
+}
+
+.walle-empty-note {
+  padding: 0 8px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+
 .modal-backdrop {
   position: fixed;
   inset: 0;
@@ -3047,26 +4791,153 @@ html[data-theme="light"] .nav-item.active {
   background: rgba(0, 0, 0, 0.54);
 }
 
-#stepup-sheet {
-  z-index: 70;
+#stepup-sheet {
+  z-index: 70;
+}
+
+.modal-backdrop[hidden] {
+  display: none;
+}
+
+.stepup-sheet {
+  width: 100%;
+  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--line);
+  border-radius: 8px 8px 0 0;
+  background: var(--bg-elev);
+}
+
+.stepup-sheet p {
+  margin-top: 8px;
+  color: var(--fg-dim);
+  line-height: 1.45;
+}
+
+.worktree-finish-sheet {
+  display: grid;
+  gap: 12px;
+  max-height: min(86vh, 720px);
+  overflow-y: auto;
+}
+
+.worktree-finish-card {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg) 72%, transparent);
+}
+
+.worktree-finish-card > div {
+  display: grid;
+  grid-template-columns: 74px minmax(0, 1fr);
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+}
+
+.worktree-finish-card span,
+.worktree-finish-plan strong {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.worktree-finish-card strong {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 13px;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.worktree-finish-action-group,
+.worktree-finish-session-picker {
+  display: grid;
+  gap: 8px;
+}
+
+.worktree-finish-action-group > span,
+.worktree-finish-session-picker > span {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.worktree-finish-action-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.worktree-finish-action-options button {
+  min-height: 44px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
+  color: var(--fg-dim);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 900;
+  letter-spacing: 0;
+}
+
+.worktree-finish-action-options button[aria-checked="true"] {
+  border-color: rgba(113, 167, 255, 0.82);
+  background: rgba(113, 167, 255, 0.16);
+  color: var(--fg);
+  box-shadow: inset 0 0 0 1px rgba(113, 167, 255, 0.22);
+}
+
+.worktree-finish-action-options button:disabled {
+  opacity: 0.55;
+}
+
+.worktree-finish-session-picker select {
+  width: 100%;
+  min-height: 46px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  font: inherit;
+  font-size: 14px;
+}
+
+.worktree-finish-plan {
+  padding: 12px;
+  border: 1px solid rgba(113, 167, 255, 0.28);
+  border-radius: 8px;
+  background: rgba(113, 167, 255, 0.08);
 }
 
-.modal-backdrop[hidden] {
-  display: none;
+.worktree-finish-plan ol {
+  display: grid;
+  gap: 6px;
+  margin: 8px 0 0;
+  padding-left: 18px;
 }
 
-.stepup-sheet {
-  width: 100%;
-  padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
-  border-top: 1px solid var(--line);
-  border-radius: 8px 8px 0 0;
-  background: var(--bg-elev);
+.worktree-finish-plan li {
+  color: var(--fg);
+  font-size: 13px;
+  line-height: 1.35;
 }
 
-.stepup-sheet p {
-  margin-top: 8px;
-  color: var(--fg-dim);
-  line-height: 1.45;
+.worktree-finish-error {
+  margin-top: 0 !important;
+  color: #ff7a9a !important;
+  font-weight: 800;
 }
 
 .model-picker-sheet {
@@ -3129,79 +5000,340 @@ html[data-theme="light"] .nav-item.active {
   -webkit-overflow-scrolling: touch;
 }
 
-.model-picker-empty {
-  padding: 18px 4px;
-  color: var(--fg-dim);
-  font-size: 13px;
-  line-height: 1.4;
+.model-picker-empty {
+  padding: 18px 4px;
+  color: var(--fg-dim);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.model-picker-option {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  min-height: 60px;
+  padding: 10px 12px;
+  border: 1px solid color-mix(in srgb, var(--fg-muted) 18%, var(--line));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
+  color: var(--fg);
+  text-align: left;
+}
+
+.model-picker-option[aria-selected="true"] {
+  border-color: color-mix(in srgb, var(--blue) 70%, var(--line-strong));
+  background:
+    linear-gradient(90deg, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%),
+    color-mix(in srgb, var(--bg-soft) 92%, var(--blue));
+}
+
+.model-picker-option:active,
+.model-picker-option:focus-visible {
+  outline: none;
+  border-color: var(--blue);
+  background: color-mix(in srgb, var(--blue) 16%, var(--bg-soft));
+}
+
+.model-picker-option-main {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.model-picker-option-title,
+.model-picker-option-meta {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-picker-option-title {
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 950;
+}
+
+.model-picker-option-meta {
+  color: var(--fg-dim);
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.model-picker-option-check {
+  display: grid;
+  place-items: center;
+  min-width: 28px;
+  height: 28px;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  color: var(--blue);
+  font-size: 14px;
+  font-weight: 950;
+}
+
+.queue-builder-backdrop {
+  justify-content: center;
+}
+
+.mobile-queue-builder-sheet {
+  width: 100%;
+  max-height: min(88vh, 760px);
+  display: grid;
+  grid-template-rows: auto auto auto minmax(120px, 1fr) auto auto;
+  gap: 12px;
+  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--line);
+  border-radius: 18px 18px 0 0;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--green) 8%, transparent), transparent 30%),
+    var(--bg-elev);
+  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.38);
+}
+
+.queue-builder-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 44px;
+  gap: 12px;
+  align-items: start;
+}
+
+.queue-builder-head h2,
+.queue-builder-head p {
+  margin: 0;
+}
+
+.sheet-kicker {
+  margin-bottom: 4px !important;
+  color: var(--green);
+  font-size: 11px;
+  font-weight: 950;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.queue-builder-head h2 {
+  color: var(--fg);
+  font-size: 18px;
+  font-weight: 950;
+}
+
+.queue-builder-head p:not(.sheet-kicker) {
+  margin-top: 4px;
+  color: var(--fg-dim);
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+.queue-builder-toolbar {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.queue-builder-chip {
+  min-height: 42px;
+  padding: 9px 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
+  color: var(--fg);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.queue-builder-chip[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--green) 60%, var(--line));
+  background: color-mix(in srgb, var(--green) 14%, var(--bg-soft));
+  color: var(--green);
+}
+
+.queue-builder-chip.danger {
+  color: var(--red);
+}
+
+.queue-builder-status {
+  min-height: 18px;
+  color: var(--fg-dim);
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1.35;
+}
+
+.queue-builder-status.ok {
+  color: var(--green);
+}
+
+.queue-builder-status.error {
+  color: var(--red);
+}
+
+.mobile-queue-list {
+  display: grid;
+  align-content: start;
+  gap: 8px;
+  min-height: 120px;
+  overflow-y: auto;
+  padding: 2px 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-queue-empty,
+.mobile-queue-loading {
+  padding: 18px 4px;
+  color: var(--fg-dim);
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.mobile-queue-item {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid color-mix(in srgb, var(--fg-muted) 18%, var(--line));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
+}
+
+.mobile-queue-item.is-sent {
+  opacity: 0.62;
+}
+
+.mobile-queue-item.is-collapsed {
+  gap: 0;
+  padding-block: 10px;
+}
+
+.mobile-queue-item-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: start;
+}
+
+.mobile-queue-item-title {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 14px;
+  font-weight: 950;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mobile-queue-item-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  color: var(--fg-dim);
+  font-size: 11px;
+  font-weight: 850;
+}
+
+.mobile-queue-status-pill,
+.mobile-queue-attachment-pill {
+  padding: 2px 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--bg) 65%, transparent);
+}
+
+.mobile-queue-text {
+  display: -webkit-box;
+  margin: 0;
+  color: var(--fg);
+  font-size: 13px;
+  line-height: 1.38;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  white-space: pre-wrap;
+}
+
+.mobile-queue-edit {
+  display: grid;
+  gap: 8px;
+}
+
+.mobile-queue-edit textarea {
+  min-height: 118px;
+  resize: vertical;
+}
+
+.mobile-queue-item-actions {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.mobile-queue-edit-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
 }
 
-.model-picker-option {
-  width: 100%;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: center;
-  min-height: 60px;
-  padding: 10px 12px;
-  border: 1px solid color-mix(in srgb, var(--fg-muted) 18%, var(--line));
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--bg-soft) 88%, transparent);
-  color: var(--fg);
-  text-align: left;
+.mobile-queue-item-actions button,
+.mobile-queue-edit-actions button {
+  min-height: 38px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
+  color: var(--fg-dim);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 900;
 }
 
-.model-picker-option[aria-selected="true"] {
-  border-color: color-mix(in srgb, var(--blue) 70%, var(--line-strong));
-  background:
-    linear-gradient(90deg, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%),
-    color-mix(in srgb, var(--bg-soft) 92%, var(--blue));
+.mobile-queue-item-actions button[data-queue-action="remove"] {
+  color: var(--red);
 }
 
-.model-picker-option:active,
-.model-picker-option:focus-visible {
-  outline: none;
-  border-color: var(--blue);
-  background: color-mix(in srgb, var(--blue) 16%, var(--bg-soft));
+.mobile-queue-item-actions button:disabled {
+  opacity: 0.45;
 }
 
-.model-picker-option-main {
+.queue-builder-add-form {
   display: grid;
-  gap: 3px;
-  min-width: 0;
+  gap: 8px;
 }
 
-.model-picker-option-title,
-.model-picker-option-meta {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.queue-builder-add-form label {
+  color: var(--fg-muted);
+  font-size: 11px;
+  font-weight: 950;
+  letter-spacing: 0;
+  text-transform: uppercase;
 }
 
-.model-picker-option-title {
+.queue-builder-add-form textarea,
+.mobile-queue-edit textarea {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--bg);
   color: var(--fg);
+  font: inherit;
   font-size: 14px;
-  font-weight: 950;
+  line-height: 1.35;
 }
 
-.model-picker-option-meta {
-  color: var(--fg-dim);
-  font-size: 12px;
-  font-weight: 750;
+.queue-builder-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
 
-.model-picker-option-check {
-  display: grid;
-  place-items: center;
-  min-width: 28px;
-  height: 28px;
-  border: 1px solid var(--line-strong);
-  border-radius: 999px;
-  color: var(--blue);
-  font-size: 14px;
-  font-weight: 950;
+@media (min-width: 700px) and (min-height: 700px) {
+  .mobile-queue-builder-sheet {
+    max-width: 720px;
+    border-radius: 20px 20px 0 0;
+  }
 }
 
 .sheet-actions {
@@ -3300,43 +5432,558 @@ html[data-theme="light"] .nav-item.active {
   color: var(--red);
 }
 
-@media (min-width: 720px) {
+@media (min-width: 720px) and (max-width: 899.98px) {
   .mobile-app {
-    max-width: 520px;
+    max-width: min(680px, 100vw);
     margin: 0 auto;
     border-left: 1px solid var(--line);
     border-right: 1px solid var(--line);
   }
 
-  .bottom-nav,
   .app-topbar,
-  .detail-topbar {
-    left: 50%;
+  .app-main,
+  .bottom-nav,
+  .status-summary {
+    left: max(0px, calc((100vw - 680px) / 2));
     right: auto;
-    width: 520px;
-    transform: translateX(-50%);
+    width: min(680px, 100vw);
+    transform: none;
+  }
+
+  .app-topbar,
+  .app-main {
+    border-left: 1px solid var(--line);
+    border-right: 1px solid var(--line);
+  }
+
+  .status-summary {
+    gap: 10px;
+  }
+
+  .session-row,
+  .result-row,
+  .device-row,
+  .walle-row,
+  .more-row {
+    padding-inline: 20px;
+  }
+
+  .section-block,
+  .home-search,
+  .worktree-summary,
+  .view-heading {
+    padding-inline: 20px;
   }
 
   .detail-view {
     left: 50%;
     right: auto;
-    width: 520px;
+    width: min(680px, 100vw);
     transform: translateX(-50%);
     border-left: 1px solid var(--line);
     border-right: 1px solid var(--line);
   }
 
+  .detail-messages {
+    padding-inline: 18px;
+  }
+
   .modal-backdrop {
     justify-content: center;
   }
 
-  .stepup-sheet {
-    width: 520px;
+  .stepup-sheet,
+  .model-picker-sheet,
+  .worktree-finish-sheet {
+    width: min(640px, calc(100vw - 32px));
   }
 
   .model-picker-sheet {
-    width: 520px;
     border-left: 1px solid var(--line);
     border-right: 1px solid var(--line);
   }
 }
+
+@media (min-width: 900px) and (min-height: 650px) {
+  :root {
+    --tablet-list-w: clamp(372px, 37vw, 468px);
+    --tablet-single-w: min(1240px, calc(100vw - 32px));
+    --tablet-topbar-h: 72px;
+  }
+
+  html {
+    height: 100%;
+    overflow: hidden;
+    background:
+      linear-gradient(90deg, var(--bg) 0, var(--bg) var(--tablet-list-w), color-mix(in srgb, var(--bg-elev) 72%, var(--bg)) var(--tablet-list-w), var(--bg) 100%);
+  }
+
+  html:not(.detail-open) {
+    background: var(--bg);
+  }
+
+  body.mobile-app {
+    width: 100%;
+    max-width: none;
+    min-height: 100vh;
+    min-height: 100dvh;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+  }
+
+  body.detail-sheet-open {
+    position: static !important;
+    top: auto !important;
+    left: auto !important;
+    right: auto !important;
+    width: 100% !important;
+  }
+
+  body.detail-sheet-open .app-main,
+  body.detail-sheet-open .bottom-nav,
+  body.detail-sheet-open .app-topbar {
+    pointer-events: auto;
+    user-select: auto;
+  }
+
+  .app-topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: auto;
+    width: var(--tablet-list-w);
+    min-height: calc(var(--tablet-topbar-h) + env(safe-area-inset-top));
+    padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
+    border-right: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+    transform: none;
+  }
+
+  body.mobile-app:not(.detail-open) .app-topbar {
+    left: max(0px, calc((100vw - var(--tablet-single-w)) / 2));
+    width: var(--tablet-single-w);
+    border-left: 1px solid var(--line);
+    transform: none;
+  }
+
+  .app-main {
+    position: fixed;
+    top: calc(var(--tablet-topbar-h) + var(--status-tabs-h) + env(safe-area-inset-top));
+    left: 0;
+    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
+    width: var(--tablet-list-w);
+    min-height: 0;
+    overflow: auto;
+    border-right: 1px solid var(--line);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  body.mobile-app:not([data-mobile-tab="status"]) .app-main {
+    top: calc(var(--tablet-topbar-h) + env(safe-area-inset-top));
+  }
+
+  body.mobile-app.detail-open .app-main {
+    bottom: 0;
+  }
+
+  body.mobile-app:not(.detail-open) .app-main {
+    left: max(0px, calc((100vw - var(--tablet-single-w)) / 2));
+    width: var(--tablet-single-w);
+    border-left: 1px solid var(--line);
+    transform: none;
+  }
+
+  .mobile-view {
+    padding: 16px 0 22px;
+  }
+
+  body.mobile-app.detail-split-layout:not(.detail-open) #view-status.mobile-view.active {
+    display: block;
+    padding: 16px 0 22px;
+  }
+
+  body.mobile-app.detail-split-layout:not(.detail-open) #view-status #status-content {
+    min-width: 0;
+  }
+
+  body.mobile-app.detail-open #view-status .status-focus-panel {
+    display: none;
+  }
+
+  .status-summary {
+    gap: 10px;
+    padding-inline: 18px;
+    top: calc(var(--tablet-topbar-h) + env(safe-area-inset-top));
+    bottom: auto;
+    border-top: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  #view-status .view-content {
+    padding-bottom: 22px;
+  }
+
+  .summary-tile {
+    min-height: 44px;
+  }
+
+  .home-search,
+  .view-heading,
+  .worktree-summary,
+  .section-block {
+    padding-inline: 18px;
+  }
+
+  .status-focus-panel {
+    margin-inline: 18px;
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit {
+    grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
+    align-items: start;
+    gap: 16px;
+    padding: 0 18px 18px;
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit-column {
+    display: grid;
+    align-content: start;
+    gap: 14px;
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .worktree-summary,
+  body.mobile-app:not(.detail-open) .status-cockpit .section-block {
+    margin: 0;
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .worktree-summary {
+    border: 1px solid var(--line);
+    border-radius: 16px;
+    padding: 12px 14px;
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .section-block {
+    min-width: 0;
+    padding: 12px 14px 14px;
+    border: 1px solid var(--line);
+    border-radius: 16px;
+    background: color-mix(in srgb, var(--bg-elev) 70%, transparent);
+    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent);
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .section-block.section-block-target {
+    background:
+      linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), transparent 58%),
+      color-mix(in srgb, var(--bg-elev) 70%, transparent);
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--blue) 34%, transparent),
+      inset 3px 0 0 var(--blue);
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .section-title {
+    min-height: 24px;
+    letter-spacing: 0.02em;
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .section-rows {
+    gap: 10px;
+    margin: 10px 0 0;
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .section-rows > .empty-state {
+    margin-top: 2px;
+    padding: 18px 0 2px;
+    border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .section-rows > .session-row {
+    margin: 0;
+    padding: 12px 12px;
+    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--bg) 84%, var(--bg-elev));
+    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 5%, transparent);
+  }
+
+  body.mobile-app:not(.detail-open) .status-cockpit .section-rows > .session-row.selected {
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent),
+      inset 4px 0 0 var(--blue);
+  }
+
+  .session-row,
+  .result-row,
+  .device-row {
+    grid-template-columns: 8px minmax(0, 1fr);
+    padding: 14px 18px;
+  }
+
+  .walle-row,
+  .more-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    padding: 14px 18px;
+  }
+
+  .more-shell {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    padding-inline: 18px;
+  }
+
+  .more-hero-card,
+  .more-danger-card {
+    grid-column: 1 / -1;
+  }
+
+  .walle-chat-context {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    margin: 14px 18px 0;
+  }
+
+  .walle-context-actions {
+    justify-content: flex-end;
+  }
+
+  .walle-chat-messages {
+    padding-inline: 18px;
+  }
+
+  .push-row,
+  .restart-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .session-row.selected,
+  .result-row.selected {
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--blue) 13%, transparent), transparent 54%),
+      var(--bg-elev);
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent),
+      inset 4px 0 0 var(--blue);
+  }
+
+  .row-actions {
+    grid-column: 2;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+  }
+
+  .row-action {
+    min-height: 34px;
+    min-width: 92px;
+  }
+
+  .bottom-nav {
+    position: fixed;
+    left: 0;
+    right: auto;
+    bottom: 0;
+    width: var(--tablet-list-w);
+    border-right: 1px solid var(--line);
+    transform: none;
+  }
+
+  .status-summary {
+    left: 0;
+    right: auto;
+    width: var(--tablet-list-w);
+    border-right: 1px solid var(--line);
+    transform: none;
+  }
+
+  body.mobile-app.detail-open .bottom-nav {
+    display: none;
+  }
+
+  body.mobile-app:not(.detail-open) .bottom-nav {
+    left: max(0px, calc((100vw - var(--tablet-single-w)) / 2));
+    width: var(--tablet-single-w);
+    border-left: 1px solid var(--line);
+    transform: none;
+  }
+
+  body.mobile-app:not(.detail-open) .status-summary {
+    left: max(0px, calc((100vw - var(--tablet-single-w)) / 2));
+    width: var(--tablet-single-w);
+    border-left: 1px solid var(--line);
+    transform: none;
+  }
+
+  .detail-view {
+    top: 0;
+    left: var(--tablet-list-w);
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: 100vh;
+    min-height: 100vh;
+    height: 100dvh;
+    min-height: 100dvh;
+    padding: 0;
+    border-left: 0;
+    border-right: 0;
+    transform: none;
+    background:
+      radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 34%),
+      linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 56%, transparent), transparent 260px),
+      var(--bg);
+  }
+
+  .detail-view.active {
+    display: flex;
+  }
+
+  .detail-topbar {
+    position: sticky;
+    top: 0;
+    left: auto;
+    right: auto;
+    width: auto;
+    min-height: calc(var(--tablet-topbar-h) + env(safe-area-inset-top));
+    padding: calc(12px + env(safe-area-inset-top)) clamp(20px, 3vw, 34px) 12px;
+    transform: none;
+    box-shadow:
+      0 18px 44px rgba(0, 0, 0, 0.16),
+      inset 0 -1px 0 color-mix(in srgb, var(--blue) 10%, transparent);
+  }
+
+  .detail-back-btn {
+    min-width: 96px;
+    min-height: 52px;
+    padding-inline: 16px 18px;
+    border-radius: 16px;
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--blue) 20%, var(--bg-soft)), color-mix(in srgb, var(--blue) 10%, var(--bg-soft)));
+  }
+
+  .detail-back-label {
+    display: inline;
+  }
+
+  .detail-alert,
+  .detail-controls {
+    padding-inline: clamp(20px, 3vw, 34px);
+  }
+
+  .detail-messages {
+    padding: 20px clamp(20px, 3vw, 36px) 28px;
+    scroll-padding-bottom: 24px;
+  }
+
+  .detail-messages .msg,
+  .detail-messages .review-msg,
+  .detail-messages .turn,
+  .detail-messages .prompt-turn,
+  .detail-messages .thought-group,
+  .message-row {
+    max-width: min(920px, 100%);
+  }
+
+  .composer {
+    grid-template-columns: minmax(0, 1fr) 68px;
+    align-items: center;
+    gap: 12px;
+    padding: 16px clamp(20px, 3vw, 36px) calc(18px + env(safe-area-inset-bottom));
+    border-top-color: color-mix(in srgb, var(--blue) 20%, var(--line));
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--bg) 18%, transparent), color-mix(in srgb, var(--bg-elev) 96%, transparent) 30%, var(--bg-elev)),
+      var(--bg-elev);
+    box-shadow:
+      0 -22px 54px rgba(0, 0, 0, 0.32),
+      inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent);
+  }
+
+  .composer.has-model-picker {
+    grid-template-columns: minmax(0, 1fr) 92px 68px;
+  }
+
+  .composer-editor {
+    min-height: 66px;
+    max-height: min(32vh, 220px);
+    padding: 18px 58px 18px 18px;
+    border-radius: 20px;
+    border-color: color-mix(in srgb, var(--blue) 24%, var(--line-strong));
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 78%, var(--bg-elev)), var(--bg-elev));
+    font-size: 15px;
+    line-height: 1.42;
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--fg) 7%, transparent),
+      0 12px 28px rgba(0, 0, 0, 0.16);
+  }
+
+  .composer-editor:focus {
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, var(--bg-soft)), var(--bg-elev));
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--fg) 9%, transparent),
+      0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent),
+      0 14px 34px rgba(0, 0, 0, 0.22);
+  }
+
+  .send-btn {
+    width: 68px;
+    min-width: 68px;
+    height: 66px;
+    min-height: 66px;
+    border-radius: 20px;
+    border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--blue) 94%, #fff), var(--blue));
+    color: #07111f;
+    font-size: 20px;
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, #fff 38%, transparent),
+      0 14px 32px color-mix(in srgb, var(--blue) 24%, transparent),
+      0 8px 20px rgba(0, 0, 0, 0.22);
+  }
+
+  .send-btn.hold-only {
+    border-color: color-mix(in srgb, var(--blue) 42%, var(--line-strong));
+    background:
+      linear-gradient(180deg, color-mix(in srgb, var(--blue) 13%, var(--bg-soft)), color-mix(in srgb, var(--bg-elev-2) 88%, var(--blue)));
+    color: var(--blue);
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent),
+      0 10px 26px rgba(0, 0, 0, 0.22);
+  }
+
+  .model-picker-btn {
+    width: 92px;
+    min-width: 92px;
+    height: 66px;
+    min-height: 66px;
+    border-radius: 18px;
+  }
+
+  .composer-clear {
+    top: 9px;
+    right: 8px;
+  }
+
+  .send-menu {
+    left: calc(var(--tablet-list-w) + clamp(20px, 3vw, 36px));
+    right: clamp(20px, 3vw, 36px);
+    bottom: calc(var(--mobile-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 104px);
+    max-width: 680px;
+  }
+
+  .mobile-skill-picker {
+    right: -70px;
+    max-height: min(44vh, 340px);
+  }
+
+  .modal-backdrop {
+    left: var(--tablet-list-w);
+    justify-content: center;
+  }
+
+  .stepup-sheet,
+  .model-picker-sheet {
+    width: min(640px, calc(100vw - var(--tablet-list-w) - 48px));
+  }
+}