Bohdan Triapitsyn
005b2e61b0
* refactor(ui): unify composer @mention grammar
Extract the composer's @mention rule into composer/language/mentions.ts and
route highlighting, send-time extraction, backspace-deletes-the-mention and
the file-path check through it. The rule previously lived as four separate
regexes in ChatInput.tsx with divergent cleanup, so every new reference type
had to be taught to all four.
Bracket handling is now symmetric: [ and { were accepted before @ but ] and }
were not stripped from the tail, so [@plan] resolved to the name 'plan]'.
Add characterization tests for the markdown tokenizer, which had none, to
pin current behavior ahead of the editor migration.
* refactor(ui): unify composer slash, snippet and trigger grammar
Extract /skill, /command and #snippet scanning into
composer/language/prefixTokens.ts, and the rule deciding which autocomplete a
caret asks for into composer/language/triggers.ts.
Each sigil previously had three separate implementations: one for
highlighting, one for send-time collection, and one for opening the picker.
They disagreed on the valid character set — the send-time skill scanner
accepted only lowercase names, so a /My_Skill token was painted as a command
but never collected. Scanning is now generous and membership in the command,
skill or snippet registry is the authority.
resolveAutocompleteTrigger replaces the 90-line branch chain in
updateAutocompleteState with a pure function, keeping the previous
command > skill > snippet > mention precedence.
* refactor(ui): tokenize the composer in a single pass
Add composer/language/tokenize.ts as the one entry point producing every
highlight range from the text plus what the composer knows about the
workspace. It replaces six independent memos in ChatInput.tsx that each
re-scanned the same string for markdown, fenced code, mentions, slash tokens,
snippet tokens and attachment citations.
Mentions now distinguish the reference span from the raw token: 'see @a/b.ts,'
highlights @a/b.ts and leaves the comma as sentence punctuation, while
backspace still deletes the whole token so a wrapping bracket is not orphaned.
* feat(ui): add the CodeMirror composer editor
Add composer/editor: a CodeMirror view that renders the prompt language as
mark decorations, and a controlled React primitive around it.
The composer previously painted a transparent textarea over a mirror div,
which restricted highlighting to styles that do not change glyph advance
width -- so bold and italic were impossible and the overlay was disabled
outright on mobile, where wrapped text drifted from the caret anyway.
CodeMirror owns the text and the caret together, removing the second layer.
The document stays a plain string, so nothing downstream has to serialize a
rich model back into a prompt.
Split resolveHighlightSegments out of buildHighlightParts so the mirror
overlay and the editor decorations share one priority resolution.
Not yet wired into ChatInput. Editor rendering is unverified: the package has
no DOM test environment, so only the state-level extension is covered.
* refactor(ui): move the composer onto the CodeMirror editor
Replace the transparent-textarea-over-mirror-div composer with ComposerEditor.
The mirror is gone, and with it the constraint that highlighting may only use
styles which do not change glyph advance width, and the mobile carve-out that
disabled highlighting entirely because wrapped text drifted from the caret.
Removals the editor makes unnecessary:
- measureCaretInTextarea, 46 lines of hand-built text mirroring for popup
placement, replaced by the editor reporting caret coordinates
- adjustTextareaHeight and its two layout effects, replaced by the editor
sizing itself; the dictation transcript height is now an explicit floor
- getInsertedTextFromChange, which diffed old against new text to recover what
a paste inserted; the editor reports the change directly
- the highlight mirror element, its scroll-sync and its parts memo
- a _commandMetadata property stashed on the textarea and never read
Caret placement no longer needs a requestAnimationFrame after a text edit:
text and selection travel in one transaction.
Runtime behavior is unverified -- the package has no DOM test environment.
Type-check, lint, the 295 chat tests and a production web build pass.
* refactor(ui): extract composer text and path helpers
Move the composer's text-splicing rules to composer/text.ts and its path
handling to composer/attachments/filePaths.ts, with tests. None of this logic
was covered before, despite handling VS Code drop payloads, percent-encoded
file URIs and Windows drive letters.
normalizeDroppedPath and toProjectRelativeMentionPath were useCallbacks that
closed over nothing but their argument and the search directory; they are now
plain functions taking the root explicitly.
* refactor(ui): make the composer's slash commands a table
Nine of the composer's local commands did the same thing -- render a visible
magic prompt plus synthetic instructions and send them as one message -- and
that shape was written out nine times as an else-if chain. Adding a command
meant copying twenty lines and remembering to change every string.
composer/submit/slashCommands.ts holds the commands as data and the shape as
one executor; ChatInput keeps only the five that manipulate session state or
open UI. The command names, prompts and failure toasts are now typed against
the magic-prompt and i18n key unions, so a mistyped key fails to compile
rather than failing at runtime.
Net: 257 lines of branching become 68.
* refactor(ui): move the composer's footer components out of ChatInput
RevertedMessageDock, ComposerAttachmentControls, PermissionAutoAcceptButton,
FocusModeButton and ComposerActionButtons each own a piece of the composer
chrome and were defined inline above the 4500-line component. They now live
under composer/ui with the imports they actually need.
Pure moves; getRevertedPreview travels with the dock, its only caller.
* refactor(ui): extract composer draft persistence
Move the draft lifecycle -- identity switching, debounced writes, external
deletion, and the flush-on-hide/freeze/pagehide edges -- into
composer/state/useComposerDraft.
It was seven interleaved effects and five refs sharing state through the
component body, which made the ordering constraints between them (skip the
next debounced write while restoring; record the empty signature before a
queued write can resurrect a deleted draft) invisible. They are now stated
where they apply.
* refactor(ui): extract drop payload inspection
hasDraggedFiles, collectDroppedFiles and collectDroppedFileUris were
useCallbacks with empty dependency arrays -- pure DataTransfer readers wearing
React clothing. They move to composer/attachments/dataTransfer.ts with tests
covering the host differences they exist for: browser File lists, VS Code's
proprietary tree types, OpenChamber's own internal-drag marker, and getData
throwing during dragover.
* refactor(ui): extract the mobile composer shell
Move the pill state machine into composer/state/useMobileComposerShell and
the visual-viewport pinning into composer/state/useMobileViewportPin.
Between them they held eight refs, four pieces of state and eleven effects
interleaved with the rest of the composer, which hid what they are: not one
state machine but a state machine plus a set of corrections for specific
platform behaviors -- mobile browsers dismissing the keyboard before a tap's
click lands, iOS refusing programmatic focus outside a gesture, WebKit leaving
the layout viewport panned after the keyboard hides, overlay chains handing
off through a frame where nothing is open.
Verbatim moves: every timeout, flushSync and guard keeps its value and its
reason, because none of them is verifiable outside a real device.
* refactor(ui): extract outgoing message assembly
A single send can carry queued messages, the composer text, inline review
comments, resolved @file attachments, a linked issue or PR, synthetic parts
from conflict resolution, and a skills instruction -- all flattened into
OpenCode's one-primary-plus-parts shape. The flattening rules were spread
through handleSubmit with no coverage, so the ordering they encode (oldest
queued message becomes primary; inline comments attach to the last authored
body, not a new part; PR instructions precede the diff) was trusted rather
than checked.
buildOutgoingMessage is a pure function over injected resolvers, with 25 tests
covering that ordering.
* refactor(ui): extract new-session draft targeting
Move project and worktree selection for the new-session draft into
composer/state/useDraftTarget.
The rule worth naming is that the draft can point at a directory that does not
exist yet -- a worktree still being created. It has to survive not appearing
in the branch list, or the selector snaps back to the project root mid-creation
and the session starts in the wrong place.
* refactor(ui): extract composer context chips and linked reference rows
The chips standing for attached-but-not-typed context (review comments, dev
server logs, preview annotations, terminal selections) were four near-identical
inline blocks; three of them collapse into one CountChip.
The linked issue and linked PR rows were 100 lines of duplicated markup
differing only in their number label, their branch line and which picker they
reopen. They are now one LinkedReferenceRow.
* refactor(ui): extract draft target selectors
Move the project and branch pickers into composer/ui/DraftTargetSelectors:
inline selects for desktop, trigger buttons and bottom sheets for mobile, all
rendering the same options from useDraftTarget.
The project label -- custom icon image, configured icon, or a folder fallback,
with the project name -- was a useCallback rendering JSX and used from four
places; it is now a ProjectLabel component.
* refactor(ui): extract the collapsed mobile pill composer
Move the pill into composer/ui/MobilePillComposer. Both places that ask
dictation to start now go through one toggleDictation callback rather than
dispatching the global event inline.
* refactor(ui): extract the composer footer
Move the footer row into composer/ui/ComposerFooter, which now owns the
desktop and mobile layouts and the components they place. ChatInput keeps only
the handlers it passes in.
* refactor(ui): collapse the composer's four autocomplete states into one
The composer tracked each picker with its own show flag and query string,
which encoded 'exactly one is open' as four booleans that had to be kept
mutually exclusive by hand. It is now one openAutocomplete kind plus one
query, which is what resolveAutocompleteTrigger already returns.
The four popup blocks -- identical apart from their component and caret width
-- become ComposerAutocompletePopups.
* refactor(ui): extract autocomplete positioning and message history
useAutocompletePosition owns caret-relative popup placement, which only
applies in focus mode.
useMessageHistory owns arrow-key recall. Its transitions are pure functions
with tests: entering history stashes the draft exactly once, so walking back
several messages and returning still restores what the user actually typed
rather than the last recalled message.
* docs: document the composer module
Record what each layer owns and the invariants that are not visible from the
code: that the prompt language is the single source of truth for syntax, which
ordering rules in the submit assembly and draft lifecycle are load-bearing,
that the mobile hooks are platform corrections rather than state machines, and
that rendering, focus, keyboard and WKWebView behavior are not covered by
tests and must be verified by hand.
* fix(ui): restore the composer caret colour and click-to-focus
Two regressions from the editor migration.
The caret rendered black in dark themes. CodeMirror's base theme hard-codes it
through '.cm-editor.cm-light .cm-content', one class more specific than the
plain '.cm-content' rule the composer theme used, so the base theme won.
Matching that specificity with '&.cm-editor' fixes both variants.
Clicking the composer's empty space no longer focused it. A textarea filled
its box, so the browser placed the caret for any click inside it; CodeMirror's
content element covers only the text. The content box now stretches to the
full editor height, and clicks landing outside it — in the composer's padding
— are forwarded to the nearest text position.
The theme moves to its own module with a test that installs it. EditorView.theme
compiles selectors at import and throws on scopes it was not given, including
'&light' and '&dark'; neither the build nor the type-check catches that, and
the failure takes the whole composer down at runtime.
* fix(ui): colour the composer caret where it is actually drawn
The previous fix styled caret-color, which drawSelection() overrides with
'transparent !important' at the highest precedence -- it hides the native
caret and draws its own .cm-cursor element, whose base style is a hard-coded
'border-left: 1.2px solid black'. So the caret stayed black on dark themes.
CodeMirror recolours that cursor only for editors that declare themselves
dark. OpenChamber themes are not merely light or dark, so the cursor takes the
surface foreground directly instead.
The theme spec is exported and asserted against: the caret rule must target
.cm-cursor, must not style caret-color, and must carry enough specificity to
beat CodeMirror's own &dark override.
* feat(ui): add emphasis, attention and path highlighting to the composer
The constructs the editor migration was for.
- **bold** and *italic* render as real weight and slant. They are additive
styles: a segment carries one class string, so choosing between weight and
colour would lose one of them -- bold inside a heading now keeps the heading
colour and gains weight.
- '!!! ' marks an attention line. Three marks, so a sentence ending in '!!'
is not swallowed.
- '~path' highlights a path without attaching it, unlike '@path'. Inert by
design: it feeds neither the autocomplete nor the send path.
False positives are excluded positionally rather than by character, since
these delimiters are ordinary prose: '2 * 3' and 'foo_bar' are not emphasis,
'~approximately' and '~1.2 seconds' are not paths.
Also fix the expanded composer, which kept the collapsed composer's eight-line
height cap: the editor scrolled inside an invisible window while the rest of
the surface sat empty.
* fix(ui): style the composer's selection instead of leaving CodeMirror's
Selecting text rendered it in CodeMirror's stock lavender, which buried the
token colours. drawSelection() paints its own layer and CodeMirror styles the
focused case through a six-class selector; the composer's rule was three deep
and lost.
The tint is translucent rather than the flat selection token: an opaque
selection hides the colours the composer exists to show, and selecting text
here is for moving it, not for stopping reading it.
Same failure shape as the caret, so the theme test now covers both.
* fix(ui): mute the composer placeholder
The placeholder rendered at full text brightness. Its colour referenced
--surface-mutedForeground, but the theme emits --surface-muted-foreground:
an unknown custom property makes the declaration invalid rather than falling
back, and since color inherits, the placeholder simply took the editor's text
colour while the source looked correct.
The theme test now rejects camelCased tokens outright, since this failure is
invisible in every check that does not render.
* fix(ui): create the composer editor before the expand gesture ends
The mobile pill expands with flushSync and focuses the editor on the very next
line, still inside the tap's call stack, because that is the only way a mobile
browser raises the keyboard. The EditorView was created in a passive effect,
which flushSync makes no promise about — so at the moment focus() was called
there was no view to focus.
With a textarea the element existed as soon as flushSync returned, which is
why this worked before the migration.
Creating the view in a layout effect restores that ordering.
* perf(ui): keep the composer editor alive across the mobile pill swap
The pill and the full composer are different subtrees, so expanding or
collapsing unmounted and rebuilt the editor. With a textarea that was one DOM
node. A CodeMirror view is extensions, state, document, decorations and a
first measure — all inside the tap's flushSync, before the browser is allowed
to paint the swap. The shape change therefore landed late enough to look
driven by the keyboard rather than by the tap.
The view now lives in a store owned by ChatInput and is detached and
re-attached instead of destroyed and rebuilt. Its extensions read callbacks
through a ref held by the store, so a kept view always calls into the mounted
instance; compartments move to module scope, since per-instance ones would be
unknown to a reused view's configuration.
Also restore the caret hold: WKWebView draws the caret as a native layer that
ignores CSS transforms and visibly flies across the screen during the keyboard
slide. The rule hiding it targeted textarea and input, which the composer is
no longer — and its caret is now a drawn .cm-cursor element rather than the
native one.
* debug(ui): on-screen timeline for the mobile composer swap
TEMPORARY, Capacitor-only. Two plausible fixes for the swap lagging behind
the keyboard changed nothing, so the theory behind them was wrong. This
overlay draws the event timeline straight onto the screen -- the tap, the
committed swap, the first paints after it, the keyboard choreography, and
whether the editor was created or re-attached -- so one screenshot replaces
guessing. It doubles as an asset-freshness check: no overlay means the app
runs a bundle from before this commit.
* fix(ui): put the composer swap on glass before the keyboard moves
The overlay timelines settled it. The swap itself was never slow: commit in
12ms, editor re-attach in 3ms, focus immediate. What lagged was presentation:
WKWebView stops presenting web frames the moment focus starts the keyboard
transition and holds the last presented frame until it ends. Focusing in the
same task as the swap meant the last presented frame still showed the pill —
paint-1 fired at 29ms, the next frame at 190ms, exactly when the keyboard
was already moving.
On expand, Capacitor now waits two frames before focusing, so the swapped
composer is presented first and the keyboard rises under it. The Capacitor
WebView raises the keyboard for a focus() outside the gesture task; mobile
browsers do not, so they keep the synchronous path.
The collapse direction had a genuine race, caught on one screenshot: the
oc:keyboard-intent collapse arrives a few milliseconds after blur on a
setTimeout(0), and React's scheduling of setFocused(false) can lose to it —
busyRef stays stale, the intent handler skips the instant collapse, and the
pill appears via the 250ms fallback, 370ms after the keyboard has gone.
The Capacitor blur branch now commits the state with flushSync.
The diagnostic overlay stays in until this is confirmed on device.
* fix(ui): raise the keyboard from the swap's first frame
Two frames of delay before focusing made expand visibly sequential: swap,
then keyboard. Focusing inside the first frame after the commit puts the
swap's frame into the rendering pipeline before the keyboard transaction
starts, so the keyboard rises from the tap and the composer appears during
the rise rather than after it.
* fix(ui): restructure the draft screen in the same frame as the pill swap
The draft screen centers its title over the space the composer leaves, and
its starter chips leave when the keyboard is up. The chips were keyed on
oc-keyboard-open, which lands with the keyboardWillShow bridge event ~100ms
after the tap — so expanding the composer restructured the page twice: once
at the swap (composer grows, title re-centers) and again mid-keyboard-rise
(chips vanish, title re-centers again). Chat has no centered content, which
is why it was already smooth and the draft screen was not.
A root class now announces the expanded composer from a layout effect, in the
same frame as the swap, and the chips key on it: one restructure, fused with
the pill morph, before the keyboard moves. The keyboard classes remain as
fallbacks for keyboard-up states that do not go through the pill.
* debug(ui): remove the mobile swap timeline overlay
The diagnostic did its job: it identified WKWebView's presentation pause
during keyboard transitions, the React-scheduling race in the collapse path,
and the draft screen's double restructure — all fixed and confirmed on
device.
* feat(ui): grow the mobile composer with content, drop the fullscreen handle
The swipe-up handle promised a fullscreen composer but the normal eight-line
cap already reached within a line of the same height, so the gesture bought
almost nothing and cost a 28px bar above the editor.
The composer now just grows with what is typed: a generous line cap plus a
CSS ceiling of the space the keyboard actually leaves, whichever is smaller
(the editor cap accepts both and takes min()). The handle, its swipe
gestures and the shell's touch plumbing are gone.
* fix(ui): measure the mobile composer ceiling instead of estimating it
The 220px chrome constant guessed at what surrounds the editor. The old
fullscreen handle guessed at nothing — it let flex distribute real space (and
on Capacitor even that silently failed: its h-full resolved against a
shrink-wrap parent, which is why the gesture bought almost nothing).
The ceiling is now measured the way the handle meant to: the screen container
is marked data-composer-bound, and the editor may grow until the composer
fills it — chrome around the editor read live from the DOM, so attachment
chips, the model row and keyboard resizes all shift the cap by themselves.
* fix(ui): keep a 4px gap between the grown composer and the header
On the chat screen the fully grown composer's border landed exactly on the
header's bottom edge. The gap is a visual design choice, not another chrome
estimate: the ceiling itself stays measured.
* fix(ui): show iOS selection handles without giving up typing speed
iOS pins its selection drag handles to the visible native selection and
colours them from the caret, while drawSelection() hides both. Removing
drawSelection(), or leaving the native caret visible while typing, both
make iOS answer every keystroke with severe input lag. Touch devices now
keep drawSelection() and layer a theme over it that re-shows the native
selection, plus an .oc-native-range marker that enables the native caret
only while a range is selected — when there is no caret to lag on.
* feat(ui): make file mentions editable instead of atomic-delete
Deleting a character inside an @file mention edited nothing and erased the
whole token. Mentions now edit like /skill tokens: a deletion changes the
text and the caret position reopens the file picker on its own. findMentionAt
and MentionToken.rawEnd existed only for the atomic delete and are removed.
* fix(ui): composer selection visibility and external-insert caret
Selection was nearly invisible for two reasons: the tint was mixed down from
--interactive-selection, which themes define with its own alpha (often under
10%); and the painted selection layer sits behind the content, so tokens with
their own background (inline code, fences) covered it entirely. The native
selection now shows on every device, not only touch — it paints over token
backgrounds — and its tint comes from --primary at 25%, a full-strength
colour in every theme. drawSelection() and the range-scoped native caret stay
exactly as before, so typing keeps the lag-free path.
External rewrites (add-to-chat, draft restore, history, dictation) also left
the caret at its old position, so the next insertion landed inside the
previous one. They now put the caret at the end, as the old textarea did, and
pin the scroller to the bottom once the layout settles — a transaction-time
scrollIntoView fires before the max-height cap exists and scrolls nothing.
* fix(ui): render ***triple emphasis*** as bold italic
The emphasis tokenizer capped delimiter runs at two characters, so ***x***
parsed as a stray asterisk plus an italic span. Runs of three now emit both a
strong and an emphasis range over the same content; the two are additive
styles, so they compose into bold italic.
* fix: insert mentions through editor dispatch
Places the caret immediately after an inserted mention
Avoids rewriting the whole message and jumping the scroll to the bottom
Falls back to appending inline text when no editor is available
810 lines
33 KiB
CSS
810 lines
33 KiB
CSS
/* Mobile Adaptations - All Devices */
|
||
|
||
/* Set global device type variables */
|
||
:root {
|
||
--is-mobile: 0;
|
||
--device-type: 'desktop';
|
||
--font-scale: 1;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
:root.mobile-pointer:not(.desktop-runtime) {
|
||
--is-mobile: 1;
|
||
--device-type: 'mobile';
|
||
--font-scale: 0.9;
|
||
}
|
||
}
|
||
|
||
/* Utility classes for device-specific styling */
|
||
.desktop-only {
|
||
display: block;
|
||
}
|
||
|
||
.mobile-only {
|
||
display: none;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
:root.mobile-pointer:not(.desktop-runtime) .desktop-only {
|
||
display: none !important;
|
||
}
|
||
|
||
:root.desktop-runtime .mobile-only {
|
||
display: none !important;
|
||
}
|
||
|
||
:root.mobile-pointer:not(.desktop-runtime) .mobile-only {
|
||
display: block !important;
|
||
}
|
||
}
|
||
|
||
/* General mobile improvements for all mobile devices */
|
||
@media (max-width: 1024px) {
|
||
/* Override CSS custom properties for mobile */
|
||
:root.mobile-pointer:not(.desktop-runtime) {
|
||
--text-markdown: 1rem;
|
||
--text-code: 0.875rem;
|
||
--text-ui-header: 0.9375rem;
|
||
--text-ui-label: 0.875rem;
|
||
--text-meta: 0.875rem;
|
||
--text-micro: 0.8125rem;
|
||
--text-settings-page-title: 1.125rem;
|
||
}
|
||
|
||
/* Force override with higher specificity */
|
||
:root.mobile-pointer:not(.desktop-runtime) * {
|
||
--text-markdown: 1rem !important;
|
||
--text-code: 0.875rem !important;
|
||
--text-ui-header: 0.9375rem !important;
|
||
--text-ui-label: 0.875rem !important;
|
||
--text-meta: 0.875rem !important;
|
||
--text-micro: 0.8125rem !important;
|
||
--text-settings-page-title: 1.125rem !important;
|
||
}
|
||
|
||
/* Additional override for elements using typography classes */
|
||
:root.mobile-pointer:not(.desktop-runtime) .typography-markdown,
|
||
:root.mobile-pointer:not(.desktop-runtime) .typography-code,
|
||
:root.mobile-pointer:not(.desktop-runtime) .typography-ui-header,
|
||
:root.mobile-pointer:not(.desktop-runtime) .typography-ui-label,
|
||
:root.mobile-pointer:not(.desktop-runtime) .typography-meta,
|
||
:root.mobile-pointer:not(.desktop-runtime) .typography-micro {
|
||
font-size: unset !important;
|
||
}
|
||
|
||
/* Fix font size for tool displays */
|
||
:root.mobile-pointer:not(.desktop-runtime) [class*="tool"],
|
||
:root.mobile-pointer:not(.desktop-runtime) [class*="code"] {
|
||
--text-code: 0.875rem !important;
|
||
font-size: var(--text-code) !important;
|
||
}
|
||
|
||
/* Improve touch targets for mobile */
|
||
:root.mobile-pointer:not(.desktop-runtime) button:not([role="radio"]):not([role="checkbox"]):not([role="switch"]),
|
||
:root.mobile-pointer:not(.desktop-runtime) .btn,
|
||
:root.mobile-pointer:not(.desktop-runtime) [role="button"] {
|
||
min-height: 36px;
|
||
min-width: 36px;
|
||
}
|
||
|
||
/* Composer footer action buttons (sessions / attach / auto-accept): hug the
|
||
icon so the group stays tight. The container only renders in the mobile
|
||
JSX, so no pointer/runtime gating is needed; !important overrides both the
|
||
w-8 utility and the global mobile touch-target min-width regardless of
|
||
cascade layer or specificity. */
|
||
.composer-mobile-actions button {
|
||
width: 1.5rem !important;
|
||
min-width: 0 !important;
|
||
}
|
||
|
||
/* Improve input field touch targets */
|
||
:root.mobile-pointer:not(.desktop-runtime) input,
|
||
:root.mobile-pointer:not(.desktop-runtime) textarea,
|
||
:root.mobile-pointer:not(.desktop-runtime) select {
|
||
min-height: 36px;
|
||
}
|
||
|
||
/* Fix mobile text inputs */
|
||
:root.mobile-pointer:not(.desktop-runtime) input[type="text"],
|
||
:root.mobile-pointer:not(.desktop-runtime) input[type="search"],
|
||
:root.mobile-pointer:not(.desktop-runtime) input[type="email"],
|
||
:root.mobile-pointer:not(.desktop-runtime) input[type="password"],
|
||
:root.mobile-pointer:not(.desktop-runtime) textarea {
|
||
font-size: 16px !important; /* Prevents iOS zoom */
|
||
}
|
||
|
||
/* Prevent keyboard on non-input elements */
|
||
:root.mobile-pointer:not(.desktop-runtime)
|
||
button:not([type="submit"]):not([type="button"]):not([type="reset"]),
|
||
:root.mobile-pointer:not(.desktop-runtime) .btn,
|
||
:root.mobile-pointer:not(.desktop-runtime) [role="button"] {
|
||
-webkit-touch-callout: none;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
|
||
/* Specific fix for session buttons */
|
||
:root.mobile-pointer:not(.desktop-runtime) button[inputmode="none"] {
|
||
-webkit-touch-callout: none;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* Prevent system context menu on message content when using custom selection menu */
|
||
:root.mobile-pointer:not(.desktop-runtime) .message-content-text {
|
||
-webkit-touch-callout: none;
|
||
-webkit-user-select: text;
|
||
user-select: text;
|
||
}
|
||
|
||
|
||
/* Allow system context menu only when explicitly requested via the "More" button */
|
||
:root.mobile-pointer:not(.desktop-runtime) .message-content-text.show-system-menu {
|
||
-webkit-touch-callout: default;
|
||
}
|
||
|
||
/* Improve mobile spacing */
|
||
:root.mobile-pointer:not(.desktop-runtime) .px-4 {
|
||
padding-left: 1rem !important;
|
||
padding-right: 1rem !important;
|
||
}
|
||
|
||
:root.mobile-pointer:not(.desktop-runtime) .py-2 {
|
||
padding-top: 0.75rem !important;
|
||
padding-bottom: 0.75rem !important;
|
||
}
|
||
|
||
/* Fix mobile scroll containers */
|
||
:root.mobile-pointer:not(.desktop-runtime) .overflow-hidden {
|
||
overflow-x: hidden !important;
|
||
overflow-y: auto !important;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
:root.mobile-pointer:not(.desktop-runtime) [data-page-scroll-lock="true"] {
|
||
overflow: hidden !important;
|
||
overscroll-behavior: none;
|
||
}
|
||
|
||
/* Keep markdown code blocks horizontally scrollable on mobile. */
|
||
:root.mobile-pointer:not(.desktop-runtime) .markdown-content [data-markdown="code-block-body"] {
|
||
overflow-x: auto !important;
|
||
overflow-y: hidden !important;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* Fix mobile viewport height */
|
||
:root.mobile-pointer:not(.desktop-runtime) {
|
||
height: 100%;
|
||
height: -webkit-fill-available;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Fix main layout container */
|
||
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
|
||
height: 100vh;
|
||
height: -webkit-fill-available;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* Fix main content area */
|
||
:root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
|
||
min-height: 0;
|
||
flex: 1;
|
||
}
|
||
|
||
/* Fix chat container */
|
||
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-full {
|
||
height: 100%;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* Ensure proper flex behavior */
|
||
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col {
|
||
min-height: 0;
|
||
}
|
||
|
||
/* Mobile sidebar positioning */
|
||
:root.mobile-pointer:not(.desktop-runtime) .mobile-sidebar-top {
|
||
top: var(--header-height, 3rem);
|
||
height: calc(100vh - var(--header-height, 3rem));
|
||
}
|
||
|
||
/* Set header height variable */
|
||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||
--header-height: 3rem;
|
||
}
|
||
|
||
/* For mobile devices with larger header */
|
||
@media (max-width: 768px) {
|
||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||
--header-height: 3.5rem;
|
||
}
|
||
}
|
||
|
||
/* For tablet devices */
|
||
@media (min-width: 769px) and (max-width: 1024px) {
|
||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||
--header-height: 3.25rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* iOS PWA Adaptations */
|
||
|
||
/* iOS safe area defaults (applies to PWA + Safari) */
|
||
@supports (-webkit-touch-callout: none) {
|
||
:root.device-mobile:not(.desktop-runtime),
|
||
:root.device-tablet:not(.desktop-runtime),
|
||
:root.mobile-pointer:not(.desktop-runtime) {
|
||
--oc-safe-area-top: env(safe-area-inset-top, 0);
|
||
--oc-safe-area-right: env(safe-area-inset-right, 0);
|
||
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
|
||
--oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
|
||
--oc-safe-area-left: env(safe-area-inset-left, 0);
|
||
}
|
||
|
||
:root.device-mobile:not(.desktop-runtime) .header-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .header-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||
padding-top: var(--oc-safe-area-top);
|
||
}
|
||
|
||
:root.oc-capacitor-app [data-sonner-toaster][data-y-position='top'] {
|
||
top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
|
||
}
|
||
}
|
||
|
||
/* Phase 1: iOS PWA safe area handling - Enhanced positioning approach */
|
||
@media (display-mode: standalone) {
|
||
/* iOS-specific safe area handling with CSS variable support */
|
||
@supports (-webkit-touch-callout: none) {
|
||
/* Safe area handling for fixed positioned elements */
|
||
:root.device-mobile:not(.desktop-runtime),
|
||
:root.device-tablet:not(.desktop-runtime),
|
||
:root.mobile-pointer:not(.desktop-runtime) {
|
||
--oc-safe-area-top: env(safe-area-inset-top, 0);
|
||
--oc-safe-area-right: env(safe-area-inset-right, 0);
|
||
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
|
||
--oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
|
||
--oc-safe-area-left: env(safe-area-inset-left, 0);
|
||
}
|
||
|
||
:root.device-mobile:not(.desktop-runtime) .header-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .header-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||
padding-top: var(--oc-safe-area-top);
|
||
}
|
||
|
||
:root.device-mobile:not(.desktop-runtime) .main-content-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .main-content-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .main-content-safe-area {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
padding-left: var(--oc-safe-area-left);
|
||
padding-right: var(--oc-safe-area-right);
|
||
}
|
||
|
||
/* Safe area for bottom fixed/bottom-0 elements */
|
||
:root.device-mobile:not(.desktop-runtime) .bottom-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .bottom-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .bottom-safe-area {
|
||
padding-bottom: var(--oc-safe-area-bottom-visual) !important;
|
||
}
|
||
|
||
/* Drawer safe area - top already offset by header height */
|
||
:root.device-mobile:not(.desktop-runtime) .drawer-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .drawer-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .drawer-safe-area {
|
||
padding-top: 0;
|
||
padding-bottom: var(--oc-safe-area-bottom-visual);
|
||
}
|
||
|
||
/* Fix iOS viewport issues */
|
||
:root.device-mobile:not(.desktop-runtime) .flex.flex-col.h-screen,
|
||
:root.device-tablet:not(.desktop-runtime) .flex.flex-col.h-screen,
|
||
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
|
||
min-height: 100vh;
|
||
min-height: -webkit-fill-available;
|
||
}
|
||
|
||
/* Prevent content overlap in iOS */
|
||
:root.device-mobile:not(.desktop-runtime) .flex-1.overflow-hidden,
|
||
:root.device-tablet:not(.desktop-runtime) .flex-1.overflow-hidden,
|
||
:root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
|
||
position: relative;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
/* Update header height for iOS */
|
||
:root.device-mobile:not(.desktop-runtime) .header-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .header-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||
--header-height: 4.5rem;
|
||
}
|
||
|
||
:root.device-mobile:not(.desktop-runtime) .mobile-sidebar-top,
|
||
:root.device-tablet:not(.desktop-runtime) .mobile-sidebar-top,
|
||
:root.mobile-pointer:not(.desktop-runtime) .mobile-sidebar-top {
|
||
--header-height: 4.5rem;
|
||
}
|
||
|
||
/* Mobile typography improvements */
|
||
.typography-markdown {
|
||
font-size: 1rem !important;
|
||
}
|
||
|
||
.typography-code {
|
||
font-size: 0.875rem !important;
|
||
}
|
||
|
||
.typography-ui-header {
|
||
font-size: 0.9375rem !important;
|
||
}
|
||
|
||
.typography-ui-label {
|
||
font-size: 0.875rem !important;
|
||
}
|
||
|
||
.typography-meta {
|
||
font-size: 0.875rem !important;
|
||
}
|
||
|
||
.typography-micro {
|
||
font-size: 0.8125rem !important;
|
||
}
|
||
|
||
/* Fix font size for tool displays */
|
||
[class*="tool"], [class*="code"] {
|
||
font-size: 0.875rem !important;
|
||
}
|
||
}
|
||
|
||
/* Fallback for non-iOS standalone mode */
|
||
@supports not (-webkit-touch-callout: none) {
|
||
:root.device-mobile:not(.desktop-runtime),
|
||
:root.device-tablet:not(.desktop-runtime),
|
||
:root.mobile-pointer:not(.desktop-runtime) {
|
||
--oc-safe-area-top: env(safe-area-inset-top, 0);
|
||
--oc-safe-area-right: env(safe-area-inset-right, 0);
|
||
--oc-safe-area-bottom: env(safe-area-inset-bottom, 0);
|
||
--oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
|
||
--oc-safe-area-left: env(safe-area-inset-left, 0);
|
||
}
|
||
|
||
:root.device-mobile:not(.desktop-runtime) .header-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .header-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .header-safe-area {
|
||
padding-top: var(--oc-safe-area-top);
|
||
}
|
||
|
||
:root.device-mobile:not(.desktop-runtime) .main-content-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .main-content-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .main-content-safe-area {
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
padding-left: var(--oc-safe-area-left);
|
||
padding-right: var(--oc-safe-area-right);
|
||
}
|
||
|
||
:root.device-mobile:not(.desktop-runtime) .bottom-safe-area,
|
||
:root.device-tablet:not(.desktop-runtime) .bottom-safe-area,
|
||
:root.mobile-pointer:not(.desktop-runtime) .bottom-safe-area {
|
||
padding-bottom: var(--oc-safe-area-bottom-visual) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Phase 6: Home indicator blur gradient fix */
|
||
@media (display-mode: standalone) and (max-width: 768px) {
|
||
.pwa-dialog-content {
|
||
--pwa-dialog-padding: clamp(0.75rem, 3vw, 1.25rem);
|
||
top: auto;
|
||
/* Browsers that don't understand dvh ignore the second declaration and
|
||
keep the vh-based fallback. Newer browsers use 100dvh so Android
|
||
Chrome's collapsible URL bar doesn't push the dialog footer off-screen. */
|
||
max-height: calc(
|
||
100vh
|
||
- var(--oc-safe-area-top, 0px)
|
||
- var(--oc-safe-area-bottom-visual, 0px)
|
||
- 20px
|
||
);
|
||
max-height: calc(
|
||
100dvh
|
||
- var(--oc-safe-area-top, 0px)
|
||
- var(--oc-safe-area-bottom-visual, 0px)
|
||
- 20px
|
||
);
|
||
padding: var(--pwa-dialog-padding);
|
||
padding-top: calc(var(--pwa-dialog-padding) + (var(--oc-safe-area-top, 0px) * 0.35));
|
||
row-gap: clamp(0.75rem, 2vw, 1.25rem);
|
||
}
|
||
|
||
.pwa-dialog-content.pwa-compact {
|
||
--pwa-dialog-padding: clamp(0.5rem, 2vw, 0.85rem);
|
||
row-gap: clamp(0.45rem, 1.5vw, 0.8rem);
|
||
}
|
||
|
||
.pwa-dialog-content [data-slot="dialog-close"] {
|
||
top: calc(0.25rem + (var(--oc-safe-area-top, 0px) * 0.35));
|
||
right: var(--pwa-dialog-padding);
|
||
}
|
||
|
||
.pwa-dialog-content.pwa-compact [data-slot="dialog-close"] {
|
||
top: calc(0.2rem + (var(--oc-safe-area-top, 0px) * 0.3));
|
||
}
|
||
|
||
.pwa-dialog-content .settings-page-body {
|
||
max-width: 100%;
|
||
padding: 0.75rem 1rem;
|
||
row-gap: 0;
|
||
}
|
||
|
||
.pwa-dialog-content .settings-page-body > :not([hidden]) ~ :not([hidden]) {
|
||
margin-top: 0.85rem;
|
||
}
|
||
|
||
.pwa-dialog-content .directory-dialog-body {
|
||
padding: 0.5rem 0.75rem;
|
||
}
|
||
|
||
.pwa-dialog-content .directory-dialog-body .directory-grid {
|
||
gap: 0.6rem;
|
||
}
|
||
|
||
.pwa-overlay-panel {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.pwa-overlay-panel .pwa-overlay-scroll {
|
||
padding-bottom: calc(var(--oc-safe-area-bottom-visual, 0px) + 12px);
|
||
}
|
||
}
|
||
|
||
@media (display-mode: standalone) {
|
||
/* Home indicator overlay */
|
||
:root.device-mobile:not(.desktop-runtime) body::after,
|
||
:root.device-tablet:not(.desktop-runtime) body::after,
|
||
:root.mobile-pointer:not(.desktop-runtime) body::after {
|
||
content: '';
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: var(--oc-safe-area-bottom-visual, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0)));
|
||
background: linear-gradient(
|
||
to top,
|
||
var(--background) 0%,
|
||
var(--background) 30%,
|
||
rgba(from var(--background) r g b / 0.8) 60%,
|
||
rgba(from var(--background) r g b / 0.3) 85%,
|
||
transparent 100%
|
||
);
|
||
z-index: 1000;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Fallback for browsers without rgba(from ...) support */
|
||
@supports not (color: rgba(from white r g b / 0.5)) {
|
||
:root.device-mobile:not(.desktop-runtime) body::after,
|
||
:root.device-tablet:not(.desktop-runtime) body::after,
|
||
:root.mobile-pointer:not(.desktop-runtime) body::after {
|
||
background: linear-gradient(
|
||
to top,
|
||
var(--background) 0%,
|
||
var(--background) 30%,
|
||
rgba(21, 19, 19, 0.8) 60%, /* Dark theme fallback */
|
||
rgba(21, 19, 19, 0.3) 85%,
|
||
transparent 100%
|
||
);
|
||
}
|
||
|
||
/* Light theme fallback */
|
||
:root body::after {
|
||
background: linear-gradient(
|
||
to top,
|
||
var(--background) 0%,
|
||
var(--background) 30%,
|
||
rgba(248, 247, 243, 0.8) 60%, /* Light theme fallback */
|
||
rgba(248, 247, 243, 0.3) 85%,
|
||
transparent 100%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* Small app-wide bottom safe area for the native shell. The phone's rounded hardware
|
||
corners clip controls flush against the bottom edge, and the PWA's own safe-area
|
||
padding is gated behind display-mode: standalone — which the Capacitor WebView does
|
||
not match — so nothing reserves bottom room in the native app. Expose it as a token
|
||
so any native surface can consume it; the chat shell does so below. */
|
||
:root.oc-capacitor-app {
|
||
--oc-app-bottom-safe: max(16px, calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) * 0.5));
|
||
}
|
||
|
||
/* Android native safe areas. Every --oc-safe-area-* definition above is gated
|
||
behind -webkit-touch-callout (iOS) or display-mode: standalone, neither of
|
||
which matches the Capacitor Android WebView — so the Android app used to rely
|
||
entirely on StatusBar overlay:false insetting the WebView natively. Android 15
|
||
enforces edge-to-edge and ignores that call, leaving content under the status
|
||
bar. Capacitor injects the real insets as --safe-area-inset-* inline vars on
|
||
<html> (env() still reads 0 on WebViews without the safe-area passthrough
|
||
fix), so read those first and fall back to env(). On devices where the native
|
||
inset still applies, both sources report 0 — no double padding. */
|
||
:root.oc-capacitor-app.oc-platform-android {
|
||
--oc-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
|
||
--oc-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
|
||
--oc-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
|
||
--oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
|
||
--oc-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
|
||
}
|
||
|
||
:root.oc-capacitor-app.oc-platform-android .header-safe-area {
|
||
padding-top: var(--oc-safe-area-top);
|
||
}
|
||
|
||
:root.oc-capacitor-app.oc-platform-android [data-sonner-toaster][data-y-position='top'] {
|
||
top: calc(var(--oc-safe-area-top) + 16px) !important;
|
||
}
|
||
|
||
/* Paint the document canvas with the theme background in the native app — the same
|
||
thing .desktop-runtime does for body/#root, which the Capacitor shell never got.
|
||
The status bar is overlaid (transparent), and in dark mode `color-scheme: dark`
|
||
makes the bare UA canvas dark, so any sliver not covered by content (notably the
|
||
area behind the status bar) bled through as a dark band at the top. It only showed
|
||
in dark mode, which is why it tracked the system theme. */
|
||
:root.oc-capacitor-app,
|
||
:root.oc-capacitor-app body,
|
||
:root.oc-capacitor-app #root {
|
||
background: var(--background) !important;
|
||
background-color: var(--background) !important;
|
||
}
|
||
|
||
/* Native (Capacitor) keyboard handling.
|
||
The Keyboard plugin runs in `resize: 'none'` mode so the WebView keeps its full
|
||
height; instead we shrink the app shell by the keyboard frame height. Two vars,
|
||
both set by useNativeMobileChrome: --oc-keyboard-inset is the keyboard's target
|
||
height from the moment `keyboardWillShow` fires (overlay surfaces below animate
|
||
against it as before), while --oc-kb-layout is the same height applied to the
|
||
shell's LAYOUT only at the choreography point where a resize is invisible.
|
||
Scoped to .oc-capacitor-app so the browser PWA keeps its dvh / interactive-widget
|
||
behaviour untouched.
|
||
|
||
The shell height is NOT transitioned. Animating `height` reflows the whole shell
|
||
every frame and forces the chat's ResizeObserver to chase the bottom on each of
|
||
those frames — the source of the visible micro-jitter on the composer/chat while
|
||
pinned. Instead the visual rise is transform-only (compositor) — a FLIP
|
||
choreography driven by useNativeMobileChrome:
|
||
|
||
show: shell keeps its full height for the whole 0.25s; the composer (and, when
|
||
pinned, the chat scroll container — see useChatAutoFollow) slides up via
|
||
inline transforms in sync with the keyboard; at the end the shell snaps to
|
||
its final height (--oc-kb-layout, one reflow) and the shift is removed
|
||
in the same frame — visually identical, so the swap is invisible.
|
||
hide: the shell snaps back to full height immediately (still hidden behind the
|
||
keyboard), the composer/content are FLIP-offset to their raised position
|
||
and slide down with the keyboard.
|
||
|
||
`keyboardWillShow` fires at the start of the iOS keyboard animation with the final
|
||
height, and the duration/curve mimic the native keyboard (≈0.25s,
|
||
cubic-bezier(0.38, 0.7, 0.125, 1)). (visualViewport live-tracking would be exact
|
||
but doesn't report under WKWebView's `resize: 'none'`, so this is the best signal.) */
|
||
:root.oc-capacitor-app .oc-mobile-app-shell {
|
||
height: calc(100dvh - var(--oc-kb-layout, 0px));
|
||
/* Reserve the bottom safe area only while the keyboard is down — when it's up the
|
||
inset cancels it out (the home indicator is hidden and the composer should sit
|
||
flush above the keyboard). The shell keeps its own bg behind this padding. */
|
||
padding-bottom: max(0px, calc(var(--oc-app-bottom-safe, 0px) - var(--oc-kb-layout, 0px)));
|
||
}
|
||
|
||
/* Portal surfaces (bottom sheets, overlay panels) render at <body> level, outside
|
||
the app shell, so they don't inherit the shell's keyboard inset. They're full-
|
||
height `fixed inset-0` scrims with a bottom-anchored (`mt-auto`) sheet, so raising
|
||
their bottom edge by the keyboard height shrinks scrim + sheet together and lifts
|
||
any input above the keyboard instead of hiding it underneath. The opacity term
|
||
preserves the scrim's enter fade (Tailwind's `transition-opacity` would otherwise
|
||
be overridden by this rule's `transition` shorthand). */
|
||
:root.oc-capacitor-app .oc-keyboard-inset-surface {
|
||
bottom: var(--oc-keyboard-inset, 0px);
|
||
transition: bottom 0.25s cubic-bezier(0.38, 0.7, 0.125, 1), opacity 0.2s ease-out;
|
||
}
|
||
/* While a panel is playing its enter animation, its bottom anchor snaps
|
||
instead of transitioning — opening an overlay typically dismisses the
|
||
keyboard in the same moment, and animating both made the entrance jerky. */
|
||
:root.oc-capacitor-app .oc-keyboard-inset-surface.oc-keyboard-inset-snap {
|
||
transition: opacity 0.2s ease-out;
|
||
}
|
||
|
||
/* Bottom-sheet overlays live inside a keyboard-inset surface whose bottom is
|
||
lifted by the keyboard height, but their max-height is expressed in 100dvh —
|
||
which does NOT shrink in the Capacitor app (native keyboard resize is off).
|
||
Without this cap a sheet with the keyboard raised (typing inside it) can
|
||
grow past the top safe area and slide under the notch/status bar. Subtract
|
||
both the keyboard inset and the top safe area from the available height. */
|
||
:root.oc-capacitor-app .pwa-overlay-panel {
|
||
max-height: calc(
|
||
100dvh
|
||
- var(--oc-keyboard-inset, 0px)
|
||
- max(0.75rem, env(safe-area-inset-top))
|
||
);
|
||
}
|
||
|
||
/* Full-screen scroll views (e.g. the connect/login screen) live outside the app
|
||
shell, so shrink them by the keyboard height the same way the shell does. Capping
|
||
the height (instead of min-height: 100dvh) is what makes overflow-y-auto actually
|
||
scroll, so a field near the bottom lifts above the keyboard rather than staying
|
||
hidden behind it. min-height: 0 neutralises the Tailwind min-h-dvh baseline. */
|
||
:root.oc-capacitor-app .oc-keyboard-fill-screen {
|
||
height: calc(100dvh - var(--oc-keyboard-inset, 0px));
|
||
min-height: 0;
|
||
transition: height 0.25s cubic-bezier(0.38, 0.7, 0.125, 1);
|
||
}
|
||
|
||
/* Keyboard slide choreography: the composer (and the draft title, see
|
||
.oc-draft-center note below) are moved with INLINE transform/transition set
|
||
by useNativeMobileChrome — WebKit does not reliably start transitions when a
|
||
transform changes via a CSS custom property, which parked the composer until
|
||
the keyboard finished. Only the sliding backdrop lives here. */
|
||
:root.oc-capacitor-app.oc-kb-animating .oc-mobile-composer {
|
||
/* While sliding, the composer passes over chat content that hasn't moved (user
|
||
scrolled up) — give it an opaque backdrop so text doesn't show through the
|
||
form's transparent padding. */
|
||
background: var(--background);
|
||
}
|
||
|
||
/* Constant-viewport trick for the chat scroller: when the keyboard settles the
|
||
shell shrinks by --oc-kb-layout, but the scroller keeps its full height by
|
||
extending that far below its (shrunken) region — behind the composer and the
|
||
keyboard — and converts the covered strip into its own bottom padding. For
|
||
the virtualizer NOTHING resizes across keyboard transitions: clientHeight is
|
||
constant, every row that can become visible is already mounted, and the
|
||
open/close reposition is a single cheap scrollTop change (the settle re-pin /
|
||
the clamp) instead of a viewport resize that mounts rows with a visible
|
||
pause on long chats. */
|
||
:root.oc-capacitor-app .oc-mobile-app-shell .chat-scroll {
|
||
/* The shell shrinks by the keyboard height BUT also gives up its bottom
|
||
safe-area padding at the same moment (see the shell's padding-bottom
|
||
formula) — so the scroller's parent only loses (keyboard − safe). Extend
|
||
by exactly that, or the settle grows clientHeight by the safe inset and
|
||
the pinned chat clamps one row down a beat after the keyboard opens. */
|
||
bottom: calc(-1 * max(var(--oc-kb-layout, 0px) - var(--oc-app-bottom-safe, 0px), 0px));
|
||
/* The padding leg is driven by its own variable so it can be applied at the
|
||
very START of the keyboard rise (with an immediate re-pin — the bottom of
|
||
the chat moves up as the keyboard begins, not after it finishes), while
|
||
the bottom-extension leg still tracks the shell's settle-time shrink. Both
|
||
legs equal the keyboard height once settled, so the settle snap is
|
||
geometry-neutral for the scroller. */
|
||
padding-bottom: var(--oc-kb-scroll-inset, var(--oc-kb-layout, 0px));
|
||
}
|
||
|
||
/* WKWebView draws the text caret as a native layer that ignores CSS transforms:
|
||
after the keyboard rise it visibly flies from the pre-keyboard position to
|
||
the final one. Hide it during the transition (+ UIKit's reposition lag,
|
||
see oc-kb-caret-hold timing in useNativeMobileChrome) and pop it back in. */
|
||
:root.oc-capacitor-app.oc-kb-caret-hold textarea,
|
||
:root.oc-capacitor-app.oc-kb-caret-hold input,
|
||
:root.oc-capacitor-app.oc-kb-caret-hold [contenteditable] {
|
||
caret-color: transparent;
|
||
}
|
||
|
||
/* The composer is a CodeMirror editor, so it is neither a textarea nor an
|
||
input, and its caret is not the native one either: drawSelection() hides
|
||
that and paints a .cm-cursor element instead. Hiding caret-color alone
|
||
would leave that element riding across the screen. */
|
||
:root.oc-capacitor-app.oc-kb-caret-hold .cm-cursor,
|
||
:root.oc-capacitor-app.oc-kb-caret-hold .cm-dropCursor {
|
||
opacity: 0;
|
||
}
|
||
|
||
/* On touch devices the composer re-enables the NATIVE caret with `!important`
|
||
(composerNativeSelectionTheme: iOS colours its selection handles from the
|
||
caret colour, so the caret cannot stay transparent). That declaration beats
|
||
the plain [contenteditable] rule above, so the caret-hold needs its own
|
||
heavier rule for the composer — !important plus more specificity than the
|
||
theme's `.cm-editor .cm-content` selector. */
|
||
:root.oc-capacitor-app.oc-kb-caret-hold .cm-editor .cm-content,
|
||
:root.oc-capacitor-app.oc-kb-caret-hold .cm-editor .cm-content .cm-line {
|
||
caret-color: transparent !important;
|
||
}
|
||
|
||
/* The composer keeps its 1rem bottom padding while the keyboard is down (breathing
|
||
room above the home indicator), but that gap looks artificial sitting right above
|
||
the keyboard — so tighten it while the keyboard is open. Snaps at the start of the
|
||
show animation (a ~10px pre-slide change; transitioning it would reflow the chat
|
||
every frame). */
|
||
:root.oc-capacitor-app.oc-keyboard-open .oc-mobile-composer {
|
||
padding-bottom: 12px;
|
||
}
|
||
|
||
/* Draft starter chips leave when the full composer takes over — with the
|
||
composer expanded (and hence the keyboard up) there is only room for the
|
||
draft title. oc-composer-expanded is set in the SAME frame as the pill swap
|
||
(see useMobileComposerShell), so the chips leave together with the morph;
|
||
the keyboard classes remain as fallbacks for keyboard-up states that do not
|
||
go through the pill (and for mobile browsers). Instant show/hide (no squish
|
||
animation); the title's own keyboard compensation (.oc-draft-center below)
|
||
carries the smooth motion. */
|
||
:root.oc-composer-expanded .oc-draft-starters,
|
||
:root.oc-capacitor-app.oc-keyboard-open .oc-draft-starters,
|
||
:root.oc-browser-keyboard-open .oc-draft-starters {
|
||
display: none;
|
||
}
|
||
|
||
/* The draft title (.oc-draft-center) is vertically centered, so it has no
|
||
scroll-pinning to compensate the keyboard like the chat does. It rides the
|
||
keyboard choreography with an INLINE transform of half the keyboard shift
|
||
(exactly how far the center moves after the shell snap) — see the kb-movers
|
||
list in useNativeMobileChrome. No CSS rules needed here; the class only
|
||
marks the element for the mover query. */
|
||
|
||
/* Mobile-browser fullscreen composer (visual-viewport pinned form in
|
||
ChatInput): the header would otherwise paint above it — the form can't
|
||
out-stack it from inside the composer wrapper's z-10 context. */
|
||
:root.oc-browser-kb-fullscreen .oc-mobile-header {
|
||
visibility: hidden;
|
||
}
|
||
|
||
/* Installed PWA (standalone) safe areas. In the in-browser page Safari's own
|
||
chrome covers the home indicator and status bar, and the Capacitor shell has
|
||
its own choreography (--oc-app-bottom-safe + keyboard FLIP) — neither matches
|
||
display-mode: standalone, so this block is PWA-only and cannot regress them.
|
||
Standalone runs the page edge-to-edge (viewport-fit=cover), so the composer
|
||
needs real top/bottom safe-area room of its own. */
|
||
@media (display-mode: standalone) {
|
||
/* Bottom: reserve home-indicator room under the composer while the keyboard
|
||
is down. The generic .bottom-safe-area token is intentionally capped at
|
||
4px (visual tuck under the gradient overlay), which is not enough to keep
|
||
controls clear of the indicator / rounded corners. A fixed floor is
|
||
required: iOS 26 standalone reports env(safe-area-inset-bottom) as 0.
|
||
Cancel the room while the keyboard is up (the indicator area is behind the
|
||
keyboard, and the pinned form anchors by its offsetHeight). The class flip
|
||
is deliberately delayed (tap race, see ChatInput onBlur) — the transition
|
||
turns that late flip into a slide instead of a dip-then-pop. */
|
||
:root:not(.oc-capacitor-app) .oc-mobile-composer {
|
||
transition: padding-bottom 220ms cubic-bezier(0.33, 1, 0.68, 1);
|
||
}
|
||
|
||
:root:not(.oc-capacitor-app):not(.oc-browser-keyboard-open) .oc-mobile-composer {
|
||
padding-bottom: calc(0.75rem + max(16px, var(--oc-safe-area-bottom, env(safe-area-inset-bottom, 0px)))) !important;
|
||
}
|
||
|
||
/* Fullscreen composer: ChatInput pins the form to the visual viewport from
|
||
y = visualViewport.offsetTop, which is 0 in standalone (no URL bar), so the
|
||
form's first row lands under the status bar / Dynamic Island. Pad the
|
||
content down into the safe region instead. */
|
||
:root.oc-browser-kb-fullscreen:not(.oc-capacitor-app) .oc-mobile-composer {
|
||
padding-top: calc(var(--oc-safe-area-top, env(safe-area-inset-top, 0px)) + 0.5rem) !important;
|
||
}
|
||
|
||
/* iOS standalone can leave 100dvh stuck at the keyboard-shrunk value after
|
||
the keyboard hides (WebKit doesn't reliably restore the dynamic viewport),
|
||
which shifted the whole shell up by that leftover. Standalone has no
|
||
collapsing browser chrome, so the dynamic and large viewports are the same
|
||
thing — pin the shell to 100lvh, which always reports full screen height.
|
||
Initial geometry is identical (lvh == dvh on load). */
|
||
:root:not(.oc-capacitor-app) .h-\[100dvh\] {
|
||
height: 100lvh;
|
||
}
|
||
|
||
/* Top toasts: same offset the Capacitor shell already applies — without it
|
||
they render under the clock / Dynamic Island. */
|
||
:root:not(.oc-capacitor-app) [data-sonner-toaster][data-y-position='top'] {
|
||
top: calc(var(--oc-safe-area-top, env(safe-area-inset-top, 0px)) + 16px) !important;
|
||
}
|
||
}
|
||
|
||
@keyframes oc-composer-morph-fade {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
/* Voice overlay variant: the overlay BACKGROUND appears immediately (it rides
|
||
the morphing shape), but its content stays hidden until the shape has mostly
|
||
finished growing, then fades in — no clipped controls mid-morph. Timings
|
||
follow the 340ms wrapper morph in ChatInput. */
|
||
.oc-composer-morph-content-fade > * {
|
||
animation: oc-composer-morph-fade 0.18s ease-out 0.26s both;
|
||
}
|