@@ -929,7 +929,8 @@ export default class ChatBubbles {
   }> = {};
 
   private onAnimateLadder: () => Promise<any> | void;
-  // private ladderDeferred: CancellablePromise<void>;
+  /** the zoom a list rendered anew comes in with (`animateAsLadder`), from the moment it is armed till it is over */
+  private ladderAppearance: CancellablePromise<void>;
   private resolveLadderAnimation: () => Promise<any>;
   private emptyPlaceholderBubble: HTMLElement;
 
@@ -6020,6 +6021,15 @@ export default class ChatBubbles {
     }
   }
 
+  /**
+   * What a jump lights up waits for: the scroll to it to settle, and a list rendered anew to have come in — lit up
+   * while it zooms in, the bubble flashes unseen and the text is measured at the zoom's scale, the found words
+   * painted off their place
+   */
+  private waitForJumpToSettle(scroll: Promise<any>) {
+    return Promise.all([scroll, this.ladderAppearance]);
+  }
+
   public highlightBubble(element: HTMLElement, textHighlight?: TextHighlightMatch) {
     const datasetKey = 'highlightTimeout';
     if(element.dataset[datasetKey]) {
@@ -6434,6 +6444,8 @@ export default class ChatBubbles {
 
     this.onAnimateLadder = undefined;
     this.resolveLadderAnimation = undefined;
+    this.ladderAppearance?.resolve();
+    this.ladderAppearance = undefined;
     this.attachPlaceholderOnRender = undefined;
     this.emptyPlaceholderBubble = undefined;
     this.previousStickyDate = undefined;
@@ -6676,7 +6688,7 @@ export default class ChatBubbles {
           // * plays while the message is still travelling
           const targets = this.getJumpTargets(bubble, lastMsgFullMid, wholeAlbum);
           const focusOn = this.getMessageFocus(bubble, lastMsgFullMid, highlight, pollOption, targets);
-          this.scrollToBubble(bubble, 'center', undefined, undefined, focusOn).then(() => {
+          this.waitForJumpToSettle(this.scrollToBubble(bubble, 'center', undefined, undefined, focusOn)).then(() => {
             if(!middleware()) return;
             targets.forEach((target) => this.highlightBubble(target, highlight));
             this.highlightBubblePollAnswer(bubble, lastMsgFullMid, pollOption);
@@ -7102,7 +7114,7 @@ export default class ChatBubbles {
 
           if(willHighlight) {
             // * after the scroll settles, see the same-peer branch above
-            promise.then(() => {
+            this.waitForJumpToSettle(promise).then(() => {
               if(!middleware()) return;
               targets.forEach((target) => this.highlightBubble(target, highlight));
               this.highlightBubblePollAnswer(bubble, lastMsgFullMid, pollOption);
@@ -13361,10 +13373,12 @@ export default class ChatBubbles {
       return;
     } */
 
+    const appearance = this.ladderAppearance;
     const fullMids = this.getRenderedHistory('desc');
 
     if(!fullMids.length) {
       log.warn('no bubbles');
+      appearance?.resolve();
       return;
     }
 
@@ -13488,6 +13502,7 @@ export default class ChatBubbles {
           });
 
           this.chatInner.classList.remove('zoom-fading');
+          appearance?.resolve();
         });
 
         // ! в хроме, каким-то образом из-за zoom-fade класса начинает прыгать скролл при подгрузке сообщений вверх,
@@ -13496,6 +13511,8 @@ export default class ChatBubbles {
         //   this.needReflowScroll = true;
         // }
       });
+    } else {
+      appearance?.resolve();
     }
 
     return promise;
@@ -14666,7 +14683,9 @@ export default class ChatBubbles {
 
     if(isFirstMessageRender && liteMode.isAvailable('motion')/*  && false */) {
       let times = isAdditionRender ? 2 : 1;
-      this.messagesQueueOnRenderAdditional = () => {
+      this.ladderAppearance?.resolve();
+      const appearance = this.ladderAppearance = deferredPromise();
+      const arm = this.messagesQueueOnRenderAdditional = () => {
         this.log('messagesQueueOnRenderAdditional');
 
         if(--times) return;
@@ -14680,7 +14699,14 @@ export default class ChatBubbles {
           }, 0);
         });
       };
+
+      // * the renders of this load are through without running it: it does not come
+      waitPromise.catch(noop).then(() => {
+        if(this.messagesQueueOnRenderAdditional === arm) appearance.resolve();
+      });
     } else {
+      // * one armed that has not run by now does not come any more
+      if(this.messagesQueueOnRenderAdditional) this.ladderAppearance?.resolve();
       this.messagesQueueOnRenderAdditional = undefined;
     }
 
 
@@ -13,6 +13,9 @@ import attachMediaPeekListeners from '@components/mediaPeek';
 import ListenerSetter from '@helpers/listenerSetter';
 import rootScope from '@lib/rootScope';
 
+// * as many as a typed query is answered with
+const QUERY_LIMIT = 40;
+
 export default class EmojiHelper extends AutocompleteHelper {
   private scrollable: ScrollableX;
   private innerList: HTMLElement;
@@ -60,10 +63,6 @@ export default class EmojiHelper extends AutocompleteHelper {
     const inner = this.innerList = document.createElement('span');
     container.append(inner);
 
-    if(!rootScope.premium) {
-      emojis = emojis.filter((emoji) => this.chatInput.emoticonsDropdown.canUseEmoji(emoji, false));
-    }
-
     emojis.forEach((emoji) => {
       const wrapped = wrapAppEmoji(emoji, true);
       inner.append(wrapped);
@@ -148,17 +147,29 @@ export default class EmojiHelper extends AutocompleteHelper {
     }); */
   }
 
+  // * custom emoji a non-premium user can't use here are dropped before render(), which would otherwise show an
+  // * empty strip instead of hiding it
+  private filterUsable(emojis: AppEmoji[]) {
+    if(rootScope.premium) {
+      return emojis;
+    }
+
+    return emojis.filter((emoji) => this.chatInput.emoticonsDropdown.canUseEmoji(emoji, false));
+  }
+
   public checkQuery(query: string, firstChar: string) {
     const middleware = this.getMiddleware();
     this.emoticon = undefined;
     const q = query.replace(/^:/, '');
-    this.managers.appEmojiManager.prepareAndSearchEmojis({q, addCustom: true}).then(async(emojis) => {
+    // * every custom emoji found comes before its emoji: cut to the limit before the ones that can't be used are
+    // * dropped, they would take the places of the emoji that can
+    const premium = rootScope.premium;
+    this.managers.appEmojiManager.prepareAndSearchEmojis({q, addCustom: true, limit: premium ? QUERY_LIMIT : Infinity}).then((emojis) => {
       if(!middleware()) {
         return;
       }
 
-      this.render(emojis, firstChar !== ':', middleware);
-      // console.log(emojis);
+      this.render(this.filterUsable(emojis).slice(0, QUERY_LIMIT), firstChar !== ':', middleware);
     });
   }
 
@@ -193,14 +204,8 @@ export default class EmojiHelper extends AutocompleteHelper {
         return;
       }
 
-      let emojis: AppEmoji[] = emojiList.document_id.map((docId) => ({docId, emoji: ''}));
-      // * the result is custom emoji only — drop the ones a non-premium user can't use here,
-      // * otherwise render() would show an empty strip instead of hiding it
-      if(!rootScope.premium) {
-        emojis = emojis.filter((emoji) => this.chatInput.emoticonsDropdown.canUseEmoji(emoji, false));
-      }
-
-      this.render(emojis, true, middleware);
+      const emojis: AppEmoji[] = emojiList.document_id.map((docId) => ({docId, emoji: ''}));
+      this.render(this.filterUsable(emojis), true, middleware);
     });
   }
 }
@@ -364,9 +364,10 @@ export function findTextRect(container: HTMLElement, match: TextHighlightMatch,
 /**
  * Turns the ranges' fragment rects into per-line boxes stretched to the line height (glyph rects
  * are only font-high; the missing half-leading is added on both sides), unioned along a line
- * and expressed relative to `origin`.
+ * and expressed relative to `origin`, in its own pixels: `scale` is how much bigger the screen
+ * shows them (an ancestor scaled - a bubble zooming in as its chat opens).
  */
-export function computeLineBoxes(ranges: Range[], origin: DOMRect, lineHeight: number): TextLineBox[] {
+export function computeLineBoxes(ranges: Range[], origin: DOMRect, lineHeight: number, scale = {x: 1, y: 1}): TextLineBox[] {
   type Edges = {left: number, right: number, top: number, bottom: number};
   const fragments: Edges[] = [];
   for(const range of ranges) {
@@ -375,8 +376,14 @@ export function computeLineBoxes(ranges: Range[], origin: DOMRect, lineHeight: n
         continue;
       }
 
-      const extra = Math.max(0, lineHeight - rect.height) / 2;
-      fragments.push({left: rect.left, right: rect.right, top: rect.top - extra, bottom: rect.bottom + extra});
+      const top = (rect.top - origin.top) / scale.y, bottom = (rect.bottom - origin.top) / scale.y;
+      const extra = Math.max(0, lineHeight - (bottom - top)) / 2;
+      fragments.push({
+        left: (rect.left - origin.left) / scale.x,
+        right: (rect.right - origin.left) / scale.x,
+        top: top - extra,
+        bottom: bottom + extra
+      });
     }
   }
 
@@ -412,8 +419,8 @@ export function computeLineBoxes(ranges: Range[], origin: DOMRect, lineHeight: n
   }
 
   return boxes.map((box) => ({
-    left: box.left - origin.left,
-    top: box.top - origin.top,
+    left: box.left,
+    top: box.top,
     width: box.right - box.left,
     height: box.bottom - box.top
   }));
@@ -698,8 +705,14 @@ class TextHighlighter implements TextHighlight {
   }
 
   private computeLineBoxes(ranges: Range[]) {
+    const {overlay} = this;
     const lineHeight = parseFloat(getComputedStyle(this.container).lineHeight) || 0;
-    return computeLineBoxes(ranges, this.overlay.getBoundingClientRect(), lineHeight);
+    const origin = overlay.getBoundingClientRect();
+    // * the rects are the screen's, the boxes are painted inside the overlay: a scaled ancestor (a bubble zooming in)
+    // * is taken out — the transform changes no size, and nothing would measure them again once it is over
+    const {width, height} = getComputedStyle(overlay);
+    const scale = {x: origin.width / parseFloat(width) || 1, y: origin.height / parseFloat(height) || 1};
+    return computeLineBoxes(ranges, origin, lineHeight, scale);
   }
 
   private createLineBox(box: TextLineBox) {
 
@@ -9961,7 +9961,8 @@ export class AppMessagesManager extends AppManager {
         threadId: isForumTopic(dialog) ? options.threadId : undefined,
         isReaction: key === 'unread_reactions_count',
         isPollVote: key === 'unread_poll_votes_count',
-        add: !!add
+        // * a negative count (all of them read) takes off, it does not add
+        add: +add > 0
       });
     });
 
@@ -11193,8 +11194,12 @@ export class AppMessagesManager extends AppManager {
     const recentReactions = reactions?.recent_reactions;
     const previousReactions = message.reactions;
     const previousRecentReactions = previousReactions?.recent_reactions;
-    const isUnread = recentReactions?.some((reaction) => reaction.pFlags.unread);
     const wasUnread = !!previousRecentReactions?.some((reaction) => reaction.pFlags.unread);
+    // * the last reaction taken off comes without `recent_reactions` at all, while a `min` object leaves them out
+    // * whatever they are: it says nothing of the unread ones
+    const isUnread = !recentReactions && reactions?.pFlags.min && reactions.results.length ?
+      wasUnread :
+      !!recentReactions?.some((reaction) => reaction.pFlags.unread);
     if(recentReactions?.length && message.pFlags.out) { // * if user added a reaction to our message
       const recentReaction = recentReactions[recentReactions.length - 1];
       if(
 
@@ -657,20 +657,22 @@ export class CustomEmojiRendererElement extends HTMLElement {
       return;
     }
 
-    if(this.offscreen) { // re-arm the compositor fade so the group fades again on viewport re-entry
-      const docId = elements.values().next().value?.docId;
-      if(docId !== undefined) {
-        this.sendCompositor('resetFade', {groupId: docId});
-      }
-    }
-
     elements.forEach((element) => {
       const saved = element.savedChildren;
       if(saved?.length && !element.firstChild) {
         element.replaceChildren(...saved);
       }
     });
 
+    this.onPlaceholdersShown(elements);
+  }
+
+  /** The group is shown by its placeholders again: they are cleared, and it fades in, once it is drawn anew */
+  private onPlaceholdersShown(elements: CustomEmojiElements, docId: DocId = elements.values().next().value?.docId) {
+    if(this.offscreen && docId !== undefined) { // re-arm the compositor fade so the group fades again on viewport re-entry
+      this.sendCompositor('resetFade', {groupId: docId});
+    }
+
     this.clearedElements.delete(elements);
     elementsFadeInStartTimes.delete(elements);
   }
@@ -1347,6 +1349,10 @@ export class CustomEmojiRendererElement extends HTMLElement {
       // * placeholder (wrap leaves the thumb out of a cleared group): one under the canvas until it is
       // * painted showed through it for a frame or two - a translucent emoji darkened, a thin one bold
       else if(this.isSelectable) this.clearedElements.delete(elements);
+      // * Thumbnails put on a group the canvas has drawn (a category of the emoji panel going out of sight: its emoji
+      // * leave the group and come back to it in one pass, which keeps it): the group is shown by its placeholders
+      // * again - still taken for drawn, it would never clear them, and they would show under it once it is drawn
+      else if(onlyThumb && this.clearedElements.has(elements)) this.onPlaceholdersShown(elements, docId);
 
       for(const el of addElements) {
         if(elements.has(el)) {
 
@@ -191,6 +191,17 @@ describe('computeLineBoxes', () => {
     const boxes = computeLineBoxes([rangeOf(rect(100, 51, 50, 19), rect(100, 93, 50, 19))], origin, 21);
     expect(boxes.map((b) => b.top)).toEqual([0, 42]);
   });
+
+  it('measures in the overlay\'s own pixels when an ancestor is scaled', () => {
+    // * the first test's text with the bubble at .8 of its size, as it zooms in when its chat opens
+    const scaled = rect(100, 50, 320, 240);
+    const at = (left: number, top: number, width: number, height: number) => rect(100 + left * .8, 50 + top * .8, width * .8, height * .8);
+    const boxes = computeLineBoxes([rangeOf(at(10, 1, 40, 19), at(50, 1, 60, 19), at(0, 22, 90, 19))], scaled, 21, {x: .8, y: .8});
+    expect(boxes.map((b) => [b.left, b.top, b.width, b.height].map((v) => +v.toFixed(3) + 0))).toEqual([
+      [10, 0, 100, 21],
+      [0, 21, 90, 21]
+    ]);
+  });
 });
 
 describe('computeFullRange', () => {