diff --git a/data/contest.com.html b/data/contest.com.html
index 33ac22241a..22e6e85d80 100644
--- a/data/contest.com.html
+++ b/data/contest.com.html
@@ -198,9 +198,9 @@
     <script src="/js/main-aj.js?57"></script>
     <script src="/js/contest.js?25"></script>
 <script src="/js/jquery-ui.min.js?1"></script>
-<script src="/js/tgsticker.js?26"></script>
+<script src="/js/tgsticker.js?27"></script>
 
-    <script>ajInit({"version":387,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
+    <script>ajInit({"version":388,"apiUrl":"\/api?hash=telegram-crawler","unauth":true});</script>
     <script id="aj_script">Aj._useScrollHack=true;
 Aj.onLoad(function(state) {
   function requestConfirmation(event) {
diff --git a/data/telegram.org.html b/data/telegram.org.html
index 9d14a40b28..52031a8b0c 100644
--- a/data/telegram.org.html
+++ b/data/telegram.org.html
@@ -271,7 +271,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitRetinaVideos();
 mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":3,"unsupportedURL":"\/?notgs=1"});
diff --git a/data/telegram.org/api.html b/data/telegram.org/api.html
index 12d6bc2c86..67ab548ea3 100644
--- a/data/telegram.org/api.html
+++ b/data/telegram.org/api.html
@@ -271,7 +271,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitRetinaVideos();
 mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":3,"unsupportedURL":"\/?notgs=1"});
diff --git a/data/telegram.org/blog/animated-backgrounds.html b/data/telegram.org/blog/animated-backgrounds.html
index 6a7945c98f..5f0a561aa4 100644
--- a/data/telegram.org/blog/animated-backgrounds.html
+++ b/data/telegram.org/blog/animated-backgrounds.html
@@ -288,7 +288,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/autodelete-inv2.html b/data/telegram.org/blog/autodelete-inv2.html
index fb13fb2255..9a3eee1721 100644
--- a/data/telegram.org/blog/autodelete-inv2.html
+++ b/data/telegram.org/blog/autodelete-inv2.html
@@ -285,7 +285,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/chat-themes-interactive-emoji-read-receipts.html b/data/telegram.org/blog/chat-themes-interactive-emoji-read-receipts.html
index b1321cf92d..0e8ba875a8 100644
--- a/data/telegram.org/blog/chat-themes-interactive-emoji-read-receipts.html
+++ b/data/telegram.org/blog/chat-themes-interactive-emoji-read-receipts.html
@@ -283,7 +283,7 @@ This way you can quickly see how to [start a Secret Chat](/) on iOS or show one
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/downloads-attachments-streaming.html b/data/telegram.org/blog/downloads-attachments-streaming.html
index 78698bd066..21d8ebb017 100644
--- a/data/telegram.org/blog/downloads-attachments-streaming.html
+++ b/data/telegram.org/blog/downloads-attachments-streaming.html
@@ -298,7 +298,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/filters-anonymous-admins-comments.html b/data/telegram.org/blog/filters-anonymous-admins-comments.html
index e6c889453e..84099e37d4 100644
--- a/data/telegram.org/blog/filters-anonymous-admins-comments.html
+++ b/data/telegram.org/blog/filters-anonymous-admins-comments.html
@@ -247,7 +247,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/group-video-calls.html b/data/telegram.org/blog/group-video-calls.html
index 1565b1c928..e352de05be 100644
--- a/data/telegram.org/blog/group-video-calls.html
+++ b/data/telegram.org/blog/group-video-calls.html
@@ -250,7 +250,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/live-streams-forwarding-next-channel.html b/data/telegram.org/blog/live-streams-forwarding-next-channel.html
index 6e9bacda48..3e322d92c3 100644
--- a/data/telegram.org/blog/live-streams-forwarding-next-channel.html
+++ b/data/telegram.org/blog/live-streams-forwarding-next-channel.html
@@ -271,7 +271,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/move-history.html b/data/telegram.org/blog/move-history.html
index 4d59935399..ea9c260403 100644
--- a/data/telegram.org/blog/move-history.html
+++ b/data/telegram.org/blog/move-history.html
@@ -270,7 +270,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/payments-2-0-scheduled-voice-chats.html b/data/telegram.org/blog/payments-2-0-scheduled-voice-chats.html
index b8684f92cf..04a296c6ca 100644
--- a/data/telegram.org/blog/payments-2-0-scheduled-voice-chats.html
+++ b/data/telegram.org/blog/payments-2-0-scheduled-voice-chats.html
@@ -305,7 +305,7 @@ you can also download our Android app directly from [telegram.org](https://teleg
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/pinned-messages-locations-playlists.html b/data/telegram.org/blog/pinned-messages-locations-playlists.html
index e637fffaf8..3ef3c3da0b 100644
--- a/data/telegram.org/blog/pinned-messages-locations-playlists.html
+++ b/data/telegram.org/blog/pinned-messages-locations-playlists.html
@@ -268,7 +268,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/pinned-messages-locations-playlists/world.html b/data/telegram.org/blog/pinned-messages-locations-playlists/world.html
index a4fbc1e06b..97640e9a4b 100644
--- a/data/telegram.org/blog/pinned-messages-locations-playlists/world.html
+++ b/data/telegram.org/blog/pinned-messages-locations-playlists/world.html
@@ -264,7 +264,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/profile-videos-people-nearby-and-more.html b/data/telegram.org/blog/profile-videos-people-nearby-and-more.html
index 1645a7aa8e..8207363b73 100644
--- a/data/telegram.org/blog/profile-videos-people-nearby-and-more.html
+++ b/data/telegram.org/blog/profile-videos-people-nearby-and-more.html
@@ -301,7 +301,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/protected-content-delete-by-date-and-more.html b/data/telegram.org/blog/protected-content-delete-by-date-and-more.html
index 30201a2d36..90284b9946 100644
--- a/data/telegram.org/blog/protected-content-delete-by-date-and-more.html
+++ b/data/telegram.org/blog/protected-content-delete-by-date-and-more.html
@@ -310,7 +310,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/reactions-spoilers-translations.html b/data/telegram.org/blog/reactions-spoilers-translations.html
index 8addd91bb9..0b8909a393 100644
--- a/data/telegram.org/blog/reactions-spoilers-translations.html
+++ b/data/telegram.org/blog/reactions-spoilers-translations.html
@@ -286,7 +286,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/shared-media-scrolling-calendar-join-requests-and-more.html b/data/telegram.org/blog/shared-media-scrolling-calendar-join-requests-and-more.html
index 97170e9aac..5e54c0e569 100644
--- a/data/telegram.org/blog/shared-media-scrolling-calendar-join-requests-and-more.html
+++ b/data/telegram.org/blog/shared-media-scrolling-calendar-join-requests-and-more.html
@@ -329,7 +329,7 @@ TEST
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/video-1000.html b/data/telegram.org/blog/video-1000.html
index be4088ebc7..f3fa5ac0cb 100644
--- a/data/telegram.org/blog/video-1000.html
+++ b/data/telegram.org/blog/video-1000.html
@@ -340,7 +340,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/video-calls.html b/data/telegram.org/blog/video-calls.html
index 655ffec341..dc77cc2a3e 100644
--- a/data/telegram.org/blog/video-calls.html
+++ b/data/telegram.org/blog/video-calls.html
@@ -220,7 +220,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/video-stickers-better-reactions.html b/data/telegram.org/blog/video-stickers-better-reactions.html
index 0b2b7029cf..530728b66f 100644
--- a/data/telegram.org/blog/video-stickers-better-reactions.html
+++ b/data/telegram.org/blog/video-stickers-better-reactions.html
@@ -259,7 +259,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/voice-chats-on-steroids.html b/data/telegram.org/blog/voice-chats-on-steroids.html
index dd00d1548d..254ed0e742 100644
--- a/data/telegram.org/blog/voice-chats-on-steroids.html
+++ b/data/telegram.org/blog/voice-chats-on-steroids.html
@@ -261,7 +261,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/blog/voice-chats.html b/data/telegram.org/blog/voice-chats.html
index aeada4bb0f..9dd866caec 100644
--- a/data/telegram.org/blog/voice-chats.html
+++ b/data/telegram.org/blog/voice-chats.html
@@ -297,7 +297,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":4});
 initScrollVideos(true);
diff --git a/data/telegram.org/js/telegram-webview.js b/data/telegram.org/js/telegram-webview.js
index a844df0072..e715b65c9f 100644
--- a/data/telegram.org/js/telegram-webview.js
+++ b/data/telegram.org/js/telegram-webview.js
@@ -50,13 +50,9 @@
       window.Telegram.WebApp.MainButton.setParams({});
     }
   }
-
-  document.write('<style>#tg-fixed-container{position:fixed;left:0;right:0;top:0;transform:translateY(100vh)}</style>');
-
   function onViewportChanged(eventType, eventData) {
-    var el = document.getElementById('tg-fixed-container');
-    if (el && eventData.height) {
-      el.style.transform = 'translateY(' + eventData.height + 'px)';
+    if (eventData.height) {
+      setViewportHeight(eventData.height);
     }
   }
 
@@ -192,25 +188,47 @@
     eventHandlers[eventType].splice(index, 1);
   };
 
+  function setCssProperty(name, value) {
+    var root = document.documentElement;
+    if (root && root.style && root.style.setProperty) {
+      root.style.setProperty('--tg-' + name, value);
+    }
+  }
+
   var themeParams = {};
   function setThemeParams(theme_params) {
-    var root = document.documentElement, color;
-    if (root && root.style && root.style.setProperty) {
-      for (var key in theme_params) {
-        if (color = parseColorToHex(theme_params[key])) {
-          themeParams[key] = color;
-          if (key == 'bg_color') {
-            var color_scheme = isColorDark(color) ? 'dark' : 'light'
-            themeParams.color_scheme = color_scheme;
-            root.style.setProperty('--tg-theme-color-scheme', color_scheme);
-          }
-          key = '--tg-theme-' + key.split('_').join('-');
-          root.style.setProperty(key, color);
+    var color;
+    for (var key in theme_params) {
+      if (color = parseColorToHex(theme_params[key])) {
+        themeParams[key] = color;
+        if (key == 'bg_color') {
+          var color_scheme = isColorDark(color) ? 'dark' : 'light'
+          themeParams.color_scheme = color_scheme;
+          setCssProperty('theme-color-scheme', color_scheme);
         }
+        key = 'theme-' + key.split('_').join('-');
+        setCssProperty(key, color);
       }
     }
   }
 
+  var viewportHeight = false;
+  function setViewportHeight(height) {
+    if (typeof height !== 'undefined') {
+      viewportHeight = height;
+    }
+    var css_height;
+    if (viewportHeight !== false) {
+      css_height = (viewportHeight - mainButtonHeight) + 'px';
+    } else if (mainButtonHeight) {
+      css_height = 'calc(100vh - ' + mainButtonHeight + 'px)';
+    } else {
+      css_height = '100vh';
+    }
+    setCssProperty('viewport-height', css_height);
+  }
+
+
   function parseColorToHex(color) {
     color += '';
     var match;
@@ -260,6 +278,7 @@
     return false;
   }
 
+  var mainButtonHeight = 0;
   var MainButton = (function() {
     var isVisible = false;
     var isActive = true;
@@ -302,7 +321,7 @@
 
     onEvent('main_button_pressed', onMainButtonPressed);
 
-    var debugBtn = null, debugBodyBottom, debugBtnStyle = {};
+    var debugBtn = null, debugBtnStyle = {};
     if (initParams.tgWebAppDebug) {
       debugBtn = document.createElement('tg-main-button');
       debugBtnStyle = {
@@ -328,8 +347,6 @@
       document.addEventListener('DOMContentLoaded', function onDomLoaded(event) {
         document.removeEventListener('DOMContentLoaded', onDomLoaded);
         document.body.appendChild(debugBtn);
-        debugBodyBottom = window.getComputedStyle ? window.getComputedStyle(document.body).marginBottom : document.body.style.marginBottom;
-        debugBodyBottom = parseInt(debugBodyBottom) || 0;
         debugBtn.addEventListener('click', onMainButtonPressed, false);
       });
     }
@@ -361,11 +378,11 @@
         debugBtn.style.backgroundColor = color;
         debugBtn.style.color = text_color;
 
-        var fixedContainer = document.getElementById('tg-fixed-container');
-        if (fixedContainer) {
-          fixedContainer.style.top = isVisible ? '-48px' : '0';
+        mainButtonHeight = (isVisible ? 48 : 0);
+        if (document.documentElement) {
+          document.documentElement.style.marginBottom = mainButtonHeight + 'px';
         }
-        document.body.style.marginBottom = (debugBodyBottom + (isVisible ? 48 : 0)) + 'px';
+        setViewportHeight();
       }
     }
 
@@ -586,9 +603,10 @@
   if (webAppData.theme_params) {
     setThemeParams(webAppData.theme_params);
   }
+  setViewportHeight();
+
   onEvent('theme_changed', onThemeChanged);
   onEvent('viewport_changed', onViewportChanged);
-
   postEvent('web_app_request_viewport');
 
   // For Windows Phone app
diff --git a/data/telegram.org/js/tgsticker.js b/data/telegram.org/js/tgsticker.js
index 90e31ada58..2d00079332 100644
--- a/data/telegram.org/js/tgsticker.js
+++ b/data/telegram.org/js/tgsticker.js
@@ -199,6 +199,7 @@ var RLottie = (function () {
       curWorkerNum = 0;
     }
     rlPlayer.options = options;
+    rlPlayer.isVisible = true;
     rlPlayer.paused = options.noAutoPlay || false;
     rlPlayer.forcePlayFrames = 0;
     rlPlayer.times = [];
@@ -225,6 +226,7 @@ var RLottie = (function () {
       var focused = window.isFocused ? isFocused() : document.hasFocus();
       if (!focused ||
           rlPlayer.paused ||
+          !rlPlayer.isVisible ||
           !rlPlayer.frameCount) {
         return false;
       }
@@ -366,6 +368,12 @@ var RLottie = (function () {
     }
   }
 
+  rlottie.setVisible = function(el, visible) {
+    if (el && el.rlPlayer) {
+      el.rlPlayer.isVisible = visible;
+    }
+  }
+
   rlottie.destroyWorkers = function() {
     destroyWorkers();
   }
diff --git a/data/telegram.org/teststore.html b/data/telegram.org/teststore.html
index 9242e1d60d..c17d224b15 100644
--- a/data/telegram.org/teststore.html
+++ b/data/telegram.org/teststore.html
@@ -271,7 +271,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitRetinaVideos();
 mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":3,"unsupportedURL":"\/?notgs=1"});
diff --git a/data/telegram.org/what-can-you-do-with-Telegram.html b/data/telegram.org/what-can-you-do-with-Telegram.html
index 9242e1d60d..c17d224b15 100644
--- a/data/telegram.org/what-can-you-do-with-Telegram.html
+++ b/data/telegram.org/what-can-you-do-with-Telegram.html
@@ -271,7 +271,7 @@
   </div>
 </div>
     <script src="/js/main.js?44"></script>
-    <script src="/js/tgsticker.js?26"></script>
+    <script src="/js/tgsticker.js?27"></script>
 
     <script>mainInitRetinaVideos();
 mainInitTgStickers({"maxDeviceRatio":2,"cachingModulo":3,"unsupportedURL":"\/?notgs=1"});
diff --git a/data/webappcontent.telegram.org/cafe.html b/data/webappcontent.telegram.org/cafe.html
index 07942de9e4..82701c3685 100644
--- a/data/webappcontent.telegram.org/cafe.html
+++ b/data/webappcontent.telegram.org/cafe.html
@@ -9,7 +9,7 @@
     <meta name="MobileOptimized" content="176" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="robots" content="noindex, nofollow" />
-    <script src="https://tg.dev/js/telegram-webview.js?7"></script>
+    <script src="https://tg.dev/js/telegram-webview.js?8"></script>
     <script>
       function setThemeClass() {
         document.documentElement.className = document.documentElement.style.getPropertyValue('--tg-theme-color-scheme');
@@ -17,7 +17,7 @@
       Telegram.WebView.onEvent('theme_changed', setThemeClass);
       setThemeClass();
     </script>
-    <link href="/css/cafe.css?13" rel="stylesheet">
+    <link href="/css/cafe.css?14" rel="stylesheet">
   </head>
   <body style="display:none">
     <section class="cafe-page cafe-items">
@@ -436,12 +436,12 @@
     </div>
   </div>
 </section>
-<div id="tg-fixed-container">
+<div class="cafe-status-wrap">
   <div class="cafe-status js-status"></div>
 </div>
     <script src="https://tg.dev/js/jquery.min.js"></script>
-    <script src="https://tg.dev/js/tgsticker.js?26"></script>
-    <script src="/js/cafe.js?13"></script>
+    <script src="https://tg.dev/js/tgsticker.js?27"></script>
+    <script src="/js/cafe.js?14"></script>
     <script>Cafe.init({"apiUrl":"\/cafe\/api","userId":0,"userHash":null});</script>
   </body>
 </html>
diff --git a/data/webappcontent.telegram.org/css/cafe.css b/data/webappcontent.telegram.org/css/cafe.css
index ee95782875..54a5db6e39 100644
--- a/data/webappcontent.telegram.org/css/cafe.css
+++ b/data/webappcontent.telegram.org/css/cafe.css
@@ -1,20 +1,5 @@
-@font-face {
-  font-display: swap;
-  font-family: 'SF-Pro-Rounded';
-  src: local('SF Pro Rounded Medium'),
-       url('fonts/SF-Pro-Rounded-Medium.otf') format('opentype');
-  font-weight: 500;
-}
-@font-face {
-  font-display: swap;
-  font-family: 'SF-Pro-Rounded';
-  src: local('SF Pro Rounded Bold'),
-       url('fonts/SF-Pro-Rounded-Bold.otf') format('opentype');
-  font-weight: 700;
-}
-
 body {
-  font-family: 'SF-Pro-Rounded', sans-serif;
+  font-family: var(--default-font);
   font-size: 13px;
   line-height: 16px;
   font-weight: 500;
@@ -26,10 +11,12 @@ body {
   width: 1px;
   min-width: 100%;
 
+  --default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --block-bg-color: var(--tg-theme-bg-color);
   --bg-color: #ebedf0;
   --animation: .15s ease;
-  --page-animation: .3s ease;
+  --page-animation-duration: .3s;
+  --page-animation: var(--page-animation-duration) ease;
   --status-height: 48px;
   --accent-color: #31b545;
   --main-color: #f8a917;
@@ -79,11 +66,12 @@ body.closed .cafe-page {
   max-width: 480px;
   justify-content: space-around;
   align-content: flex-end;
-  transition: -webkit-filter var(--animation), max-height var(--page-animation);
+  transition: max-height var(--page-animation), opacity var(--page-animation);
   background-color: var(--block-bg-color);
 }
 body.order-mode .cafe-items {
   max-height: 0 !important;
+  opacity: 0 !important;
 }
 .cafe-items:after {
   content: '';
@@ -166,7 +154,7 @@ button {
 button,
 .cafe-item-counter {
   display: inline-block;
-  font-family: 'SF-Pro-Rounded', sans-serif;
+  font-family: var(--default-font);
   font-weight: 700;
   font-size: 14px;
   line-height: 18px;
@@ -257,6 +245,13 @@ button,
   height: 14px;
 }
 
+.cafe-status-wrap {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  transform: translateY(var(--tg-viewport-height, 100vh));
+}
 .cafe-status {
   position: fixed;
   bottom: 0;
@@ -287,8 +282,8 @@ button,
 }
 
 .cafe-order-overview {
-  display: none; /*temp*/
-  font-family: 'SF-Pro-Rounded', sans-serif;
+  display: none;
+  font-family: var(--default-font);
   background-color: var(--bg-color);
   transition: opacity var(--page-animation);
   opacity: 0;
@@ -367,7 +362,7 @@ body.order-mode .cafe-order-overview {
   margin-top: 14px;
 }
 .cafe-text-field {
-  font-family: 'SF-Pro-Rounded', sans-serif;
+  font-family: var(--default-font);
   font-size: 17px;
   line-height: 21px;
   font-weight: 500;
@@ -404,7 +399,7 @@ body.order-mode .cafe-order-overview {
   text-overflow: ellipsis;
 }
 .cafe-text-field-hint {
-  font-family: 'SF-Pro-Rounded', sans-serif;
+  font-family: var(--default-font);
   font-size: 14px;
   line-height: 18px;
   font-weight: 500;
diff --git a/data/webappcontent.telegram.org/demo.html b/data/webappcontent.telegram.org/demo.html
index acbef8966c..9a05fd06d4 100644
--- a/data/webappcontent.telegram.org/demo.html
+++ b/data/webappcontent.telegram.org/demo.html
@@ -8,7 +8,7 @@
     <meta name="MobileOptimized" content="176" />
     <meta name="HandheldFriendly" content="True" />
     <meta name="robots" content="noindex,nofollow" />
-    <script src="https://telegram.org/js/telegram-webview.js?7"></script>
+    <script src="https://telegram.org/js/telegram-webview.js?8"></script>
     <script>
       function setThemeClass() {
         document.documentElement.className = document.documentElement.style.getPropertyValue('--tg-theme-color-scheme');
diff --git a/data/webappcontent.telegram.org/js/cafe.js b/data/webappcontent.telegram.org/js/cafe.js
index f2727a8366..5d02512bb9 100644
--- a/data/webappcontent.telegram.org/js/cafe.js
+++ b/data/webappcontent.telegram.org/js/cafe.js
@@ -193,8 +193,25 @@ var Cafe = {
   },
   toggleMode: function(mode_order) {
     Cafe.modeOrder = mode_order;
+    var anim_duration, match;
+    try {
+      anim_duration = window.getComputedStyle(document.body).getPropertyValue('--page-animation-duration');
+      if (match = /([\d\.]+)(ms|s)/.exec(anim_duration)) {
+        anim_duration = +match[1];
+        if (match[2] == 's') {
+          anim_duration *= 1000;
+        }
+      } else {
+        anim_duration = 400;
+      }
+    } catch (e) {
+      anim_duration = 400;
+    }
     if (mode_order) {
       var height = $('.cafe-items').height();
+      $('.js-item-lottie').each(function() {
+        RLottie.setVisible(this, false);
+      });
       $('.cafe-order-overview').show();
       $('.cafe-items').css('maxHeight', height).redraw();
       $('body').addClass('order-mode');
@@ -202,12 +219,23 @@ var Cafe = {
         autosize.update(this);
       });
       Telegram.WebApp.expand();
+      setTimeout(function() {
+        $('.js-item-lottie').each(function() {
+          RLottie.setVisible(this, true);
+        });
+      }, anim_duration);
     } else {
+      $('.js-item-lottie').each(function() {
+        RLottie.setVisible(this, false);
+      });
       $('body').removeClass('order-mode');
       setTimeout(function() {
         $('.cafe-items').css('maxHeight', '');
         $('.cafe-order-overview').hide();
-      }, 400);
+        $('.js-item-lottie').each(function() {
+          RLottie.setVisible(this, true);
+        });
+      }, anim_duration);
     }
     Cafe.updateMainButton();
   },