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

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;