feat: stage 3 document analysis panels — click to expand Elena findings + ask

docs/mockup_cabinet.html

@@ -137,6 +137,26 @@ 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 — document detail panel */
+.dt-r{cursor:pointer}
+.doc-panel{display:none;grid-column:1/-1;background:#FAFDFB;border-top:1px solid var(--border);padding:16px 18px;gap:16px}
+.doc-panel.open{display:grid;grid-template-columns:200px 1fr}
+.doc-thumb{border-radius:10px;background:var(--white);border:1.5px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;font-size:32px;aspect-ratio:1/.8}
+.doc-thumb-name{font-size:10px;font-weight:600;color:var(--muted);text-align:center;word-break:break-word}
+.doc-analysis{}
+.doc-analysis-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);margin-bottom:8px;display:flex;align-items:center;gap:6px}
+.doc-finding{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #E9F5EF}
+.doc-finding:last-of-type{border-bottom:none}
+.df-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;flex-shrink:0;margin-top:1px}
+.df-ok{background:var(--light);color:var(--primary)}
+.df-warn{background:#FEF3C7;color:#92400E}
+.df-info{background:#EFF6FF;color:#1E40AF}
+.df-text{font-size:12px;color:#374151;line-height:1.45}
+.doc-ask{display:flex;gap:7px;margin-top:10px}
+.doc-ask-inp{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:7px 11px;font-size:12px;font-family:'Inter',sans-serif;color:var(--text);background:var(--white);outline:none}
+.doc-ask-inp:focus{border-color:var(--mid)}
+.doc-ask-btn{padding:7px 12px;border-radius:8px;background:var(--primary);color:#fff;font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap}
+
 /* 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)}
@@ -791,24 +811,73 @@ body{font-family:'Inter',sans-serif;background:var(--body-bg);color:var(--text);
       <div class="dt">
         <div class="dt-hd"><div>Документ</div><div>От кого</div><div>Загружен</div><div>Статус</div></div>
 
-        <!-- Loaded docs -->
+        <!-- Loaded docs — click to expand Elena analysis -->
-        <div class="dt-r">
+        <div class="dt-r" onclick="toggleDoc(this)" style="grid-template-columns:2fr 1.1fr .9fr 1fr">
-          <div class="dt-doc"><span style="font-size:15px">📄</span>Устав компании</div>
+          <div class="dt-doc"><span style="font-size:15px">📄</span>Устав компании <span style="font-size:10px;color:#9CA3AF;margin-left:4px">▸ нажми для анализа</span></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 class="dt-file-info"><span class="dt-file-link" onclick="event.stopPropagation()">Открыть</span><span class="dt-file-size">· 27 мая · 184 кб</span></div>
           <div><span class="bdg bdg-ok">✓ Загружен</span></div>
+          <div class="doc-panel">
+            <div class="doc-thumb">📄<div class="doc-thumb-name">Устав_компании.pdf</div></div>
+            <div class="doc-analysis">
+              <div class="doc-analysis-head">
+                <span style="width:16px;height:16px;border-radius:50%;background:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff">Е</span>
+                Анализ Елены
+              </div>
+              <div class="doc-finding"><span class="df-tag df-info">Факт</span><span class="df-text">ООО «ВизелБерг», основана 2014 г. Генеральный директор — Иванов А.И., единственный учредитель.</span></div>
+              <div class="doc-finding"><span class="df-tag df-warn">Риск</span><span class="df-text">Устав не обновлялся с 2018 года. Ряд положений не соответствует текущей деятельности (добавлено производство, не отражено).</span></div>
+              <div class="doc-finding"><span class="df-tag df-ok">Норм</span><span class="df-text">Виды деятельности по ОКВЭД охватывают швейное производство и оптовую торговлю — изменения не нужны.</span></div>
+              <div class="doc-ask">
+                <input class="doc-ask-inp" placeholder="Спросить Елену об этом документе...">
+                <button class="doc-ask-btn">Спросить</button>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="dt-r">
+        <div class="dt-r" onclick="toggleDoc(this)" style="grid-template-columns:2fr 1.1fr .9fr 1fr">
-          <div class="dt-doc"><span style="font-size:15px">🗂</span>Организационная структура</div>
+          <div class="dt-doc"><span style="font-size:15px">🗂</span>Организационная структура <span style="font-size:10px;color:#9CA3AF;margin-left:4px">▸ нажми для анализа</span></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 class="dt-file-info"><span class="dt-file-link" onclick="event.stopPropagation()">Открыть</span><span class="dt-file-size">· 27 мая · 2.1 мб</span></div>
           <div><span class="bdg bdg-ok">✓ Загружен</span></div>
+          <div class="doc-panel">
+            <div class="doc-thumb">🗂<div class="doc-thumb-name">Оргструктура_2026.pdf</div></div>
+            <div class="doc-analysis">
+              <div class="doc-analysis-head">
+                <span style="width:16px;height:16px;border-radius:50%;background:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff">Е</span>
+                Анализ Елены
+              </div>
+              <div class="doc-finding"><span class="df-tag df-info">Факт</span><span class="df-text">22 сотрудника. Производственный блок: 14 швей, 1 закройщик, 1 мастер. Административный: директор, бухгалтер, 2 менеджера продаж, кладовщик, уборщица.</span></div>
+              <div class="doc-finding"><span class="df-tag df-warn">Риск</span><span class="df-text">Матричное подчинение без чётких границ: мастер подчиняется и директору, и менеджеру продаж. Конфликт приоритетов производство vs. срочность заказов.</span></div>
+              <div class="doc-finding"><span class="df-tag df-warn">Риск</span><span class="df-text">1 закройщик на 14 швей — узкое место подтверждается структурой. Типовая нагрузка превышает норму в 2–3 раза.</span></div>
+              <div class="doc-finding"><span class="df-tag df-ok">Норм</span><span class="df-text">Складской учёт ведёт кладовщик — отдельная роль. Разделение производства и склада есть, работает на базовом уровне.</span></div>
+              <div class="doc-ask">
+                <input class="doc-ask-inp" placeholder="Спросить Елену об этом документе...">
+                <button class="doc-ask-btn">Спросить</button>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="dt-r">
+        <div class="dt-r" onclick="toggleDoc(this)" style="grid-template-columns:2fr 1.1fr .9fr 1fr">
-          <div class="dt-doc"><span style="font-size:15px">🔧</span>Регламенты и должностные инструкции</div>
+          <div class="dt-doc"><span style="font-size:15px">🔧</span>Регламенты и должностные инструкции <span style="font-size:10px;color:#9CA3AF;margin-left:4px">▸ нажми для анализа</span></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 class="dt-file-info"><span class="dt-file-link" onclick="event.stopPropagation()">Открыть</span><span class="dt-file-size">· 28 мая · 860 кб</span></div>
           <div><span class="bdg bdg-ok">✓ Загружен</span></div>
+          <div class="doc-panel">
+            <div class="doc-thumb">🔧<div class="doc-thumb-name">Регламенты.docx</div></div>
+            <div class="doc-analysis">
+              <div class="doc-analysis-head">
+                <span style="width:16px;height:16px;border-radius:50%;background:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#fff">Е</span>
+                Анализ Елены
+              </div>
+              <div class="doc-finding"><span class="df-tag df-info">Факт</span><span class="df-text">12 должностных инструкций, 3 технологических регламента. Последнее обновление — 2022 год.</span></div>
+              <div class="doc-finding"><span class="df-tag df-warn">Риск</span><span class="df-text">Нормы времени на операции отсутствуют в регламентах — только описание последовательности. Подтверждает ответ из анкеты («в голове у мастера»).</span></div>
+              <div class="doc-finding"><span class="df-tag df-ok">Норм</span><span class="df-text">Контроль качества описан — ОТК и приёмка готовых изделий прописаны. Критерии брака задокументированы.</span></div>
+              <div class="doc-ask">
+                <input class="doc-ask-inp" placeholder="Спросить Елену об этом документе...">
+                <button class="doc-ask-btn">Спросить</button>
+              </div>
+            </div>
+          </div>
         </div>
 
         <!-- Waiting docs — with upload button -->
@@ -975,6 +1044,15 @@ function go(n){
   document.getElementById('pb-hint').textContent=hints[n];
 }
 
+function toggleDoc(row){
+  const panel=row.querySelector('.doc-panel');
+  if(!panel) return;
+  const isOpen=panel.classList.contains('open');
+  // close all others
+  document.querySelectorAll('.doc-panel.open').forEach(p=>p.classList.remove('open'));
+  if(!isOpen) panel.classList.add('open');
+}
+
 function qsel(el){
   const grp=el.closest('.qa-radios');
   grp.querySelectorAll('.qa-radio').forEach(r=>r.classList.remove('sel'));