UI: общий верхний и нижний тулбар

shine-UI/styles/components.css

@@ -13,6 +13,37 @@
   padding-top: max(0px, env(safe-area-inset-top));
 }
 
+.topbar-slot .page-header,
+.topbar-slot .dm-head,
+.topbar-slot .channels-top-bar {
+  margin-bottom: 0;
+  border-radius: 18px;
+  background: rgba(14, 21, 35, 0.92);
+  border: 1px solid rgba(212, 175, 55, 0.18);
+  box-shadow: 0 10px 26px rgba(4, 8, 16, 0.28);
+  backdrop-filter: blur(14px);
+}
+
+.topbar-slot .page-header {
+  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
+}
+
+.topbar-slot .dm-head,
+.topbar-slot .channels-top-bar {
+  padding-top: calc(10px + env(safe-area-inset-top));
+  padding-bottom: 10px;
+}
+
+.app-topbar-shell .page-title {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.app-topbar-shell .header-left,
+.app-topbar-shell .header-actions {
+  min-width: 92px;
+}
+
 .page-title {
   font-size: 22px;
   font-weight: 700;
@@ -1561,7 +1592,7 @@
 }
 
 .toolbar-btn-profile .toolbar-label-wrap {
-  padding-bottom: 6px;
+  padding-bottom: 0;
 }
 
 .toolbar-btn-profile .toolbar-connection-indicator {

shine-UI/styles/layout.css

@@ -25,6 +25,9 @@ body::before {
   height: 100dvh;
   position: relative;
   --call-minimized-bar-height: 0px;
+  --topbar-height: 0px;
+  --composer-height: 0px;
+  --toolbar-height: 78px;
   background: transparent;
   border-left: 1px solid rgba(211, 170, 86, 0.2);
   border-right: 1px solid rgba(211, 170, 86, 0.2);
@@ -33,6 +36,8 @@ body::before {
 }
 
 .screen-content,
+.topbar-slot,
+.composer-slot,
 .toolbar-slot,
 .connection-retry-banner {
   z-index: 1;
@@ -40,15 +45,16 @@ body::before {
 
 .screen-content {
   position: absolute;
-  top: var(--call-minimized-bar-height, 0px);
+  top: calc(var(--call-minimized-bar-height, 0px) + var(--topbar-height, 0px));
   left: 0;
   right: 0;
-  bottom: 62px;
+  bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px));
   overflow-y: auto;
   padding: 14px 14px 24px;
 }
 
 .screen-content.no-app-chrome {
+  top: var(--call-minimized-bar-height, 0px);
   bottom: 0;
   padding-bottom: calc(24px + env(safe-area-inset-bottom));
 }
@@ -62,6 +68,36 @@ body::before {
   padding: 0;
 }
 
+.topbar-slot[hidden],
+.composer-slot[hidden] {
+  display: none;
+}
+
+.topbar-slot {
+  position: absolute;
+  top: var(--call-minimized-bar-height, 0px);
+  left: 0;
+  right: 0;
+  padding: 0 12px;
+  pointer-events: none;
+}
+
+.topbar-slot > * {
+  pointer-events: auto;
+}
+
+.composer-slot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom));
+  padding: 0 12px 8px;
+  pointer-events: none;
+}
+
+.composer-slot > * {
+  pointer-events: auto;
+}
 
 .toolbar-slot {
   position: absolute;
@@ -74,10 +110,15 @@ body::before {
 }
 
 body.chat-keyboard-open .screen-content {
-  bottom: 0;
+  bottom: var(--composer-height, 0px);
   padding-bottom: calc(14px + env(safe-area-inset-bottom));
 }
 
+body.chat-keyboard-open .composer-slot {
+  bottom: 0;
+  padding-bottom: calc(8px + env(safe-area-inset-bottom));
+}
+
 body.chat-keyboard-open .toolbar-slot {
   opacity: 0;
   pointer-events: none;