/* R32: bounded layout containment. Load after messenger-polish-r25.css. */
/* Give percentage-sized album grids a definite parent; fit-content collapses
   when their image cells have no intrinsic contribution. */
#app #view-chats #messages .msg:has(.vy-mosaic--bubble) {
  width:360px;
  max-width:88%;
  min-width:0;
}
#app #view-chats #messages .msg > .bubble:has(.vy-mosaic--bubble) {
  width:100%;
  min-width:0;
  max-width:100%;
}
#app #view-chats #messages .vy-mosaic--bubble { width:100%; min-width:0; }
#app #view-chats #messages .vy-mosaic--bubble > * { min-width:0; }

@media (max-width:860px) {
  #app, #app .shell-main, #app #view-chats, #app #panel-thread,
  #app #messages, #app #composer-wrap, #app #composer-bar {
    min-width:0; max-width:100%; box-sizing:border-box;
  }
  #app #panel-thread { width:100%; }
  /* Preserve viewport safe area even if another theme changes header padding. */
  #app #thread-header, #app #panel-list > .list-header {
    box-sizing:border-box;
    min-height:calc(56px + env(safe-area-inset-top,0px));
    height:calc(56px + env(safe-area-inset-top,0px));
    padding-top:env(safe-area-inset-top,0px);
    padding-left:max(8px,env(safe-area-inset-left,0px));
    padding-right:max(8px,env(safe-area-inset-right,0px));
  }
  #app #thread-header .thread-header__info { min-width:0; overflow:hidden; }
  #app #thread-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  #app #composer-bar .composer__field { flex:1 1 0%; min-width:0; }
  #app #composer-input { flex:1 1 0%; width:0; min-width:0; }
  #app #composer-bar .composer__actions { flex:0 0 auto; }
  #app #composer-wrap { padding-bottom:0; }
  #app #composer-wrap #composer-bar {
    padding-left:max(8px,env(safe-area-inset-left,0px));
    padding-right:max(8px,env(safe-area-inset-right,0px));
    padding-bottom:max(8px,env(safe-area-inset-bottom,0px));
  }
  #app #messages .msg > .bubble { min-width:0; max-width:100%; }
  #app #messages .bubble__text { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  #app #messages .bubble__text pre { max-width:100%; overflow-x:auto; }
}
@media (max-width:600px) {
  /* Top-layer dialogs must use the available width, not a wider layout vw. */
  html .social-profile {
    position:fixed; inset:0; margin:0;
    width:100%; max-width:100%;
    height:100dvh; max-height:100dvh;
    box-sizing:border-box;
  }
  html .social-profile__bar { min-width:0; flex-shrink:0; }
  html .social-profile__bar > :first-child { min-width:0; overflow-wrap:anywhere; }
  html .social-profile__bar button { flex-shrink:0; }
  html .social-profile__scroll { min-width:0; width:100%; overflow-x:hidden; }
  html .social-profile__full { overflow-wrap:anywhere; }
}
/* Group-only action must not leak into a direct/Saved thread menu. */
#panel-thread:not(.vg-group-open) #vg-thread-info { display:none!important; }

@media(max-width:860px) {
  /* 44px name target + status line must fit without clipping. */
  #app #thread-header { height:auto; min-height:calc(72px + env(safe-area-inset-top,0px)); }
  #app #thread-header .thread-header__info { overflow:visible; }
  #app #thread-name { display:block; min-height:44px; }
  #app #thread-status { min-width:0; line-height:18px; }
}

/* Keep desktop name and status within the header too. */
@media(min-width:861px){#app #thread-header{min-height:72px;height:auto}}
#app #thread-header .vy-msg-signature{display:none!important}