feat: stage 3 — upload zone, file previews, Elena note, upload buttons in rows

docs/mockup_cabinet.html

@@ -137,6 +137,25 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
 .bdg-wait{background:#FEF9C3;color:#854D0E}
 .bdg-new{background:var(--subtle);color:#94a3b8;border:1px solid var(--border)}
 
+/* Stage 3 — upload zone */
+.dt-upload-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:1.5px dashed #CBD5E1;border-radius:7px;font-size:11px;font-weight:600;color:#9CA3AF;cursor:pointer;background:transparent;font-family:'Inter',sans-serif;transition:all .15s}
+.dt-upload-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--light)}
+.dt-upload-btn svg{flex-shrink:0}
+.dt-file-info{display:flex;align-items:center;gap:6px}
+.dt-file-link{font-size:11px;color:#3B82F6;cursor:pointer;font-weight:600}
+.dt-file-size{font-size:10px;color:#9CA3AF}
+.upload-drop{border:2px dashed #CBD5E1;border-radius:12px;padding:20px;text-align:center;background:var(--subtle);margin-bottom:14px;flex-shrink:0;transition:border-color .15s}
+.upload-drop:hover{border-color:var(--mid);background:var(--light)}
+.upload-drop-ic{font-size:28px;margin-bottom:6px}
+.upload-drop-t{font-size:13px;font-weight:600;color:#374151;margin-bottom:3px}
+.upload-drop-s{font-size:11px;color:#9CA3AF}
+.upload-drop-btn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 16px;background:var(--white);border:1.5px solid var(--border);border-radius:8px;font-size:12px;font-weight:600;color:var(--primary);cursor:pointer;font-family:'Inter',sans-serif}
+.elena-note{background:linear-gradient(135deg,rgba(4,120,87,.05),rgba(16,185,129,.03));border:1.5px solid rgba(4,120,87,.12);border-radius:12px;padding:14px 16px;display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;flex-shrink:0}
+.elena-note-av{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
+.elena-note-body{flex:1}
+.elena-note-name{font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
+.elena-note-text{font-size:13px;color:#374151;line-height:1.5}
+
 /* Analysis */
 .an-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
 .an-c{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:16px}
@@ -744,47 +763,104 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
         <div class="hero-txt">
           <div class="hero-tag">Этап 3 из 5 · В процессе</div>
           <div class="hero-h">Сбор документов</div>
-          <div class="hero-d">Елена сформировала список по итогам интервью. Каждый участник загружает своё через личный кабинет.</div>
+          <div class="hero-d">Елена сформировала список по итогам интервью. 3 из 6 загружены — осталось 3.</div>
         </div>
         <button class="btn btn-p" onclick="unlock(4)">Завершить → Этап 4</button>
       </div>
+
+      <!-- Progress -->
+      <div class="card" style="padding:14px 18px">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+          <span style="font-size:13px;font-weight:700;color:var(--text)">Прогресс загрузки</span>
+          <span style="font-size:13px;font-weight:700;color:var(--primary)">3 из 6 документов</span>
+        </div>
+        <div class="pb-track" style="margin-bottom:6px"><div class="pb-fill" style="width:50%"></div></div>
+        <div style="font-size:11px;color:var(--muted)">Елена напомнит Сидорову и Козловой через Telegram — вчера в 18:00</div>
+      </div>
+
+      <!-- Elena note -->
+      <div class="elena-note">
+        <div style="width:32px;height:32px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:13px;color:#fff;flex-shrink:0">Е</div>
+        <div class="elena-note-body">
+          <div class="elena-note-name">Елена · комментарий</div>
+          <div class="elena-note-text">Уже проанализировала устав и оргструктуру — вижу матричное подчинение без чётких границ ответственности. Жду финансовую отчётность от Сидорова: без неё не смогу завершить диагностику затрат. Прайс от Козловой тоже важен для анализа маржи.</div>
+        </div>
+      </div>
+
+      <!-- Documents table -->
       <div class="dt">
-        <div class="dt-hd"><div>Документ</div><div>От кого</div><div>Дата</div><div>Статус</div></div>
+        <div class="dt-hd"><div>Документ</div><div>От кого</div><div>Загружен</div><div>Статус</div></div>
+
+        <!-- Loaded docs -->
         <div class="dt-r">
           <div class="dt-doc"><span style="font-size:15px">📄</span>Устав компании</div>
-          <div class="dt-from">Иванов А.</div><div class="dt-date">27 мая</div>
+          <div class="dt-from">Иванов А.</div>
+          <div class="dt-file-info"><span class="dt-file-link">Открыть</span><span class="dt-file-size">· 27 мая · 184 кб</span></div>
           <div><span class="bdg bdg-ok">✓ Загружен</span></div>
         </div>
         <div class="dt-r">
           <div class="dt-doc"><span style="font-size:15px">🗂</span>Организационная структура</div>
-          <div class="dt-from">Иванов А.</div><div class="dt-date">27 мая</div>
+          <div class="dt-from">Иванов А.</div>
+          <div class="dt-file-info"><span class="dt-file-link">Открыть</span><span class="dt-file-size">· 27 мая · 2.1 мб</span></div>
           <div><span class="bdg bdg-ok">✓ Загружен</span></div>
         </div>
         <div class="dt-r">
           <div class="dt-doc"><span style="font-size:15px">🔧</span>Регламенты и должностные инструкции</div>
-          <div class="dt-from">Петрова М.</div><div class="dt-date">28 мая</div>
+          <div class="dt-from">Петрова М.</div>
+          <div class="dt-file-info"><span class="dt-file-link">Открыть</span><span class="dt-file-size">· 28 мая · 860 кб</span></div>
           <div><span class="bdg bdg-ok">✓ Загружен</span></div>
         </div>
-        <div class="dt-r">
+
+        <!-- Waiting docs — with upload button -->
+        <div class="dt-r" style="background:#FFFBEB">
           <div class="dt-doc"><span style="font-size:15px">📊</span>Финансовая отчётность 2025</div>
-          <div class="dt-from">Сидоров Н.</div><div class="dt-date">—</div>
+          <div class="dt-from" style="color:#854D0E;font-weight:600">Сидоров Н.</div>
-          <div><span class="bdg bdg-wait">⏳ Ожидается</span></div>
+          <div style="font-size:11px;color:#9CA3AF">ожидается</div>
+          <div style="display:flex;align-items:center;gap:8px">
+            <span class="bdg bdg-wait">⏳ Ожидается</span>
+            <button class="dt-upload-btn" onclick="this.closest('.dt-r').style.background='#F0FDF4';this.replaceWith(Object.assign(document.createElement('span'),{className:'bdg bdg-ok',textContent:'✓ Загружен'}))">
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
+              Загрузить
+            </button>
+          </div>
         </div>
-        <div class="dt-r">
+        <div class="dt-r" style="background:#FFFBEB">
-          <div class="dt-doc"><span style="font-size:15px">💰</span>Прайс-лист / КП</div>
+          <div class="dt-doc"><span style="font-size:15px">💰</span>Прайс-лист / коммерческое предложение</div>
-          <div class="dt-from">Козлова Н.</div><div class="dt-date">—</div>
+          <div class="dt-from" style="color:#854D0E;font-weight:600">Козлова Н.</div>
-          <div><span class="bdg bdg-wait">⏳ Ожидается</span></div>
+          <div style="font-size:11px;color:#9CA3AF">ожидается</div>
+          <div style="display:flex;align-items:center;gap:8px">
+            <span class="bdg bdg-wait">⏳ Ожидается</span>
+            <button class="dt-upload-btn" onclick="this.closest('.dt-r').style.background='#F0FDF4';this.replaceWith(Object.assign(document.createElement('span'),{className:'bdg bdg-ok',textContent:'✓ Загружен'}))">
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
+              Загрузить
+            </button>
+          </div>
         </div>
         <div class="dt-r">
           <div class="dt-doc"><span style="font-size:15px">💻</span>Список систем и ПО</div>
-          <div class="dt-from">Иванов А.</div><div class="dt-date">—</div>
+          <div class="dt-from">Иванов А.</div>
-          <div><span class="bdg bdg-new">Не начат</span></div>
+          <div style="font-size:11px;color:#9CA3AF">не начат</div>
+          <div style="display:flex;align-items:center;gap:8px">
+            <span class="bdg bdg-new">Не загружен</span>
+            <button class="dt-upload-btn" onclick="this.closest('.dt-r').style.background='#F0FDF4';this.replaceWith(Object.assign(document.createElement('span'),{className:'bdg bdg-ok',textContent:'✓ Загружен'}))">
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
+              Загрузить
+            </button>
+          </div>
         </div>
       </div>
-      <div class="card">
+
-        <div class="card-h">Прогресс — 3 из 6 документов загружено</div>
+      <!-- Drop zone for quick upload -->
-        <div class="pb-track"><div class="pb-fill" style="width:50%"></div></div>
+      <div class="upload-drop">
+        <div class="upload-drop-ic">📎</div>
+        <div class="upload-drop-t">Перетащи сюда любой документ</div>
+        <div class="upload-drop-s">PDF, Excel, Word, изображения — Елена разберётся</div>
+        <button class="upload-drop-btn">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>
+          Выбрать файл
+        </button>
       </div>
+
     </div>
 
     <!-- Этап 4 -->