/* V35.16 — MOBILE COMPOSER / EMOJI SURFACE TARGETED FIX ONLY
 * Scope: mobile emoji picker anchoring + composer visibility + latest-message
 * viewport positioning. Menu, message rendering, PC/tablet and data logic are untouched.
 */
@media (max-width:767px){
  /* When emoji is open, the composer owns the strip immediately above the picker. */
  .chat-main.mobile-active .chat-input-zone.v3516-emoji-layout,
  #chatMainContainer.mobile-active .chat-input-zone.v3516-emoji-layout,
  body.mobile-chat-focus .chat-input-zone.v3516-emoji-layout{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:var(--v3516-emoji-height,300px) !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    z-index:2146 !important;
    display:block !important;
    overflow:visible !important;
    box-sizing:border-box !important;
    background:var(--bg-main,#111b21) !important;
  }

  .chat-input-zone.v3516-emoji-layout > .zalo-input-area{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:2147 !important;
    width:100% !important;
    min-height:54px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  /* The picker is deliberately top-level/fixed. This prevents chat-main's
     overflow:hidden from clipping it and guarantees it sits UNDER the composer. */
  body #emojiPanel.v6-emoji-open.v3516-emoji-surface{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:var(--v3516-emoji-height,300px) !important;
    max-height:var(--v3516-emoji-height,300px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    z-index:2145 !important;
    border-radius:18px 18px 0 0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
  }

  body #emojiPanel.v3516-emoji-surface .zalo-popup-tabs{
    flex:0 0 44px !important;
    height:44px !important;
    min-height:44px !important;
  }
  body #emojiPanel.v3516-emoji-surface .emoji-content-tab{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body #emojiPanel.v3516-emoji-surface .emoji-grid,
  body #emojiPanel.v3516-emoji-surface .sticker-grid{
    max-height:none !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body #emojiPanel.v3516-emoji-surface .zalo-popup-footer{
    flex:0 0 42px !important;
    min-height:42px !important;
    height:42px !important;
  }

  /* While the emoji surface is open, keep the conversation at its latest item.
     No message markup/styles are changed; only the existing scroll container is
     instructed to remain at its bottom edge after the composer surface changes. */
  #chatMainContainer.mobile-active .chat-window.v3516-keep-bottom{
    scroll-behavior:auto !important;
  }

  /* Normal mobile state: no extra geometry from this fix. */
  .chat-input-zone:not(.v3516-emoji-layout){
    --v3516-emoji-height:0px;
  }
}