Desktop layout: from 900px the bottom nav is a left rail (your profile first with a bigger face and name, Settings last) beside a 600px page column, and from 1220px the wallet (balance, Receive/Send, latest payments) rides in a right column; search is a full field in the header there. Floaters re-centred on the page column, open chats still fill the window, phones unchanged

Co-Authored-By: Claude Opus 5.5 <[email protected]>

1 files changed, 53 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index db6e00e..df90cbe 100644
--- a/src/style.css
+++ b/src/style.css
@@ -874,6 +874,8 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 }
 @media (hover: hover) { .app-nav-button:hover { color: var(--ink); } }
 .app-nav-button > span:first-child { display: flex; position: relative; }
+.app-nav-wide { display: none; }
+.header-search { display: none; width: 240px; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
 .app-nav-button[aria-current="page"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
 .app-nav-button.unread > span:first-child::after {
   content: ''; position: absolute; top: -2px; right: -4px; width: 7px; height: 7px;
@@ -1519,3 +1521,54 @@ body::after {
   position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px;
   background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 600; pointer-events: none;
 }
+
+/* ---- wide screens ----
+   From 900px the bottom nav becomes a rail on the left of a 600px page
+   column; from 1220px the wallet rides in a column on the right (walletSide
+   in app.js). The fixed floaters (Post, new posts, toasts) sit over the page
+   column: --col-mid is its centre, --col-edge its right edge, both measured
+   from the window's centre (the grid is centred in it). */
+@media (min-width: 900px) {
+  :root { --col-mid: -184px; --col-edge: 416px; }
+  #app:has(> .app-bottom-nav) {
+    max-width: none; display: grid; justify-content: center; align-items: start;
+    grid-template-columns: 200px minmax(0, 600px); grid-template-rows: 1fr auto; column-gap: 32px;
+  }
+  #app:has(> .app-bottom-nav) > * { grid-column: 2; min-width: 0; }
+  #app:has(> .app-bottom-nav) { padding-bottom: 24px; }
+  .app-nav-wide { display: flex; }
+  /* the rail carries your profile and Settings here; the header trades its
+     search icon for a field, which the search page then doesn't repeat */
+  #app:has(> .app-bottom-nav) .header-railed { display: none; }
+  #app:has(> .app-bottom-nav) .header-search { display: block; }
+  #app:has(> .app-bottom-nav) .user-search-main { display: none; }
+  .app-nav-profile { min-height: 64px; margin-bottom: 6px; gap: 12px; }
+  .app-nav-profile .app-nav-ava { width: 44px; height: 44px; flex-shrink: 0; }
+  .app-nav-name { font-weight: 650; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* an open chat fills the window: its page stretches down the grid row */
+  #app > .col:has(> .chat-card) { align-self: stretch; height: 100%; }
+  #app > .app-bottom-nav {
+    grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 24px; z-index: 5;
+    flex-direction: column; justify-content: flex-start; gap: 4px;
+    padding: 0; background: none; border: 0; box-shadow: none;
+  }
+  .app-nav-button {
+    flex: none; flex-direction: row; justify-content: flex-start; gap: 14px;
+    min-height: 48px; padding: 8px 14px; font-size: 16px;
+  }
+  .feed-post-fab { right: calc(50% - var(--col-edge) + 16px); bottom: 24px; }
+  .feed-new-pill, .feed-page .feed-new-pill { left: calc(50% + var(--col-mid)); bottom: 24px; }
+  .toast { left: calc(50% + var(--col-mid)); }
+}
+@media (min-width: 1220px) {
+  :root { --col-mid: -60px; --col-edge: 240px; }
+  /* three columns on every page with the nav, the wallet's own included,
+     so the page column never jumps sideways between pages */
+  #app:has(> .app-bottom-nav) { grid-template-columns: 200px minmax(0, 600px) 320px; }
+  #app > .wallet-side { grid-column: 3; grid-row: 1 / span 2; position: sticky; top: 24px; gap: 12px; }
+}
+.wallet-side-total {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
+  padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer;
+}
+.wallet-side-amount { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }