Шапка «Шлюз НРД»: зелёная при работающем обмене, всплывающая панель; плашка анкеты в НРД

Общий цвет цепочки — по участкам с известным состоянием: несделанная
M2M-проверка больше не делает серым работающий обмен. Вместо title —
всплывающая панель по участкам с цветными точками, без повтора
«последнего ответа НРД».

Раздел НРД: наверху плашка, пока анкета участника не принята НРД (не
отправлена / ждёт ответа / отклонена с текстом НРД), со ссылкой на анкету;
пропадает после приёма. Только в боевом контуре.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Q7eREaYwUt1i4fNLZcGnjn

internal/lkgateway/web/templates/layout.html

@@ -112,6 +112,16 @@ body {
 .nsd-chain.ok i { background:var(--ok); } .nsd-chain.warn i { background:var(--warn); } .nsd-chain.err i { background:var(--err); }
 .nsd-chain.err { background:var(--err-weak); border-color:var(--err); color:var(--err); }
 .nsd-chain.warn { background:var(--warn-weak); }
+.nsd-chain { position:relative; }
+.nsd-pop { display:none; position:absolute; top:100%; right:0; padding-top:8px; z-index:60; cursor:default; }
+.nsd-chain:hover .nsd-pop, .nsd-chain:focus .nsd-pop { display:block; }
+.nsd-pop-b { display:block; min-width:300px; max-width:420px; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14); padding:10px 14px; font-size:13px; line-height:1.4; text-align:left; white-space:normal; font-weight:400; }
+.np-row { display:grid; grid-template-columns:10px 72px 1fr; gap:8px; align-items:baseline; padding:4px 0; }
+.np-row + .np-row { border-top:1px solid var(--border); }
+.np-row small { display:block; color:var(--muted); font-size:11.5px; }
+.np-d { width:8px; height:8px; border-radius:50%; background:var(--muted); display:inline-block; }
+.np-d.ok { background:var(--ok); } .np-d.warn { background:var(--warn); } .np-d.err { background:var(--err); }
+.np-foot { display:block; margin-top:6px; color:var(--muted); font-size:12px; }
 .sys-block { display:inline-flex; flex-direction:column; align-items:center; gap:2px; line-height:1.1; }
 .sys-block .sys-status { padding:3px 9px 3px 7px; font-size:11.5px; }
 .user-dd .ddbtn.user-chip { display:inline-flex; flex-direction:column; align-items:flex-start; padding:4px 10px; border-radius:8px; margin:0; max-width:220px; }
@@ -587,7 +597,7 @@ button.dq-link, .dq-link { background:none !important; border:0 !important; padd
   </nav>
   <div class="topbar-right">
     <span class="sys-block">
-      {{if and .NSDLink.Configured (not .IsMockMode)}}<a id="nsd-chain" href="/admin/status#nsd" class="sys-status nsd-chain {{.NSDLink.State}}" title="{{nsdSegTip .NSDLink}}"><i></i><span>Шлюз НРД</span></a>{{else}}<span class="sys-status {{if .IsMockMode}}warn{{end}}" title="Состояние обмена с НРД">
+      {{if and .NSDLink.Configured (not .IsMockMode)}}<a id="nsd-chain" href="/admin/status#nsd" class="sys-status nsd-chain {{.NSDLink.State}}" aria-label="{{nsdSegTip .NSDLink}}"><i></i><span>Шлюз НРД</span>{{nsdSegPop .NSDLink}}</a>{{else}}<span class="sys-status {{if .IsMockMode}}warn{{end}}" title="Состояние обмена с НРД">
         <span class="pulse"></span>{{if .IsMockMode}}{{if devOn}}Эмуляция{{else}}НРД не подключён{{end}}{{else}}НРД на связи{{end}}</span>{{end}}
       <span class="clock">{{.Now}}</span>
     </span>
@@ -837,14 +847,16 @@ button.dq-link, .dq-link { background:none !important; border:0 !important; padd
     function upd(){
       fetch('/admin/nsd-health.json', {cache:'no-store'}).then(function(r){ return r.json(); }).then(function(h){
         if (!h.configured) return;
-        var tip = '';
-        (h.segs||[]).forEach(function(s){ tip += s.title + ': ' + s.text + (s.detail ? ' (' + s.detail + ')' : '') + '\n'; });
-        tip += (h.ago ? 'Последний ответ НРД ' + h.ago : 'Ответа НРД ещё не было') + '\n';
+        var esc = function(t){ var d = document.createElement('span'); d.textContent = t || ''; return d.innerHTML; };
+        var pop = '';
+        (h.segs||[]).forEach(function(s){ pop += '<span class="np-row"><i class="np-d ' + esc(s.state) + '"></i><b>' + esc(s.title) + '</b><span>' + esc(s.text) + (s.detail ? '<small>' + esc(s.detail) + '</small>' : '') + '</span></span>'; });
         el.className = 'sys-status nsd-chain ' + h.state;
-        el.title = tip + 'Подробно — «Статус». Обновляется каждые 30 с.';
+        var b = el.querySelector('.nsd-pop-b');
+        if (b) b.innerHTML = pop + '<span class="np-foot">Подробно — «Статус»</span>';
       }).catch(function(){
         el.className = 'sys-status nsd-chain warn';
-        el.title = 'Нет связи с bj — состояние НРД не обновляется';
+        var b = el.querySelector('.nsd-pop-b');
+        if (b) b.innerHTML = '<span class="np-row"><i class="np-d warn"></i><b>bj</b><span>нет связи — состояние НРД не обновляется</span></span>';
       });
     }
     setInterval(upd, 30000);