diff --git a/public/index.html b/public/index.html
index 7315ac3..c0ae255 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,69 +3,152 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Say — Voice Assistant</title>
+  <title>Say — Голосовой ассистент</title>
   <link rel="stylesheet" href="/style.css">
 </head>
 <body>
-  <h1>Say</h1>
+
+  <h1>🎙️ Say</h1>
 
   <div id="models">
-    <button class="model-btn active" data-model="gpt-oss-120b">GPT-OSS-120B</button>
+    <button class="model-btn active">GPT-OSS-120B</button>
   </div>
 
+  <div id="visualizer">
+    <canvas id="meter" width="300" height="60"></canvas>
+  </div>
+
+  <div id="controls">
+    <button id="btnRecord">🎙 Записать</button>
+    <button id="btnPlay" disabled>▶ Прослушать</button>
+  </div>
+
+  <div id="status"></div>
+
   <div id="chat"></div>
 
-  <div id="recorder">
-    <button id="mic-btn">Start Recording</button>
-    <span id="status"></span>
-  </div>
-
   <script>
-    let mediaRecorder, chunks = [];
-    const micBtn = document.getElementById('mic-btn');
+    const btnRecord = document.getElementById('btnRecord');
+    const btnPlay = document.getElementById('btnPlay');
     const status = document.getElementById('status');
     const chat = document.getElementById('chat');
-    let activeModel = 'gpt-oss-120b';
+    const meter = document.getElementById('meter');
+    const meterCtx = meter.getContext('2d');
 
-    document.querySelectorAll('.model-btn').forEach(b => {
-      b.addEventListener('click', () => {
-        document.querySelectorAll('.model-btn').forEach(x => x.classList.remove('active'));
-        b.classList.add('active');
-        activeModel = b.dataset.model;
-      });
-    });
+    let mediaRecorder, chunks = [], userBlob = null;
+    let isRecording = false, micAnalyser = null, micAnimId = null;
+    let audioContext = null;
 
-    micBtn.addEventListener('click', async () => {
-      if (mediaRecorder && mediaRecorder.state === 'recording') {
-        mediaRecorder.stop();
-        micBtn.textContent = 'Processing...';
-        return;
+    function setStatus(msg) { status.textContent = msg; }
+
+    btnRecord.onclick = async () => {
+      if (isRecording) { stopRecording(); return; }
+      try {
+        isRecording = true;
+        btnRecord.textContent = '⏹ Стоп';
+        setStatus('🎤 Запись...');
+        await startRecording();
+      } catch (err) {
+        let msg = '⛔ ';
+        if (err.name === 'NotAllowedError') msg += 'Доступ к микрофону запрещён. Разрешите в настройках браузера.';
+        else if (err.name === 'NotFoundError') msg += 'Микрофон не найден.';
+        else msg += 'Ошибка: ' + (err.message || err.name);
+        setStatus(msg);
+        btnRecord.textContent = '🎙 Записать';
+        isRecording = false;
       }
+    };
+
+    async function startRecording() {
       chunks = [];
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      audioContext = new AudioContext();
+      const source = audioContext.createMediaStreamSource(stream);
+      micAnalyser = audioContext.createAnalyser();
+      micAnalyser.fftSize = 256;
+      source.connect(micAnalyser);
+      drawMeter();
+
       mediaRecorder = new MediaRecorder(stream);
       mediaRecorder.ondataavailable = e => chunks.push(e.data);
       mediaRecorder.onstop = async () => {
         stream.getTracks().forEach(t => t.stop());
-        const blob = new Blob(chunks, { type: 'audio/webm' });
-        const fd = new FormData(); fd.append('audio', blob);
-        status.textContent = 'Transcribing...';
-        const t = await fetch('/api/whisper', { method: 'POST', body: fd }).then(r => r.json());
-        chat.innerHTML += '<div class="user">You: ' + t.text + '</div>';
-        status.textContent = activeModel + ' thinking...';
-        const r = await fetch('/api/chat', {
-          method: 'POST', headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ model: activeModel, message: t.text }),
-        }).then(r => r.json());
-        chat.innerHTML += '<div class="bot">' + activeModel + ': ' + r.response + '</div>';
-        chat.scrollTop = chat.scrollHeight;
-        micBtn.textContent = 'Start Recording';
-        status.textContent = '';
+        cancelAnimationFrame(micAnimId);
+        if (audioContext) audioContext.close();
+        userBlob = new Blob(chunks, { type: 'audio/webm' });
+        btnPlay.disabled = false;
+        await transcribeAndChat();
       };
       mediaRecorder.start();
-      micBtn.textContent = 'Stop Recording';
-      status.textContent = 'Recording...';
-    });
+    }
+
+    function stopRecording() {
+      btnRecord.disabled = true;
+      setStatus('⏳ Обработка...');
+      mediaRecorder.stop();
+    }
+
+    function drawMeter() {
+      if (!micAnalyser) return;
+      const data = new Uint8Array(micAnalyser.frequencyBinCount);
+      micAnalyser.getByteTimeDomainData(data);
+      const w = meter.width, h = meter.height;
+      meterCtx.fillStyle = '#1a1a2e';
+      meterCtx.fillRect(0, 0, w, h);
+      meterCtx.strokeStyle = '#6c5ce7';
+      meterCtx.lineWidth = 2;
+      meterCtx.beginPath();
+      for (let i = 0; i < data.length; i++) {
+        const x = (i / data.length) * w;
+        const y = (data[i] / 255) * h;
+        i === 0 ? meterCtx.moveTo(x, y) : meterCtx.lineTo(x, y);
+      }
+      meterCtx.stroke();
+      micAnimId = requestAnimationFrame(drawMeter);
+    }
+
+    btnPlay.onclick = () => {
+      if (!userBlob) return;
+      const url = URL.createObjectURL(userBlob);
+      const a = new Audio(url);
+      a.onended = () => URL.revokeObjectURL(url);
+      a.play();
+      setStatus('🔊 Ваша запись...');
+    };
+
+    async function transcribeAndChat() {
+      try {
+        setStatus('📝 Распознавание...');
+        const fd = new FormData();
+        fd.append('audio', userBlob);
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 30000);
+        const tRes = await fetch('/api/whisper', { method: 'POST', body: fd, signal: controller.signal });
+        clearTimeout(timeout);
+        const tData = await tRes.json();
+        const text = tData.text || '(не распознано)';
+        chat.innerHTML += '<div class="user">🗣 Вы: ' + text + '</div>';
+
+        setStatus('🤖 Думает...');
+        const cRes = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ model: 'gpt-oss-120b', message: text }),
+          signal: (() => { const ac = new AbortController(); setTimeout(() => ac.abort(), 60000); return ac.signal; })(),
+        });
+        const cData = await cRes.json();
+        chat.innerHTML += '<div class="bot">🤖 GPT-OSS: ' + (cData.response || cData.error || 'Ошибка') + '</div>';
+        chat.scrollTop = chat.scrollHeight;
+        setStatus('✅ Готово');
+      } catch (err) {
+        setStatus('⛔ Ошибка: ' + err.message);
+      }
+      btnRecord.textContent = '🎙 Записать';
+      btnRecord.disabled = false;
+      isRecording = false;
+      userBlob = null;
+      btnPlay.disabled = true;
+    }
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index cc76e75..1a65576 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,11 +1,22 @@
-body { font-family: system-ui, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background: #111; color: #eee; }
-h1 { text-align: center; color: #6c5ce7; }
-#models { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
-.model-btn { padding: 8px 16px; border: 1px solid #6c5ce7; background: transparent; color: #6c5ce7; border-radius: 6px; cursor: pointer; }
-.model-btn.active { background: #6c5ce7; color: #fff; }
-#chat { border: 1px solid #333; border-radius: 8px; padding: 16px; min-height: 300px; max-height: 400px; overflow-y: auto; margin: 16px 0; }
-.user { color: #00cec9; margin: 8px 0; }
-.bot { color: #a29bfe; margin: 8px 0; }
-#recorder { text-align: center; }
-#mic-btn { padding: 12px 32px; background: #e84393; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
-#status { display: inline-block; margin-left: 12px; color: #999; }
\ No newline at end of file
+* { box-sizing: border-box; }
+body { font-family: system-ui, -apple-system, sans-serif; max-width: 640px; margin: 0 auto; padding: 20px; background: #0d0d1a; color: #e0e0e0; }
+h1 { text-align: center; color: #7c6ff7; margin-bottom: 8px; }
+
+#models { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
+.model-btn { padding: 6px 14px; border: 1px solid #7c6ff7; background: transparent; color: #7c6ff7; border-radius: 6px; font-size: 13px; cursor: default; }
+.model-btn.active { background: #7c6ff7; color: #fff; }
+
+#visualizer { text-align: center; margin: 10px 0; }
+#meter { border-radius: 6px; background: #1a1a2e; }
+
+#controls { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
+#btnRecord { padding: 10px 28px; background: #e84393; color: #fff; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; }
+#btnRecord:disabled { opacity: 0.5; cursor: not-allowed; }
+#btnPlay { padding: 10px 20px; background: #00b894; color: #fff; border: none; border-radius: 8px; font-size: 15px; cursor: pointer; }
+#btnPlay:disabled { opacity: 0.4; cursor: not-allowed; }
+
+#status { text-align: center; color: #888; font-size: 14px; min-height: 20px; margin: 8px 0; }
+
+#chat { border: 1px solid #2a2a3e; border-radius: 8px; padding: 14px; min-height: 240px; max-height: 380px; overflow-y: auto; margin: 12px 0; background: #13132a; }
+.user { color: #00cec9; margin: 8px 0; word-break: break-word; }
+.bot { color: #a29bfe; margin: 8px 0; word-break: break-word; }
\ No newline at end of file
