diff --git a/shine-UI/index.html b/shine-UI/index.html
index db4c53ad..b87deecb 100644
--- a/shine-UI/index.html
+++ b/shine-UI/index.html
@@ -12,13 +12,13 @@
     <link rel="apple-touch-icon" href="./img/logo.jpg" />
     <title>СИЯНИЕ</title>
     <script>
-window.__SHINE_BUILD_HASH__ = '20260819190000';
+window.__SHINE_BUILD_HASH__ = '20260822140000';
       window.__SHINE_CLIENT_VERSION__ = '1.2.10';
     </script>
     <script>
       (function attachStylesWithBuildHash() {
         const v = encodeURIComponent(window.__SHINE_BUILD_HASH__ || 'dev');
-        const cssFiles = ['./styles/main.css', './styles/layout.css', './styles/components.css', './styles/network-graph.css'];
+        const cssFiles = ['./styles/main.css', './styles/layout.css', './styles/components.css', './styles/network-graph.css', './styles/buttons-white.css'];
         cssFiles.forEach((file) => {
           const link = document.createElement('link');
           link.rel = 'stylesheet';
diff --git a/shine-UI/js/app.js b/shine-UI/js/app.js
index e3d3cbc0..4ad0dacc 100644
--- a/shine-UI/js/app.js
+++ b/shine-UI/js/app.js
@@ -5,6 +5,7 @@ import {
   syncTrackedRouteHistory,
 } from './router.js';
 import { renderToolbar } from './components/toolbar.js';
+import { attachScrollToBottomButton } from './components/scroll-to-bottom-button.js';
 import { captureClientError, setClientErrorSentNotifier, setClientErrorTransport } from './services/client-error-reporter.js';
 import { initPwaInstallPromptHandling } from './services/pwa-install-service.js';
 import { initPwaPush } from './services/pwa-push-service.js';
@@ -80,17 +81,17 @@ import * as appLogView from './pages/app-log-view.js';
 import * as pwaDiagnosticsView from './pages/pwa-diagnostics-view.js';
 import * as solanaUsersInitView from './pages/solana-users-init-view.js';
 import * as solanaRpcCheckView from './pages/solana-rpc-check-view.js';
-import * as messagesList from './pages/messages-list.js';
+import * as messagesList from './pages/messages-list.js?v=202608221218';
 import * as contactSearchView from './pages/contact-search-view.js';
-import * as chatView from './pages/chat-view.js?v=202608191738';
+import * as chatView from './pages/chat-view.js?v=202608221218';
 import * as userProfileView from './pages/user-profile-view.js';
-import * as channelsList from './pages/channels-list.js';
+import * as channelsList from './pages/channels-list.js?v=202608221218';
 import * as channelView from './pages/channel-view.js';
 import * as channelThreadView from './pages/channel-thread-view.js';
 import * as addChannelView from './pages/add-channel-view.js';
 import * as addPersonalPublicChatView from './pages/add-personal-public-chat-view.js';
-import * as networkView from './pages/network-view.js';
-import * as notificationsView from './pages/notifications-view.js';
+import * as networkView from './pages/network-view.js?v=202608221226';
+import * as notificationsView from './pages/notifications-view.js?v=202608221354';
 
 const CONVERSATION_CLEAR_NOTICE_TEXT = 'История переписки очищена с этого места';
 const DM_UNSUPPORTED_FORMAT_TEXT = 'Формат сообщения не поддерживается';
@@ -190,6 +191,15 @@ let initialConnectionCompleted = false;
 let orientationLockInFlight = false;
 let currentChromeCleanup = null;
 const CALL_PUSH_PENDING_ACTION_KEY = 'shine-ui-call-push-pending-action-v1';
+const SCROLL_TO_BOTTOM_PAGE_IDS = new Set([
+  'messages-list',
+  'chat-view',
+  'channels-list',
+  'channel-view',
+  'channel-thread-view',
+  'notifications-view',
+]);
+
 const GUEST_ALLOWED_PAGES = new Set([
   'start-view',
   'entry-settings-view',
@@ -1128,6 +1138,14 @@ function renderPageFailureFallback(pageId, error) {
   refreshConnectionUi();
 }
 
+function attachPageScrollToBottom(pageId, screen) {
+  if (!SCROLL_TO_BOTTOM_PAGE_IDS.has(pageId)) return null;
+
+  return attachScrollToBottomButton({
+    scrollContainer: () => screen.querySelector('.dm-chat-wrap') || screenEl,
+  });
+}
+
 function renderApp() {
   syncTrackedRouteHistory(window.location.pathname || '/');
   const route = getRoute();
@@ -1164,7 +1182,12 @@ function renderApp() {
     }
 
     screenEl.append(screen);
-    currentCleanup = typeof screen.cleanup === 'function' ? screen.cleanup : null;
+    const pageCleanup = typeof screen.cleanup === 'function' ? screen.cleanup : null;
+    const scrollToBottomControl = attachPageScrollToBottom(pageId, screen);
+    currentCleanup = () => {
+      pageCleanup?.();
+      scrollToBottomControl?.cleanup();
+    };
 
     screenEl.classList.toggle('no-app-chrome', !showAppChrome);
     screenEl.classList.toggle('preauth-flow', PRE_AUTH_PAGES.includes(pageId));
diff --git a/shine-UI/js/components/avatar-image.js b/shine-UI/js/components/avatar-image.js
index 831ca1d4..88393acc 100644
--- a/shine-UI/js/components/avatar-image.js
+++ b/shine-UI/js/components/avatar-image.js
@@ -25,27 +25,28 @@ export function buildAvatarInitials({ login, firstName = '', lastName = '' } = {
   return (cleanLogin[0] || '?').toUpperCase();
 }
 
-export function renderUserAvatar({
-  login,
-  firstName = '',
-  lastName = '',
+export function renderAvatar({
+  initials = '?',
   avatar = null,
   size = 'large',
   className = '',
   title = '',
+  alt = 'Аватар',
+  glow = false,
 } = {}) {
   const wrap = document.createElement('div');
-  const classes = ['avatar', 'avatar-image'];
+  const classes = new Set(['avatar', 'avatar-image', 'avatar-framed']);
   const sizeClass = pickSizeClass(size);
-  if (sizeClass) classes.push(sizeClass);
+  if (sizeClass) classes.add(sizeClass);
   const extraClass = String(className || '').trim();
-  if (extraClass) classes.push(...extraClass.split(/\s+/g));
-  wrap.className = classes.join(' ');
+  if (extraClass) extraClass.split(/\s+/g).filter(Boolean).forEach((value) => classes.add(value));
+  if (glow) classes.add('avatar-glow');
+  wrap.className = Array.from(classes).join(' ');
   if (title) wrap.title = String(title);
 
   const fallback = document.createElement('span');
   fallback.className = 'avatar-fallback';
-  fallback.textContent = buildAvatarInitials({ login, firstName, lastName });
+  fallback.textContent = String(initials || '?').trim().slice(0, 2).toUpperCase() || '?';
   wrap.append(fallback);
 
   const txId = String(avatar?.ar || '').trim();
@@ -56,7 +57,8 @@ export function renderUserAvatar({
   const expectedSha256Hex = validateSha256Hex(sha256Hex) ? sha256Hex : '';
 
   const img = document.createElement('img');
-  img.alt = 'Аватар';
+  img.className = 'avatar-photo';
+  img.alt = String(alt || 'Аватар');
   img.loading = 'lazy';
   img.decoding = 'async';
   wrap.append(img);
@@ -131,3 +133,24 @@ export function renderUserAvatar({
 
   return wrap;
 }
+
+export function renderUserAvatar({
+  login,
+  firstName = '',
+  lastName = '',
+  avatar = null,
+  size = 'large',
+  className = '',
+  title = '',
+  glow = false,
+} = {}) {
+  return renderAvatar({
+    initials: buildAvatarInitials({ login, firstName, lastName }),
+    avatar,
+    size,
+    className,
+    title,
+    alt: 'Аватар',
+    glow,
+  });
+}
diff --git a/shine-UI/js/components/header.js b/shine-UI/js/components/header.js
index a3337646..8b3eb329 100644
--- a/shine-UI/js/components/header.js
+++ b/shine-UI/js/components/header.js
@@ -1,14 +1,20 @@
-export function renderHeader({ title, leftAction, leftLabel = '', rightActions = [] }) {
+export function renderHeader({ title = '', centerNode = null, leftAction, leftLabel = '', rightActions = [] }) {
   const wrap = document.createElement('header');
-  wrap.className = 'page-header';
+  wrap.className = 'page-header app-topbar-shell';
 
   const left = document.createElement('div');
   left.className = 'header-left';
   if (leftAction) {
     const btn = document.createElement('button');
     btn.type = 'button';
-    btn.className = 'icon-btn';
-    btn.textContent = leftAction.label;
+    const rawLabel = String(leftAction.label || '').trim();
+    const isBackAction = rawLabel === '←' || rawLabel === '<' || rawLabel === '‹';
+    btn.className = `icon-btn${isBackAction ? ' header-back-btn' : ''}`;
+    btn.textContent = isBackAction ? '←' : rawLabel;
+    if (isBackAction) {
+      btn.setAttribute('aria-label', leftAction.ariaLabel || 'Назад');
+      btn.title = leftAction.title || 'Назад';
+    }
     btn.addEventListener('click', leftAction.onClick);
     left.append(btn);
   }
@@ -19,9 +25,16 @@ export function renderHeader({ title, leftAction, leftLabel = '', rightActions =
     left.append(label);
   }
 
-  const h1 = document.createElement('h1');
-  h1.className = 'page-title';
-  h1.textContent = title;
+  const center = document.createElement('div');
+  center.className = 'header-center';
+  if (centerNode instanceof Node) {
+    center.append(centerNode);
+  } else {
+    const h1 = document.createElement('h1');
+    h1.className = 'page-title';
+    h1.textContent = title;
+    center.append(h1);
+  }
 
   const right = document.createElement('div');
   right.className = 'header-actions';
@@ -40,6 +53,6 @@ export function renderHeader({ title, leftAction, leftLabel = '', rightActions =
     right.append(btn);
   });
 
-  wrap.append(left, h1, right);
+  wrap.append(left, center, right);
   return wrap;
 }
diff --git a/shine-UI/js/components/overflow-dots.js b/shine-UI/js/components/overflow-dots.js
new file mode 100644
index 00000000..cd78668f
--- /dev/null
+++ b/shine-UI/js/components/overflow-dots.js
@@ -0,0 +1,10 @@
+export function createOverflowDots({ className = '' } = {}) {
+  const dots = document.createElement('span');
+  const extra = String(className || '').trim();
+  dots.className = `app-overflow-dots${extra ? ` ${extra}` : ''}`;
+  dots.setAttribute('aria-hidden', 'true');
+  for (let i = 0; i < 3; i += 1) {
+    dots.append(document.createElement('i'));
+  }
+  return dots;
+}
diff --git a/shine-UI/js/components/scroll-to-bottom-button.js b/shine-UI/js/components/scroll-to-bottom-button.js
index cd2aea97..3470062c 100644
--- a/shine-UI/js/components/scroll-to-bottom-button.js
+++ b/shine-UI/js/components/scroll-to-bottom-button.js
@@ -30,6 +30,7 @@ export function attachScrollToBottomButton({
   button.className = 'scroll-to-bottom-btn';
   button.title = title;
   button.setAttribute('aria-label', 'Прокрутить ленту вниз');
+  button.tabIndex = -1;
   button.append(buildArrowIcon());
   target.append(button);
 
@@ -42,6 +43,7 @@ export function attachScrollToBottomButton({
   const hide = () => {
     button.classList.remove('is-visible');
     button.setAttribute('aria-hidden', 'true');
+    button.tabIndex = -1;
   };
 
   const scheduleRefresh = () => {
@@ -103,6 +105,7 @@ export function attachScrollToBottomButton({
 
     button.classList.toggle('is-visible', shouldShow);
     button.setAttribute('aria-hidden', shouldShow ? 'false' : 'true');
+    button.tabIndex = shouldShow ? 0 : -1;
   }
 
   const scrollToBottom = () => {
diff --git a/shine-UI/js/pages/add-channel-view.js b/shine-UI/js/pages/add-channel-view.js
index 2df92d91..2e399f62 100644
--- a/shine-UI/js/pages/add-channel-view.js
+++ b/shine-UI/js/pages/add-channel-view.js
@@ -10,7 +10,7 @@ import {
   openArweaveAttachmentManager,
   markArweaveAttachmentPlaced,
 } from '../components/arweave-attachment-manager.js';
-import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
+import { renderAvatar } from '../components/avatar-image.js';
 import { makeShineChannelRoute } from '../services/shine-routes.js';
 
 export const pageMeta = { id: 'add-channel-view', title: 'Создание канала' };
@@ -40,17 +40,16 @@ function normalizeMetaText(value, max, label) {
 function renderAvatarPreview(slot, avatar, title) {
   if (!slot) return;
   slot.innerHTML = '';
-  const wrap = document.createElement('div');
-  wrap.className = 'channel-profile-avatar';
+  const label = String(title || 'К').trim() || 'К';
+  const wrap = renderAvatar({
+    initials: label.slice(0, 1).toUpperCase() || 'К',
+    avatar,
+    size: 'small',
+    className: 'channel-profile-avatar',
+    title: label,
+    alt: 'Аватар канала',
+  });
   wrap.style.setProperty('--channel-avatar-size', '104px');
-  if (avatar?.ar) {
-    const img = document.createElement('img');
-    img.alt = 'Аватар канала';
-    img.src = buildArweaveDataUrl({ gateway: state.entrySettings.arweaveServer, txId: avatar.ar });
-    wrap.append(img);
-  } else {
-    wrap.textContent = String(title || 'К').trim().slice(0, 1).toUpperCase() || 'К';
-  }
   slot.append(wrap);
 }
 
diff --git a/shine-UI/js/pages/arweave-uploads-view.js b/shine-UI/js/pages/arweave-uploads-view.js
index 286ebe6f..30dbf614 100644
--- a/shine-UI/js/pages/arweave-uploads-view.js
+++ b/shine-UI/js/pages/arweave-uploads-view.js
@@ -6,6 +6,7 @@ import {
   readArweaveAttachmentHistory,
 } from '../components/arweave-attachment-manager.js';
 import { formatBytes } from '../services/attachment-format.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
 import { state } from '../state.js';
 
@@ -73,13 +74,14 @@ export function render({ navigate }) {
     <button class="secondary-btn arweave-uploads-back" type="button" data-action="back" aria-label="Назад">←</button>
     <div class="arweave-uploads-title">Загрузка файлов в блокчейн</div>
     <button class="primary-btn arweave-uploads-add" type="button" data-action="upload" aria-label="Добавить файл">+</button>
-    <button class="secondary-btn arweave-uploads-menu-btn" type="button" data-action="menu" aria-label="Меню">⋮</button>
+    <button class="secondary-btn arweave-uploads-menu-btn" type="button" data-action="menu" aria-label="Меню"></button>
     <div class="arweave-uploads-menu" data-menu="true" hidden>
       <button class="text-btn" type="button" data-action="upload-menu">Добавить файл</button>
       <button class="text-btn" type="button" data-action="clear">Очистить историю</button>
       <button class="text-btn" type="button" data-action="help">Справка</button>
     </div>
   `;
+  controls.querySelector('[data-action="menu"]')?.append(createOverflowDots());
 
   const statusLine = document.createElement('p');
   statusLine.className = 'meta-muted inline-error';
diff --git a/shine-UI/js/pages/channel-thread-view.js b/shine-UI/js/pages/channel-thread-view.js
index ae090faf..ab844774 100644
--- a/shine-UI/js/pages/channel-thread-view.js
+++ b/shine-UI/js/pages/channel-thread-view.js
@@ -1,5 +1,4 @@
 import { renderHeader } from '../components/header.js';
-import { attachScrollToBottomButton } from '../components/scroll-to-bottom-button.js';
 import { authService, getMessageReactionState, setMessageReactionState, state } from '../state.js';
 import { captureClientError } from '../services/client-error-reporter.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
@@ -1144,33 +1143,27 @@ export function render({ navigate, route, chrome }) {
   screen.className = 'stack channels-screen channels-screen--thread';
   const appScreen = document.getElementById('app-screen');
   appScreen?.classList.add('channels-scroll-clean');
-  const scrollToBottomControl = attachScrollToBottomButton({ scrollContainer: appScreen });
+
+  const threadHeaderButton = document.createElement('button');
+  threadHeaderButton.type = 'button';
+  threadHeaderButton.className = 'icon-btn channel-header-route-btn app-topbar-title-action';
+  threadHeaderButton.textContent = 'Тред в канале: ...';
+  threadHeaderButton.disabled = true;
 
   const header = renderHeader({
-    title: '',
+    centerNode: threadHeaderButton,
     leftAction: { label: '<', onClick: () => navigate(resolveThreadPreviousInChannels(selector, activeResolvedChannelLabel)) },
-    rightActions: [],
+    rightActions: [
+      {
+        label: '↑',
+        title: 'К списку каналов',
+        ariaLabel: 'К списку каналов',
+        className: 'channel-thread-list-btn',
+        onClick: () => navigate('channels-list'),
+      },
+    ],
   });
   header.classList.add('channel-thread-topbar');
-  const headerLeft = header.querySelector('.header-left');
-  let threadHeaderButton = null;
-  if (headerLeft) {
-    const channelsListButton = document.createElement('button');
-    channelsListButton.type = 'button';
-    channelsListButton.className = 'icon-btn';
-    channelsListButton.textContent = '↑';
-    channelsListButton.title = 'К списку каналов';
-    channelsListButton.setAttribute('aria-label', 'К списку каналов');
-    channelsListButton.addEventListener('click', () => navigate('channels-list'));
-    headerLeft.append(channelsListButton);
-
-    threadHeaderButton = document.createElement('button');
-    threadHeaderButton.type = 'button';
-    threadHeaderButton.className = 'icon-btn channel-header-route-btn';
-    threadHeaderButton.textContent = 'Тред в канале: ...';
-    threadHeaderButton.disabled = true;
-    headerLeft.append(threadHeaderButton);
-  }
   chrome?.setTopbar(header);
 
   const statusBox = document.createElement('div');
@@ -1356,7 +1349,6 @@ export function render({ navigate, route, chrome }) {
     invalid.textContent = 'Некорректный идентификатор треда в адресе страницы.';
     screen.append(invalid);
     screen.cleanup = () => {
-      scrollToBottomControl.cleanup();
       appScreen?.classList.remove('channels-scroll-clean');
     };
     return screen;
@@ -1545,7 +1537,6 @@ export function render({ navigate, route, chrome }) {
   })();
 
   screen.cleanup = () => {
-    scrollToBottomControl.cleanup();
     appScreen?.classList.remove('channels-scroll-clean');
   };
 
diff --git a/shine-UI/js/pages/channel-view.js b/shine-UI/js/pages/channel-view.js
index d2122b16..e3b7353d 100644
--- a/shine-UI/js/pages/channel-view.js
+++ b/shine-UI/js/pages/channel-view.js
@@ -1,5 +1,4 @@
 import { renderHeader } from '../components/header.js';
-import { attachScrollToBottomButton } from '../components/scroll-to-bottom-button.js';
 import {
   authService,
   getMessageReactionState,
@@ -17,7 +16,7 @@ import {
   showToast,
   softHaptic,
 } from '../services/channels-ux.js';
-import { renderUserAvatar } from '../components/avatar-image.js';
+import { renderAvatar, renderUserAvatar } from '../components/avatar-image.js';
 import { markArweaveAttachmentPlaced, openArweaveAttachmentManager } from '../components/arweave-attachment-manager.js';
 import {
   composeMessageWithAttachments,
@@ -32,7 +31,6 @@ import {
   makeProfileRoute,
   makeShineMessageRoute,
 } from '../services/shine-routes.js';
-import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
 
 export const pageMeta = { id: 'channel-view', title: 'Канал' };
@@ -388,18 +386,17 @@ function getStatusActionOptionsForTarget(targetMsgSubType) {
 }
 
 function createChannelAvatarElement(channel, size = 72) {
-  const wrap = document.createElement('div');
-  wrap.className = 'channel-profile-avatar';
-  wrap.style.setProperty('--channel-avatar-size', `${size}px`);
   const txId = String(channel?.avaAr || '').trim();
-  if (txId) {
-    const img = document.createElement('img');
-    img.alt = 'Аватар канала';
-    img.src = buildArweaveDataUrl({ gateway: state.entrySettings.arweaveServer, txId });
-    wrap.append(img);
-  } else {
-    wrap.textContent = String(channel?.displayTitle || channel?.name || 'К').trim().slice(0, 1).toUpperCase() || 'К';
-  }
+  const title = String(channel?.displayTitle || channel?.name || 'К').trim() || 'К';
+  const wrap = renderAvatar({
+    initials: title.slice(0, 1).toUpperCase() || 'К',
+    avatar: txId ? { ar: txId } : null,
+    size: 'small',
+    className: 'channel-profile-avatar',
+    title,
+    alt: 'Аватар канала',
+  });
+  wrap.style.setProperty('--channel-avatar-size', `${size}px`);
   return wrap;
 }
 
@@ -2042,7 +2039,6 @@ export function render({ navigate, route, chrome }) {
   screen.className = 'stack channels-screen channels-screen--channel';
   const appScreen = document.getElementById('app-screen');
   appScreen?.classList.add('channels-scroll-clean');
-  const scrollToBottomControl = attachScrollToBottomButton({ scrollContainer: appScreen });
 
   const statusBox = document.createElement('div');
   statusBox.className = 'card status-line is-unavailable channels-status';
@@ -2058,19 +2054,20 @@ export function render({ navigate, route, chrome }) {
     statusBox.style.display = '';
   };
 
+  const channelHeaderButton = document.createElement('button');
+  channelHeaderButton.type = 'button';
+  channelHeaderButton.className = 'icon-btn channel-header-route-btn app-topbar-title-action';
+  channelHeaderButton.textContent = 'Канал: ...';
+  channelHeaderButton.disabled = true;
+
   const header = renderHeader({
-    title: '',
+    centerNode: channelHeaderButton,
     leftAction: { label: '<', onClick: () => navigate('channels-list') },
     rightActions: [
-      { label: 'Канал: ...', className: 'channel-header-route-btn', onClick: () => {} },
       { label: 'Оглавление', className: 'channel-header-entrypoint-btn', onClick: () => {} },
     ],
   });
-  const channelHeaderButton = header.querySelector('.header-actions .channel-header-route-btn');
   const channelEntrypointButton = header.querySelector('.header-actions .channel-header-entrypoint-btn');
-  if (channelHeaderButton) {
-    channelHeaderButton.disabled = true;
-  }
   if (channelEntrypointButton) {
     channelEntrypointButton.disabled = true;
     channelEntrypointButton.hidden = true;
@@ -2488,7 +2485,6 @@ export function render({ navigate, route, chrome }) {
   })();
 
   screen.cleanup = () => {
-    scrollToBottomControl.cleanup();
     appScreen?.classList.remove('channels-scroll-clean');
     if (typeof cleanupSeenTracking === 'function') cleanupSeenTracking();
   };
diff --git a/shine-UI/js/pages/channels-list.js b/shine-UI/js/pages/channels-list.js
index 10013350..b2d3723f 100644
--- a/shine-UI/js/pages/channels-list.js
+++ b/shine-UI/js/pages/channels-list.js
@@ -1,4 +1,4 @@
-import { channels as mockChannels } from '../mock-data.js';
+import { channels as mockChannels } from '../mock-data.js';
 import { authService, setChannelsFeed, state } from '../state.js';
 import { toUserMessage } from '../services/ui-error-texts.js';
 import { parseMessageAttachments } from '../services/attachment-format.js';
@@ -12,8 +12,8 @@ import {
   writeChannelNotificationsState,
 } from '../services/channels-ux.js';
 import { makeShineChannelRoute } from '../services/shine-routes.js';
-import { navigateBack } from '../router.js';
-import { buildArweaveDataUrl } from '../services/arweave-file-service.js';
+import { renderAvatar } from '../components/avatar-image.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
 
 export const pageMeta = { id: 'channels-list', title: 'Каналы' };
@@ -90,6 +90,16 @@ function avatarLetterFromName(name = '') {
   return first.toUpperCase();
 }
 
+function createChannelAvatar(channel = {}) {
+  return renderAvatar({
+    initials: channel.avatar || channel.initials || avatarLetterFromName(channel.displayTitle || channel.title || channel.name),
+    avatar: channel.avaAr ? { ar: String(channel.avaAr || '').trim() } : null,
+    size: 'small',
+    title: channel.displayTitle || channel.title || channel.name || 'Канал',
+    alt: 'Аватар канала',
+  });
+}
+
 function allFeedSummaries() {
   const feed = state.channelsFeed || {};
   return [
@@ -885,7 +895,6 @@ function renderDemoFallback(container, navigate, error, onRetry, { localOnly = f
     const row = document.createElement('article');
     row.className = 'channel-row';
     row.innerHTML = `
-      <div class="avatar">${channel.avatar || channel.initials || '#'}</div>
       <div class="channel-row-main">
         <strong class="channel-row-title">${channel.title || channel.displayName || channel.name}</strong>
         <p class="channel-row-message">${channel.messagePreview || 'Ждем ваших начинаний'}</p>
@@ -894,6 +903,7 @@ function renderDemoFallback(container, navigate, error, onRetry, { localOnly = f
         <span class="channel-row-time">—</span>
       </div>
     `;
+    row.prepend(createChannelAvatar(channel));
     row.addEventListener('click', () => {
       const route = channel.route || makeShineChannelRoute({
       ownerLogin: String(channel.ownerName || 'channel'),
@@ -939,7 +949,6 @@ function openTopChannelsMenu({
   listState,
   anchorEl,
   navigate,
-  onSubscribeChannel,
   onFindChannel,
 }) {
   closeTopChannelsMenu(listState);
@@ -951,7 +960,7 @@ function openTopChannelsMenu({
   let left = rect.right - menuWidth;
   left = Math.max(12, Math.min(left, window.innerWidth - menuWidth - 12));
 
-  const estimatedHeight = 320;
+  const estimatedHeight = 250;
   let top = rect.bottom + 8;
   if (top + estimatedHeight > window.innerHeight - 10) {
     top = Math.max(12, rect.top - estimatedHeight - 8);
@@ -968,14 +977,12 @@ function openTopChannelsMenu({
   menu.style.width = `${Math.round(menuWidth)}px`;
 
   const items = [
+    { label: 'Поиск', action: () => onFindChannel?.() },
+    { label: 'Новый канал', action: () => navigate('add-channel-view') },
+    { divider: true },
     { label: 'Все каналы', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_ALL)) },
     { label: 'Мои каналы', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_OWNED)) },
     { label: 'Подписки', action: () => navigate(buildChannelsViewRoute(CHANNELS_VIEW_FOLLOWING)) },
-    { divider: true },
-    { label: 'Новый канал', action: () => navigate('add-channel-view') },
-    { divider: true },
-    { label: 'Добавить канал', action: () => onSubscribeChannel?.() },
-    { label: 'Просмотреть канал', action: () => onFindChannel?.() },
   ];
 
   items.forEach((item) => {
@@ -1206,16 +1213,7 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
     const countersVisible = listState.revealedCounters.has(channel.id);
     row.classList.toggle('is-counters-visible', countersVisible);
 
-    const avatar = document.createElement('div');
-    avatar.className = 'avatar';
-    if (channel.avaAr) {
-      const img = document.createElement('img');
-      img.alt = '';
-      img.src = buildArweaveDataUrl({ gateway: state.entrySettings.arweaveServer, txId: channel.avaAr });
-      avatar.append(img);
-    } else {
-      avatar.textContent = channel.avatar;
-    }
+    const avatar = createChannelAvatar(channel);
 
     const main = renderChannelMain(channel);
 
@@ -1237,7 +1235,7 @@ function renderListContent({ screen, container, listState, navigate, refreshFeed
       const menuButton = document.createElement('button');
       menuButton.type = 'button';
       menuButton.className = 'channel-menu-trigger';
-      menuButton.textContent = '…';
+      menuButton.append(createOverflowDots());
       menuButton.addEventListener('click', (event) => {
         event.stopPropagation();
         animatePress(menuButton);
@@ -1373,43 +1371,18 @@ export function render({ navigate, route, chrome }) {
   const topBarLeft = document.createElement('div');
   topBarLeft.className = 'channels-top-left';
 
-  const backBtn = document.createElement('button');
-  backBtn.type = 'button';
-  backBtn.className = 'icon-btn channels-top-back-btn';
-  backBtn.textContent = '←';
-  backBtn.setAttribute('aria-label', 'Назад');
-  backBtn.addEventListener('click', () => navigateBack());
-
   const topTitle = document.createElement('strong');
   topTitle.className = 'channels-top-title';
 
   const topBarRight = document.createElement('div');
   topBarRight.className = 'channels-top-right';
 
-  const findChannelBtn = document.createElement('button');
-  findChannelBtn.type = 'button';
-  findChannelBtn.className = 'icon-btn channels-top-search-btn';
-  findChannelBtn.setAttribute('aria-label', 'Найти канал');
-  findChannelBtn.title = 'Найти канал';
-  const findChannelIcon = document.createElement('span');
-  findChannelIcon.className = 'channels-search-icon';
-  findChannelIcon.setAttribute('aria-hidden', 'true');
-  findChannelBtn.append(findChannelIcon);
-  findChannelBtn.addEventListener('click', () => openChannelFinderModal({ navigate }));
-
-  const createInMyBtn = document.createElement('button');
-  createInMyBtn.type = 'button';
-  createInMyBtn.className = 'icon-btn channels-top-add-btn';
-  createInMyBtn.textContent = '+';
-  createInMyBtn.setAttribute('aria-label', 'Создать канал');
-  createInMyBtn.addEventListener('click', () => navigate('add-channel-view'));
-
   const topMenuBtn = document.createElement('button');
   topMenuBtn.type = 'button';
   topMenuBtn.className = 'icon-btn channels-top-more-btn';
   topMenuBtn.setAttribute('aria-label', 'Ещё действия');
   topMenuBtn.title = 'Ещё действия';
-  topMenuBtn.textContent = '⋮';
+  topMenuBtn.append(createOverflowDots());
   topMenuBtn.addEventListener('click', (event) => {
     event.stopPropagation();
     animatePress(topMenuBtn);
@@ -1418,18 +1391,11 @@ export function render({ navigate, route, chrome }) {
       anchorEl: topMenuBtn,
       navigate,
       onFindChannel: () => openChannelFinderModal({ navigate }),
-      onSubscribeChannel: () => openSimpleSubscribeModal({
-        kind: 'channel',
-        kindLabel: 'Добавить канал',
-        submitLabel: 'Добавить',
-        onSuccess: async () => loadFeedAndRender({ screen, listState, contentEl, navigate }),
-      }),
     });
   });
 
-  topBarLeft.append(backBtn, topTitle);
-  topBarRight.append(findChannelBtn, createInMyBtn, topMenuBtn);
-  topBarEl.append(topBarLeft, topBarRight);
+  topBarRight.append(topMenuBtn);
+  topBarEl.append(topBarLeft, topTitle, topBarRight);
 
   const bottomCta = document.createElement('button');
   bottomCta.type = 'button';
@@ -1450,10 +1416,8 @@ export function render({ navigate, route, chrome }) {
     });
 
     topTitle.textContent = channelsViewTitle(listState.viewMode);
-    findChannelBtn.style.display = '';
-    createInMyBtn.style.display = '';
     topMenuBtn.style.display = '';
-    if (topTitle.parentElement !== topBarLeft) topBarLeft.append(topTitle);
+    if (topTitle.parentElement !== topBarEl) topBarEl.insertBefore(topTitle, topBarRight);
 
     updateBottomCta({ button: bottomCta });
   };
diff --git a/shine-UI/js/pages/chat-view.js b/shine-UI/js/pages/chat-view.js
index d3f75775..bbaa1182 100644
--- a/shine-UI/js/pages/chat-view.js
+++ b/shine-UI/js/pages/chat-view.js
@@ -1,5 +1,6 @@
 import { renderHeader } from '../components/header.js';
-import { attachScrollToBottomButton } from '../components/scroll-to-bottom-button.js';
+import { renderUserAvatar } from '../components/avatar-image.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { directMessages } from '../mock-data.js';
 import {
   addAppLogEntry,
@@ -28,10 +29,55 @@ import {
 import { isTextToSpeechConfigured, speakTextBySettings } from '../services/speech-tools-service.js';
 import { showToast } from '../services/channels-ux.js';
 import { buildDmReplyTechBlock, parseDmTechBlocks, sanitizeUserDmTextForSend } from '../services/dm-tech-blocks.js';
+import { loadProfileSnapshot } from '../services/user-profile-params.js';
 
 export const pageMeta = { id: 'chat-view', title: 'Чат' };
 const CONVERSATION_CLEAR_NOTICE_TEXT = 'История переписки очищена с этого места';
 
+function createChatHeaderParts(login) {
+  const cleanLogin = String(login || '').trim() || 'unknown';
+
+  const avatarSlot = document.createElement('span');
+  avatarSlot.className = 'chat-header-avatar-slot chat-header-avatar-slot--left';
+  const initialAvatar = renderUserAvatar({
+    login: cleanLogin,
+    size: 'small',
+    className: 'chat-header-avatar',
+    title: cleanLogin,
+  });
+  avatarSlot.append(initialAvatar);
+
+  const loginEl = document.createElement('span');
+  loginEl.className = 'chat-header-login';
+  loginEl.setAttribute('role', 'heading');
+  loginEl.setAttribute('aria-level', '1');
+  loginEl.setAttribute('aria-label', `Чат с ${cleanLogin}`);
+  loginEl.textContent = cleanLogin;
+
+  void loadProfileSnapshot(cleanLogin)
+    .then((snapshot) => {
+      if (!avatarSlot.isConnected) return;
+      const upgradedAvatar = renderUserAvatar({
+        login: cleanLogin,
+        firstName: String(snapshot?.firstName || '').trim(),
+        lastName: String(snapshot?.lastName || '').trim(),
+        avatar: snapshot?.avatar?.txId
+          ? {
+            ar: String(snapshot.avatar.txId || '').trim(),
+            sha256Hex: String(snapshot?.avatar?.sha256Hex || '').trim().toLowerCase(),
+          }
+          : null,
+        size: 'small',
+        className: 'chat-header-avatar',
+        title: cleanLogin,
+      });
+      avatarSlot.replaceChildren(upgradedAvatar);
+    })
+    .catch(() => {});
+
+  return { centerNode: loginEl, avatarSlot };
+}
+
 function truncatePreviewText(value, maxLen = 72) {
   const normalized = String(value || '').replace(/\s+/g, ' ').trim();
   if (!normalized) return '';
@@ -907,10 +953,6 @@ export function render({ navigate, route, chrome }) {
 
   const wrap = document.createElement('div');
   wrap.className = 'chat-wrap dm-chat-wrap';
-  const scrollToBottomControl = attachScrollToBottomButton({
-    scrollContainer: () => boundScrollContainer || wrap,
-  });
-
   const historyLoader = document.createElement('div');
   historyLoader.className = 'dm-history-loader';
   historyLoader.hidden = true;
@@ -924,9 +966,9 @@ export function render({ navigate, route, chrome }) {
   const log = document.createElement('div');
   log.className = 'messages-log dm-messages-log';
 
-  chrome?.setTopbar(
-    renderHeader({
-      title: `Чат с ${contact.name}`,
+  const chatHeaderParts = createChatHeaderParts(chatId);
+  const chatHeader = renderHeader({
+      centerNode: chatHeaderParts.centerNode,
       leftAction: { label: '←', onClick: () => navigate('messages-list') },
       rightActions: [
         {
@@ -937,7 +979,7 @@ export function render({ navigate, route, chrome }) {
           onClick: () => handleStartCall('audio'),
         },
         {
-          label: '⋮',
+          iconNode: createOverflowDots(),
           title: 'Действия чата',
           ariaLabel: 'Открыть меню действий чата',
           className: 'chat-header-icon-btn chat-header-menu-btn',
@@ -994,8 +1036,9 @@ export function render({ navigate, route, chrome }) {
           },
         },
       ],
-    }),
-  );
+    });
+  chatHeader.querySelector('.header-left')?.append(chatHeaderParts.avatarSlot);
+  chrome?.setTopbar(chatHeader);
 
   if (!isKnownContact) {
     const card = document.createElement('div');
@@ -1563,7 +1606,6 @@ export function render({ navigate, route, chrome }) {
     void loadHistoryPage({ preserveScroll: true });
   });
   screen.cleanup = () => {
-    scrollToBottomControl.cleanup();
     hideUnreadSeparator({ rerender: false });
     stopAllTwemojiAnimations();
     window.removeEventListener('shine-chat-messages-updated', handleIncomingChatRefresh);
diff --git a/shine-UI/js/pages/messages-list.js b/shine-UI/js/pages/messages-list.js
index aaadb086..b0ef4059 100644
--- a/shine-UI/js/pages/messages-list.js
+++ b/shine-UI/js/pages/messages-list.js
@@ -9,6 +9,7 @@ import {
 } from '../state.js';
 import { loadCurrentRelations } from '../services/user-connections.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 import { loadProfileSnapshot } from '../services/user-profile-params.js';
 import { parseDmTechBlocks } from '../services/dm-tech-blocks.js';
 
@@ -37,13 +38,14 @@ async function loadDmAvatarSnapshot(login) {
   return pending;
 }
 
-function createDmAvatar(login) {
+function createDmAvatar(login, { className = '' } = {}) {
   const cleanLogin = String(login || '').trim();
   const title = cleanLogin ? `Профиль ${cleanLogin}` : '';
   const avatarEl = renderUserAvatar({
     login: cleanLogin || 'unknown',
     size: 'small',
     title,
+    className,
   });
   if (!cleanLogin) return avatarEl;
   void loadDmAvatarSnapshot(cleanLogin).then((snapshot) => {
@@ -58,6 +60,7 @@ function createDmAvatar(login) {
         : null,
       size: 'small',
       title,
+      className,
     });
     upgraded.classList.add('avatar');
     avatarEl.replaceWith(upgraded);
@@ -91,26 +94,16 @@ function compareChatRows(a, b) {
   return nameA.localeCompare(nameB, 'ru');
 }
 
-const SVG_CHEVRON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>';
-
 export function render({ navigate, chrome }) {
   const screen = document.createElement('section');
   screen.className = 'stack dm-screen dm-list-screen';
-  const login = String(state.session.login || '').trim();
-
   const head = document.createElement('header');
   head.className = 'dm-head';
   head.innerHTML = `
-    <div class="dm-head-brand">
-      <div class="dm-head-hex">${(login[0] || 'A').toUpperCase()}</div>
-      <div class="dm-head-id">
-        <span class="dm-head-name"></span>
-      </div>
-    </div>
+    <div class="dm-head-brand" aria-hidden="true"></div>
     <h1 class="dm-head-title">Контакты</h1>
     <div class="dm-head-menu-wrap">
       <button type="button" class="dm-head-menu-btn" aria-label="Меню контактов" aria-haspopup="menu" aria-expanded="false">
-        <span class="dm-head-menu-dots" aria-hidden="true"><i></i><i></i><i></i></span>
       </button>
       <div class="dm-head-menu" role="menu" hidden>
         <button type="button" class="dm-head-menu-item" role="menuitem" data-action="search-contacts">
@@ -123,11 +116,10 @@ export function render({ navigate, chrome }) {
       </div>
     </div>
   `;
-  const headName = head.querySelector('.dm-head-name');
-  if (headName) headName.textContent = login;
+  const menuButton = head.querySelector('.dm-head-menu-btn');
+  menuButton?.append(createOverflowDots());
 
   const menuWrap = head.querySelector('.dm-head-menu-wrap');
-  const menuButton = head.querySelector('.dm-head-menu-btn');
   const menuTemplate = head.querySelector('.dm-head-menu');
   // The header itself is mounted into chrome/topbar, whose hit-test area ends at the
   // header bounds. A dropdown overflowing below it can look visible but clicks may
@@ -206,9 +198,6 @@ export function render({ navigate, chrome }) {
   window.addEventListener('resize', onMenuViewportChange, { passive: true });
   window.addEventListener('scroll', onMenuViewportChange, { passive: true, capture: true });
 
-  const divider = document.createElement('div');
-  divider.className = 'dm-divider';
-
   const list = document.createElement('div');
   list.className = 'stack dm-list';
 
@@ -232,7 +221,6 @@ export function render({ navigate, chrome }) {
         ${item.unread ? `<span class="dm-unread-badge">${item.unread > 99 ? '99+' : item.unread}</span>` : '<span class="dm-row-meta-spacer" aria-hidden="true"></span>'}
         <div class="dm-row-meta-line">
           ${item.time ? '<span class="dm-row-time"></span>' : '<span class="dm-row-time dm-row-time--empty"></span>'}
-          <span class="dm-chevron">${SVG_CHEVRON}</span>
         </div>
       </div>
     `;
@@ -352,7 +340,7 @@ export function render({ navigate, chrome }) {
   }
 
   chrome?.setTopbar(head);
-  screen.append(divider, list);
+  screen.append(list);
   loadList();
 
   screen.cleanup = () => {
diff --git a/shine-UI/js/pages/network-view.js b/shine-UI/js/pages/network-view.js
index 733e21a1..bc90f4db 100644
--- a/shine-UI/js/pages/network-view.js
+++ b/shine-UI/js/pages/network-view.js
@@ -215,7 +215,7 @@ function buildGraphModel(graph, centerLogin) {
 let persistedCenterLogin = '';
 let persistedCenterHistory = [];
 
-export function render({ navigate, route }) {
+export function render({ navigate, route, chrome } = {}) {
   const keepHistory = String(route?.params?.mode || '').trim().toLowerCase() === 'keep-history';
   const routeLogin = normalizeLogin(route?.params?.login || '');
   if (!keepHistory) {
@@ -282,10 +282,7 @@ export function render({ navigate, route }) {
     else window.history.replaceState({}, '', nextPath);
   }
 
-  function setBackButtonState(backBtn) {
-    if (!(backBtn instanceof HTMLButtonElement)) return;
-    backBtn.disabled = centerHistory.length === 0;
-  }
+
 
   function openSearchModal() {
     const root = document.getElementById('modal-root');
@@ -490,7 +487,6 @@ export function render({ navigate, route }) {
       if (engine && activeFilter !== 'all') engine.setFilter(FILTERS[activeFilter].pred);
 
       persistHistory();
-      setBackButtonState(backBtnEl);
     } catch (error) {
       if (requestId !== loadSeq) return;
       window.alert(`Ошибка загрузки связей: ${error?.message || 'unknown'}`);
@@ -499,24 +495,13 @@ export function render({ navigate, route }) {
 
   const header = renderHeader({
     title: 'Связи',
-    leftAction: {
-      label: '←',
-      onClick: () => {
-        if (!centerHistory.length) return;
-        const prev = centerHistory.pop();
-        if (!prev) {
-          setBackButtonState(backBtnEl);
-          return;
-        }
-        void load(prev, { pushHistory: false });
-      },
-    },
     rightActions: [
       { label: 'Найти', onClick: openSearchModal },
     ],
   });
-  const backBtnEl = header.querySelector('.header-left .icon-btn');
-  setBackButtonState(backBtnEl);
+  // «Связи» используют тот же общий topbar, что и остальные страницы.
+  // Отдельный класс нужен только для page-specific fade графа, не для геометрии header.
+  header.classList.add('network-topbar');
 
   // Ресайз и перерисовку рёбер движок обрабатывает сам (window resize + ResizeObserver внутри).
   screen.cleanup = () => {
@@ -542,11 +527,10 @@ export function render({ navigate, route }) {
       window.setTimeout(() => openSearchModal(), 0);
     }
   }
-  setBackButtonState(backBtnEl);
 
   // Панель фильтров слоёв (оверлей под шапкой)
   const filterBar = document.createElement('div');
-  filterBar.className = 'fg-filter-bar';
+  filterBar.className = 'fg-filter-bar app-top-tabs';
   // Не даём нажатию на чип «провалиться» в сцену: иначе движок делает setPointerCapture на stage,
   // а захват указателя перенаправляет нативный click со сцены — и кнопка фильтра не срабатывает.
   filterBar.addEventListener('pointerdown', (e) => e.stopPropagation());
@@ -560,8 +544,8 @@ export function render({ navigate, route }) {
     filterBar.append(chip);
   });
 
-  header.classList.add('network-header-overlay');
-  stage.append(board, header, filterBar);
+  chrome?.setTopbar(header);
+  stage.append(board, filterBar);
   screen.append(stage);
   return screen;
 }
diff --git a/shine-UI/js/pages/notifications-view.js b/shine-UI/js/pages/notifications-view.js
index d9418ef9..e6fb6f62 100644
--- a/shine-UI/js/pages/notifications-view.js
+++ b/shine-UI/js/pages/notifications-view.js
@@ -134,7 +134,7 @@ async function enrichItem(item, activeTab) {
 
 function renderEmpty(activeTab) {
   const card = document.createElement('article');
-  card.className = 'card stack';
+  card.className = 'card stack notification-empty-state';
   const title = document.createElement('strong');
   title.textContent = activeTab === 'events' ? 'Пока нет событий' : 'Пока нет ответов';
   const text = document.createElement('p');
@@ -304,10 +304,22 @@ export function render({ navigate, chrome } = {}) {
   chrome?.setTopbar(renderHeader({ title: 'Уведомления' }));
 
   const tabs = document.createElement('div');
-  tabs.className = 'tabs';
+  tabs.className = 'notification-feed-tabs app-top-tabs';
   tabs.innerHTML = `
-    <button class="tab-btn ${state.notificationsTab === 'replies' ? 'active' : ''}" data-tab="replies">Ответы</button>
-    <button class="tab-btn ${state.notificationsTab === 'events' ? 'active' : ''}" data-tab="events">События</button>
+    <button
+      type="button"
+      class="fg-filter-chip notification-tab-btn ${state.notificationsTab === 'replies' ? 'is-active' : ''}"
+      data-tab="replies"
+      data-selected="${state.notificationsTab === 'replies' ? 'true' : 'false'}"
+      aria-selected="${state.notificationsTab === 'replies' ? 'true' : 'false'}"
+    >Ответы</button>
+    <button
+      type="button"
+      class="fg-filter-chip notification-tab-btn ${state.notificationsTab === 'events' ? 'is-active' : ''}"
+      data-tab="events"
+      data-selected="${state.notificationsTab === 'events' ? 'true' : 'false'}"
+      aria-selected="${state.notificationsTab === 'events' ? 'true' : 'false'}"
+    >События</button>
   `;
 
   const list = document.createElement('div');
@@ -347,13 +359,31 @@ export function render({ navigate, chrome } = {}) {
     }
   }
 
-  tabs.querySelectorAll('.tab-btn').forEach((btn) => {
+  function setActiveNotificationTab(nextTab) {
+    const normalizedTab = nextTab === 'events' ? 'events' : 'replies';
+    state.notificationsTab = normalizedTab;
+
+    tabs.querySelectorAll('.notification-tab-btn').forEach((node) => {
+      const selected = node.dataset.tab === normalizedTab;
+      node.classList.toggle('is-active', selected);
+      node.dataset.selected = selected ? 'true' : 'false';
+      node.setAttribute('aria-selected', selected ? 'true' : 'false');
+    });
+  }
+
+  // Активная кнопка остаётся визуально нажатой до выбора второй вкладки.
+  // При переключении класс active и aria-selected синхронно переходят на новую кнопку.
+  setActiveNotificationTab(state.notificationsTab);
+
+  tabs.querySelectorAll('.notification-tab-btn').forEach((btn) => {
     btn.addEventListener('click', () => {
-      const nextTab = String(btn.dataset.tab || 'replies');
-      if (state.notificationsTab === nextTab) return;
-      state.notificationsTab = nextTab;
-      tabs.querySelectorAll('.tab-btn').forEach((node) => node.classList.remove('active'));
-      btn.classList.add('active');
+      const nextTab = btn.dataset.tab === 'events' ? 'events' : 'replies';
+      if (state.notificationsTab === nextTab) {
+        setActiveNotificationTab(nextTab);
+        return;
+      }
+
+      setActiveNotificationTab(nextTab);
       void load();
     });
   });
diff --git a/shine-UI/js/pages/profile-view.js b/shine-UI/js/pages/profile-view.js
index e1a0ccfa..231c84bc 100644
--- a/shine-UI/js/pages/profile-view.js
+++ b/shine-UI/js/pages/profile-view.js
@@ -7,6 +7,7 @@ import {
 } from '../services/user-profile-params.js';
 import { buildIdentityLines } from '../services/user-connections.js';
 import { renderUserAvatar } from '../components/avatar-image.js';
+import { createOverflowDots } from '../components/overflow-dots.js';
 
 export const pageMeta = { id: 'profile-view', title: 'Профиль' };
 
@@ -101,15 +102,17 @@ export function render({ navigate, chrome }) {
   const topbar = document.createElement('header');
   topbar.className = 'page-header app-topbar-shell app-topbar-shell--profile';
   topbar.innerHTML = `
+    <div class="header-left" aria-hidden="true"></div>
+    <div class="header-center"><h1 class="page-title">Профиль</h1></div>
     <div class="header-actions profile-head-menu-wrap dm-head-menu-wrap">
       <button type="button" class="dm-head-menu-btn profile-head-menu-btn" aria-label="Меню профиля" aria-haspopup="menu" aria-expanded="false">
-        <span class="dm-head-menu-dots" aria-hidden="true"><i></i><i></i><i></i></span>
       </button>
     </div>
   `;
 
   const profileMenuWrap = topbar.querySelector('.profile-head-menu-wrap');
   const profileMenuButton = topbar.querySelector('.profile-head-menu-btn');
+  profileMenuButton?.append(createOverflowDots());
   let profileMenuPortal = null;
 
   const closeProfileMenu = () => {
diff --git a/shine-UI/styles/buttons-white.css b/shine-UI/styles/buttons-white.css
new file mode 100644
index 00000000..85f3b4f8
--- /dev/null
+++ b/shine-UI/styles/buttons-white.css
@@ -0,0 +1,223 @@
+/*
+ * Единый визуальный язык кнопок основного приложения:
+ * белое содержимое, без рамок и самостоятельной подложки.
+ *
+ * Исключения:
+ * - фильтры групп на экране «Связи» (.fg-filter-chip) сохраняют прежний вид;
+ * - нижний toolbar (.toolbar-btn) полностью сохраняет исходное оформление.
+ */
+:root button:not(.fg-filter-chip):not(.toolbar-btn),
+:root a.primary-btn,
+:root a.secondary-btn,
+:root a.destructive-btn,
+:root a.ghost-btn,
+:root a.icon-btn,
+:root a.text-btn {
+  color: #ffffff !important;
+  background: transparent !important;
+  background-image: none !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  transition:
+    transform 90ms ease,
+    box-shadow 90ms ease,
+    background-color 90ms ease,
+    filter 120ms ease;
+}
+
+:root button:not(.fg-filter-chip):not(.toolbar-btn):hover,
+:root a.primary-btn:hover,
+:root a.secondary-btn:hover,
+:root a.destructive-btn:hover,
+:root a.ghost-btn:hover,
+:root a.icon-btn:hover,
+:root a.text-btn:hover {
+  color: #ffffff !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  filter: brightness(1.12);
+}
+
+/* Короткий press-feedback: кнопка визуально уходит внутрь поверхности.
+ * Эффект существует только пока кнопка физически нажата.
+ */
+:root button:not(.fg-filter-chip):not(.toolbar-btn):active,
+:root a.primary-btn:active,
+:root a.secondary-btn:active,
+:root a.destructive-btn:active,
+:root a.ghost-btn:active,
+:root a.icon-btn:active,
+:root a.text-btn:active {
+  color: #ffffff !important;
+  background: rgba(0, 0, 0, 0.12) !important;
+  border: 0 !important;
+  box-shadow:
+    inset 0 3px 8px rgba(0, 0, 0, 0.58),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
+  transform: translateY(1px) scale(0.97);
+  filter: brightness(0.9);
+}
+
+
+:root button:not(.fg-filter-chip):not(.toolbar-btn):disabled,
+:root button:not(.fg-filter-chip):not(.toolbar-btn)[aria-disabled='true'],
+:root a.primary-btn[aria-disabled='true'],
+:root a.secondary-btn[aria-disabled='true'],
+:root a.destructive-btn[aria-disabled='true'],
+:root a.ghost-btn[aria-disabled='true'],
+:root a.icon-btn[aria-disabled='true'],
+:root a.text-btn[aria-disabled='true'] {
+  color: rgba(255, 255, 255, 0.42) !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  transform: none !important;
+  filter: none !important;
+}
+
+/* Убираем декоративные стеклянные/неоновые подложки самих кнопок.
+ * Переключатель канала исключён: его ::after является функциональным бегунком.
+ * Toolbar исключён целиком: у него остаётся исходная графика приложения.
+ */
+:root button:not(.fg-filter-chip):not(.toolbar-btn):not(.channel-toggle-btn)::before,
+:root button:not(.fg-filter-chip):not(.toolbar-btn):not(.channel-toggle-btn)::after {
+  background: transparent !important;
+  background-image: none !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Toolbar возвращён к исходному оформлению. Добавляем только краткое вдавливание
+ * на физическое нажатие; active-вкладка после отпускания остаётся такой, как была.
+ */
+:root .toolbar-btn {
+  transition:
+    transform 90ms ease,
+    box-shadow 90ms ease,
+    background-color 90ms ease,
+    color 120ms ease;
+}
+
+:root .toolbar-btn:active {
+  transform: translateY(1px) scale(0.96);
+  background: rgba(0, 0, 0, 0.14) !important;
+  box-shadow:
+    inset 0 4px 10px rgba(0, 0, 0, 0.62),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
+}
+
+/* Клавиатурный фокус остаётся различимым без постоянной рамки кнопки. */
+:root button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible,
+:root a.primary-btn:focus-visible,
+:root a.secondary-btn:focus-visible,
+:root a.destructive-btn:focus-visible,
+:root a.ghost-btn:focus-visible,
+:root a.icon-btn:focus-visible,
+:root a.text-btn:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, 0.62);
+  outline-offset: 2px;
+}
+
+/* Уведомления: «Ответы / События».
+ * ВАЖНО: общий button:hover выше имеет большую специфичность, поэтому для выбранной
+ * вкладки фиксируем отдельный data-selected и перечисляем hover/focus/active.
+ * Так выбранная кнопка остаётся визуально вдавленной и после отпускания мыши.
+ */
+:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true'],
+:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:hover,
+:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:focus,
+:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:focus-visible,
+:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='true']:active {
+  color: #ffffff !important;
+  background: rgba(0, 0, 0, 0.18) !important;
+  border: 0 !important;
+  box-shadow:
+    inset 0 4px 11px rgba(0, 0, 0, 0.72),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.10) !important;
+  transform: translateY(1px) scale(0.965) !important;
+  filter: brightness(0.88) !important;
+}
+
+:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false'],
+:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false']:hover {
+  color: #ffffff !important;
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  transform: none !important;
+  filter: none !important;
+}
+
+/* Неактивная вкладка кратко вдавливается во время физического нажатия.
+ * После click data-selected меняется и постоянный стиль остаётся уже на ней.
+ */
+:root body .notifications-screen .tabs button.notification-tab-btn[data-selected='false']:active {
+  background: rgba(0, 0, 0, 0.12) !important;
+  box-shadow:
+    inset 0 3px 8px rgba(0, 0, 0, 0.58),
+    inset 0 -1px 2px rgba(255, 255, 255, 0.08) !important;
+  transform: translateY(1px) scale(0.97) !important;
+  filter: brightness(0.9) !important;
+}
+
+/* Верхний toolbar — отдельная цветовая роль: золотой текст и иконки.
+ * Это правило намеренно расположено после глобального белого button-rule. */
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn),
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):hover,
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus,
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible,
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):active,
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn),
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):hover,
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus,
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible,
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):active {
+  color: var(--app-topbar-gold) !important;
+}
+
+/* Верхний toolbar: вместо золотого акцента — белые глифы с голубым ореолом.
+ * Правило стоит последним, чтобы перекрыть общий белый button-reset и старую золотую роль. */
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn),
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):hover,
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus,
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):active,
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn),
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):hover,
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus,
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):active {
+  color: #F7FBFF !important;
+  text-shadow:
+    0 0 5px rgba(92, 190, 255, 0.72),
+    0 0 12px rgba(72, 145, 255, 0.34) !important;
+  filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.56)) !important;
+}
+
+:root .topbar-slot button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible,
+:root .network-header-overlay button:not(.fg-filter-chip):not(.toolbar-btn):focus-visible {
+  color: #FFFFFF !important;
+  outline: none !important;
+  filter:
+    drop-shadow(0 0 5px rgba(110, 205, 255, 0.82))
+    drop-shadow(0 0 10px rgba(72, 145, 255, 0.42)) !important;
+}
+
+/* Личный чат: нижние иконки используют ту же бело-голубую роль, что и верхний toolbar. */
+:root .dm-chat-input button.dm-emoji-btn,
+:root .dm-chat-input button.dm-send-btn,
+:root .dm-chat-input button.dm-edit-banner__close,
+:root .dm-chat-input button.dm-emoji-btn:hover,
+:root .dm-chat-input button.dm-send-btn:hover,
+:root .dm-chat-input button.dm-edit-banner__close:hover,
+:root .dm-chat-input button.dm-emoji-btn:focus,
+:root .dm-chat-input button.dm-send-btn:focus,
+:root .dm-chat-input button.dm-edit-banner__close:focus {
+  color: #F7FBFF !important;
+  text-shadow:
+    0 0 5px rgba(92, 190, 255, 0.72),
+    0 0 12px rgba(72, 145, 255, 0.34) !important;
+  filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.46)) !important;
+}
diff --git a/shine-UI/styles/components.css b/shine-UI/styles/components.css
index 286cc78d..439f9c42 100644
--- a/shine-UI/styles/components.css
+++ b/shine-UI/styles/components.css
@@ -6408,9 +6408,9 @@ html, body { overflow-x: hidden; }
 .dm-screen .bubble.out {
   justify-self: end;
   border-radius: 18px 18px 4px 18px;
-  border: 1px solid rgba(212, 175, 55, 0.38);
-  background: rgba(212, 175, 55, 0.16);
-  color: rgba(255, 236, 191, 0.96);
+  border: 1px solid rgba(83, 216, 251, 0.4);
+  background: rgba(83, 216, 251, 0.16);
+  color: rgba(225, 248, 255, 0.97);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
 }
@@ -8141,3 +8141,1413 @@ html, body { overflow-x: hidden; }
 .notifications-screen .notification-card--clickable:active {
   transform: scale(0.99);
 }
+
+
+/* ===== Общая кнопка прокрутки ленты вниз ===== */
+.scroll-to-bottom-btn {
+  position: absolute;
+  right: 18px;
+  bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px) + 18px + env(safe-area-inset-bottom));
+  width: 48px;
+  height: 48px;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  border-radius: 999px;
+  border: 1px solid rgba(212, 175, 55, 0.45);
+  background: linear-gradient(160deg, rgba(16, 24, 38, 0.94), rgba(12, 18, 30, 0.9));
+  color: rgba(255, 227, 150, 0.96);
+  box-shadow: 0 12px 26px rgba(3, 8, 18, 0.45), 0 0 20px rgba(212, 175, 55, 0.16);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 38;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(8px);
+  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.scroll-to-bottom-btn.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.scroll-to-bottom-btn:hover {
+  box-shadow: 0 14px 30px rgba(3, 8, 18, 0.55), 0 0 24px rgba(212, 175, 55, 0.22);
+}
+
+.scroll-to-bottom-btn:focus-visible {
+  outline: 2px solid rgba(255, 227, 150, 0.92);
+  outline-offset: 3px;
+}
+
+.scroll-to-bottom-btn__icon {
+  font-size: 22px;
+  line-height: 1;
+  transform: translateY(-1px);
+}
+
+body.chat-topbar-overlay .app-shell.keyboard-open .scroll-to-bottom-btn {
+  bottom: calc(var(--keyboard-offset, 0px) + var(--composer-height, 0px) + 18px);
+}
+
+/* ===== Унифицированный верхний toolbar приложения =====
+ * Единая геометрия для основных экранов и вложенных страниц:
+ * слева действие/назад, по центру заголовок, справа действия.
+ */
+:root {
+  --app-topbar-base-height: 64px;
+  --app-topbar-title-size: 18px;
+  --app-topbar-bg: #05070A;
+}
+
+.page-header.app-topbar-shell {
+  display: grid;
+  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.page-header.app-topbar-shell .header-center {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.page-header.app-topbar-shell .header-left,
+.page-header.app-topbar-shell .header-actions {
+  min-width: 0;
+  width: 100%;
+}
+
+.page-header.app-topbar-shell .header-left {
+  justify-content: flex-start;
+}
+
+.page-header.app-topbar-shell .header-actions {
+  justify-content: flex-end;
+}
+
+.page-header .page-title,
+.topbar-slot .dm-head-title,
+.topbar-slot .channels-top-title,
+.app-topbar-title-action {
+  margin: 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-main);
+  font-size: var(--app-topbar-title-size);
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: rgba(255, 255, 255, 0.95);
+  text-shadow: none;
+  text-align: center;
+}
+
+.topbar-slot {
+  padding: 0 12px;
+  background: var(--app-topbar-bg);
+}
+
+.topbar-slot .page-header,
+.topbar-slot .dm-head,
+.topbar-slot .channels-top-bar {
+  width: 100%;
+  min-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top));
+  margin: 0;
+  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.topbar-slot .channels-top-bar {
+  display: grid;
+  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.topbar-slot .channels-top-left,
+.topbar-slot .channels-top-right {
+  width: 100%;
+  min-width: 0;
+}
+
+.topbar-slot .channels-top-left {
+  justify-content: flex-start;
+}
+
+.topbar-slot .channels-top-right {
+  justify-content: flex-end;
+}
+
+.topbar-slot .channels-top-title {
+  justify-self: center;
+}
+
+.app-topbar-shell--profile {
+  justify-content: stretch;
+}
+
+.app-topbar-shell--profile .header-left,
+.app-topbar-shell--profile .header-actions,
+.app-topbar-shell .header-left,
+.app-topbar-shell .header-actions {
+  min-width: 0;
+}
+
+/* Одинаковая стрелка назад на всех экранах. Визуально чуть крупнее текста,
+ * чтобы сам глиф по воспринимаемому размеру совпадал с 18px заголовком. */
+.header-back-btn,
+.channels-top-back-btn.header-back-btn {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-main);
+  font-size: 24px;
+  line-height: 1;
+  font-weight: 500;
+}
+
+/* В канале и треде название остаётся кликабельным, но визуально является
+ * тем же центральным заголовком, а не отдельной кнопкой справа. */
+.topbar-slot .app-topbar-title-action {
+  width: auto;
+  min-height: 40px;
+  padding: 0 4px;
+  justify-content: center;
+}
+
+.topbar-slot .channels-screen--thread .app-topbar-title-action,
+.topbar-slot .channels-screen--channel .app-topbar-title-action {
+  max-width: 100%;
+}
+
+.topbar-slot .page-header.channel-thread-topbar {
+  display: grid;
+  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.topbar-slot .page-header.channel-thread-topbar .header-left,
+.topbar-slot .page-header.channel-thread-topbar .header-actions {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex: initial;
+  gap: 8px;
+}
+
+.topbar-slot .page-header.channel-thread-topbar .header-left {
+  justify-content: flex-start;
+}
+
+.topbar-slot .page-header.channel-thread-topbar .header-actions {
+  justify-content: flex-end;
+}
+
+.topbar-slot .page-header.channel-thread-topbar .header-center {
+  min-width: 0;
+}
+
+/* Чат: в центре только компактная идентичность собеседника. */
+.chat-header-identity {
+  min-width: 0;
+  max-width: 132px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+}
+
+.chat-header-avatar-slot {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chat-header-avatar.avatar,
+.chat-header-avatar.avatar-image {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  font-size: 11px;
+  border: 0;
+  box-shadow: none;
+}
+
+.chat-header-login {
+  min-width: 0;
+  max-width: 96px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-main);
+  font-size: 13px;
+  line-height: 1.15;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.78);
+}
+
+/* «Связи» рисует шапку внутри сцены, поэтому повторяем тот же контракт там. */
+.network-header-overlay,
+.network-header-overlay.page-header {
+  top: 0;
+  left: 0;
+  right: 0;
+  min-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top));
+  margin: 0;
+  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
+  display: grid;
+  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr);
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  border-radius: 0;
+  background: var(--app-topbar-bg);
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.network-header-overlay .header-center {
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.network-header-overlay .page-title {
+  font-family: var(--font-main);
+  font-size: var(--app-topbar-title-size);
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: rgba(255, 255, 255, 0.95);
+  text-shadow: none;
+}
+
+.network-header-overlay .header-left,
+.network-header-overlay .header-actions {
+  width: 100%;
+  min-width: 0;
+}
+
+.network-header-overlay .icon-btn {
+  min-height: 40px;
+  padding: 0 8px;
+  font-size: 14px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.network-header-overlay .header-back-btn {
+  width: 40px;
+  height: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  padding: 0;
+  font-size: 24px;
+}
+
+/* ===== Верхний toolbar: финальная унификация геометрии и типографики ===== */
+:root {
+  --app-topbar-gold: #F0C56B;
+}
+
+/* Фиксированная высота, а не только min-height: при смене основных вкладок
+ * верхняя граница контента больше не меняется из-за локальной шапки страницы. */
+.topbar-slot .page-header,
+.topbar-slot .dm-head,
+.topbar-slot .channels-top-bar {
+  height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top));
+  min-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top));
+  max-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top));
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: 0;
+}
+
+/* Один и тот же текстовый ритм на Контактах / Каналах / Связях /
+ * Уведомлениях / Профиле и вложенных экранах. */
+.page-header .page-title,
+.topbar-slot .dm-head-title,
+.topbar-slot .channels-top-title,
+.app-topbar-title-action,
+.network-header-overlay .page-title {
+  font-family: var(--font-main);
+  font-size: 18px;
+  font-weight: 700;
+  font-style: normal;
+  line-height: 22px;
+  letter-spacing: 0;
+  color: var(--app-topbar-gold);
+  text-shadow: none;
+}
+
+/* В списке контактов логин слева также остаётся в общей палитре шапки. */
+.topbar-slot .dm-head-name {
+  font-family: var(--font-main);
+  color: var(--app-topbar-gold);
+}
+
+/* Все интерактивные элементы верхней шапки имеют одинаковую рабочую высоту. */
+.topbar-slot .icon-btn,
+.topbar-slot .dm-head-menu-btn,
+.topbar-slot .channels-top-more-btn {
+  min-height: 40px;
+  height: 40px;
+  color: var(--app-topbar-gold);
+}
+
+.topbar-slot .dm-head-menu-btn {
+  width: 40px;
+  min-width: 40px;
+  border-radius: 0;
+}
+
+.topbar-slot .channels-top-more-btn {
+  width: 40px;
+  min-width: 40px;
+  font-size: 24px;
+  line-height: 1;
+}
+
+/* Личный чат: аватар остаётся компактным, логин теперь равен общему 18px. */
+.chat-header-identity {
+  max-width: 176px;
+  gap: 8px;
+}
+
+.chat-header-login {
+  max-width: 136px;
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 700;
+  color: var(--app-topbar-gold);
+}
+
+/* Связи живут вне topbar-slot, поэтому фиксируем ту же фактическую высоту. */
+.network-header-overlay,
+.network-header-overlay.page-header {
+  height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top));
+  min-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top));
+  max-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top));
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: 0;
+}
+
+.network-header-overlay .icon-btn,
+.network-header-overlay .header-back-btn {
+  color: var(--app-topbar-gold);
+}
+
+/* ===== Верхний toolbar: белый интерфейс с мягким синим свечением ===== */
+:root {
+  --app-topbar-gold: #F7FBFF;
+  --app-topbar-blue-glow: rgba(92, 190, 255, 0.72);
+  --app-topbar-blue-glow-soft: rgba(72, 145, 255, 0.34);
+}
+
+.page-header .page-title,
+.topbar-slot .dm-head-title,
+.topbar-slot .channels-top-title,
+.app-topbar-title-action,
+.network-header-overlay .page-title,
+.topbar-slot .dm-head-name,
+.chat-header-login {
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 14px var(--app-topbar-blue-glow-soft);
+}
+
+.topbar-slot .icon-btn,
+.topbar-slot .dm-head-menu-btn,
+.topbar-slot .channels-top-more-btn,
+.network-header-overlay .icon-btn,
+.network-header-overlay .header-back-btn {
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 12px var(--app-topbar-blue-glow-soft);
+}
+
+.topbar-slot .icon-btn svg,
+.network-header-overlay .icon-btn svg {
+  filter:
+    drop-shadow(0 0 3px var(--app-topbar-blue-glow))
+    drop-shadow(0 0 7px var(--app-topbar-blue-glow-soft));
+}
+
+.topbar-slot .dm-head-menu-dots i {
+  background: var(--app-topbar-gold);
+  box-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 10px var(--app-topbar-blue-glow-soft);
+}
+
+/* Уведомления: переключатели лент повторяют стеклянные чипы экрана «Связи». */
+.notifications-screen .notification-feed-tabs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 12px 4px;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+.notifications-screen .notification-feed-tabs .notification-tab-btn {
+  min-width: 92px;
+  text-align: center;
+}
+
+/* Личный чат: логин остаётся строго в центральной колонке,
+ * аватар живёт отдельно в левой колонке рядом со стрелкой назад. */
+.page-header.app-topbar-shell .header-center {
+  overflow: hidden;
+}
+
+.chat-header-login {
+  display: block;
+  max-width: min(42vw, 180px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.chat-header-avatar-slot--left {
+  flex: 0 0 28px;
+  margin-left: 0;
+}
+
+
+/* ===== Shared primary topbar + upper tabs geometry (2026-08-22) =====
+ * «Связи» теперь монтируют header в общий topbar-slot, как остальные основные экраны.
+ * Верхние переключатели используют один ритм и не меняют вертикальную позицию между страницами.
+ */
+:root {
+  --app-primary-tabs-top-gap: 14px;
+  --app-primary-tabs-gap: 8px;
+  --app-primary-tab-min-height: 28px;
+}
+
+/* Граф занимает ровно доступную область между общей шапкой и нижним toolbar. */
+.screen-content.network-scroll-lock .network-screen {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+}
+
+.screen-content.network-scroll-lock .network-stage {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+/* Общий контейнер верхних кнопок-вкладок. */
+.app-top-tabs {
+  min-height: var(--app-primary-tab-min-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--app-primary-tabs-gap);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* На обычных экранах отступ создаёт стандартный padding screen-content (14px). */
+.notifications-screen .notification-feed-tabs.app-top-tabs {
+  min-height: var(--app-primary-tab-min-height);
+  padding: 0;
+  margin: 0;
+}
+
+/* В «Связях» screen-content намеренно без padding, поэтому тот же отступ задаём явно. */
+.network-stage > .fg-filter-bar.app-top-tabs {
+  position: absolute;
+  top: var(--app-primary-tabs-top-gap);
+  left: 14px;
+  right: 14px;
+  z-index: 11;
+  min-height: var(--app-primary-tab-min-height);
+  padding: 0;
+}
+
+/* Одинаковая фактическая высота и типографика самих верхних чипов. */
+.app-top-tabs .fg-filter-chip {
+  min-height: var(--app-primary-tab-min-height);
+  height: var(--app-primary-tab-min-height);
+  padding: 0 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-main);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.notifications-screen .notification-feed-tabs .notification-tab-btn {
+  min-width: 92px;
+}
+
+/* ===== Единый шаблон аватаров (2026-08-22) =====
+ * Базовая аватарка повторяет принцип орбов экрана «Связи»:
+ * - fallback: нейтральный серый круг + белые инициалы;
+ * - фото занимает тот же внутренний круг;
+ * - стеклянный внешний круг остаётся поверх всегда, независимо от наличия фото;
+ * - усиленное свечение включается модификатором .avatar-glow, не меняя геометрию аватара.
+ */
+.avatar.avatar-image.avatar-framed {
+  position: relative;
+  overflow: visible;
+  isolation: isolate;
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: #ffffff;
+  box-shadow: none;
+}
+
+.avatar.avatar-image.avatar-framed > .avatar-fallback,
+.avatar.avatar-image.avatar-framed > .avatar-photo {
+  grid-area: 1 / 1;
+  place-self: center;
+  width: 92.5%;
+  height: 92.5%;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.avatar.avatar-image.avatar-framed > .avatar-fallback {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  background: #454b55;
+  color: #ffffff;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 -8px 16px rgba(0, 0, 0, 0.16);
+}
+
+.avatar.avatar-image.avatar-framed > .avatar-photo {
+  display: block;
+  object-fit: cover;
+  object-position: center;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.avatar.avatar-image.avatar-framed.has-image > .avatar-photo {
+  opacity: 1;
+}
+
+.avatar.avatar-image.avatar-framed.has-image > .avatar-fallback {
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* Второй круг — тот же стеклянный overlay, который используется в «Связях». */
+.avatar.avatar-image.avatar-framed::after {
+  content: '';
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 119%;
+  height: 119%;
+  transform: translate(-50%, -50%);
+  border: 0;
+  border-radius: 0;
+  background: url('../assets/glass_overlay_faithful.png') center / contain no-repeat;
+  box-shadow: none;
+  opacity: 1;
+  pointer-events: none;
+  z-index: 3;
+}
+
+/* Опциональный усиленный ореол для состояний «сияющий» и будущих экранов. */
+.avatar.avatar-image.avatar-framed.avatar-glow::before {
+  content: '';
+  position: absolute;
+  inset: -16%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(139, 232, 255, 0.36) 0%, rgba(116, 217, 255, 0.14) 48%, rgba(116, 217, 255, 0) 74%);
+  filter: blur(3px);
+  pointer-events: none;
+  z-index: -1;
+}
+
+
+/* ===== UI cleanup: main tabs, shared overflow menu and DM list (2026-08-22) ===== */
+/* Единое вертикальное троеточие для всех overflow/menu-кнопок. */
+.app-overflow-dots {
+  width: 8px;
+  height: 24px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3.5px;
+  color: inherit;
+  pointer-events: none;
+}
+
+.app-overflow-dots i {
+  display: block;
+  width: 4px;
+  height: 4px;
+  flex: 0 0 4px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow:
+    0 0 5px rgba(92, 190, 255, 0.72),
+    0 0 10px rgba(72, 145, 255, 0.34);
+}
+
+.channel-menu-trigger .app-overflow-dots,
+.arweave-uploads-menu-btn .app-overflow-dots {
+  margin: auto;
+}
+
+/* Пустые каналы: больше никакой золотой вставки/рамки. Сообщение оформлено
+ * как спокойный матовый chip из панели фильтров «Связей». */
+.channels-screen--list .channels-empty-state.channels-empty-state--silent {
+  width: 100%;
+  min-height: 0;
+  margin: 12px 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0;
+  background: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  place-items: center;
+}
+
+.channels-screen--list .channels-empty-state.channels-empty-state--silent .meta-muted {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  max-width: calc(100% - 24px);
+  min-height: 30px;
+  margin: 0;
+  padding: 7px 14px;
+  border: 0.5px solid rgba(255, 255, 255, 0.1);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
+  color: #cfe0ff;
+  font-size: 12px;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 1.2;
+  text-align: center;
+}
+
+/* «Личные»: вместо жёлтого шестиугольника — текущий аватар пользователя. */
+.dm-head-avatar-slot {
+  width: 38px;
+  height: 38px;
+  min-width: 38px;
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dm-head-avatar.avatar,
+.dm-head-avatar.avatar-image {
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  font-size: 12px;
+}
+
+/* Список личных чатов: без цветной границы карточки, компактная ава как в шапке
+ * самого чата (28px), а дата/время стоит на строке превью. */
+.dm-list-screen .dm-dialog-card {
+  grid-template-columns: 38px minmax(0, 1fr) auto;
+  gap: 10px;
+  min-height: 58px;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 18px;
+  box-shadow: none;
+  background: rgba(7, 10, 18, 0.42);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.dm-list-screen .dm-card--family,
+.dm-list-screen .dm-card--shining {
+  border: 0;
+}
+
+.dm-list-screen .dm-av {
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  min-height: 34px;
+}
+
+.dm-list-screen .dm-av .avatar,
+.dm-list-screen .list-item .avatar {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+  font-size: 10px;
+  border: 0;
+  box-shadow: none;
+}
+
+.dm-list-screen .dm-row-main,
+.dm-list-screen .dm-row-meta-col {
+  display: grid;
+  grid-template-rows: 22px 20px;
+  align-items: center;
+  gap: 0;
+  min-height: 42px;
+}
+
+.dm-list-screen .dm-row-titlewrap {
+  flex-wrap: nowrap;
+  min-height: 22px;
+  overflow: hidden;
+}
+
+.dm-list-screen .dm-row-last-message {
+  align-self: center;
+  line-height: 20px;
+}
+
+.dm-list-screen .dm-row-meta-col {
+  align-self: center;
+  justify-items: end;
+  justify-content: initial;
+}
+
+.dm-list-screen .dm-unread-badge,
+.dm-list-screen .dm-row-meta-spacer {
+  grid-row: 1;
+  align-self: center;
+}
+
+.dm-list-screen .dm-row-time {
+  grid-row: 2;
+  align-self: center;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.dm-list-screen .dm-row-meta-line {
+  display: contents;
+}
+
+.dm-list-screen .dm-chevron {
+  display: none !important;
+}
+
+@media (max-width: 380px) {
+  .dm-list-screen .dm-dialog-card {
+    grid-template-columns: 38px minmax(0, 1fr) auto;
+  }
+
+  .dm-list-screen .dm-row-meta-col {
+    grid-column: 3;
+    justify-self: end;
+  }
+}
+
+/* ===== Личные сообщения: финальная чистка чата ===== */
+/* В списке «Личные» слева в шапке остаётся только аватар текущего пользователя. */
+.topbar-slot .dm-list-screen .dm-head-brand {
+  gap: 0;
+}
+
+/* Пузырям сообщений не нужна отдельная обводка: направление читается по фону и геометрии. */
+.dm-chat-screen .bubble,
+.dm-chat-screen .bubble.in,
+.dm-chat-screen .bubble.out,
+.dm-chat-screen .bubble.call-tech {
+  border: 0;
+}
+
+.dm-chat-screen .bubble-reply-preview {
+  border: 0;
+}
+
+/* Нижняя панель чата повторяет бело-голубую цветовую роль верхнего toolbar вместо золота. */
+.dm-chat-input {
+  border-top: 1px solid rgba(92, 190, 255, 0.12);
+}
+
+.dm-chat-input .dm-input {
+  border-color: rgba(247, 251, 255, 0.12);
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 4px rgba(92, 190, 255, 0.34),
+    0 0 10px rgba(72, 145, 255, 0.16);
+  caret-color: var(--app-topbar-gold);
+}
+
+.dm-chat-input .dm-input:focus {
+  border-color: rgba(92, 190, 255, 0.28);
+  box-shadow: 0 0 0 1px rgba(92, 190, 255, 0.08);
+}
+
+.dm-chat-input .dm-input::placeholder {
+  color: rgba(247, 251, 255, 0.46);
+  text-shadow: none;
+}
+
+.dm-chat-input .dm-emoji-btn,
+.dm-chat-input .dm-send-btn,
+.dm-chat-input .dm-edit-banner__close {
+  color: var(--app-topbar-gold) !important;
+  text-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 12px var(--app-topbar-blue-glow-soft) !important;
+  filter: drop-shadow(0 0 4px rgba(92, 190, 255, 0.42));
+}
+
+.dm-chat-input .dm-send-btn {
+  border-color: rgba(247, 251, 255, 0.12);
+  background: rgba(92, 190, 255, 0.08);
+  box-shadow: none;
+}
+
+.dm-chat-input .dm-edit-banner {
+  border-color: rgba(92, 190, 255, 0.18);
+  background: rgba(92, 190, 255, 0.08);
+  color: var(--app-topbar-gold);
+}
+
+.dm-chat-input .emoji-picker-tab.is-active {
+  background: rgba(92, 190, 255, 0.12);
+}
+
+
+/* ===== DM + Channels polish (2026-08-22 13:22) ===== */
+/* «Личные»: аватар основной вкладки стоит ровно на той же горизонтальной позиции,
+ * что и аватар собеседника в открытом чате: после 40px back-slot + 8px gap. */
+.topbar-slot .dm-head .dm-head-brand {
+  margin-left: 48px;
+}
+
+.dm-head-avatar-slot,
+.dm-head-avatar.avatar,
+.dm-head-avatar.avatar-image {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  min-height: 28px;
+}
+
+.dm-head-avatar.avatar,
+.dm-head-avatar.avatar-image {
+  font-size: 11px;
+}
+
+/* Composer должен быть продолжением основного фона: без верхнего разделителя
+ * и без отдельной затемнённой/стеклянной подложки. */
+.dm-chat-input {
+  border-top: 0 !important;
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+/* Каналы: счётчик непрочитанных — целиком голубой светящийся овал,
+ * цифра остаётся обычной белой, без собственного glow. */
+.channel-row-count {
+  background: rgba(92, 190, 255, 0.16);
+  border: 1px solid rgba(92, 190, 255, 0.56);
+  color: #FFFFFF;
+  box-shadow:
+    0 0 7px rgba(92, 190, 255, 0.58),
+    0 0 15px rgba(72, 145, 255, 0.28),
+    inset 0 0 8px rgba(92, 190, 255, 0.10);
+  text-shadow: none;
+}
+
+/* Каналы: логин/техническая подпись и overflow-троеточие используют
+ * тот же основной белый + голубое свечение, что верхний toolbar. */
+.channel-row-technical {
+  font-family: var(--font-main);
+  font-weight: 600;
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 12px var(--app-topbar-blue-glow-soft);
+}
+
+.channel-menu-trigger {
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 12px var(--app-topbar-blue-glow-soft);
+}
+
+
+/* ===== DM avatar + channel row visual alignment fix (2026-08-22 13:29) ===== */
+/* Шапка «Личных» переносится в topbar-slot отдельно от .dm-list-screen,
+ * поэтому позиционируем аватар по реальной DOM-структуре. 48px = back 40px + gap 8px
+ * в открытом чате, что даёт одинаковую абсолютную X-позицию. */
+.topbar-slot .dm-head .dm-head-brand {
+  margin-left: 48px;
+}
+
+/* Троеточие внутри строки канала использует тот же чистый overflow-стиль:
+ * без рамки/подложки, белые точки с мягким голубым свечением. */
+.channels-screen--list .channel-menu-trigger {
+  width: 34px;
+  height: 34px;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--app-topbar-gold);
+  text-shadow: none;
+}
+
+.channels-screen--list .channel-menu-trigger .app-overflow-dots i {
+  background: var(--app-topbar-gold);
+  box-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 10px var(--app-topbar-blue-glow-soft);
+}
+
+/* Название канала и техническая строка (login / channel) — одна типографическая
+ * система с основным интерфейсом: белый текст + голубое свечение. */
+.channels-screen--list .channel-row-title,
+.channels-screen--list .channel-row-technical {
+  font-family: var(--font-main);
+  color: var(--app-topbar-gold);
+  text-shadow:
+    0 0 5px var(--app-topbar-blue-glow),
+    0 0 12px var(--app-topbar-blue-glow-soft);
+}
+
+.channels-screen--list .channel-row-title {
+  font-weight: 700;
+}
+
+/* ===== Channels: final overflow + unread polish (2026-08-22 13:34) ===== */
+/* Внутреннее троеточие карточки канала должно выглядеть ровно как остальные
+ * overflow-кнопки интерфейса. Более высокая специфичность намеренно перекрывает
+ * старые локальные стили .channel-menu-trigger. */
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger {
+  width: 40px !important;
+  height: 40px !important;
+  min-width: 40px !important;
+  min-height: 40px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  outline: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: #F7FBFF !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font: inherit !important;
+  line-height: 1 !important;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+}
+
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:hover,
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:focus,
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:focus-visible,
+.channels-screen--list .channel-row .channel-row-controls > button.channel-menu-trigger:active {
+  border: 0 !important;
+  outline: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+.channels-screen--list .channel-row .channel-menu-trigger > .app-overflow-dots {
+  width: 8px !important;
+  height: 24px !important;
+  margin: 0 !important;
+  color: #F7FBFF !important;
+  filter:
+    drop-shadow(0 0 3px rgba(92, 190, 255, 0.72))
+    drop-shadow(0 0 7px rgba(72, 145, 255, 0.34));
+}
+
+.channels-screen--list .channel-row .channel-menu-trigger > .app-overflow-dots > i {
+  width: 4px !important;
+  height: 4px !important;
+  flex-basis: 4px !important;
+  border: 0 !important;
+  background: #F7FBFF !important;
+  box-shadow: none !important;
+}
+
+/* Счётчик непрочитанных: без видимой границы. Сам овал — светящийся синий объём,
+ * цифра остаётся обычной белой. */
+.channels-screen--list .channel-row-count,
+.channels-screen--list .unread.channel-row-count {
+  border: 0 !important;
+  outline: 0 !important;
+  background: rgba(74, 169, 255, 0.36) !important;
+  color: #FFFFFF !important;
+  box-shadow:
+    0 0 8px rgba(92, 190, 255, 0.82),
+    0 0 18px rgba(72, 145, 255, 0.54),
+    0 0 30px rgba(72, 145, 255, 0.24) !important;
+  text-shadow: none !important;
+}
+
+
+/* ===== Transparent topbar + scroll fade (2026-08-22 13:40) =====
+ * Верхняя шапка не рисует отдельную плашку. Контент прокручивается под ней и
+ * постепенно исчезает по alpha-mask: у самого верхнего края полностью прозрачен,
+ * к нижней кромке topbar — полностью видим. */
+:root {
+  --app-topbar-fade-end: var(--topbar-height, 64px);
+}
+
+.topbar-slot {
+  z-index: 20;
+  background: transparent !important;
+  isolation: isolate;
+}
+
+/* Лёгкое затемнение только для читаемости текста шапки, без видимой границы. */
+.topbar-slot::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(
+    180deg,
+    rgba(5, 7, 10, 0.32) 0%,
+    rgba(5, 7, 10, 0.16) 52%,
+    rgba(5, 7, 10, 0) 100%
+  );
+}
+
+.topbar-slot .page-header,
+.topbar-slot .dm-head,
+.topbar-slot .channels-top-bar {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+/* Обычные прокручиваемые экраны начинаются физически от верхнего края app-shell.
+ * В исходном положении padding держит первый элемент под шапкой; при прокрутке
+ * этот padding уезжает, и контент проходит под прозрачным topbar. */
+.screen-content:not(.no-app-chrome):not(.network-scroll-lock):not(:has(> .dm-chat-screen)) {
+  top: var(--call-minimized-bar-height, 0px);
+  padding-top: calc(var(--topbar-height, 64px) + 14px);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgba(0, 0, 0, 0.12) 12px,
+    rgba(0, 0, 0, 0.48) calc(var(--app-topbar-fade-end) - 24px),
+    rgba(0, 0, 0, 0.82) calc(var(--app-topbar-fade-end) - 8px),
+    #000 var(--app-topbar-fade-end),
+    #000 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgba(0, 0, 0, 0.12) 12px,
+    rgba(0, 0, 0, 0.48) calc(var(--app-topbar-fade-end) - 24px),
+    rgba(0, 0, 0, 0.82) calc(var(--app-topbar-fade-end) - 8px),
+    #000 var(--app-topbar-fade-end),
+    #000 100%
+  );
+}
+
+/* DM-чат скроллится не через .screen-content, а через .dm-chat-wrap.
+ * Расширяем его до верхнего края и переносим безопасный отступ внутрь самого
+ * scroll-контейнера — так сообщения реально заходят под шапку и затухают. */
+body.chat-topbar-overlay .screen-content:has(> .dm-chat-screen) {
+  top: var(--call-minimized-bar-height, 0px) !important;
+  padding-top: 0 !important;
+}
+
+body.chat-topbar-overlay .dm-chat-screen > .dm-chat-wrap {
+  box-sizing: border-box;
+  padding-top: calc(var(--topbar-height, 64px) + 12px);
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgba(0, 0, 0, 0.12) 12px,
+    rgba(0, 0, 0, 0.48) calc(var(--app-topbar-fade-end) - 24px),
+    rgba(0, 0, 0, 0.82) calc(var(--app-topbar-fade-end) - 8px),
+    #000 var(--app-topbar-fade-end),
+    #000 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    rgba(0, 0, 0, 0.12) 12px,
+    rgba(0, 0, 0, 0.48) calc(var(--app-topbar-fade-end) - 24px),
+    rgba(0, 0, 0, 0.82) calc(var(--app-topbar-fade-end) - 8px),
+    #000 var(--app-topbar-fade-end),
+    #000 100%
+  );
+}
+
+/* «Контакты»: верхняя аватарка убрана полностью. Пустая левая колонка сохраняет
+ * строгий центр заголовка относительно правого overflow-меню. */
+.topbar-slot .dm-head .dm-head-brand {
+  margin-left: 0 !important;
+  min-width: 40px;
+  width: 40px;
+  height: 40px;
+}
+
+/* ===== Robust topbar fade overlay (2026-08-22 13:44) =====
+ * Mask-image on scrolling containers is not consistently composited by every
+ * Chromium/WebView path used by the app. The fade is therefore rendered as a
+ * dedicated overlay layer above scrolled content and below topbar controls.
+ * Content remains physically scrollable under the header and visually dissolves
+ * into the app background before reaching the very top edge. */
+.topbar-slot {
+  overflow: visible !important;
+  isolation: isolate;
+}
+
+.topbar-slot::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -12px;
+  right: -12px;
+  height: calc(100% + 48px);
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    rgba(5, 7, 10, 1) 0%,
+    rgba(5, 7, 10, 0.98) 16%,
+    rgba(5, 7, 10, 0.88) 32%,
+    rgba(5, 7, 10, 0.66) 52%,
+    rgba(5, 7, 10, 0.38) 70%,
+    rgba(5, 7, 10, 0.15) 84%,
+    rgba(5, 7, 10, 0) 100%
+  );
+}
+
+.topbar-slot > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* The overlay above is the source of truth for the fade. Disable the previous
+ * alpha masks so browser-specific mask compositing cannot cancel the effect. */
+.screen-content:not(.no-app-chrome):not(.network-scroll-lock):not(:has(> .dm-chat-screen)),
+body.chat-topbar-overlay .dm-chat-screen > .dm-chat-wrap {
+  -webkit-mask-image: none !important;
+  mask-image: none !important;
+}
+
+/* ===== Bottom chat fade + Connections topbar fade + Notifications borderless cards (2026-08-22 13:49) ===== */
+/* Личный чат: область сообщений продолжается под composer. Внутренний нижний
+ * padding сохраняет последнее сообщение над полем ввода в конечной позиции,
+ * но во время прокрутки сообщения могут проходить под нижним fade-слоем. */
+body.chat-topbar-overlay .app-shell:not(.keyboard-open) .screen-content:has(> .dm-chat-screen) {
+  bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom)) !important;
+}
+
+body.chat-topbar-overlay .app-shell.keyboard-open .screen-content:has(> .dm-chat-screen) {
+  bottom: var(--keyboard-offset, 0px) !important;
+}
+
+body.chat-topbar-overlay .dm-chat-screen > .dm-chat-wrap {
+  padding-bottom: calc(var(--composer-height, 0px) + 52px);
+}
+
+/* Нижнее затухание — зеркальная версия верхнего эффекта. Слой находится над
+ * сообщениями и под самим composer, поэтому текст плавно исчезает перед полем ввода. */
+body.chat-topbar-overlay .composer-slot {
+  isolation: isolate;
+  overflow: visible !important;
+}
+
+body.chat-topbar-overlay .composer-slot::before {
+  content: '';
+  position: absolute;
+  left: -12px;
+  right: -12px;
+  top: -52px;
+  bottom: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    rgba(5, 7, 10, 0) 0%,
+    rgba(5, 7, 10, 0.14) 18%,
+    rgba(5, 7, 10, 0.38) 38%,
+    rgba(5, 7, 10, 0.66) 58%,
+    rgba(5, 7, 10, 0.88) 76%,
+    rgba(5, 7, 10, 0.98) 90%,
+    rgba(5, 7, 10, 1) 100%
+  );
+}
+
+body.chat-topbar-overlay .composer-slot > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* «Связи»: граф теперь физически продолжается под общей верхней шапкой.
+ * Глобальный .topbar-slot::before даёт тот же fade, что и на лентах. */
+.screen-content.network-scroll-lock {
+  top: var(--call-minimized-bar-height, 0px) !important;
+}
+
+/* Верхние фильтры графа остаются ниже шапки и не попадают в зону затухания. */
+.network-stage > .fg-filter-bar.app-top-tabs {
+  top: calc(var(--topbar-height, 64px) + var(--app-primary-tabs-top-gap, 14px)) !important;
+}
+
+/* Уведомления: информационные блоки без рамок. Hover/focus не возвращает
+ * обводку — различение сохраняется фоном и лёгкой реакцией на нажатие. */
+.notifications-screen .notifications-list > .notification-card,
+.notifications-screen .notifications-list > .notification-card:hover,
+.notifications-screen .notifications-list > .notification-card:focus,
+.notifications-screen .notifications-list > .notification-card:focus-visible,
+.notifications-screen .notifications-list > .notification-card:active {
+  border: 0 !important;
+  outline: 0 !important;
+}
+
+
+/* ===== Connections: restore canonical shared topbar (2026-08-22 14:00) =====
+ * The toolbar itself is the standard renderHeader() mounted in #topbar-slot.
+ * Network-specific positioning must never move .screen-content under it.
+ * The graph fade lives inside .network-stage instead, so canvas layout cannot
+ * change toolbar height/position or overlap its controls. */
+.topbar-slot:has(> .network-topbar)::before {
+  /* Keep the generic toolbar background/fade inside the toolbar bounds only. */
+  height: 100% !important;
+}
+
+/* Undo the previous Connections-only full-bleed-under-toolbar geometry. */
+.screen-content.network-scroll-lock {
+  top: calc(var(--call-minimized-bar-height, 0px) + var(--topbar-height, 0px)) !important;
+  left: 0;
+  right: 0;
+  bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px));
+  padding: 0 !important;
+}
+
+.screen-content.network-scroll-lock .network-screen,
+.screen-content.network-scroll-lock .network-stage {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  margin: 0;
+}
+
+/* Filters return to the same content offset they had before the toolbar-overlay experiment. */
+.network-stage > .fg-filter-bar.app-top-tabs {
+  top: var(--app-primary-tabs-top-gap, 14px) !important;
+}
+
+/* Fade belongs to the graph surface, not to the toolbar. It sits above graph
+ * nodes/edges but below filter chips (filter bar z-index is 11). */
+.network-stage::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 58px;
+  z-index: 10;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    rgba(5, 7, 10, 1) 0%,
+    rgba(5, 7, 10, 0.86) 28%,
+    rgba(5, 7, 10, 0.48) 58%,
+    rgba(5, 7, 10, 0.16) 82%,
+    rgba(5, 7, 10, 0) 100%
+  );
+}
+
+/* Explicitly keep the Connections header on the canonical topbar contract.
+ * No network-only absolute positioning, dimensions or padding. */
+.topbar-slot > .page-header.app-topbar-shell.network-topbar {
+  position: relative !important;
+  inset: auto !important;
+  width: 100% !important;
+  height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top)) !important;
+  min-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top)) !important;
+  max-height: calc(var(--app-topbar-base-height) + env(safe-area-inset-top)) !important;
+  margin: 0 !important;
+  padding: env(safe-area-inset-top) 0 0 !important;
+  display: grid !important;
+  grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr) !important;
+  align-items: center !important;
+  gap: 8px !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
diff --git a/shine-UI/styles/network-graph.css b/shine-UI/styles/network-graph.css
index 22adccc1..3a7fda8c 100644
--- a/shine-UI/styles/network-graph.css
+++ b/shine-UI/styles/network-graph.css
@@ -198,7 +198,7 @@
 }
 .fg-orb-host .fg-pngorb-init {
   display: flex; align-items: center; justify-content: center;
-  background: #26344a; color: #cfe0ff; font-weight: 600; font-size: 20px;
+  background: #454b55; color: #ffffff; font-weight: 600; font-size: 20px;
 }
 
 .fg-node.is-family .node-dot {
@@ -422,7 +422,7 @@
 /* Панель фильтров слоёв (оверлей под шапкой) */
 .fg-filter-bar {
   position: absolute;
-  top: max(54px, calc(env(safe-area-inset-top) + 50px));
+  top: max(72px, calc(env(safe-area-inset-top) + 68px));
   left: 0;
   right: 0;
   z-index: 11;