diff --git a/GEMINI.md b/GEMINI.md
index 1d000fd..3e2e361 100644
--- a/GEMINI.md
+++ b/GEMINI.md
@@ -1,7 +1,7 @@
 # Project Guidelines & Automated Checks
 
 ## Formatting and Linting
-When asked to fix or check formatting/linting issues, or before committing code changes, always run the automated fix commands directly instead of manually inspecting and fixing errors one by one:
+When asked to fix or check formatting/linting issues, or right before the final commit prior to pushing, run the automated fix commands directly instead of manually inspecting and fixing errors one by one:
 
 ```bash
 npm run format && composer lint && npm run lint
@@ -15,7 +15,7 @@ When asked to push:
    ```
 2. Switch to that branch.
 3. Use atomic commits where applicable.
-4. Run formatting and linting checks before committing:
+4. Run formatting and linting checks only before the last commit:
    ```bash
    npm run format && composer lint && npm run lint
    ```
diff --git a/resources/js/components/navigation/Navigation.tsx b/resources/js/components/navigation/Navigation.tsx
index ddcff9b..f47cac4 100644
--- a/resources/js/components/navigation/Navigation.tsx
+++ b/resources/js/components/navigation/Navigation.tsx
@@ -23,6 +23,7 @@ import {
     defineComponent,
     nextTick,
     onBeforeUnmount,
+    onMounted,
     ref,
     toRef,
     watch,
@@ -860,49 +861,104 @@ export const SiteBottomNav = defineComponent({
         const resolvedHref = (item: { href: string }) =>
             item.href === '/' ? homeHref.value : item.href;
 
-        return () => (
-            <nav
-                class="fixed inset-x-0 bottom-0 z-40 w-full border-t border-slate-200/70 bg-white/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95"
-                aria-label="Bottom navigation"
-            >
-                <div class="mx-auto flex w-full max-w-md items-center justify-around px-1 py-2">
-                    {bottomNavItems.value.map((item) => (
-                        <Link
-                            key={item.href}
-                            href={resolvedHref(item)}
-                            class={[
-                                'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-xl px-2 py-2 transition-all duration-150 ease-out',
-                                isActive(item.href, item.match)
-                                    ? 'text-slate-900 dark:text-white'
-                                    : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
-                            ]}
-                        >
-                            <MaterialIcon
-                                name={item.icon}
-                                size={26}
-                                filled={isActive(item.href, item.match)}
-                                weight={400}
-                                class={`shrink-0 transition-transform duration-150 ${
-                                    isActive(item.href, item.match)
-                                        ? 'scale-[1.02] text-slate-900 dark:text-white'
-                                        : 'text-slate-500 dark:text-slate-400'
-                                }`}
-                            />
-                            <span
+        const isKeyboardOpen = ref(false);
+
+        const checkFocus = () => {
+            const activeEl = document.activeElement;
+            const isInputFocused =
+                activeEl instanceof HTMLInputElement ||
+                activeEl instanceof HTMLTextAreaElement ||
+                activeEl?.getAttribute('contenteditable') === 'true';
+
+            let isViewportShrunk = false;
+
+            if (typeof window !== 'undefined' && window.visualViewport) {
+                isViewportShrunk =
+                    window.innerHeight - window.visualViewport.height > 150;
+            }
+
+            isKeyboardOpen.value = isInputFocused || isViewportShrunk;
+        };
+
+        onMounted(() => {
+            if (typeof window === 'undefined') {
+                return;
+            }
+
+            window.addEventListener('focusin', checkFocus);
+            window.addEventListener('focusout', () => {
+                setTimeout(checkFocus, 100);
+            });
+
+            if (window.visualViewport) {
+                window.visualViewport.addEventListener('resize', checkFocus);
+                window.visualViewport.addEventListener('scroll', checkFocus);
+            }
+        });
+
+        onBeforeUnmount(() => {
+            if (typeof window === 'undefined') {
+                return;
+            }
+
+            window.removeEventListener('focusin', checkFocus);
+            window.removeEventListener('focusout', checkFocus);
+
+            if (window.visualViewport) {
+                window.visualViewport.removeEventListener('resize', checkFocus);
+                window.visualViewport.removeEventListener('scroll', checkFocus);
+            }
+        });
+
+        return () => {
+            if (isKeyboardOpen.value) {
+                return null;
+            }
+
+            return (
+                <nav
+                    class="fixed inset-x-0 bottom-0 z-40 w-full border-t border-slate-200/70 bg-white/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl dark:border-slate-800 dark:bg-slate-900/95"
+                    aria-label="Bottom navigation"
+                >
+                    <div class="mx-auto flex w-full max-w-md items-center justify-around px-1 py-2">
+                        {bottomNavItems.value.map((item) => (
+                            <Link
+                                key={item.href}
+                                href={resolvedHref(item)}
                                 class={[
-                                    'text-[10px] leading-none tracking-wide antialiased',
+                                    'flex min-w-0 flex-1 flex-col items-center gap-1 rounded-xl px-2 py-2 transition-all duration-150 ease-out',
                                     isActive(item.href, item.match)
-                                        ? 'font-bold'
-                                        : 'font-medium',
+                                        ? 'text-slate-900 dark:text-white'
+                                        : 'text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
                                 ]}
                             >
-                                {item.label}
-                            </span>
-                        </Link>
-                    ))}
-                </div>
-            </nav>
-        );
+                                <MaterialIcon
+                                    name={item.icon}
+                                    size={26}
+                                    filled={isActive(item.href, item.match)}
+                                    weight={400}
+                                    class={`shrink-0 transition-transform duration-150 ${
+                                        isActive(item.href, item.match)
+                                            ? 'scale-[1.02] text-slate-900 dark:text-white'
+                                            : 'text-slate-500 dark:text-slate-400'
+                                    }`}
+                                />
+                                <span
+                                    class={[
+                                        'text-[10px] leading-none tracking-wide antialiased',
+                                        isActive(item.href, item.match)
+                                            ? 'font-bold'
+                                            : 'font-medium',
+                                    ]}
+                                >
+                                    {item.label}
+                                </span>
+                            </Link>
+                        ))}
+                    </div>
+                </nav>
+            );
+        };
     },
 });
 
diff --git a/resources/js/pages/Chat/Index.vue b/resources/js/pages/Chat/Index.vue
index 07b4561..e153d4a 100644
--- a/resources/js/pages/Chat/Index.vue
+++ b/resources/js/pages/Chat/Index.vue
@@ -476,6 +476,20 @@ const scrollToBottom = (smooth = true) => {
     });
 };
 
+const handleInputFocus = () => {
+    scrollToBottom(true);
+
+    if (typeof window !== 'undefined' && window.visualViewport) {
+        setTimeout(() => {
+            messageInputRef.value?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+            });
+            scrollToBottom(true);
+        }, 150);
+    }
+};
+
 let lastFetchTimestamp = 0;
 const fetchLatestMessages = async (force = false) => {
     const now = Date.now();
@@ -2130,6 +2144,7 @@ onUnmounted(() => {
                             "
                             :maxlength="maxLengthLimit"
                             @input="handleInput"
+                            @focus="handleInputFocus"
                             @click="checkMentionTrigger"
                             @keyup="checkMentionTrigger"
                             @keydown="handleInputKeydown"
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index a2bebaf..cd0f9d5 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -18,7 +18,7 @@
                 } catch (_) {}
             })();
         </script>
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=overlays-content">
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
         <meta name="csrf-token" content="{{ csrf_token() }}">
         <meta name="color-scheme" content="light dark">
         {{-- Browser chrome: top status bar + bottom nav bar (Chrome / Edge / Samsung Internet) --}}