UI: новый общий стиль, тёмная/светлая тема, настраиваемая палитра

- styles/main.css: роли цветов (по умолчанию «Индиго»), шкала отступов/скруглений/шрифтов,
  цвета отношений для обеих тем; жёсткие цвета в стилях заменены на роли.
- Палитра: пресеты и личные правки, «Оформление» Авто/День/Ночь, долгое нажатие —
  редактор цветов с экспортом/импортом.
- Каналы: пузыри постов автора, плашки дней, строка «Написать в канал…», «О канале»,
  создание канала с адресом из названия; лента открывается на свежих постах.
- Чаты: плоский список, чипы-фильтры, пузыри, плашки дней; нижняя панель скрыта в переписке.
- Корневые разделы — единая шапка; профиль и чужой профиль — общая карточка;
  настройки, кошелёк, сеансы — меню-списки.
- Нижняя панель: иконки без подписей, бейджи на иконках.
- confirmDialog вместо window.confirm/alert; на телефоне диалоги — шторки снизу.
- docs/UI-Design/ISSUES-for-dev.md — найденные ошибки сервера/UI.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

shine-UI/styles/app-shell.css

@@ -3,7 +3,7 @@
  * Feature-specific стили находятся в styles/features/* и network-graph.css.
  */
 .app-shell {
-  width: min(var(--app-viewport-width, 100vw), var(--shell-content-width, 430px));
+  width: min(var(--app-viewport-width, 100vw), var(--shell-content-width, 640px));
   height: var(--app-viewport-height, 100vh);
   position: fixed;
   top: var(--app-viewport-offset-top, 0px);
@@ -18,13 +18,17 @@
   --z-shell-fade: 10;
   --z-shell-chrome: 20;
   --z-shell-status: 30;
-  background: transparent;
+  background: var(--background);
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   box-shadow: none;
   overflow: hidden;
 }
 
+@media (min-width: 700px) {
+  .app-shell { border-color: var(--border-subtle); }
+}
+
 .screen-content {
   position: absolute;
   top: calc(var(--call-minimized-bar-height, 0px) + var(--topbar-height, 0px));
@@ -65,10 +69,12 @@
   top: var(--call-minimized-bar-height, 0px);
   left: 0;
   right: 0;
-  padding: 0 12px;
+  padding: 0;
   pointer-events: none;
 }
 
+.topbar-slot > .topbar { padding-inline: 12px; }
+
 .topbar-slot > * {
   pointer-events: auto;
 }
@@ -104,38 +110,23 @@
   right: 12px;
   bottom: calc(96px + env(safe-area-inset-bottom));
   z-index: var(--z-shell-status);
-  border-radius: 11px;
-  border: 1px solid rgba(133, 156, 201, 0.3);
-  background: rgba(10, 19, 37, 0.86);
-  color: #c6d6f7;
+  border-radius: 12px;
+  border: 1px solid var(--border-subtle);
+  background: var(--surface);
+  color: var(--text-primary);
+  box-shadow: var(--shadow);
   font-size: 12px;
   line-height: 1.2;
   text-align: center;
-  padding: 7px 10px;
+  padding: 8px 12px;
   pointer-events: auto;
   cursor: pointer;
-  backdrop-filter: blur(10px);
 }
 
-.connection-retry-banner.is-connected {
-  border-color: rgba(124, 235, 171, 0.4);
-  color: #d8ffe9;
-}
-
-.connection-retry-banner.is-connecting {
-  border-color: transparent;
-  color: #ffe8bb;
-}
-
-.connection-retry-banner.is-disconnected {
-  border-color: rgba(228, 127, 145, 0.44);
-  color: #ffdce3;
-}
-
-.connection-retry-banner.is-updating {
-  border-color: rgba(144, 201, 255, 0.44);
-  color: #d9eeff;
-}
+.connection-retry-banner.is-connected { border-color: var(--success); }
+.connection-retry-banner.is-connecting { color: var(--text-secondary); }
+.connection-retry-banner.is-disconnected { border-color: var(--danger); color: var(--danger); }
+.connection-retry-banner.is-updating { border-color: var(--accent); }
 
 /* Обычный scroll-container физически продолжается под прозрачным TopBar. */
 .app-shell--content-under-topbar:not(.app-shell--scroll-nested):not(.app-shell--scroll-locked) .screen-content:not(.no-app-chrome) {
@@ -149,10 +140,10 @@
   top: var(--call-minimized-bar-height, 0px);
   left: 0;
   right: 0;
-  width: min(100vw, 430px);
+  width: min(100vw, var(--shell-content-width, 640px));
   margin: 0 auto;
   transform: none;
-  padding: 0 12px;
+  padding: 0;
 }
 
 .app-shell--scroll-nested .screen-content {
@@ -201,13 +192,13 @@
   height: calc(var(--topbar-height, 64px) + 48px);
   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%
+    color-mix(in srgb, var(--background) 100%, transparent) 0%,
+    color-mix(in srgb, var(--background) 98%, transparent) 16%,
+    color-mix(in srgb, var(--background) 88%, transparent) 32%,
+    color-mix(in srgb, var(--background) 66%, transparent) 52%,
+    color-mix(in srgb, var(--background) 38%, transparent) 70%,
+    color-mix(in srgb, var(--background) 15%, transparent) 84%,
+    color-mix(in srgb, var(--background) 0%, transparent) 100%
   );
 }
 
@@ -217,13 +208,13 @@
   height: calc(var(--composer-height, 0px) + 52px);
   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%
+    color-mix(in srgb, var(--background) 0%, transparent) 0%,
+    color-mix(in srgb, var(--background) 14%, transparent) 18%,
+    color-mix(in srgb, var(--background) 38%, transparent) 38%,
+    color-mix(in srgb, var(--background) 66%, transparent) 58%,
+    color-mix(in srgb, var(--background) 88%, transparent) 76%,
+    color-mix(in srgb, var(--background) 98%, transparent) 90%,
+    color-mix(in srgb, var(--background) 100%, transparent) 100%
   );
 }
 
@@ -232,15 +223,15 @@
   height: var(--topbar-height, 64px);
   background: linear-gradient(
     to bottom,
-    rgba(5, 7, 10, 1) 0%,
-    rgba(5, 7, 10, 1) 32%,
-    rgba(5, 7, 10, 0.94) 38%,
-    rgba(5, 7, 10, 0.72) 46%,
-    rgba(5, 7, 10, 0.46) 54%,
-    rgba(5, 7, 10, 0.22) 61%,
-    rgba(5, 7, 10, 0.08) 65%,
-    rgba(5, 7, 10, 0) 68%,
-    rgba(5, 7, 10, 0) 100%
+    color-mix(in srgb, var(--background) 100%, transparent) 0%,
+    color-mix(in srgb, var(--background) 100%, transparent) 32%,
+    color-mix(in srgb, var(--background) 94%, transparent) 38%,
+    color-mix(in srgb, var(--background) 72%, transparent) 46%,
+    color-mix(in srgb, var(--background) 46%, transparent) 54%,
+    color-mix(in srgb, var(--background) 22%, transparent) 61%,
+    color-mix(in srgb, var(--background) 8%, transparent) 65%,
+    color-mix(in srgb, var(--background) 0%, transparent) 68%,
+    color-mix(in srgb, var(--background) 0%, transparent) 100%
   );
 }
 
@@ -250,15 +241,15 @@
   height: var(--toolbar-height, 78px);
   background: linear-gradient(
     to bottom,
-    rgba(5, 7, 10, 0) 0%,
-    rgba(5, 7, 10, 0) 32%,
-    rgba(5, 7, 10, 0.08) 35%,
-    rgba(5, 7, 10, 0.22) 39%,
-    rgba(5, 7, 10, 0.46) 46%,
-    rgba(5, 7, 10, 0.72) 54%,
-    rgba(5, 7, 10, 0.94) 62%,
-    rgba(5, 7, 10, 1) 68%,
-    rgba(5, 7, 10, 1) 100%
+    color-mix(in srgb, var(--background) 0%, transparent) 0%,
+    color-mix(in srgb, var(--background) 0%, transparent) 32%,
+    color-mix(in srgb, var(--background) 8%, transparent) 35%,
+    color-mix(in srgb, var(--background) 22%, transparent) 39%,
+    color-mix(in srgb, var(--background) 46%, transparent) 46%,
+    color-mix(in srgb, var(--background) 72%, transparent) 54%,
+    color-mix(in srgb, var(--background) 94%, transparent) 62%,
+    color-mix(in srgb, var(--background) 100%, transparent) 68%,
+    color-mix(in srgb, var(--background) 100%, transparent) 100%
   );
 }