fix(mobile): deep-audit structural fixes — dialogs, toasts, call bar (N1)

From the 6-agent deep per-feature audit. Mobile-gated / consistency fixes;
desktop unchanged except two intentional dialog-width normalizations noted below.

- In-call control bar: wrap="Wrap" on the SequenceCard so the compact two-group
  row wraps on the narrowest phones (<=390px) instead of pushing End off-screen
  (M1 fixed the 500-750px band; this covers narrower). Desktop stays one row.
- In-call soundboard popout: clamp maxWidth to the viewport (like M5's screenshare
  popover) so it can't overflow a narrow phone.
- Report-Message dialog + "Seen by" (EventReaders) modals (Message.tsx x2 +
  RoomViewFollowing): add useModalStyle so they go full-screen on mobile like
  their sibling report/receipt modals (they floated as fixed cards before).
- In-app toast container: full-width toasts inset from both edges on mobile
  (ScreenSize.Mobile); a fixed 280-340px card previously overflowed a narrow
  phone. Desktop byte-identical (bottom-right floating card).
- Policy-list tabs + audio-controls rows: wrap="Wrap" (inert on desktop).

Intentional desktop deltas (normalizing to existing sibling modals, verified by
two review passes as consistent, not regressions): Report dialog max-width
380->480px; EventReaders modals 460->360px.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/room/message/Message.tsx

@@ -65,6 +65,7 @@ import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { msgTranslationActiveAtomFamily } from '../../../state/translation';
 import { chromeTranslationEngine } from '../../../utils/translation/chromeEngine';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useModalStyle } from '../../../hooks/useModalStyle';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import * as css from './styles.css';
 import { MsgAppearClass, SendingSpinClass } from '../../../styles/Animations.css';
@@ -260,6 +261,7 @@ export const MessageReadReceiptItem = as<
   }
 >(({ room, eventId, onClose, ...props }, ref) => {
   const [open, setOpen] = useState(false);
+  const modalStyle = useModalStyle(360);
 
   const handleClose = () => {
     setOpen(false);
@@ -278,7 +280,7 @@ export const MessageReadReceiptItem = as<
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Modal variant="Surface" size="300">
+            <Modal variant="Surface" size="300" style={modalStyle}>
               <EventReaders room={room} eventId={eventId} requestClose={handleClose} />
             </Modal>
           </FocusTrap>
@@ -674,6 +676,7 @@ export const MessageReportItem = as<
 >(({ room, mEvent, onClose, ...props }, ref) => {
   const mx = useMatrixClient();
   const [open, setOpen] = useState(false);
+  const modalStyle = useModalStyle(480);
   const [reportState, reportMessage] = useAsyncCallback(
     useCallback(
       (eventId: string, score: number, reason: string) =>
@@ -715,7 +718,7 @@ export const MessageReportItem = as<
               escapeDeactivates: stopPropagation,
             }}
           >
-            <Dialog variant="Surface">
+            <Dialog variant="Surface" style={modalStyle}>
               <Header
                 style={{
                   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,