diff --git a/web/index.html b/web/index.html
index bb704b9..4f1bfd3 100644
--- a/web/index.html
+++ b/web/index.html
@@ -41,8 +41,8 @@
     font-size: 20px; line-height: 1; vertical-align: middle; user-select: none;
     display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
   }
-  .app { display: grid; grid-template-columns: 1fr 380px; height: 100vh; }
-  .videoPane { display: flex; flex-direction: column; min-width: 0; padding: 12px; gap: 10px; position: relative; }
+  .app { display: grid; grid-template-columns: 1fr 380px; height: 100vh; height: 100svh; }
+  .videoPane { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px; gap: 10px; position: relative; }
 
   .topBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
   .brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; margin-right: auto; }
@@ -126,7 +126,8 @@
   .searchStage .searchList { flex: 1; overflow-y: auto; padding: 8px; }
 
   .chatPane {
-    display: flex; flex-direction: column; min-width: 0;
+    display: flex; flex-direction: column; min-width: 0; min-height: 0;
+    max-height: 100vh; max-height: 100svh;
     background: var(--surface); border-left: 1px solid var(--outline);
   }
   .chatHeader { padding: 14px 16px; border-bottom: 1px solid var(--outline); display: flex; flex-direction: column; gap: 8px; }
@@ -609,7 +610,11 @@ async function sendWatchClip(blob) {
   form.append('history', JSON.stringify(chatHistory.slice(-6)));
   try {
     const res = await fetch('/api/watch', { method: 'POST', body: form });
-    if (!res.ok) return;
+    if (!res.ok) {
+      const bodyText = await res.text().catch(() => '');
+      console.error('watch clip request failed', res.status, bodyText, 'clip size(bytes):', blob.size);
+      return;
+    }
     const data = await res.json();
     const reaction = (data.reaction || '').trim();
     const now = Date.now();
@@ -629,11 +634,15 @@ async function startWatchMode() {
     return;
   }
   try {
-    watchStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
+    watchStream = await navigator.mediaDevices.getDisplayMedia({
+      video: { width: { ideal: 960 }, height: { ideal: 540 }, frameRate: { ideal: 5, max: 10 } },
+      audio: true,
+    });
   } catch (e) {
     console.error('getDisplayMedia failed', e);
     return;
   }
+  console.log('watch stream tracks:', watchStream.getVideoTracks().map(t => t.getSettings()), watchStream.getAudioTracks().map(t => t.getSettings()));
   if (watchStream.getAudioTracks().length === 0) {
     alert('音声トラックが取得できませんでした。共有元は「Chromeタブ」を選び、「タブの音声を共有」にチェックを入れ直してください(画面全体/ウィンドウ共有だとmacOSでは音声が乗りません)。');
     watchStream.getTracks().forEach((t) => t.stop());