wip(mobile): checkpoint polish round in progress

Co-Authored-By: Claude Opus 5.5 <[email protected]> Claude-Session: https://claude.ai/code/session_01VVYRAqiQj9Y1V9ZfG1RcDH
2026-11-06 03:14:00 +00:00 · 2026-10-23 09:59:48 +00:00
1 parent 4e1e838771
commit 90b962745e
@@ -794,3 +794,187 @@
    visibility: hidden;
  }
 }
+
+/* ------------------------------------------------------------------ */
+/* Tablet leading pane: header · on the record · chat (DESIGN §12.4)  */
+/* ------------------------------------------------------------------ */
+
+.mp-feed,
+.mp-ch {
+  display: none;
+}
+
+.mp-fh {
+  display: flex;
+}
+
+.mp-fh,
+.mp-ch {
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px;
+  color: var(--ink-3);
+  font-size: 0.5625rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+}
+
+.mp-fh > span:first-child,
+.mp-ch > span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ink-2);
+}
+
+.mp-fh .i {
+  font-size: 0.85rem;
+}
+
+.mp-feed-list {
+  display: grid;
+  gap: 8px;
+  padding: 8px 14px 12px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.mp-fi.in {
+  animation: msg-in 420ms var(--spring) both;
+}
+
+.mp-fcap {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  padding: 6px;
+  border-radius: 14px;
+  text-align: left;
+  color: var(--ink);
+  background: rgba(235, 199, 119, 0.06);
+  box-shadow: inset 0 0 0 0.5px rgba(235, 199, 119, 0.35);
+}
+
+.mp-fcap.first {
+  background: rgba(235, 199, 119, 0.1);
+  box-shadow:
+    inset 0 0 0 1px rgba(235, 199, 119, 0.8),
+    0 0 22px rgba(235, 199, 119, 0.14);
+}
+
+.mp-fcap .cone-thumb {
+  flex: none;
+  width: 96px;
+  border-radius: 10px;
+}
+
+.mp-fbody {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+}
+
+.mp-fbody .fe {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--b-inside);
+  font-size: 0.5625rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  --seal-ink: #2a1a00;
+}
+
+.mp-fbody b {
+  font-size: var(--t-foot);
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.mp-fbody small {
+  font-family: var(--mono);
+  font-size: 0.5625rem;
+  color: var(--ink-3);
+}
+
+@media (min-width: 600px) {
+  .mp-side-title {
+    flex: none;
+  }
+
+  .mp-feed {
+    display: flex;
+    flex-direction: column;
+    flex: 0 1 auto;
+    min-height: 0;
+    max-height: 46%;
+    margin-top: 6px;
+    border-top: 0.5px solid var(--hairline);
+    padding-top: 12px;
+  }
+
+  .mp-ch {
+    display: flex;
+    flex: none;
+    padding-top: 12px;
+    border-top: 0.5px solid var(--hairline);
+  }
+
+  /* Everything at once on a tablet: no segmented switch. */
+  .mp-side-head,
+  .mp-pane[data-pane='record'],
+  .mp-pane[data-pane='captures'] {
+    display: none !important;
+  }
+
+  .mp-pane[data-pane='chat'] {
+    display: flex !important;
+    flex-direction: column;
+    -webkit-mask-image: none;
+    mask-image: none;
+    padding-top: 6px;
+  }
+
+  .mp-pane[data-pane='chat'] .mp-chat,
+  .mp-pane[data-pane='chat'] .mp-ext {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* Chat reads from the top, newest at the bottom. */
+  .mp-chat {
+    justify-content: flex-start;
+    padding-top: 4px;
+  }
+
+  .mp-ext {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .co.co-tall {
+    flex: 1;
+    min-height: 0;
+    justify-content: flex-start;
+  }
+
+  .co.co-tall .co-list {
+    flex: 1;
+    min-height: 0;
+    justify-content: flex-start;
+    overflow-y: auto;
+    scrollbar-width: none;
+    pointer-events: auto;
+    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
+    mask-image: linear-gradient(to bottom, transparent 0, #000 18px);
+  }
+
+  .co.co-tall .cl.old {
+    opacity: 0.7;
+  }
+}