Initial voice call center app

2026-06-20 17:38:19 +05:00
commit bbb6985876
12 changed files with 2833 additions and 0 deletions
@@ -0,0 +1,483 @@
+const TARGET_SAMPLE_RATE = 16000;
+
+const startBtn = document.getElementById("startBtn");
+const stopBtn = document.getElementById("stopBtn");
+const resetBtn = document.getElementById("resetBtn");
+const statusEl = document.getElementById("status");
+const partialLine = document.getElementById("partialLine");
+const messagesEl = document.getElementById("messages");
+const canvas = document.getElementById("waveform");
+const canvasCtx = canvas.getContext("2d");
+const levelEl = document.getElementById("level");
+const muteLabel = document.getElementById("muteLabel");
+
+let socket;
+let mediaStream;
+let audioContext;
+let sourceNode;
+let processorNode;
+let isRunning = false;
+let isStopping = false;
+let muteMic = false;
+let currentAssistantLine = null;
+let currentAssistantText = "";
+let currentAssistantAudioChunks = 0;
+let currentAssistantTtsFailed = false;
+let currentAssistantTtsMessage = "";
+let lastErrorMessage = "";
+let playbackCursor = 0;
+let pendingUnmuteTimer = null;
+let encodedPlaybackChain = Promise.resolve();
+let pendingEncodedAudioCount = 0;
+const activeEncodedAudios = new Set();
+
+drawIdleWave();
+
+startBtn.addEventListener("click", startCall);
+stopBtn.addEventListener("click", stopCall);
+resetBtn.addEventListener("click", resetSession);
+
+async function startCall() {
+  lastErrorMessage = "";
+  isStopping = false;
+  startBtn.disabled = true;
+  setStatus("connecting", "busy");
+
+  try {
+    socket = new WebSocket(`${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/ws`);
+    socket.binaryType = "arraybuffer";
+    socket.addEventListener("message", handleServerMessage);
+    socket.addEventListener("close", () => {
+      if (isRunning) stopCall(lastErrorMessage || "Звонок остановлен.");
+      if (!statusEl.classList.contains("error")) setStatus("offline", "");
+    });
+    socket.addEventListener("error", () => {
+      lastErrorMessage = "Ошибка WebSocket.";
+      setStatus("socket error", "error");
+      partialLine.textContent = lastErrorMessage;
+      addMessage("system", lastErrorMessage);
+    });
+
+    await waitForSocketOpen(socket);
+    await waitForServerReady(socket);
+
+    mediaStream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true,
+        channelCount: 1,
+      },
+    });
+
+    audioContext = new AudioContext();
+    await audioContext.resume();
+
+    sourceNode = audioContext.createMediaStreamSource(mediaStream);
+    processorNode = audioContext.createScriptProcessor(4096, 1, 1);
+    processorNode.onaudioprocess = handleAudioProcess;
+    sourceNode.connect(processorNode);
+    processorNode.connect(audioContext.destination);
+
+    isRunning = true;
+    stopBtn.disabled = false;
+    resetBtn.disabled = false;
+    setStatus("live", "live");
+    partialLine.textContent = "Слушаю...";
+    socket.send(JSON.stringify({ type: "start_greeting" }));
+  } catch (error) {
+    lastErrorMessage = error.message || "Не удалось начать звонок.";
+    await cleanupAfterFailedStart();
+    startBtn.disabled = false;
+    stopBtn.disabled = true;
+    resetBtn.disabled = true;
+    setStatus("error", "error");
+    partialLine.textContent = lastErrorMessage;
+    addMessage("system", lastErrorMessage);
+  }
+}
+
+async function stopCall(message = "Звонок остановлен.") {
+  if (isStopping) return;
+  isStopping = true;
+  isRunning = false;
+  muteMic = false;
+  updateMuteLabel();
+
+  if (processorNode) {
+    processorNode.disconnect();
+    processorNode.onaudioprocess = null;
+  }
+  if (sourceNode) sourceNode.disconnect();
+  if (mediaStream) mediaStream.getTracks().forEach((track) => track.stop());
+  if (socket && socket.readyState === WebSocket.OPEN) socket.close();
+  if (audioContext && audioContext.state !== "closed") await audioContext.close();
+
+  processorNode = null;
+  sourceNode = null;
+  mediaStream = null;
+  audioContext = null;
+  socket = null;
+  currentAssistantLine = null;
+  currentAssistantText = "";
+  currentAssistantAudioChunks = 0;
+  currentAssistantTtsFailed = false;
+  currentAssistantTtsMessage = "";
+  playbackCursor = 0;
+  pendingEncodedAudioCount = 0;
+  activeEncodedAudios.forEach((audio) => {
+    audio.pause();
+    audio.src = "";
+  });
+  activeEncodedAudios.clear();
+  encodedPlaybackChain = Promise.resolve();
+
+  startBtn.disabled = false;
+  stopBtn.disabled = true;
+  resetBtn.disabled = true;
+  partialLine.textContent = message;
+  levelEl.style.width = "0%";
+  drawIdleWave();
+  isStopping = false;
+}
+
+function resetSession() {
+  messagesEl.innerHTML = "";
+  currentAssistantLine = null;
+  currentAssistantText = "";
+  currentAssistantAudioChunks = 0;
+  currentAssistantTtsFailed = false;
+  currentAssistantTtsMessage = "";
+  partialLine.textContent = "Контекст очищен.";
+  if (socket && socket.readyState === WebSocket.OPEN) {
+    socket.send(JSON.stringify({ type: "reset" }));
+  }
+}
+
+function handleAudioProcess(event) {
+  const input = event.inputBuffer.getChannelData(0);
+  drawWave(input);
+  updateLevel(input);
+
+  if (!isRunning || muteMic || !socket || socket.readyState !== WebSocket.OPEN) return;
+
+  const downsampled = downsample(input, audioContext.sampleRate, TARGET_SAMPLE_RATE);
+  const pcm = floatTo16BitPcm(downsampled);
+  socket.send(pcm);
+}
+
+function handleServerMessage(event) {
+  const data = JSON.parse(event.data);
+
+  if (data.type === "ready") {
+    setStatus(data.model || "ready", "live");
+  } else if (data.type === "stt_ready") {
+    partialLine.textContent = "Слушаю...";
+  } else if (data.type === "stt_partial") {
+    partialLine.textContent = data.text || "Слушаю...";
+  } else if (data.type === "user_final") {
+    currentAssistantLine = null;
+    addMessage("user", data.text);
+    partialLine.textContent = "Думаю...";
+  } else if (data.type === "assistant_started") {
+    muteMic = true;
+    updateMuteLabel();
+    currentAssistantLine = addMessage("assistant", "");
+    currentAssistantText = "";
+    currentAssistantAudioChunks = 0;
+    currentAssistantTtsFailed = false;
+    currentAssistantTtsMessage = "";
+    setStatus("answering", "busy");
+  } else if (data.type === "assistant_delta") {
+    if (!currentAssistantLine) currentAssistantLine = addMessage("assistant", "");
+    currentAssistantLine.textContent += data.text;
+    currentAssistantText += data.text || "";
+    scrollTranscript();
+  } else if (data.type === "assistant_text_done") {
+    currentAssistantText = data.text || currentAssistantText;
+    partialLine.textContent = "Озвучиваю...";
+  } else if (data.type === "tts_audio") {
+    currentAssistantAudioChunks += 1;
+    if ((data.format || "").startsWith("mp3") || (data.mime_type || "").includes("mpeg")) {
+      playEncodedAudio(data.audio, data.mime_type || "audio/mpeg");
+    } else {
+      playPcmAudio(data.audio, data.sample_rate || TARGET_SAMPLE_RATE);
+    }
+  } else if (data.type === "tts_failed") {
+    currentAssistantTtsFailed = true;
+    currentAssistantTtsMessage = data.message || "ElevenLabs TTS не прислал аудио.";
+    partialLine.textContent = "ElevenLabs TTS недоступен, включаю резервную озвучку.";
+    addMessage("system", "ElevenLabs TTS недоступен, включаю резервную озвучку.");
+  } else if (data.type === "assistant_done") {
+    const fallbackStarted = maybeSpeakWithBrowserFallback();
+    if (!fallbackStarted) {
+      scheduleUnmuteAfterPlayback();
+      setStatus(currentAssistantTtsFailed ? "tts fallback" : "live", currentAssistantTtsFailed ? "busy" : "live");
+      partialLine.textContent = currentAssistantTtsFailed ? currentAssistantTtsMessage : "Слушаю...";
+    }
+  } else if (data.type === "reset_done") {
+    partialLine.textContent = "Контекст очищен.";
+    if (isRunning && socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ type: "start_greeting" }));
+    }
+  } else if (data.type === "error") {
+    lastErrorMessage = data.message || "Ошибка.";
+    partialLine.textContent = lastErrorMessage;
+    addMessage("system", lastErrorMessage);
+    setStatus("error", "error");
+  }
+}
+
+function addMessage(role, text) {
+  const line = document.createElement("div");
+  line.className = `line ${role}`;
+  line.textContent = text;
+  messagesEl.appendChild(line);
+  scrollTranscript();
+  return line;
+}
+
+function scrollTranscript() {
+  const transcript = document.querySelector(".transcript");
+  transcript.scrollTop = transcript.scrollHeight;
+}
+
+function setStatus(text, className) {
+  statusEl.textContent = text;
+  statusEl.className = `status-pill ${className || ""}`.trim();
+}
+
+function maybeSpeakWithBrowserFallback() {
+  if (currentAssistantAudioChunks > 0) return false;
+  if (!currentAssistantText.trim()) return false;
+  if (!("speechSynthesis" in window) || typeof SpeechSynthesisUtterance === "undefined") {
+    partialLine.textContent = currentAssistantTtsFailed
+      ? currentAssistantTtsMessage
+      : "TTS не прислал аудио.";
+    return false;
+  }
+
+  window.speechSynthesis.cancel();
+  const utterance = new SpeechSynthesisUtterance(currentAssistantText);
+  utterance.lang = "ru-RU";
+  utterance.rate = 1.04;
+  utterance.pitch = 1;
+  utterance.onend = finishBrowserFallbackSpeech;
+  utterance.onerror = finishBrowserFallbackSpeech;
+
+  muteMic = true;
+  updateMuteLabel();
+  setStatus("browser voice", "busy");
+  partialLine.textContent = currentAssistantTtsFailed
+    ? "Резервная озвучка включена: ElevenLabs TTS не дал аудио."
+    : "Резервная озвучка включена.";
+  window.speechSynthesis.speak(utterance);
+  return true;
+}
+
+function finishBrowserFallbackSpeech() {
+  muteMic = false;
+  updateMuteLabel();
+  setStatus("live", "live");
+  partialLine.textContent = "Слушаю...";
+}
+
+function updateMuteLabel() {
+  muteLabel.textContent = muteMic ? "muted" : "open";
+}
+
+function waitForSocketOpen(ws) {
+  return new Promise((resolve, reject) => {
+    ws.addEventListener("open", resolve, { once: true });
+    ws.addEventListener("error", reject, { once: true });
+  });
+}
+
+function waitForServerReady(ws) {
+  return new Promise((resolve, reject) => {
+    const timeout = window.setTimeout(() => {
+      cleanup();
+      reject(new Error("Сервер не ответил."));
+    }, 6000);
+
+    function cleanup() {
+      window.clearTimeout(timeout);
+      ws.removeEventListener("message", onMessage);
+      ws.removeEventListener("close", onClose);
+      ws.removeEventListener("error", onError);
+    }
+
+    function onMessage(event) {
+      const data = JSON.parse(event.data);
+      if (data.type === "ready") {
+        cleanup();
+        resolve(data);
+      } else if (data.type === "error") {
+        cleanup();
+        reject(new Error(data.message || "Сервер вернул ошибку."));
+      }
+    }
+
+    function onClose() {
+      cleanup();
+      reject(new Error("WebSocket закрыт."));
+    }
+
+    function onError() {
+      cleanup();
+      reject(new Error("Ошибка WebSocket."));
+    }
+
+    ws.addEventListener("message", onMessage);
+    ws.addEventListener("close", onClose);
+    ws.addEventListener("error", onError);
+  });
+}
+
+async function cleanupAfterFailedStart() {
+  if (processorNode) {
+    processorNode.disconnect();
+    processorNode.onaudioprocess = null;
+  }
+  if (sourceNode) sourceNode.disconnect();
+  if (mediaStream) mediaStream.getTracks().forEach((track) => track.stop());
+  if (socket && socket.readyState === WebSocket.OPEN) socket.close();
+  if (audioContext) await audioContext.close();
+
+  processorNode = null;
+  sourceNode = null;
+  mediaStream = null;
+  audioContext = null;
+  socket = null;
+}
+
+function downsample(buffer, inputRate, outputRate) {
+  if (outputRate === inputRate) return buffer;
+  const ratio = inputRate / outputRate;
+  const newLength = Math.round(buffer.length / ratio);
+  const result = new Float32Array(newLength);
+  let offsetResult = 0;
+  let offsetBuffer = 0;
+
+  while (offsetResult < result.length) {
+    const nextOffsetBuffer = Math.round((offsetResult + 1) * ratio);
+    let accumulator = 0;
+    let count = 0;
+    for (let i = offsetBuffer; i < nextOffsetBuffer && i < buffer.length; i += 1) {
+      accumulator += buffer[i];
+      count += 1;
+    }
+    result[offsetResult] = accumulator / Math.max(count, 1);
+    offsetResult += 1;
+    offsetBuffer = nextOffsetBuffer;
+  }
+
+  return result;
+}
+
+function floatTo16BitPcm(floatBuffer) {
+  const output = new Int16Array(floatBuffer.length);
+  for (let i = 0; i < floatBuffer.length; i += 1) {
+    const sample = Math.max(-1, Math.min(1, floatBuffer[i]));
+    output[i] = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+  }
+  return output.buffer;
+}
+
+function playPcmAudio(base64Audio, sampleRate) {
+  if (!audioContext) return;
+  if (audioContext.state === "suspended") audioContext.resume();
+  const bytes = Uint8Array.from(atob(base64Audio), (char) => char.charCodeAt(0));
+  const samples = new Int16Array(bytes.buffer);
+  const audioBuffer = audioContext.createBuffer(1, samples.length, sampleRate);
+  const channel = audioBuffer.getChannelData(0);
+  for (let i = 0; i < samples.length; i += 1) {
+    channel[i] = samples[i] / 32768;
+  }
+
+  const source = audioContext.createBufferSource();
+  source.buffer = audioBuffer;
+  source.connect(audioContext.destination);
+  const startAt = Math.max(audioContext.currentTime + 0.03, playbackCursor);
+  source.start(startAt);
+  playbackCursor = startAt + audioBuffer.duration;
+}
+
+function playEncodedAudio(base64Audio, mimeType) {
+  pendingEncodedAudioCount += 1;
+  encodedPlaybackChain = encodedPlaybackChain.then(
+    () =>
+      new Promise((resolve) => {
+        const bytes = Uint8Array.from(atob(base64Audio), (char) => char.charCodeAt(0));
+        const blob = new Blob([bytes], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const audio = new Audio(url);
+        activeEncodedAudios.add(audio);
+
+        function cleanup() {
+          URL.revokeObjectURL(url);
+          activeEncodedAudios.delete(audio);
+          pendingEncodedAudioCount = Math.max(0, pendingEncodedAudioCount - 1);
+          if (pendingEncodedAudioCount === 0 && muteMic) {
+            scheduleUnmuteAfterPlayback();
+          }
+          resolve();
+        }
+
+        audio.onended = cleanup;
+        audio.onerror = cleanup;
+        audio.play().catch(cleanup);
+      }),
+  );
+}
+
+function scheduleUnmuteAfterPlayback() {
+  if (pendingEncodedAudioCount > 0) return;
+  if (pendingUnmuteTimer) window.clearTimeout(pendingUnmuteTimer);
+  const remainingMs = audioContext ? Math.max(0, (playbackCursor - audioContext.currentTime) * 1000) : 0;
+  pendingUnmuteTimer = window.setTimeout(() => {
+    muteMic = false;
+    updateMuteLabel();
+  }, remainingMs + 120);
+}
+
+function updateLevel(buffer) {
+  let sum = 0;
+  for (let i = 0; i < buffer.length; i += 1) sum += buffer[i] * buffer[i];
+  const rms = Math.sqrt(sum / buffer.length);
+  const percent = Math.min(100, Math.round(rms * 260));
+  levelEl.style.width = `${percent}%`;
+}
+
+function drawIdleWave() {
+  canvasCtx.fillStyle = "#101820";
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+  canvasCtx.strokeStyle = "#2f9e80";
+  canvasCtx.lineWidth = 3;
+  canvasCtx.beginPath();
+  const mid = canvas.height / 2;
+  for (let x = 0; x < canvas.width; x += 1) {
+    const y = mid + Math.sin(x / 28) * 10 + Math.sin(x / 83) * 18;
+    if (x === 0) canvasCtx.moveTo(x, y);
+    else canvasCtx.lineTo(x, y);
+  }
+  canvasCtx.stroke();
+}
+
+function drawWave(buffer) {
+  canvasCtx.fillStyle = "#101820";
+  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+  canvasCtx.strokeStyle = muteMic ? "#d9563f" : "#36c28f";
+  canvasCtx.lineWidth = 3;
+  canvasCtx.beginPath();
+  const slice = Math.max(1, Math.floor(buffer.length / canvas.width));
+  const mid = canvas.height / 2;
+
+  for (let x = 0; x < canvas.width; x += 1) {
+    const sample = buffer[x * slice] || 0;
+    const y = mid + sample * mid * 0.84;
+    if (x === 0) canvasCtx.moveTo(x, y);
+    else canvasCtx.lineTo(x, y);
+  }
+  canvasCtx.stroke();
+}
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Simple Call Center</title>
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <main class="shell">
+      <section class="workspace" aria-label="Voice session">
+        <header class="topbar">
+          <div>
+            <p class="eyebrow">Live voice session</p>
+            <h1>Simple Call Center</h1>
+          </div>
+          <div class="status-pill" id="status">offline</div>
+        </header>
+
+        <section class="stage" aria-label="Audio monitor">
+          <canvas id="waveform" width="1200" height="240"></canvas>
+          <div class="meter-row">
+            <div class="meter-label">Mic</div>
+            <div class="level-track"><div id="level" class="level-fill"></div></div>
+            <div class="meter-label" id="muteLabel">open</div>
+          </div>
+        </section>
+
+        <section class="controls" aria-label="Call controls">
+          <button id="startBtn" class="primary" type="button">Start</button>
+          <button id="stopBtn" type="button" disabled>Stop</button>
+          <button id="resetBtn" type="button" disabled>Reset</button>
+        </section>
+
+        <section class="transcript" aria-live="polite" aria-label="Transcript">
+          <div class="line system" id="partialLine">Готов к звонку.</div>
+          <div id="messages" class="messages"></div>
+        </section>
+      </section>
+    </main>
+    <script src="/static/app.js?v=mp3-192-1"></script>
+  </body>
+</html>
@@ -0,0 +1,259 @@
+:root {
+  color-scheme: light;
+  --bg: #eef2f6;
+  --ink: #101820;
+  --muted: #5f6f7a;
+  --line: #cfdae5;
+  --panel: #ffffff;
+  --panel-2: #f6f8fb;
+  --green: #0f8f61;
+  --green-dark: #08734d;
+  --blue: #1f6feb;
+  --coral: #d9563f;
+  --amber: #b7791f;
+  --shadow: 0 18px 48px rgba(16, 24, 32, 0.12);
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background:
+    linear-gradient(180deg, rgba(238, 242, 246, 0.94), rgba(226, 234, 241, 0.98)),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23c4d1dc' stroke-opacity='.45'%3E%3Cpath d='M0 40h160M0 80h160M0 120h160M40 0v160M80 0v160M120 0v160'/%3E%3C/g%3E%3C/svg%3E");
+  color: var(--ink);
+}
+
+button {
+  min-width: 112px;
+  min-height: 44px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  color: var(--ink);
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    transform 140ms ease,
+    border-color 140ms ease,
+    background 140ms ease;
+}
+
+button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: #9fb1c0;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.48;
+}
+
+button.primary {
+  border-color: var(--green);
+  background: var(--green);
+  color: #fff;
+}
+
+.shell {
+  width: min(1120px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 32px 0;
+}
+
+.workspace {
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  box-shadow: var(--shadow);
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 22px 24px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-2);
+}
+
+.eyebrow {
+  margin: 0 0 4px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(26px, 3vw, 40px);
+  line-height: 1.05;
+  letter-spacing: 0;
+}
+
+.status-pill {
+  min-width: 116px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 8px 12px;
+  background: #fff;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 800;
+  text-align: center;
+}
+
+.status-pill.live {
+  border-color: rgba(15, 143, 97, 0.32);
+  background: rgba(15, 143, 97, 0.11);
+  color: var(--green-dark);
+}
+
+.status-pill.busy {
+  border-color: rgba(31, 111, 235, 0.3);
+  background: rgba(31, 111, 235, 0.1);
+  color: var(--blue);
+}
+
+.status-pill.error {
+  border-color: rgba(217, 86, 63, 0.35);
+  background: rgba(217, 86, 63, 0.12);
+  color: var(--coral);
+}
+
+.stage {
+  padding: 22px 24px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+#waveform {
+  display: block;
+  width: 100%;
+  height: clamp(160px, 25vw, 240px);
+  border: 1px solid #c8d6df;
+  border-radius: 8px;
+  background: #101820;
+}
+
+.meter-row {
+  display: grid;
+  grid-template-columns: 42px minmax(120px, 1fr) 72px;
+  align-items: center;
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.meter-label {
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.level-track {
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #dbe5ed;
+}
+
+.level-fill {
+  width: 0%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--green), var(--amber), var(--coral));
+  transition: width 80ms linear;
+}
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 18px 24px;
+  border-bottom: 1px solid var(--line);
+}
+
+.transcript {
+  min-height: 260px;
+  max-height: 44vh;
+  overflow-y: auto;
+  padding: 20px 24px 24px;
+  background: #fbfcfd;
+}
+
+.messages {
+  display: grid;
+  gap: 12px;
+}
+
+.line {
+  max-width: 82%;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px 14px;
+  background: #fff;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+
+.line.system {
+  max-width: none;
+  margin-bottom: 14px;
+  border-color: #d8dde3;
+  background: #eef4f8;
+  color: var(--muted);
+}
+
+.line.user {
+  justify-self: start;
+  border-color: rgba(15, 143, 97, 0.26);
+  background: rgba(15, 143, 97, 0.08);
+}
+
+.line.assistant {
+  justify-self: end;
+  border-color: rgba(31, 111, 235, 0.24);
+  background: rgba(31, 111, 235, 0.08);
+}
+
+@media (max-width: 680px) {
+  .shell {
+    width: 100%;
+    padding: 0;
+  }
+
+  .workspace {
+    min-height: 100vh;
+    border-width: 0;
+    border-radius: 0;
+  }
+
+  .topbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .status-pill {
+    width: 100%;
+  }
+
+  .controls button {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .line {
+    max-width: 94%;
+  }
+}