feat: voice input buttons in stage 2 questionnaire

docs/mockup_cabinet.html

@@ -267,6 +267,22 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
 .qa-submit-txt .qs-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:2px}
 .qa-submit-txt .qs-sub{font-size:12px;color:rgba(255,255,255,.5)}
 .qa-sep{height:1px;background:var(--border);margin:12px 0}
+/* Voice input in questionnaire */
+.qa-voice-row{display:flex;align-items:center;gap:8px;margin-top:8px}
+.qa-mic-btn{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;background:var(--white);cursor:pointer;font-size:12px;font-weight:600;color:var(--muted);font-family:'Inter',sans-serif;transition:all .15s}
+.qa-mic-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--light)}
+.qa-mic-btn svg{flex-shrink:0}
+.qa-mic-btn.rec{border-color:#EF4444;color:#EF4444;background:#FEF2F2;animation:recPulse 1.4s ease-in-out infinite}
+@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.2)}50%{box-shadow:0 0 0 5px rgba(239,68,68,0)}}
+.qa-or{font-size:11px;color:#CBD5E1;font-weight:500}
+/* Voice answer bubble (after recording) */
+.qa-voice-ans{display:flex;align-items:center;gap:10px;background:var(--light);border:1.5px solid rgba(16,185,129,.25);border-radius:10px;padding:10px 14px;margin-top:8px}
+.qa-vplay{width:30px;height:30px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
+.qa-vwave{flex:1;height:22px;display:flex;align-items:center;gap:2px}
+.qa-vwave span{width:3px;background:var(--primary);border-radius:2px;flex-shrink:0;opacity:.65}
+.qa-vdur{font-size:11px;font-weight:700;color:var(--primary);flex-shrink:0}
+.qa-vredo{font-size:11px;color:#9CA3AF;cursor:pointer;flex-shrink:0;border:none;background:none;font-family:'Inter',sans-serif;padding:0;margin-left:4px}
+.qa-vredo:hover{color:var(--muted)}
 
 /* Demo */
 .demo{background:#0F0F1A;border-top:1px solid rgba(255,255,255,.06);padding:7px 18px;display:flex;align-items:center;gap:7px;flex-shrink:0}
@@ -553,6 +569,13 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
             <div class="qa-qlbl">Вопрос 3 · Узкое место</div>
             <div class="qa-qtxt">Где чаще всего возникает затор в производстве?</div>
             <textarea class="qa-textarea filled" placeholder="Опишите своими словами...">Раскрой — основная проблема. Один закройщик не успевает, швеи простаивают по 30–40 минут каждое утро.</textarea>
+            <div class="qa-voice-row">
+              <button class="qa-mic-btn" onclick="this.classList.toggle('rec')">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+                Надиктовать
+              </button>
+              <span class="qa-or">или дополни текст выше</span>
+            </div>
           </div>
           <div class="qa-sep"></div>
           <!-- Q4 -->
@@ -617,7 +640,22 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
           <div class="qa-q">
             <div class="qa-qlbl">Вопрос 8 · Закупки</div>
             <div class="qa-qtxt">Кто принимает решение о закупке ткани? Как планируется?</div>
-            <textarea class="qa-textarea filled" placeholder="Опишите процесс...">Я сам звоню поставщику, когда вижу что ткань заканчивается. Планирования нет — закупаем реактивно.</textarea>
+            <!-- Voice answer demo: this question was answered by voice -->
+            <div class="qa-voice-ans">
+              <div class="qa-vplay">
+                <svg width="11" height="13" viewBox="0 0 12 14" fill="white"><polygon points="1,1 11,7 1,13"/></svg>
+              </div>
+              <div class="qa-vwave">
+                <span style="height:5px"></span><span style="height:12px"></span><span style="height:18px"></span><span style="height:8px"></span><span style="height:16px"></span><span style="height:11px"></span><span style="height:6px"></span><span style="height:19px"></span><span style="height:9px"></span><span style="height:14px"></span><span style="height:7px"></span><span style="height:17px"></span><span style="height:10px"></span><span style="height:15px"></span><span style="height:5px"></span><span style="height:18px"></span><span style="height:8px"></span><span style="height:12px"></span><span style="height:20px"></span><span style="height:6px"></span>
+              </div>
+              <div class="qa-vdur">1:12</div>
+              <button class="qa-vredo">Перезаписать</button>
+            </div>
+            <div class="qa-voice-row" style="margin-top:6px">
+              <span class="qa-or" style="font-size:11px;color:var(--primary);font-weight:600">✓ Голосовой ответ сохранён</span>
+              <span class="qa-or">· или добавь текстом:</span>
+            </div>
+            <textarea class="qa-textarea" placeholder="Дополнение к голосовому ответу (необязательно)..." style="min-height:44px;margin-top:6px"></textarea>
           </div>
         </div>
       </div>
@@ -677,6 +715,13 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
             <div class="qa-qlbl">Вопрос 12 · Проблемы</div>
             <div class="qa-qtxt">Что больше всего беспокоит в финансовой стороне бизнеса?</div>
             <textarea class="qa-textarea" placeholder="Например: не понимаю куда уходят деньги, прибыль есть но денег нет..."></textarea>
+            <div class="qa-voice-row">
+              <button class="qa-mic-btn" onclick="this.classList.toggle('rec')">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
+                Надиктовать
+              </button>
+              <span class="qa-or">удобнее сказать — Елена расшифрует</span>
+            </div>
           </div>
         </div>
       </div>