Numbo のスマートフォン版チャット画面で、メッセージ入力欄をタップするとキーボードが表示されたときに画面のサイズ・位置が変わってしまう問題を修正してください。

---

Numbo のスマートフォン版チャット画面で、メッセージ入力欄をタップするとキーボードが表示されたときに画面のサイズ・位置が変わってしまう問題を修正してください。
既存の機能はすべてそのまま維持してください。

**症状：**
スマートフォンでチャット画面の入力欄をタップすると、キーボードが表示されたときに画面全体がリサイズされたり上にずれたりして使いにくい。

**修正内容：**

**【1】チャット画面のレイアウトを固定する**
- チャット画面全体を `position: fixed; top: 0; left: 0; width: 100%; height: 100%;` で固定する
- 画面の高さを `height: 100dvh`（Dynamic Viewport Height）で設定してキーボード表示時のリサイズを防ぐ
- `overflow: hidden` をチャット画面のコンテナに設定する

**【2】メッセージ一覧エリアを正しくスクロールさせる**
- ヘッダー（固定）・メッセージ一覧（スクロール可能）・入力欄（固定）の3段構成にする
- メッセージ一覧エリアに `flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;` を設定する
- メッセージ一覧がキーボードの高さ分だけ縮まり、入力欄はキーボードの直上に固定される

**【3】入力欄をキーボードの直上に固定する**
- 入力欄を `position: sticky; bottom: 0;` または `position: fixed; bottom: 0;` で固定する
- iOS のセーフエリアに対応する：`padding-bottom: env(safe-area-inset-bottom)`
- キーボードが表示されても入力欄が画面外に出ないようにする

**【4】iOS Safari・Android Chrome 対応**
- `visualViewport` API を使ってキーボード表示時の画面サイズ変化を検知して入力欄の位置を調整する：
```javascript
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', () => {
const inputArea = document.querySelector('.chat-input-area');
if (inputArea) {
inputArea.style.bottom = (window.innerHeight - window.visualViewport.height) + 'px';
}
});
}
```
- iOS Safari でアドレスバーの表示・非表示による画面リサイズを防ぐ
- Android Chrome でキーボード表示時に画面全体がスクロールアップするのを防ぐ

**【5】キーボード表示時の動作**
- 入力欄をタップしたとき画面全体の位置・サイズが変わらない
- キーボードが下からスムーズにスライドアップして表示される
- キーボードが表示された後もメッセージ一覧の位置が維持される
- 最新メッセージが見える位置にスクロールを調整する
- キーボードを閉じたとき元のレイアウトに戻る

**【6】チャット画面でナビゲーションバーを非表示にする**
- チャット画面（1対1・グループ）を開いているときは下部ナビゲーションバーを非表示にする
- これによりキーボード表示時のレイアウト崩れをさらに防ぐ

**修正後の確認：**
1. iPhone Safari でチャット入力欄をタップしてキーボードが表示されても画面位置が変わらないこと
2. Android Chrome でも同様に動作すること
3. キーボード表示中もメッセージ一覧がスクロールできること
4. 入力欄がキーボードに隠れないこと

既存の機能は変更しないでください。

---