feat(mobile): add keyboard avoidance for input area

packages/ui/src/index.css

@@ -12,6 +12,7 @@
   --oc-header-height: 56px;
   --oc-visual-viewport-offset-top: 0px;
   --oc-keyboard-inset: 0px;
+  --oc-keyboard-avoid-offset: 0px;
   --ui-regular-font-weight: 400;
   --oc-scrollbar-thumb: oklch(0.32 0.03 50 / 0.4);
   --oc-scrollbar-thumb-hover: oklch(0.32 0.03 50 / 0.6);
@@ -56,6 +57,10 @@ textarea[data-chat-input="true"]:hover {
   -webkit-appearance: none;
 }
 
+[data-keyboard-avoid-active="true"] {
+  transform: translateY(calc(-1 * var(--oc-keyboard-avoid-offset, 0px)));
+}
+
 /* Scroll shadow (HeroUI) fallback styling to ensure visible gradients without the Tailwind plugin */
 [data-scroll-shadow="true"] {
   --scroll-shadow-size: var(--scroll-shadow-size, 48px);