Numbo のビデオ通話で自分・相手の映像が表示されません。LINE のビデオ通話と同じように映像を表示できるよう修正してください。

---

Numbo のビデオ通話で自分・相手の映像が表示されません。LINE のビデオ通話と同じように映像を表示できるよう修正してください。
既存の機能はすべてそのまま維持してください。

**症状：**
ビデオ通話がつながっても自分の映像・相手の映像が両方とも表示されない。

**原因の調査：**
以下を順番に確認して問題のある箇所を特定してください。

1. `getUserMedia({ video: true, audio: true })` が正常に実行されているか
2. 取得したローカルストリームが `localVideo.srcObject` に正しく代入されているか
3. `peerConnection.ontrack` イベントで受け取ったリモートストリームが `remoteVideo.srcObject` に正しく代入されているか
4. `<video>` タグに必要な属性（`autoplay` `playsinline` `muted`（localVideoのみ））が設定されているか
5. video 要素の CSS で `display: none` や `visibility: hidden` や `width: 0` `height: 0` になっていないか
6. video 要素の `z-index` が正しく設定されていて他の要素に隠れていないか

**修正内容：**

**【自分の映像（ローカル映像）】**
- `<video id="localVideo" autoplay playsinline muted>` を通話画面に配置する
- `getUserMedia()` で取得したストリームを `localVideo.srcObject = stream` で代入する
- 表示位置：画面右下・固定位置（position: fixed・right: 16px・bottom: 100px）
- サイズ：幅120px・高さ160px
- スタイル：角丸12px・白いボーダー2px・z-index: 10001
- 自分の映像は必ずミュート（muted属性）にする（ハウリング防止）

**【相手の映像（リモート映像）】**
- `<video id="remoteVideo" autoplay playsinline>` を通話画面に配置する
- `peerConnection.ontrack = (event) => { remoteVideo.srcObject = event.streams[0]; }` で代入する
- 表示位置：画面全体（position: fixed・top: 0・left: 0・width: 100%・height: 100%）
- スタイル：object-fit: cover・z-index: 9999
- 相手の映像が受信前はダーク背景＋相手のアイコンをプレースホルダーとして表示する

**【映像が表示されないときの対処】**
- `localVideo.play()` を明示的に呼び出す
- `remoteVideo.play()` を明示的に呼び出す
- iOS Safari 対応のため `playsinline` 属性を必ず付与する
- ブラウザのカメラ許可が得られない場合は「カメラへのアクセスを許可してください」とメッセージを表示する

**【コントロールボタン】**
通話中は以下のボタンを画面下部に常に表示する（z-index: 10002）：
- マイクON/OFFボタン（マイクSVGアイコン・白）
- カメラON/OFFボタン（カメラSVGアイコン・白・OFFのとき赤い斜線）
- カメラ切替ボタン（インカメラ⇔アウトカメラ・回転SVGアイコン・白）
- 終話ボタン（赤 #e53935・大きめ64px円形・受話器SVGアイコン白斜め）
- ボタン背景：rgba(0,0,0,0.5)の半透明バーの上に配置する
- すべてのボタンのアイコン・ラベルは白色にする

**【確認事項】**
修正後に以下を確認すること：
1. ビデオ通話開始直後から自分の映像が右下に表示されること
2. 相手が応答したら相手の映像が画面全体に表示されること
3. iPhone・Android・PCのすべてで映像が表示されること
4. カメラON/OFFボタンで映像のオン・オフが切り替えられること
5. インカメラ⇔アウトカメラの切り替えが動作すること

既存のチャット・フィード・音声通話・その他の機能は変更しないでください。

---