Realtime surface panel: no layout mode for hosts (side-by-side surfaces), and overriding it silently loses a specificity tie

### Summary

`RealtimeSurfaceTabsComponent` shows exactly one pane at a time. There is no way for a host application to say "show these two surfaces together", so any side-by-side arrangement has to be imposed from outside the component — and doing that runs into a specificity trap that fails silently.

### The trap, specifically

The panel keeps every pane alive and display-toggles the active one, so a host *can* reveal two by overriding `.s-pane`. But the container rule cannot be overridden the obvious way:

- MJ emits `.surface { display: flex }` with Angular's attribute scoping → specificity (0,2,0).
- A host writing `.surface.my-split { display: grid; grid-template-columns: 1fr 1fr }` is **also** (0,2,0).
- Ties break on document order, and component styles are injected when the component first renders — *after* a host stylesheet added at startup.

So MJ wins, and the failure is invisible: `grid-template-columns` computes correctly and is silently ignored on a flex container. Everything looks applied; the panes just stack. We lost two separate debugging sessions to this — once with a CSS grid, once with Golden Layout, where the host element ended up 0px tall and GL laid its entire tree out into nothing while reporting no error.

The workaround is doubling the class (`.surface.my-split.my-split`) to win the tie without `!important`. That works, and nobody should have to know it.

### Ask

A layout mode on the surface panel — e.g. an input like `Layout: 'tabs' | 'split'` plus the set of channel keys to show — so a host can arrange surfaces through the component's own API instead of fighting its stylesheet.

Secondary: the panes carry no identity (`.s-pane` with nothing distinguishing them), so a host has to match panes to tabs by index. That works only because both lists render from the same array in the same order, which is an implementation detail a host shouldn't be relying on. A `data-channel` attribute would make it honest.

### Context

Built a two-browser side-by-side comparison on 5.51.0 — the arrangement works, but every part of getting there was a fight with a component that has no opinion about hosts arranging it.

Start at RealtimeSurfaceTabsComponent and inspect the `.surface` and `.s-pane` rendering and styles, including how active panes are selected. Add the requested layout API and channel identity so hosts can show selected surfaces side by side without stylesheet overrides; done when tabs mode remains available, split mode renders the requested channel keys together, and panes expose their channel.

Written by the indexing model from the issue text.