/* MUA Chat mobile — compact chat-list home screen. Keeps conversation/composer untouched. */
@media (max-width:700px){
  /* Reduce the oversized masthead so conversations appear much earlier. */
  #chatListView:not(.hidden) ~ *{} /* scope marker */
  .topbar{padding:8px 14px 5px!important;min-height:0!important}
  .topbar-main{min-height:48px!important;gap:8px!important;align-items:center!important}
  .brandblock{min-width:72px!important;max-width:92px!important}
  .brand{font-size:21px!important;line-height:1.02!important;letter-spacing:-.4px!important}
  .subbrand{font-size:7px!important;line-height:1.15!important;letter-spacing:1.15px!important;margin-top:3px!important}
  .support-mua{height:40px!important;min-height:40px!important;padding:0 13px!important;border-radius:20px!important;font-size:13px!important;white-space:nowrap!important}
  #peopleBtn.round-btn{width:42px!important;height:42px!important;min-width:42px!important;font-size:24px!important}
  .escapade-marquee{height:22px!important;min-height:22px!important;margin-top:2px!important;overflow:hidden!important}
  .escapade-track{font-size:8px!important;line-height:22px!important;letter-spacing:1px!important}

  /* Compact Chats heading/search/filter block. */
  #chatListView .section-head{padding:10px 14px 6px!important;align-items:center!important}
  #chatListView .section-head h1{font-size:28px!important;line-height:1!important;margin:0!important}
  #chatListView .section-head p{font-size:11px!important;margin:4px 0 0!important}
  #chatListView #newChatBtn{min-height:38px!important;height:38px!important;padding:0 13px!important;border-radius:18px!important;font-size:12px!important}
  #chatListView .search-wrap{height:43px!important;min-height:43px!important;margin:5px 14px 7px!important;border-radius:18px!important}
  #chatListView .search-wrap input{font-size:14px!important;padding-top:0!important;padding-bottom:0!important}
  #chatListView .m3-filterbar{padding:0 14px 7px!important;gap:6px!important}
  #chatListView .m3-filter{padding:5px 10px!important;font-size:10.5px!important}

  /* Conversation rows: smaller but still comfortable touch targets. */
  #chatListView .chat-list{padding:0 8px 88px!important}
  #chatListView .chat-row{min-height:62px!important;margin-bottom:5px!important;padding:8px 10px!important;border-radius:17px!important;gap:10px!important}
  #chatListView .chat-row .avatar{width:46px!important;height:46px!important;min-width:46px!important;flex-basis:46px!important;border-radius:15px!important;font-size:16px!important}
  #chatListView .chat-meta{min-width:0!important;flex:1!important}
  #chatListView .chat-meta b{font-size:14.5px!important;line-height:1.2!important;display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #chatListView .chat-meta small{font-size:11.5px!important;line-height:1.25!important;max-width:72vw!important;display:block!important}
  #chatListView .chat-row time{font-size:9.5px!important}
  .bottom-nav{height:64px!important;min-height:64px!important}
  .bottom-nav button span{font-size:18px!important}.bottom-nav button small{font-size:9px!important}
  .m3-fab{width:48px!important;height:48px!important;right:13px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;border-radius:16px!important}
}

/* Very small phones: prioritize names and chat count over decorative header text. */
@media (max-width:390px){
  .support-mua span{font-size:0!important}.support-mua span:after{content:'Support';font-size:12px!important}
  .escapade-marquee{height:18px!important;min-height:18px!important}.escapade-track{line-height:18px!important}
  #chatListView .section-head h1{font-size:26px!important}
}