Show service interruptions in call interface

Take the service interruptions component from https://github.com/element-hq/element-call/issues/4090 and the view model from https://github.com/element-hq/element-call/issues/4098, hook its state up to the transport and sync loop statuses found in CallViewModel, and display it in InCallView. The state should be determined according to the following table from Timo:

Services | Homesrever unreachable | own media server unreachable | other media server unreachable
--------- | ------------ | ----------------- | -----------------
Encryption keys | ❌️ | ✅️ | ✅️
emoji/reactions| ❌️ | ✅️ | ✅️
Other users meida | ✅️❌️ partially until you dont get keys anymore | ✅️ | ✅️❌️ partially only of the users on the effected media server
Your media is available to others| ✅️❌️ partially, until they dont get keys anymore | ❌️ Will lead to fatal error after timeout (hint only needed for for limited time) | ✅️
screensharing | ✅️ | ✅️❌️ but still can be started locally until the server is back | ✅️
Mute ( audio/video)| ✅️ | ✅️❌️ but still can be toggled locally | ✅️

This should **replace** the current modal 'Reconnecting' toast. Also take care to note that the toast requires different positioning on desktop and mobile:

For a minimally jumpy experience, we could consider [throttling](https://rxjs.dev/api/index/function/throttleTime) the toast's visibility by a couple of seconds so that it won't blip in and out of view during brief interruptions.

Start with issues 4090 and 4098, then trace the transport and sync-loop statuses in CallViewModel and the current “Reconnecting” toast in InCallView. Define the interruption state from the table, connect it to the new component and view model, and verify the replacement toast matches the supplied desktop and mobile positioning examples without the old modal remaining.

Written by the indexing model from the issue text.