diff --git a/components/canvas/canvas-area.tsx b/components/canvas/canvas-area.tsx
index 8dade97e..7d13d7e4 100644
--- a/components/canvas/canvas-area.tsx
+++ b/components/canvas/canvas-area.tsx
@@ -37,6 +37,8 @@ export function CanvasArea({
   onNextSlide,
   onPlayPause,
   onWhiteboardClose,
+  isPresenting,
+  onTogglePresentation,
   showStopDiscussion,
   onStopDiscussion,
   hideToolbar,
@@ -246,6 +248,8 @@ export function CanvasArea({
           onNextSlide={onNextSlide}
           onPlayPause={onPlayPause}
           onWhiteboardClose={onWhiteboardClose}
+          isPresenting={isPresenting}
+          onTogglePresentation={onTogglePresentation}
           showStopDiscussion={showStopDiscussion}
           onStopDiscussion={onStopDiscussion}
         />
diff --git a/components/canvas/canvas-toolbar.tsx b/components/canvas/canvas-toolbar.tsx
index bf4db9f4..b0c7b50d 100644
--- a/components/canvas/canvas-toolbar.tsx
+++ b/components/canvas/canvas-toolbar.tsx
@@ -13,6 +13,8 @@ import {
   Volume2,
   VolumeX,
   Repeat,
+  Maximize2,
+  Minimize2,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useStageStore } from '@/lib/store';
@@ -35,6 +37,8 @@ export interface CanvasToolbarProps {
   readonly onWhiteboardClose: () => void;
   readonly showStopDiscussion?: boolean;
   readonly onStopDiscussion?: () => void;
+  readonly isPresenting?: boolean;
+  readonly onTogglePresentation?: () => void;
   readonly className?: string;
   // Audio/playback controls
   readonly ttsEnabled?: boolean;
@@ -92,6 +96,8 @@ export function CanvasToolbar({
   onWhiteboardClose,
   showStopDiscussion,
   onStopDiscussion,
+  isPresenting,
+  onTogglePresentation,
   className,
   ttsEnabled,
   ttsMuted,
@@ -131,6 +137,7 @@ export function CanvasToolbar({
 
   // Effective volume for display
   const effectiveVolume = ttsMuted ? 0 : ttsVolume;
+  const presentationLabel = isPresenting ? t('stage.exitFullscreen') : t('stage.fullscreen');
 
   return (
     <div className={cn('flex items-center', className)}>
@@ -382,6 +389,26 @@ export function CanvasToolbar({
 
       {/* ── Right: chat toggle ── */}
       <div className="flex items-center justify-end gap-px shrink-0 pr-1">
+        {onTogglePresentation && (
+          <button
+            onClick={onTogglePresentation}
+            className={cn(
+              ctrlBtn,
+              'w-6 h-6',
+              isPresenting
+                ? 'text-violet-600 dark:text-violet-400'
+                : 'text-gray-600 dark:text-gray-300',
+            )}
+            aria-label={presentationLabel}
+            title={presentationLabel}
+          >
+            {isPresenting ? (
+              <Minimize2 className="w-3.5 h-3.5" />
+            ) : (
+              <Maximize2 className="w-3.5 h-3.5" />
+            )}
+          </button>
+        )}
         {onToggleChat && (
           <button
             onClick={onToggleChat}
diff --git a/components/roundtable/index.tsx b/components/roundtable/index.tsx
index 0d08a71b..d3d132a1 100644
--- a/components/roundtable/index.tsx
+++ b/components/roundtable/index.tsx
@@ -74,6 +74,10 @@ interface RoundtableProps {
   readonly onPrevSlide?: () => void;
   readonly onNextSlide?: () => void;
   readonly onWhiteboardClose?: () => void;
+  readonly isPresenting?: boolean;
+  readonly controlsVisible?: boolean;
+  readonly onTogglePresentation?: () => void;
+  readonly onPresentationInteractionChange?: (active: boolean) => void;
 }
 
 const DEFAULT_TEACHER_AVATAR = '/avatars/teacher.png';
@@ -131,6 +135,10 @@ export function Roundtable({
   onPrevSlide,
   onNextSlide,
   onWhiteboardClose,
+  isPresenting,
+  controlsVisible,
+  onTogglePresentation,
+  onPresentationInteractionChange,
 }: RoundtableProps) {
   const { t } = useI18n();
   const ttsMuted = useSettingsStore((s) => s.ttsMuted);
@@ -308,6 +316,18 @@ export function Roundtable({
     }
   };
 
+  const isPresentationInteractionActive = isInputOpen || isVoiceOpen || isRecording || isProcessing;
+
+  useEffect(() => {
+    onPresentationInteractionChange?.(isPresentationInteractionActive);
+
+    return () => {
+      if (isPresentationInteractionActive) {
+        onPresentationInteractionChange?.(false);
+      }
+    };
+  }, [isPresentationInteractionActive, onPresentationInteractionChange]);
+
   // Determine active speaking state and bubble ownership
   // Check if current speaker is a student agent (not teacher)
   const speakingStudent = speakingAgentId
@@ -387,46 +407,66 @@ export function Roundtable({
   }, [playbackSpeed, setPlaybackSpeed]);
 
   return (
-    <div className="h-[192px] w-full flex flex-col relative z-10 border-t border-gray-100 dark:border-gray-800 bg-white/60 dark:bg-gray-800/60 backdrop-blur-md">
+    <div
+      className={cn(
+        'h-[192px] w-full flex flex-col relative z-10 transition-all duration-300',
+        isPresenting && !controlsVisible
+          ? 'border-t border-transparent bg-transparent backdrop-blur-none'
+          : 'border-t border-gray-100 dark:border-gray-800 bg-white/60 dark:bg-gray-800/60 backdrop-blur-md',
+      )}
+    >
       {/* ── Toolbar strip — merged from CanvasArea ── */}
-      <CanvasToolbar
-        className="shrink-0 h-8 px-3 border-b border-gray-100/40 dark:border-gray-700/30"
-        currentSceneIndex={currentSceneIndex}
-        scenesCount={scenesCount}
-        engineState={
-          engineMode === 'playing' || engineMode === 'live'
-            ? 'playing'
-            : engineMode === 'paused'
-              ? 'paused'
-              : 'idle'
-        }
-        isLiveSession={isStreaming || isTopicPending || engineMode === 'live'}
-        whiteboardOpen={whiteboardOpen}
-        sidebarCollapsed={sidebarCollapsed}
-        chatCollapsed={chatCollapsed}
-        onToggleSidebar={onToggleSidebar}
-        onToggleChat={onToggleChat}
-        onPrevSlide={onPrevSlide ?? (() => {})}
-        onNextSlide={onNextSlide ?? (() => {})}
-        onPlayPause={onPlayPause ?? (() => {})}
-        onWhiteboardClose={onWhiteboardClose ?? (() => {})}
-        showStopDiscussion={showStopButton}
-        onStopDiscussion={onStopDiscussion}
-        ttsEnabled={ttsEnabled}
-        ttsMuted={ttsMuted}
-        ttsVolume={ttsVolume}
-        onToggleMute={() => ttsEnabled && setTTSMuted(!ttsMuted)}
-        onVolumeChange={(v) => setTTSVolume(v)}
-        autoPlayLecture={autoPlayLecture}
-        onToggleAutoPlay={() => setAutoPlayLecture(!autoPlayLecture)}
-        playbackSpeed={playbackSpeed}
-        onCycleSpeed={handleCycleSpeed}
-      />
-
+      <div
+        className={cn(
+          'transition-opacity duration-300',
+          isPresenting && !controlsVisible && 'opacity-0 pointer-events-none',
+        )}
+      >
+        <CanvasToolbar
+          className="shrink-0 h-8 px-3 border-b border-gray-100/40 dark:border-gray-700/30"
+          currentSceneIndex={currentSceneIndex}
+          scenesCount={scenesCount}
+          engineState={
+            engineMode === 'playing' || engineMode === 'live'
+              ? 'playing'
+              : engineMode === 'paused'
+                ? 'paused'
+                : 'idle'
+          }
+          isLiveSession={isStreaming || isTopicPending || engineMode === 'live'}
+          whiteboardOpen={whiteboardOpen}
+          sidebarCollapsed={sidebarCollapsed}
+          chatCollapsed={chatCollapsed}
+          onToggleSidebar={onToggleSidebar}
+          onToggleChat={onToggleChat}
+          onPrevSlide={onPrevSlide ?? (() => {})}
+          onNextSlide={onNextSlide ?? (() => {})}
+          onPlayPause={onPlayPause ?? (() => {})}
+          onWhiteboardClose={onWhiteboardClose ?? (() => {})}
+          isPresenting={isPresenting}
+          onTogglePresentation={onTogglePresentation}
+          showStopDiscussion={showStopButton}
+          onStopDiscussion={onStopDiscussion}
+          ttsEnabled={ttsEnabled}
+          ttsMuted={ttsMuted}
+          ttsVolume={ttsVolume}
+          onToggleMute={() => ttsEnabled && setTTSMuted(!ttsMuted)}
+          onVolumeChange={(v) => setTTSVolume(v)}
+          autoPlayLecture={autoPlayLecture}
+          onToggleAutoPlay={() => setAutoPlayLecture(!autoPlayLecture)}
+          playbackSpeed={playbackSpeed}
+          onCycleSpeed={handleCycleSpeed}
+        />
+      </div>
       {/* ── Interaction area — three-column layout ── */}
       <div className="flex-1 flex items-stretch min-h-0">
         {/* Left: Teacher identity */}
-        <div className="w-[90px] shrink-0 flex flex-col border-r border-gray-100/50 dark:border-gray-700/50 bg-white/40 dark:bg-gray-900/40 overflow-visible relative">
+        <div
+          className={cn(
+            'w-[90px] shrink-0 flex flex-col border-r border-gray-100/50 dark:border-gray-700/50 bg-white/40 dark:bg-gray-900/40 overflow-visible relative transition-opacity duration-300',
+            isPresenting && !controlsVisible && 'opacity-0 pointer-events-none',
+          )}
+        >
           {/* Decorative Element (Top) */}
           <div className="absolute top-0 inset-x-0 h-16 bg-gradient-to-b from-purple-50/50 dark:from-purple-900/10 to-transparent pointer-events-none" />
           <div className="absolute top-3 inset-x-0 flex flex-col items-center justify-center gap-1 opacity-10 pointer-events-none">
@@ -1099,7 +1139,12 @@ export function Roundtable({
         </div>
 
         {/* Right: Participants area */}
-        <div className="w-[140px] shrink-0 flex flex-col py-3 border-l border-gray-100/50 dark:border-gray-700/50 bg-gray-50/30 dark:bg-gray-900/30 overflow-visible">
+        <div
+          className={cn(
+            'w-[140px] shrink-0 flex flex-col py-3 border-l border-gray-100/50 dark:border-gray-700/50 bg-gray-50/30 dark:bg-gray-900/30 overflow-visible transition-opacity duration-300',
+            isPresenting && !controlsVisible && 'opacity-0 pointer-events-none',
+          )}
+        >
           {/* Companion agent avatars — horizontal row, scrollable on overflow, arrows on hover */}
           <div className="flex-none relative group/scroll">
             {/* Left arrow */}
diff --git a/components/stage.tsx b/components/stage.tsx
index d9025ec0..ccb4b109 100644
--- a/components/stage.tsx
+++ b/components/stage.tsx
@@ -15,6 +15,7 @@ import type { EngineMode, TriggerEvent, Effect } from '@/lib/playback';
 import { ActionEngine } from '@/lib/action/engine';
 import { createAudioPlayer } from '@/lib/utils/audio-player';
 import type { Action, DiscussionAction, SpeechAction } from '@/lib/types/action';
+import { cn } from '@/lib/utils';
 // Playback state persistence removed — refresh always starts from the beginning
 import { ChatArea, type ChatAreaRef } from '@/components/chat/chat-area';
 import { agentsToParticipants, useAgentRegistry } from '@/lib/orchestration/registry/store';
@@ -93,6 +94,9 @@ export function Stage({
 
   // Scene switch confirmation dialog state
   const [pendingSceneId, setPendingSceneId] = useState<string | null>(null);
+  const [isPresenting, setIsPresenting] = useState(false);
+  const [controlsVisible, setControlsVisible] = useState(true);
+  const [isPresentationInteractionActive, setIsPresentationInteractionActive] = useState(false);
 
   // Whiteboard state (from canvas store so AI tools can open it)
   const whiteboardOpen = useCanvasStore.use.whiteboardOpen();
@@ -130,6 +134,8 @@ export function Stage({
   const lectureSessionIdRef = useRef<string | null>(null);
   const lectureActionCounterRef = useRef(0);
   const discussionAbortRef = useRef<AbortController | null>(null);
+  const presentationIdleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
   // Guard to prevent double flash when manual stop triggers onDiscussionEnd
   const manualStopRef = useRef(false);
   // Monotonic counter incremented on each scene switch — used to discard stale SSE callbacks
@@ -226,6 +232,92 @@ export function Stage({
     doSessionCleanup();
   }, [doSessionCleanup]);
 
+  const clearPresentationIdleTimer = useCallback(() => {
+    if (presentationIdleTimerRef.current) {
+      clearTimeout(presentationIdleTimerRef.current);
+      presentationIdleTimerRef.current = null;
+    }
+  }, []);
+
+  const resetPresentationIdleTimer = useCallback(() => {
+    setControlsVisible(true);
+    clearPresentationIdleTimer();
+    if (isPresenting && !isPresentationInteractionActive) {
+      presentationIdleTimerRef.current = setTimeout(() => {
+        setControlsVisible(false);
+      }, 3000);
+    }
+  }, [clearPresentationIdleTimer, isPresenting, isPresentationInteractionActive]);
+
+  const togglePresentation = useCallback(async () => {
+    const stageElement = stageRef.current;
+    if (!stageElement) return;
+
+    try {
+      if (document.fullscreenElement === stageElement) {
+        await document.exitFullscreen();
+        return;
+      }
+
+      setControlsVisible(true);
+      await stageElement.requestFullscreen();
+      setSidebarCollapsed(true);
+      setChatAreaCollapsed(true);
+    } catch {
+      // Firefox may deny fullscreen from certain keyboard events (e.g. F11)
+      console.warn('[Presentation] Fullscreen request denied — browser policy');
+    }
+  }, [setChatAreaCollapsed, setSidebarCollapsed]);
+
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      const active = document.fullscreenElement === stageRef.current;
+      setIsPresenting(active);
+
+      if (!active) {
+        setControlsVisible(true);
+        clearPresentationIdleTimer();
+      }
+    };
+
+    document.addEventListener('fullscreenchange', onFullscreenChange);
+    return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
+  }, [clearPresentationIdleTimer]);
+
+  useEffect(() => {
+    if (!isPresenting) {
+      setControlsVisible(true);
+      clearPresentationIdleTimer();
+      return;
+    }
+
+    const handleActivity = () => {
+      resetPresentationIdleTimer();
+    };
+
+    window.addEventListener('mousemove', handleActivity);
+    window.addEventListener('mousedown', handleActivity);
+    window.addEventListener('touchstart', handleActivity);
+    if (isPresentationInteractionActive) {
+      setControlsVisible(true);
+      clearPresentationIdleTimer();
+    } else {
+      resetPresentationIdleTimer();
+    }
+
+    return () => {
+      window.removeEventListener('mousemove', handleActivity);
+      window.removeEventListener('mousedown', handleActivity);
+      window.removeEventListener('touchstart', handleActivity);
+      clearPresentationIdleTimer();
+    };
+  }, [
+    clearPresentationIdleTimer,
+    isPresenting,
+    isPresentationInteractionActive,
+    resetPresentationIdleTimer,
+  ]);
+
   // Initialize playback engine when scene changes
   useEffect(() => {
     // Bump epoch so any stale SSE callbacks from the previous scene are discarded
@@ -596,8 +688,12 @@ export function Stage({
     }
   };
 
+  // get scene information
+  const isPendingScene = currentSceneId === PENDING_SCENE_ID;
+  const hasNextPending = generatingOutlines.length > 0;
+
   // previous scene (gated)
-  const handlePreviousScene = () => {
+  const handlePreviousScene = useCallback(() => {
     if (isPendingScene) {
       // From pending page → go to last real scene
       if (scenes.length > 0) {
@@ -609,10 +705,10 @@ export function Stage({
     if (currentIndex > 0) {
       gatedSceneSwitch(scenes[currentIndex - 1].id);
     }
-  };
+  }, [currentSceneId, gatedSceneSwitch, isPendingScene, scenes]);
 
   // next scene (gated)
-  const handleNextScene = () => {
+  const handleNextScene = useCallback(() => {
     if (isPendingScene) return; // Already on pending, nowhere to go
     const currentIndex = scenes.findIndex((s) => s.id === currentSceneId);
     if (currentIndex < scenes.length - 1) {
@@ -621,11 +717,8 @@ export function Stage({
       // On last real scene → advance to pending page
       setCurrentSceneId(PENDING_SCENE_ID);
     }
-  };
+  }, [currentSceneId, gatedSceneSwitch, hasNextPending, isPendingScene, scenes, setCurrentSceneId]);
 
-  // get scene information
-  const isPendingScene = currentSceneId === PENDING_SCENE_ID;
-  const hasNextPending = generatingOutlines.length > 0;
   const currentSceneIndex = isPendingScene
     ? scenes.length
     : scenes.findIndex((s) => s.id === currentSceneId);
@@ -639,6 +732,78 @@ export function Stage({
     setWhiteboardOpen(!whiteboardOpen);
   };
 
+  const isPresentationShortcutTarget = useCallback((target: EventTarget | null) => {
+    if (!(target instanceof HTMLElement)) return false;
+
+    if (target.isContentEditable || target.closest('[contenteditable="true"]')) {
+      return true;
+    }
+
+    return (
+      target.closest(
+        ['input', 'textarea', 'select', '[role="slider"]', 'input[type="range"]'].join(', '),
+      ) !== null
+    );
+  }, []);
+
+  useEffect(() => {
+    if (!isPresenting) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (
+        isPresentationShortcutTarget(event.target) ||
+        isPresentationShortcutTarget(document.activeElement)
+      ) {
+        return;
+      }
+
+      switch (event.key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          handlePreviousScene();
+          resetPresentationIdleTimer();
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          handleNextScene();
+          resetPresentationIdleTimer();
+          break;
+        case ' ':
+        case 'Spacebar':
+          event.preventDefault();
+          handlePlayPause();
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [
+    handleNextScene,
+    handlePlayPause,
+    handlePreviousScene,
+    isPresenting,
+    isPresentationShortcutTarget,
+    resetPresentationIdleTimer,
+  ]);
+
+  // Intercept F11 to use our presentation fullscreen instead of browser fullscreen
+  // This way ESC can exit fullscreen (browser F11 fullscreen requires F11 to exit)
+  useEffect(() => {
+    const onF11 = (event: KeyboardEvent) => {
+      if (event.key === 'F11') {
+        event.preventDefault();
+        togglePresentation();
+      }
+    };
+
+    window.addEventListener('keydown', onF11);
+    return () => window.removeEventListener('keydown', onF11);
+  }, [togglePresentation]);
+
   // Map engine mode to the CanvasArea's expected engine state
   const canvasEngineState = (() => {
     switch (engineMode) {
@@ -665,15 +830,19 @@ export function Stage({
 
   // Calculate scene viewer height (subtract Header's 80px height)
   const sceneViewerHeight = (() => {
-    const headerHeight = 80; // Header h-20 = 80px
-    if (mode === 'playback') {
-      return `calc(100% - ${headerHeight + 192}px)`; // Header + Roundtable
-    }
-    return `calc(100% - ${headerHeight}px)`;
+    const headerHeight = isPresenting ? 0 : 80; // Header h-20 = 80px
+    const roundtableHeight = mode === 'playback' && !isPresenting ? 192 : 0;
+    return `calc(100% - ${headerHeight + roundtableHeight}px)`;
   })();
 
   return (
-    <div className="flex-1 flex overflow-hidden bg-gray-50 dark:bg-gray-900">
+    <div
+      ref={stageRef}
+      className={cn(
+        'flex-1 flex overflow-hidden bg-gray-50 dark:bg-gray-900',
+        isPresenting && !controlsVisible && 'cursor-none',
+      )}
+    >
       {/* Scene Sidebar */}
       <SceneSidebar
         collapsed={sidebarCollapsed}
@@ -685,7 +854,7 @@ export function Stage({
       {/* Main Content Area */}
       <div className="flex-1 flex flex-col overflow-hidden min-w-0 relative">
         {/* Header */}
-        <Header currentSceneTitle={currentScene?.title || ''} />
+        {!isPresenting && <Header currentSceneTitle={currentScene?.title || ''} />}
 
         {/* Canvas Area */}
         <div
@@ -713,12 +882,14 @@ export function Stage({
             onNextSlide={handleNextScene}
             onPlayPause={handlePlayPause}
             onWhiteboardClose={handleWhiteboardToggle}
+            isPresenting={isPresenting}
+            onTogglePresentation={togglePresentation}
             showStopDiscussion={
               engineMode === 'live' ||
               (chatIsStreaming && (chatSessionType === 'qa' || chatSessionType === 'discussion'))
             }
             onStopDiscussion={handleStopDiscussion}
-            hideToolbar={mode === 'playback'}
+            hideToolbar={mode === 'playback' || (isPresenting && !controlsVisible)}
             isPendingScene={isPendingScene}
             isGenerationFailed={
               isPendingScene && failedOutlines.some((f) => f.id === generatingOutlines[0]?.id)
@@ -733,98 +904,110 @@ export function Stage({
 
         {/* Roundtable Area */}
         {mode === 'playback' && (
-          <Roundtable
-            mode={mode}
-            initialParticipants={participants}
-            playbackView={playbackView}
-            currentSpeech={liveSpeech}
-            lectureSpeech={lectureSpeech}
-            idleText={firstSpeechText}
-            playbackCompleted={playbackCompleted}
-            discussionRequest={discussionRequest}
-            engineMode={engineMode}
-            isStreaming={chatIsStreaming}
-            sessionType={
-              chatSessionType === 'qa'
-                ? 'qa'
-                : chatSessionType === 'discussion'
-                  ? 'discussion'
-                  : undefined
-            }
-            speakingAgentId={speakingAgentId}
-            speechProgress={speechProgress}
-            showEndFlash={showEndFlash}
-            endFlashSessionType={endFlashSessionType}
-            thinkingState={thinkingState}
-            isCueUser={isCueUser}
-            isTopicPending={isTopicPending}
-            onMessageSend={(msg) => {
-              // Clear soft-paused state — user is continuing the topic
-              if (isTopicPending) {
-                setIsTopicPending(false);
-                setLiveSpeech(null);
-                setSpeakingAgentId(null);
-              }
-              // User interrupts during playback — handleUserInterrupt triggers
-              // onUserInterrupt callback which already calls sendMessage, so skip
-              // the direct sendMessage below to avoid sending twice.
-              // Include 'paused' because onInputActivate pauses the engine before
-              // the user finishes typing — without this the interrupt position
-              // would never be saved and resuming after QA skips to the next sentence.
-              if (
-                engineRef.current &&
-                (engineMode === 'playing' || engineMode === 'live' || engineMode === 'paused')
-              ) {
-                engineRef.current.handleUserInterrupt(msg);
-              } else {
-                chatAreaRef.current?.sendMessage(msg);
-              }
-              // Auto-switch to chat tab when user sends a message
-              chatAreaRef.current?.switchToTab('chat');
-              setIsCueUser(false);
-              // Immediately mark streaming for synchronized stop button
-              setChatIsStreaming(true);
-              setChatSessionType(chatSessionType || 'qa');
-              // Optimistic thinking: show thinking dots immediately so there's
-              // no blank gap between userMessage expiry and the SSE thinking event.
-              // The real SSE event will overwrite this with the same or updated value.
-              setThinkingState({ stage: 'director' });
-            }}
-            onDiscussionStart={() => {
-              // User clicks "Join" on ProactiveCard
-              engineRef.current?.confirmDiscussion();
-            }}
-            onDiscussionSkip={() => {
-              // User clicks "Skip" on ProactiveCard
-              engineRef.current?.skipDiscussion();
-            }}
-            onStopDiscussion={handleStopDiscussion}
-            onInputActivate={async () => {
-              // Soft-pause QA/Discussion if streaming (opening input = implicit pause)
-              if (chatIsStreaming) {
-                await doSoftPause();
+          <div
+            className={cn(
+              'transition-opacity duration-300',
+              !isPresenting && 'shrink-0',
+              isPresenting && 'absolute inset-x-0 bottom-0 z-20',
+            )}
+          >
+            <Roundtable
+              mode={mode}
+              initialParticipants={participants}
+              playbackView={playbackView}
+              currentSpeech={liveSpeech}
+              lectureSpeech={lectureSpeech}
+              idleText={firstSpeechText}
+              playbackCompleted={playbackCompleted}
+              discussionRequest={discussionRequest}
+              engineMode={engineMode}
+              isStreaming={chatIsStreaming}
+              sessionType={
+                chatSessionType === 'qa'
+                  ? 'qa'
+                  : chatSessionType === 'discussion'
+                    ? 'discussion'
+                    : undefined
               }
-              // Also pause playback engine
-              if (engineRef.current && (engineMode === 'playing' || engineMode === 'live')) {
-                engineRef.current.pause();
-              }
-            }}
-            onSoftPause={doSoftPause}
-            onResumeTopic={doResumeTopic}
-            onPlayPause={handlePlayPause}
-            totalActions={totalActions}
-            currentActionIndex={0}
-            currentSceneIndex={currentSceneIndex}
-            scenesCount={totalScenesCount}
-            whiteboardOpen={whiteboardOpen}
-            sidebarCollapsed={sidebarCollapsed}
-            chatCollapsed={chatAreaCollapsed}
-            onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)}
-            onToggleChat={() => setChatAreaCollapsed(!chatAreaCollapsed)}
-            onPrevSlide={handlePreviousScene}
-            onNextSlide={handleNextScene}
-            onWhiteboardClose={handleWhiteboardToggle}
-          />
+              speakingAgentId={speakingAgentId}
+              speechProgress={speechProgress}
+              showEndFlash={showEndFlash}
+              endFlashSessionType={endFlashSessionType}
+              thinkingState={thinkingState}
+              isCueUser={isCueUser}
+              isTopicPending={isTopicPending}
+              onMessageSend={(msg) => {
+                // Clear soft-paused state — user is continuing the topic
+                if (isTopicPending) {
+                  setIsTopicPending(false);
+                  setLiveSpeech(null);
+                  setSpeakingAgentId(null);
+                }
+                // User interrupts during playback — handleUserInterrupt triggers
+                // onUserInterrupt callback which already calls sendMessage, so skip
+                // the direct sendMessage below to avoid sending twice.
+                // Include 'paused' because onInputActivate pauses the engine before
+                // the user finishes typing — without this the interrupt position
+                // would never be saved and resuming after QA skips to the next sentence.
+                if (
+                  engineRef.current &&
+                  (engineMode === 'playing' || engineMode === 'live' || engineMode === 'paused')
+                ) {
+                  engineRef.current.handleUserInterrupt(msg);
+                } else {
+                  chatAreaRef.current?.sendMessage(msg);
+                }
+                // Auto-switch to chat tab when user sends a message
+                chatAreaRef.current?.switchToTab('chat');
+                setIsCueUser(false);
+                // Immediately mark streaming for synchronized stop button
+                setChatIsStreaming(true);
+                setChatSessionType(chatSessionType || 'qa');
+                // Optimistic thinking: show thinking dots immediately so there's
+                // no blank gap between userMessage expiry and the SSE thinking event.
+                // The real SSE event will overwrite this with the same or updated value.
+                setThinkingState({ stage: 'director' });
+              }}
+              onDiscussionStart={() => {
+                // User clicks "Join" on ProactiveCard
+                engineRef.current?.confirmDiscussion();
+              }}
+              onDiscussionSkip={() => {
+                // User clicks "Skip" on ProactiveCard
+                engineRef.current?.skipDiscussion();
+              }}
+              onStopDiscussion={handleStopDiscussion}
+              onInputActivate={async () => {
+                // Soft-pause QA/Discussion if streaming (opening input = implicit pause)
+                if (chatIsStreaming) {
+                  await doSoftPause();
+                }
+                // Also pause playback engine
+                if (engineRef.current && (engineMode === 'playing' || engineMode === 'live')) {
+                  engineRef.current.pause();
+                }
+              }}
+              onSoftPause={doSoftPause}
+              onResumeTopic={doResumeTopic}
+              onPlayPause={handlePlayPause}
+              totalActions={totalActions}
+              currentActionIndex={0}
+              currentSceneIndex={currentSceneIndex}
+              scenesCount={totalScenesCount}
+              whiteboardOpen={whiteboardOpen}
+              sidebarCollapsed={sidebarCollapsed}
+              chatCollapsed={chatAreaCollapsed}
+              onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)}
+              onToggleChat={() => setChatAreaCollapsed(!chatAreaCollapsed)}
+              onPrevSlide={handlePreviousScene}
+              onNextSlide={handleNextScene}
+              onWhiteboardClose={handleWhiteboardToggle}
+              isPresenting={isPresenting}
+              controlsVisible={controlsVisible}
+              onTogglePresentation={togglePresentation}
+              onPresentationInteractionChange={setIsPresentationInteractionActive}
+            />
+          </div>
         )}
       </div>
 
diff --git a/components/whiteboard/whiteboard-canvas.tsx b/components/whiteboard/whiteboard-canvas.tsx
index e07b5f49..f717079a 100644
--- a/components/whiteboard/whiteboard-canvas.tsx
+++ b/components/whiteboard/whiteboard-canvas.tsx
@@ -163,6 +163,9 @@ function InteractiveWhiteboardCanvas({
   const [isPanning, setIsPanning] = useState(false);
   const [isResetting, setIsResetting] = useState(false);
   const [hintTimedOut, setHintTimedOut] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(
+    () => typeof document !== 'undefined' && !!document.fullscreenElement,
+  );
   const panStartRef = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
   const prevElementsLengthRef = useRef(elements.length);
   const resetTimerRef = useRef<number | null>(null);
@@ -170,6 +173,18 @@ function InteractiveWhiteboardCanvas({
   const hintEpochRef = useRef(0);
   const canvasRef = useRef<HTMLDivElement>(null);
 
+  // Detect fullscreen to move hints away from the Roundtable overlay
+  useEffect(() => {
+    const onChange = () => {
+      const fs = !!document.fullscreenElement;
+      setIsFullscreen(fs);
+      // Re-show hint when entering fullscreen so users see it in the new context
+      if (fs) setHintTimedOut(false);
+    };
+    document.addEventListener('fullscreenchange', onChange);
+    return () => document.removeEventListener('fullscreenchange', onChange);
+  }, []);
+
   const isViewModified = viewZoom !== 1 || panX !== 0 || panY !== 0;
   const hasOverflow = autoFitTransform.scale < 1;
   const canPan = elements.length > 0 && (hasOverflow || isViewModified);
@@ -390,8 +405,8 @@ function InteractiveWhiteboardCanvas({
             initial={{ opacity: 0 }}
             animate={{ opacity: 0.5, transition: { delay: 0.6, duration: 0.4 } }}
             exit={{ opacity: 0, transition: { duration: 0.3 } }}
-            className="absolute bottom-3 left-3 z-50 px-2.5 py-1 rounded-md
-              bg-black/40 text-white text-xs backdrop-blur-sm select-none pointer-events-none"
+            className={`absolute ${isFullscreen ? 'top-3' : 'bottom-3'} left-3 z-50 px-2.5 py-1 rounded-md
+              bg-black/40 text-white text-xs backdrop-blur-sm select-none pointer-events-none`}
           >
             {zoomHintText}
           </motion.div>
@@ -410,9 +425,9 @@ function InteractiveWhiteboardCanvas({
               e.stopPropagation();
               handleDoubleClick();
             }}
-            className="absolute bottom-3 right-3 z-50 px-2.5 py-1 rounded-md
+            className={`absolute ${isFullscreen ? 'top-3' : 'bottom-3'} right-3 z-50 px-2.5 py-1 rounded-md
               bg-black/60 text-white text-xs backdrop-blur-sm
-              hover:bg-black/80 transition-colors cursor-pointer select-none"
+              hover:bg-black/80 transition-colors cursor-pointer select-none`}
           >
             {resetViewText}
           </motion.button>
diff --git a/lib/i18n/stage.ts b/lib/i18n/stage.ts
index 01dcca22..71d7bf59 100644
--- a/lib/i18n/stage.ts
+++ b/lib/i18n/stage.ts
@@ -7,6 +7,8 @@ export const stageZhCN = {
     confirmSwitchTitle: '切换页面',
     confirmSwitchMessage: '当前话题正在进行中，切换页面将结束当前话题。确定要切换吗？',
     generatingNextPage: '场景正在生成，请稍候...',
+    fullscreen: '全屏',
+    exitFullscreen: '退出全屏',
   },
   whiteboard: {
     title: '互动白板',
@@ -153,6 +155,8 @@ export const stageEnUS = {
     confirmSwitchMessage:
       'A topic is currently in progress. Switching scenes will end the current topic. Are you sure?',
     generatingNextPage: 'Scene is being generated, please wait...',
+    fullscreen: 'Fullscreen',
+    exitFullscreen: 'Exit Fullscreen',
   },
   whiteboard: {
     title: 'Interactive Whiteboard',