fix(polls): readable poll card: counts, visible bars/indicators, no chip overflow (#246)

Rendering only; the vote logic (tally, optimistic votes, end poll, keyboard
radiogroup, voters) is unchanged.

- Every row shows "N votes · P%". Multiple choice looked broken as
  "100% / 100%" with no counts; the footer now says "voters" there.
- Results are a thin progress bar under each answer: accent for your pick,
  success for the winner, neutral otherwise. The old full-row fill was the
  same grey as the row, so a 100% answer just looked disabled.
- Radio and checkbox indicators are 18px with a 2px border in a colour mixed
  from the theme's text colour. Primary.ContainerLine was nearly invisible,
  especially in dark themes.
- The winner shows a star and "Winner" instead of a second check mark.
- Bordered card, 460px wide (max 100%, same width for every poll). The header
  is now "Poll · Single choice | Pick up to N | Results hidden until the end |
  Final results", replacing the letter-spaced "◉ POLL · …" line.
- Footer: plain muted text that wraps, and chips ("Who voted", "End poll")
  that never wrap. Previously the chip label broke onto two lines inside a
  one-line chip and spilled out of it. Reproduced before/after in Lotus
  Terminal at 150% zoom, a 360px phone, and dark at 125%.
- Lotus Terminal theme: data-winner gets its own green border rule.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

package-lock.json

@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.21",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.21",
+      "version": "0.25.0-lotus.22",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.21/element-call-embedded-0.25.0-lotus.21.tgz",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.22/element-call-embedded-0.25.0-lotus.22.tgz",
-      "integrity": "sha512-Phtjop2qdKRrCLqAhzipRaJaVnU3MjK9CV4QwHkwU/Xlj8oguZBfjOlV7zTqOTzAr57OteOfLcyxLsmv5+u9tg==",
+      "integrity": "sha512-AimDKZA4xUKEEyl2XUFUSUDl03tBKFv88T/3igKyH2VqNSPMGnqcQJC5HXIkHLTWrOmg8kLcJ//FFbqlUZiLcA==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {

package.json

@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.21",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/components/CallEmbedProvider.tsx

@@ -38,7 +38,7 @@ import {
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
 import { toastQueueAtom } from '../state/toast';
-import { CallEmbed, useCallControlState } from '../plugins/call';
+import { CallEmbed, useCallControlState, useScreensharePromptOpen } from '../plugins/call';
 import { hangupCallAndWait } from '../plugins/call/hangup';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
@@ -82,6 +82,7 @@ import { useRoomCallPolicy } from '../hooks/useRoomCallPolicy';
 import { useNotificationsQuiet } from '../hooks/useNotificationsQuiet';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
+import { CallsUnavailableMessage } from '../features/call/CallsUnavailable';
 import { zIndices } from '../styles/zIndex';
 
 const PIP_MIN_W = 200;
@@ -231,13 +232,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                 </Text>
               )}
               {!webRTCSupported() && (
-                <Text
+                <CallsUnavailableMessage roomId={room.roomId} actionLabel="Answer in browser" />
-                  style={{ margin: 'auto', color: color.Critical.Main }}
-                  size="L400"
-                  align="Center"
-                >
-                  Your browser does not support WebRTC, which is required for calling.
-                </Text>
               )}
               <Box direction="Column" gap="300">
                 {willAnswerWithCamera && (
@@ -882,6 +877,7 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   const callActive = callEmbed && joined;
   const callVisible = inCallRoom && callActive && !chatOnlyView;
   const pipMode = callActive && !inCallRoom;
+  const pipPromptOpen = useScreensharePromptOpen(callEmbed?.control);
   const { navigateRoom } = useRoomNavigate();
 
   const { screenshare: pipScreenshare } = useCallControlState(callEmbed?.control);
@@ -1363,6 +1359,9 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 zIndex: 1,
                 background: 'transparent',
                 cursor: 'grab',
+                // [Gitea #43] The call's "Share your screen?" prompt is drawn
+                // inside the frame: let the click reach its Share button.
+                pointerEvents: pipPromptOpen ? 'none' : undefined,
                 display: 'flex',
                 alignItems: 'flex-start',
                 justifyContent: 'flex-end',

src/app/components/message/content/PollContent.tsx

@@ -261,52 +261,69 @@ export function PollContent({
     handleVote(answers[idx].id);
   };
 
-  const headerLabel = isEnded
+  // [Gitea #246] Type line under the "Poll" label.
-    ? 'Poll closed · Final results'
+  const typeLabel = (() => {
-    : `Poll · ${isMultiple ? 'Multiple choice' : 'Single choice'}`;
+    if (isEnded) return 'Final results';
+    if (isUndisclosed) return 'Results hidden until the end';
+    return isMultiple ? `Pick up to ${maxSelections}` : 'Single choice';
+  })();
 
+  // Multiple choice counts people, not answers ("1 voter" who picked two).
+  const unit = isMultiple ? 'voter' : 'vote';
   const footerNote = (() => {
+    const totalPart = total > 0 ? `${total} ${unit}${total === 1 ? '' : 's'}` : `No ${unit}s yet`;
     if (isUndisclosed && !isEnded) {
       return canVote
-        ? 'Voting open · Results hidden until the poll ends'
+        ? `${myVotes.size > 0 ? 'You voted' : 'Voting open'} · results shown when the poll ends`
-        : 'Results hidden until the poll ends';
+        : 'Results shown when the poll ends';
     }
-    const votesPart = total > 0 ? `${total} vote${total === 1 ? '' : 's'}` : 'No votes yet';
+    if (isEnded) return `${totalPart} · Poll closed`;
-    if (isEnded) return `${votesPart} · Poll closed`;
+    if (!canVote) return totalPart;
-    if (!canVote) return votesPart;
+    return `${totalPart} · ${myVotes.size > 0 ? 'Select another answer to change your vote' : 'Select an answer to vote'}`;
-    if (isMultiple) return `${votesPart} · Select up to ${maxSelections}`;
-    return `${votesPart} · ${myVotes.size > 0 ? 'Click to change' : 'Click to vote'}`;
   })();
 
+  // Neutral tones derived from the theme's text colour, so they have contrast
+  // in every theme (the Container/ContainerLine tokens were near-invisible).
+  const muted = (pct: number) =>
+    `color-mix(in srgb, ${color.SurfaceVariant.OnContainer} ${pct}%, transparent)`;
+
   return (
     <Box
       data-poll-content
       direction="Column"
-      gap="200"
+      gap="300"
-      style={{ maxWidth: '340px', paddingTop: '2px', paddingBottom: '4px' }}
-    >
-      <Text
-        as="div"
-        size="T200"
-        priority="300"
-        data-poll-content-label
       style={{
-          fontWeight: 700,
+        // Same width for every poll (the message body shrink-wraps its content).
-          letterSpacing: '0.12em',
+        width: toRem(460),
-          textTransform: 'uppercase',
+        maxWidth: '100%',
-          marginBottom: config.space.S100,
+        margin: `${config.space.S100} 0`,
+        padding: config.space.S300,
+        borderRadius: config.radii.R400,
+        border: `${config.borderWidth.B300} solid ${muted(18)}`,
+        background: muted(4),
+        boxSizing: 'border-box',
       }}
     >
-        <span aria-hidden>◉ </span>
+      <Box direction="Column" gap="100">
-        {headerLabel}
+        <Box alignItems="Center" gap="200" wrap="Wrap" data-poll-content-label>
+          <Icon size="100" src={Icons.OrderList} style={{ opacity: 0.8 }} />
+          <Text as="span" size="L400" style={{ fontWeight: 600 }}>
+            Poll
           </Text>
-      <Text size="T400" style={{ fontWeight: 600 }}>
+          <Text as="span" size="T200" priority="300">
+            ·
+          </Text>
+          <Text as="span" size="T200" priority="300">
+            {typeLabel}
+          </Text>
+        </Box>
+        <Text size="T400" style={{ fontWeight: 600, overflowWrap: 'anywhere' }}>
           {question}
         </Text>
+      </Box>
       <Box
         direction="Column"
-        gap="100"
+        gap="200"
-        style={{ marginTop: '2px' }}
         role={isMultiple ? 'group' : 'radiogroup'}
         aria-label={question}
         onKeyDown={handleRadioKeyDown}
@@ -316,20 +333,32 @@ export function PollContent({
           const text = answer.text;
           const selected = myVotes.has(id);
           const voteCount = counts.get(id) ?? 0;
-          const pct = showResults && total > 0 ? Math.round((voteCount / total) * 100) : 0;
+          const showBar = showResults && total > 0;
+          const pct = showBar ? Math.round((voteCount / total) * 100) : 0;
           const isWinner = winners.has(id);
+          const resultText = `${voteCount} ${voteCount === 1 ? 'vote' : 'votes'} · ${pct}%`;
           // Roving tabindex for the single-choice radiogroup; checkboxes stay tabbable.
           const tabIndex = isMultiple ? 0 : selected || (myVotes.size === 0 && i === 0) ? 0 : -1;
+          let barColor = muted(40);
+          if (isWinner) barColor = color.Success.Main;
+          else if (selected) barColor = color.Primary.Main;
+          let rowBorder = muted(22);
+          if (isWinner) rowBorder = color.Success.Main;
+          else if (selected) rowBorder = color.Primary.Main;
+          const labelParts = [text];
+          if (showBar) labelParts.push(resultText);
+          if (isWinner) labelParts.push('winning answer');
           return (
             <React.Fragment key={id}>
               <button
                 type="button"
                 data-poll-answer
                 data-selected={selected}
+                data-winner={isWinner || undefined}
                 role={isMultiple ? 'checkbox' : 'radio'}
                 aria-checked={selected}
                 aria-disabled={!canVote}
-                aria-label={isWinner ? `${text}, winning answer` : undefined}
+                aria-label={labelParts.join(', ')}
                 aria-describedby={
                   showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0
                     ? `poll-voters-${eventId}-${id}`
@@ -340,60 +369,36 @@ export function PollContent({
                 style={{
                   padding: `${config.space.S200} ${config.space.S300}`,
                   borderRadius: config.radii.R300,
-                  background: selected ? color.Primary.Container : color.SurfaceVariant.Container,
+                  background: selected ? muted(8) : 'transparent',
-                  border: `${config.borderWidth.B300} solid ${
+                  border: `${config.borderWidth.B300} solid ${rowBorder}`,
-                    isWinner
-                      ? color.Success.Main
-                      : selected
-                        ? color.Primary.Main
-                        : color.SurfaceVariant.ContainerLine
-                  }`,
                   lineHeight: 1.4,
                   textAlign: 'left',
                   cursor: canVote ? 'pointer' : 'default',
                   color: 'inherit',
+                  font: 'inherit',
                   display: 'flex',
                   flexDirection: 'column',
-                  gap: config.space.S100,
+                  gap: config.space.S200,
                   width: '100%',
-                  position: 'relative',
-                  overflow: 'hidden',
                   transition: 'border-color 0.15s, background 0.15s',
                 }}
               >
-                {showResults && total > 0 && (
-                  <span
-                    aria-hidden
-                    style={{
-                      position: 'absolute',
-                      inset: 0,
-                      right: 'auto',
-                      width: `${pct}%`,
-                      background: selected
-                        ? color.Primary.ContainerActive
-                        : color.SurfaceVariant.ContainerActive,
-                      pointerEvents: 'none',
-                      transition: 'width 0.3s ease',
-                    }}
-                  />
-                )}
                 <span
                   style={{
                     display: 'flex',
                     alignItems: 'center',
                     gap: config.space.S200,
-                    position: 'relative',
+                    width: '100%',
                   }}
                 >
                   <span
                     aria-hidden
                     style={{
                       flexShrink: 0,
-                      width: toRem(14),
+                      boxSizing: 'border-box',
-                      height: toRem(14),
+                      width: toRem(18),
-                      border: `${config.borderWidth.B300} solid ${
+                      height: toRem(18),
-                        selected ? color.Primary.Main : color.Primary.ContainerLine
+                      border: `2px solid ${selected ? color.Primary.Main : muted(55)}`,
-                      }`,
                       borderRadius: isMultiple ? config.radii.R300 : config.radii.Pill,
                       background: selected ? color.Primary.Main : 'transparent',
                       display: 'flex',
@@ -405,29 +410,72 @@ export function PollContent({
                   >
                     {selected ? <Icon size="50" src={Icons.Check} /> : null}
                   </span>
-                  <Text as="span" size="T300" style={{ flexGrow: 1 }}>
+                  <Text
+                    as="span"
+                    size="T300"
+                    style={{ flexGrow: 1, minWidth: 0, overflowWrap: 'anywhere' }}
+                  >
                     {text}
                   </Text>
                   {isWinner && (
-                    <Icon
+                    <Text
-                      size="50"
+                      as="span"
-                      src={Icons.Check}
+                      size="T200"
-                      style={{ flexShrink: 0, color: color.Success.Main }}
+                      style={{
-                    />
+                        flexShrink: 0,
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: config.space.S100,
+                        color: color.Success.Main,
+                        fontWeight: 600,
+                      }}
+                    >
+                      <Icon size="50" src={Icons.Star} filled />
+                      Winner
+                    </Text>
                   )}
-                  {showResults && total > 0 && (
+                  {showBar && (
-                    <Text as="span" size="T200" priority="300" style={{ flexShrink: 0 }}>
+                    <Text
-                      {pct}%
+                      as="span"
+                      size="T200"
+                      priority="300"
+                      style={{ flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}
+                    >
+                      {resultText}
                     </Text>
                   )}
                 </span>
+                {showBar && (
+                  <span
+                    aria-hidden
+                    style={{
+                      display: 'block',
+                      width: '100%',
+                      height: toRem(6),
+                      borderRadius: config.radii.Pill,
+                      background: muted(12),
+                      overflow: 'hidden',
+                    }}
+                  >
+                    <span
+                      style={{
+                        display: 'block',
+                        height: '100%',
+                        width: `${pct}%`,
+                        borderRadius: config.radii.Pill,
+                        background: barColor,
+                        transition: 'width 0.3s ease',
+                      }}
+                    />
+                  </span>
+                )}
               </button>
               {showVoters && canShowVoters && (voters.get(id)?.length ?? 0) > 0 && (
                 <Text
                   id={`poll-voters-${eventId}-${id}`}
                   size="T200"
                   priority="300"
-                  style={{ padding: `0 ${config.space.S300} ${config.space.S100}` }}
+                  style={{ padding: `0 ${config.space.S300}`, marginTop: `-${config.space.S100}` }}
                 >
                   {`Voted by ${(voters.get(id) ?? []).map((s) => getMemberName(room, s)).join(', ')}`}
                 </Text>
@@ -436,8 +484,12 @@ export function PollContent({
           );
         })}
       </Box>
+      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200" wrap="Wrap">
+        <Text size="T200" priority="300" style={{ minWidth: 0, flex: '1 1 12rem' }}>
+          {footerNote}
+        </Text>
+        <Box gap="100" shrink="No" alignItems="Center" wrap="Wrap">
           {canShowVoters && (
-        <Box>
             <Chip
               variant={showVoters ? 'Primary' : 'SurfaceVariant'}
               radii="Pill"
@@ -445,29 +497,30 @@ export function PollContent({
               onClick={() => setShowVoters((v) => !v)}
               before={<Icon size="50" src={Icons.User} />}
             >
-            <Text size="T200">{showVoters ? 'Hide voters' : 'Show who voted'}</Text>
+              <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
-          </Chip>
+                {showVoters ? 'Hide voters' : 'Who voted'}
-        </Box>
-      )}
-      <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
-        <Text size="T200" priority="300" style={{ minWidth: 0 }}>
-          <i>{footerNote}</i>
               </Text>
+            </Chip>
+          )}
           {canEnd &&
             (confirmEnd ? (
-            <Box gap="100" shrink="No" alignItems="Center">
+              <>
                 <Chip
                   variant="Critical"
                   radii="Pill"
                   aria-disabled={ending}
                   onClick={ending ? undefined : handleEndPoll}
                 >
-                <Text size="T200">{ending ? 'Ending…' : 'End poll'}</Text>
+                  <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                    {ending ? 'Ending…' : 'End poll'}
+                  </Text>
                 </Chip>
                 <Chip variant="Secondary" radii="Pill" onClick={() => setConfirmEnd(false)}>
-                <Text size="T200">Cancel</Text>
+                  <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                    Cancel
+                  </Text>
                 </Chip>
-            </Box>
+              </>
             ) : (
               <Chip
                 variant="SurfaceVariant"
@@ -475,10 +528,13 @@ export function PollContent({
                 onClick={() => setConfirmEnd(true)}
                 before={<Icon size="50" src={Icons.Cross} />}
               >
-              <Text size="T200">End poll</Text>
+                <Text size="T200" style={{ whiteSpace: 'nowrap' }}>
+                  End poll
+                </Text>
               </Chip>
             ))}
         </Box>
       </Box>
+    </Box>
   );
 }

src/app/features/call-status/CallControl.tsx

@@ -7,7 +7,7 @@ import {
   CallEmbed,
   useCallControlState,
   useCallMicLevel,
-  useFrameScreenshare,
+  useScreenshareMode,
 } from '../../plugins/call';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { callEmbedAtom } from '../../state/callEmbed';
@@ -197,10 +197,16 @@ export function CallControl({
   // Keep a forbidden control visible while its track is still live (so the user
   // can stop it); otherwise hide it entirely.
   const showCamera = allowCamera || video;
-  // [Gitea #43] Hidden where EC shows its own screenshare button in the frame.
+  // [Gitea #43] Hidden where EC shows its own screenshare button in the frame;
-  const frameScreenshare = useFrameScreenshare(callEmbed.control);
+  // where the click can't be delegated, starting asks for the in-frame prompt.
-  const showScreenshare = !frameScreenshare && (allowScreenshare || screenshare);
+  const screenshareMode = useScreenshareMode(callEmbed.control);
+  const showScreenshare = screenshareMode !== 'hidden' && (allowScreenshare || screenshare);
   const [shareConfirm, setShareConfirm] = useState(false);
+  const handleScreenshareToggle = () => {
+    if (screenshare) callEmbed.control.toggleScreenshare();
+    else if (screenshareMode === 'prompt') callEmbed.control.promptScreenshare();
+    else setShareConfirm(true);
+  };
 
   const handleMicrophoneToggle = useCallback(
     () => callEmbed.control.toggleMicrophone(),
@@ -255,9 +261,7 @@ export function CallControl({
         {!compact && showScreenshare && (
           <ScreenShareButton
             enabled={screenshare}
-            onToggle={() =>
+            onToggle={() => handleScreenshareToggle()}
-              screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-            }
             disabled={!callJoined}
           />
         )}

src/app/features/call/CallControls.tsx

@@ -33,7 +33,7 @@ import {
   CallEmbed,
   useCallControlState,
   useCallMicLevel,
-  useFrameScreenshare,
+  useScreenshareMode,
 } from '../../plugins/call';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
@@ -112,9 +112,14 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   // can stop it); otherwise hide it entirely.
   const showCamera = allowCamera || video;
   // [Gitea #43] Where EC shows its own screenshare button in the frame, ours
-  // is hidden (this engine can't start a share from the host); the
+  // is hidden (the screenshare-audio mute stays); where the click can't be
-  // screenshare-audio mute stays.
+  // delegated, starting asks for the fork's in-frame "Share your screen?".
-  const frameScreenshare = useFrameScreenshare(callEmbed.control);
+  const screenshareMode = useScreenshareMode(callEmbed.control);
+  const handleScreenshareToggle = () => {
+    if (screenshare) callEmbed.control.toggleScreenshare();
+    else if (screenshareMode === 'prompt') callEmbed.control.promptScreenshare();
+    else setShareConfirm(true);
+  };
   const showScreenshare = allowScreenshare || screenshare;
   const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -225,12 +230,10 @@ export function CallControls({ callEmbed }: CallControlsProps) {
               {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
               {showScreenshare && (
                 <>
-                  {!frameScreenshare && (
+                  {screenshareMode !== 'hidden' && (
                     <ScreenShareButton
                       enabled={screenshare}
-                      onToggle={() =>
+                      onToggle={() => handleScreenshareToggle()}
-                        screenshare ? callEmbed.control.toggleScreenshare() : setShareConfirm(true)
-                      }
                     />
                   )}
                   {/* Mute-screenshare-audio sits directly next to the screenshare

src/app/features/call/CallView.tsx

@@ -23,6 +23,7 @@ import { CallMemberRenderer } from './CallMemberCard';
 import * as css from './styles.css';
 import { CallControls } from './CallControls';
 import { useLivekitSupport } from '../../hooks/useLivekitSupport';
+import { CallsUnavailableMessage } from './CallsUnavailable';
 import { webRTCSupported } from '../../utils/rtc';
 
 function LivekitServerMissingMessage() {
@@ -33,25 +34,19 @@ function LivekitServerMissingMessage() {
   );
 }
 
-function WebRTCMissingError() {
-  return (
-    <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
-      Your browser does not support WebRTC, which is required for calling.
-    </Text>
-  );
-}
-
 function JoinMessage({
+  roomId,
   hasParticipant,
   livekitSupported,
   rtcSupported,
 }: {
+  roomId: string;
   hasParticipant?: boolean;
   livekitSupported?: boolean;
   rtcSupported?: boolean;
 }) {
   if (rtcSupported === false) {
-    return <WebRTCMissingError />;
+    return <CallsUnavailableMessage roomId={roomId} />;
   }
 
   if (livekitSupported === false) {
@@ -144,6 +139,7 @@ function CallPrescreen() {
             )}
             {!inOtherCall && hasPermission && !channelFull && (
               <JoinMessage
+                roomId={room.roomId}
                 hasParticipant={hasParticipant}
                 livekitSupported={livekitSupported}
                 rtcSupported={rtcSupported}

src/app/features/call/CallsUnavailable.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from 'react';
+import { Box, Button, Icon, Icons, Text, color } from 'folds';
+import { useClientConfig } from '../../hooks/useClientConfig';
+import { isTauri } from '../../hooks/useTauri';
+import { webRTCSupported } from '../../utils/rtc';
+import { getCallInBrowserUrl, resolveWebAppUrl } from '../../utils/callInBrowser';
+
+/**
+ * [cinny-desktop: Linux calls] The desktop app on Linux runs on WebKitGTK,
+ * which ships without WebRTC (disabled in 2.54; a libwebrtc backend is due
+ * around 2.56). Where calls can't work here, send the user to the room in the
+ * web app instead of a dead end. Only in the desktop app, and only when
+ * config.json sets `webAppUrl`.
+ */
+export const useCallInBrowserUrl = (roomId: string): string | undefined => {
+  const { webAppUrl } = useClientConfig();
+  return useMemo(
+    () =>
+      isTauri() && !webRTCSupported()
+        ? getCallInBrowserUrl(resolveWebAppUrl(webAppUrl), roomId)
+        : undefined,
+    [webAppUrl, roomId],
+  );
+};
+
+/** Opens through the desktop's new-window handler → the system browser. */
+export const openCallInBrowser = (url: string): void => {
+  window.open(url, '_blank', 'noopener,noreferrer');
+};
+
+const desktopUnavailableText = (): string =>
+  typeof navigator !== 'undefined' && /Linux/i.test(navigator.userAgent)
+    ? 'Calls aren’t available in the desktop app on Linux yet: its web engine has no WebRTC.'
+    : 'Calls aren’t available in this desktop app: its web engine has no WebRTC.';
+
+type CallsUnavailableMessageProps = {
+  roomId: string;
+  /** Button label, e.g. "Answer in browser" for an incoming call. */
+  actionLabel?: string;
+};
+
+export function CallsUnavailableMessage({
+  roomId,
+  actionLabel = 'Open in browser',
+}: CallsUnavailableMessageProps) {
+  const url = useCallInBrowserUrl(roomId);
+
+  if (!isTauri()) {
+    return (
+      <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
+        Your browser does not support WebRTC, which is required for calling.
+      </Text>
+    );
+  }
+
+  return (
+    <Box direction="Column" alignItems="Center" gap="200" style={{ margin: 'auto' }}>
+      <Text style={{ color: color.Warning.Main }} size="L400" align="Center">
+        {desktopUnavailableText()}
+        {url ? ' You can join from the web app in your browser.' : ''}
+      </Text>
+      {url && (
+        <Button
+          size="300"
+          variant="Secondary"
+          fill="Soft"
+          radii="300"
+          before={<Icon size="100" src={Icons.External} />}
+          onClick={() => openCallInBrowser(url)}
+        >
+          <Text size="B300">{actionLabel}</Text>
+        </Button>
+      )}
+    </Box>
+  );
+}

src/app/features/room/RoomViewHeader.tsx

@@ -80,6 +80,7 @@ import { widgetsPanelAtom } from '../../state/widgetsPanel';
 import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
 import { threadsListAtom } from '../../state/threadsList';
 import { usePendingKnocks } from '../../hooks/usePendingKnocks';
+import { openCallInBrowser, useCallInBrowserUrl } from '../call/CallsUnavailable';
 import { bookmarksPanelAtom } from '../../state/bookmarksPanel';
 
 type RoomMenuProps = {
@@ -465,6 +466,36 @@ function CallRulesChip({ room }: { room: Room }) {
   );
 }
 
+/**
+ * [cinny-desktop: Linux calls] Stand-in for CallButton where this app can't
+ * make calls (desktop on WebKitGTK): opens the room in the web app instead.
+ */
+function CallInBrowserButton({ url }: { url: string }) {
+  return (
+    <TooltipProvider
+      position="Bottom"
+      offset={4}
+      tooltip={
+        <Tooltip>
+          <Text>Call in your browser (this desktop app can’t make calls here)</Text>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => (
+        <IconButton
+          variant="Surface"
+          fill="None"
+          ref={triggerRef}
+          aria-label="Start call in browser"
+          onClick={() => openCallInBrowser(url)}
+        >
+          <Icon size="400" src={Icons.VideoCamera} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}
+
 function CallButton() {
   const room = useRoom();
   const direct = useIsDirectRoom();
@@ -555,6 +586,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   );
   const livekitSupported = useLivekitSupport();
   const rtcSupported = webRTCSupported();
+  const callInBrowserUrl = useCallInBrowserUrl(room.roomId);
 
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
@@ -782,11 +814,16 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
             {screenSize === ScreenSize.Desktop && <CallRulesChip room={room} />}
             {!room.isCallRoom() &&
               livekitSupported &&
-              rtcSupported &&
+              (rtcSupported || callInBrowserUrl) &&
               hasCallPermission &&
               (direct ||
                 (room.getJoinRule() === 'invite' &&
-                  getStateEvents(room, StateEvent.SpaceParent).length === 0)) && <CallButton />}
+                  getStateEvents(room, StateEvent.SpaceParent).length === 0)) &&
+              (rtcSupported ? (
+                <CallButton />
+              ) : (
+                callInBrowserUrl && <CallInBrowserButton url={callInBrowserUrl} />
+              ))}
             {screenSize === ScreenSize.Desktop && (
               <TooltipProvider
                 position="Bottom"

src/app/hooks/useClientConfig.ts

@@ -25,6 +25,12 @@ export type ClientConfig = {
    * Unset: the bundled copy on this origin. Ignored in the desktop app.
    */
   elementCallUrl?: string;
+
+  /**
+   * Absolute https URL of the public web app (e.g. https://chat.lotusguild.org).
+   * The desktop app sets it so it can hand calls it can't make to the browser.
+   */
+  webAppUrl?: string;
 };
 
 const ClientConfigContext = createContext<ClientConfig | null>(null);

src/app/plugins/call/CallControl.ts

@@ -261,6 +261,15 @@ export class CallControl extends EventEmitter implements CallControlState {
 
   private frameScreenshareListeners = new Set<() => void>();
 
+  // [Gitea #43] The fork draws the "Share your screen?" prompt inside the frame
+  // on request (io.lotus.prompt_screenshare), so where the click can't be
+  // delegated our call-bar button asks for that instead of starting the share.
+  private _screensharePrompt = false;
+
+  // [Gitea #43] The fork's in-frame prompt is showing: anything the host lays
+  // over the frame (the picture-in-picture overlay) must let clicks through.
+  private _screensharePromptOpen = false;
+
   // [Gitea #43] Whether the room's call policy allows screensharing; the fork
   // hides its in-frame button when it doesn't.
   private frameScreenshareAllowed = true;
@@ -274,7 +283,32 @@ export class CallControl extends EventEmitter implements CallControlState {
     return this._frameScreenshare;
   }
 
-  /** Subscribe to `frameScreenshare` changes. Returns an unsubscribe. */
+  /**
+   * Starting a share must go through the fork's in-frame prompt: this engine
+   * can't delegate the click (Firefox, Safari, WebKitGTK) and the fork has
+   * the prompt. Stopping never needs it.
+   */
+  public get screenshareNeedsPrompt(): boolean {
+    return this._screensharePrompt && !canDelegateCapability();
+  }
+
+  /** The fork's in-frame "Share your screen?" prompt is showing. */
+  public get screensharePromptOpen(): boolean {
+    return this._screensharePromptOpen;
+  }
+
+  /**
+   * Ask the fork to show "Share your screen?" inside the call frame; its Share
+   * button starts the share with the frame's own click.
+   */
+  public promptScreenshare(): void {
+    this.sendForkAction('io.lotus.prompt_screenshare', {});
+  }
+
+  /**
+   * Subscribe to `frameScreenshare` / `screenshareNeedsPrompt` /
+   * `screensharePromptOpen` changes. Returns an unsubscribe.
+   */
   public onFrameScreenshareChange(cb: () => void): () => void {
     this.frameScreenshareListeners.add(cb);
     return () => {
@@ -289,7 +323,8 @@ export class CallControl extends EventEmitter implements CallControlState {
   }
 
   private sendFrameScreenshareAllowed(): void {
-    if (!this.joined || !this.forkReady || !this._frameScreenshare) return;
+    if (!this.joined || !this.forkReady) return;
+    if (!this._frameScreenshare && !this._screensharePrompt) return;
     this.sendForkAction('io.lotus.set_frame_screenshare', {
       visible: this.frameScreenshareAllowed,
     });
@@ -324,18 +359,32 @@ export class CallControl extends EventEmitter implements CallControlState {
   /** [Gitea #43] The fork's `io.lotus.controls_state` report. */
   public onControlsState(data: unknown) {
     if (typeof data !== 'object' || data === null) return;
-    const { screensharing, layout, frameScreenshare } = data as {
+    const { screensharing, layout, frameScreenshare, screensharePrompt, screensharePromptOpen } =
+      data as {
         screensharing?: unknown;
         layout?: unknown;
         frameScreenshare?: unknown;
+        screensharePrompt?: unknown;
+        screensharePromptOpen?: unknown;
       };
     const firstReport = !this.forkReady;
     this.forkReady = true;
     const frame = frameScreenshare === true;
-    if (frame !== this._frameScreenshare) {
+    const prompt = screensharePrompt === true;
-      this._frameScreenshare = frame;
+    const promptOpen = screensharePromptOpen === true;
+    if (promptOpen !== this._screensharePromptOpen) {
+      this._screensharePromptOpen = promptOpen;
+      if (frame === this._frameScreenshare && prompt === this._screensharePrompt) {
         this.frameScreenshareListeners.forEach((l) => l());
       }
+    }
+    if (frame !== this._frameScreenshare || prompt !== this._screensharePrompt) {
+      const promptTurnedOn = prompt && !this._screensharePrompt;
+      this._frameScreenshare = frame;
+      this._screensharePrompt = prompt;
+      this.frameScreenshareListeners.forEach((l) => l());
+      if (promptTurnedOn && !firstReport) this.sendFrameScreenshareAllowed();
+    }
     if (firstReport) {
       this.sendHotkeyCodes();
       this.sendFrameScreenshareAllowed();

src/app/plugins/call/hooks.ts

@@ -75,19 +75,46 @@ export const useCallMicLevel = (callEmbed: CallEmbed | undefined): number => {
 };
 
 /**
- * [Gitea #43] True when EC's own screenshare button is shown inside the call
+ * [Gitea #43] How the call bar's screenshare button behaves:
- * frame (no Capability Delegation in this engine), so the host bar hides its.
+ * - `hidden`: EC's own button is inside the frame (fork lotus.20/21), so ours hides;
+ * - `prompt`: starting asks the fork for its in-frame "Share your screen?"
+ *   (no Capability Delegation in this engine);
+ * - `direct`: our own confirm, then a (delegated) set_screenshare.
  */
-export const useFrameScreenshare = (control: CallControl | undefined): boolean => {
+export type ScreenshareMode = 'hidden' | 'prompt' | 'direct';
-  const [frame, setFrame] = useState(() => control?.frameScreenshare ?? false);
+
+const screenshareMode = (control: CallControl): ScreenshareMode => {
+  if (control.frameScreenshare) return 'hidden';
+  return control.screenshareNeedsPrompt ? 'prompt' : 'direct';
+};
+
+export const useScreenshareMode = (control: CallControl | undefined): ScreenshareMode => {
+  const [mode, setMode] = useState<ScreenshareMode>(() =>
+    control ? screenshareMode(control) : 'direct',
+  );
   useEffect(() => {
     if (!control) {
-      setFrame(false);
+      setMode('direct');
       return undefined;
     }
-    const sync = () => setFrame(control.frameScreenshare);
+    const sync = () => setMode(screenshareMode(control));
     sync();
     return control.onFrameScreenshareChange(sync);
   }, [control]);
-  return frame;
+  return mode;
+};
+
+/** [Gitea #43] The fork's in-frame "Share your screen?" prompt is showing. */
+export const useScreensharePromptOpen = (control: CallControl | undefined): boolean => {
+  const [open, setOpen] = useState(() => control?.screensharePromptOpen ?? false);
+  useEffect(() => {
+    if (!control) {
+      setOpen(false);
+      return undefined;
+    }
+    const sync = () => setOpen(control.screensharePromptOpen);
+    sync();
+    return control.onFrameScreenshareChange(sync);
+  }, [control]);
+  return open;
 };

src/app/utils/callInBrowser.test.ts

@@ -0,0 +1,32 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { getCallInBrowserUrl, resolveWebAppUrl } from './callInBrowser';
+
+test('resolveWebAppUrl keeps an https origin (+ path) without a trailing slash', () => {
+  assert.equal(resolveWebAppUrl('https://chat.example.org'), 'https://chat.example.org');
+  assert.equal(resolveWebAppUrl('https://chat.example.org/'), 'https://chat.example.org');
+  assert.equal(resolveWebAppUrl('https://example.org/chat/'), 'https://example.org/chat');
+  assert.equal(resolveWebAppUrl('https://chat.example.org/?x=1#y'), 'https://chat.example.org');
+});
+
+test('resolveWebAppUrl rejects anything but absolute https', () => {
+  [
+    undefined,
+    null,
+    1,
+    '',
+    ' ',
+    '/home',
+    'http://chat.example.org',
+    'not a url',
+    ['javascript', 'alert(1)'].join(':'),
+    'data:text/html,x',
+  ].forEach((v) => assert.equal(resolveWebAppUrl(v), undefined, String(v)));
+});
+
+test('getCallInBrowserUrl points at the room in the web app (no auto-join)', () => {
+  const url = getCallInBrowserUrl('https://chat.example.org', '!room:example.org');
+  assert.equal(url, 'https://chat.example.org/home/!room%3Aexample.org');
+  assert.ok(!/join|call=/i.test(url ?? ''));
+  assert.equal(getCallInBrowserUrl(undefined, '!room:example.org'), undefined);
+});

src/app/utils/callInBrowser.ts

@@ -0,0 +1,27 @@
+import { getLotusRoomPermalink } from '../plugins/lotus-permalink';
+
+/**
+ * The public web app's address from config.json `webAppUrl` (the desktop app
+ * sets it; its own origin is a local server). Absolute https only; anything
+ * else is ignored.
+ */
+export const resolveWebAppUrl = (value: unknown): string | undefined => {
+  if (typeof value !== 'string' || value.trim() === '') return undefined;
+  try {
+    const url = new URL(value);
+    if (url.protocol !== 'https:') return undefined;
+    return url.origin + url.pathname.replace(/\/+$/, '');
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Where to send the user to take a call this app can't make: the room in the
+ * web app (they press Join there themselves — never an auto-join link, which
+ * a crafted URL could abuse to open someone's mic).
+ */
+export const getCallInBrowserUrl = (
+  webAppUrl: string | undefined,
+  roomId: string,
+): string | undefined => (webAppUrl ? getLotusRoomPermalink(webAppUrl, roomId) : undefined);

src/lotus-terminal.css.ts

@@ -898,6 +898,14 @@ globalStyle(
     boxShadow: '0 0 10px rgba(255,107,0,0.10)',
   },
 );
+// [Gitea #246] The poll's winning answer (after it ends).
+globalStyle(
+  `body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-answer][data-winner="true"]`,
+  {
+    border: '1px solid rgba(0,255,136,0.55) !important',
+    boxShadow: '0 0 10px rgba(0,255,136,0.10)',
+  },
+);
 globalStyle(`body.${lotusTerminalBodyClass} [data-poll-content] [data-poll-content-label]`, {
   color: 'rgba(0,212,255,0.60) !important',
   opacity: '1 !important',