/* ===================================================== CY | conversation-first home, matches studio styling ===================================================== */ .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ----------- App shell ----------- The home page IS the chat: it fills the viewport and never scrolls itself. Only the message list scrolls, so the composer is always where you left it. Scoped to .cy-page — every other page keeps the normal document flow. iOS Safari ignores `overflow:hidden` on the body for touch scrolling and rubber-bands the whole page, so a plain overflow lock drifts (vertically and, because the closed nav menu overhangs a few px, horizontally too). The bulletproof lock is a fixed body pinned to the viewport with rubber-banding switched off — then nothing behind it can scroll. */ html:has(.cy-page){ height: 100%; overflow: hidden; } .cy-page{ position: fixed; /* --app-height / --vv-offset are set from the visual viewport by main.js, so the shell shrinks to sit above the on-screen keyboard and tracks iOS's viewport offset. Both fall back to a full-height, top-anchored shell. */ top: var(--vv-offset, 0px); left: 0; right: 0; height: var(--app-height, 100dvh); /* .cy-page is the , which base styles give min-height:100vh — that would pin the shell at full height and stop it shrinking for the keyboard. */ min-height: 0; overflow: hidden; overscroll-behavior: none; display: flex; flex-direction: column; transition: height .16s ease-out; } .cy-page main{ flex: 1; min-height: 0; display: flex; flex-direction: column; } .cy{ flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: calc(80px + var(--safe-top)); padding-bottom: 10px; width: 100%; } .cy__head{ flex: none; text-align: center; padding: 4px 0 14px; } .cy__title{ font-family: var(--display); font-size: clamp(23px, 1.6vw + 15px, 34px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; } .cy__sub{ margin-top: 7px; font-size: var(--t-sm); color: var(--ink-3); font-weight: 400; } /* ----------- Thread ----------- */ .cy__thread{ flex: 1; min-height: 0; display:flex; flex-direction:column; border-radius: var(--radius-lg); overflow:hidden; } .cy__messages{ flex: 1; min-height: 0; overflow-y:auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 22px 20px 8px; display:flex; flex-direction:column; gap: 14px; scroll-behavior:smooth; } /* Conversation grows upward from the composer, the way a messaging app reads. margin-top:auto rather than justify-content:flex-end — the flex-end version makes the earliest messages unreachable once the list overflows. */ /* :first-child would match the