/* Mobile website only. The desktop messenger layout is preserved. */
@media(max-width:700px){
  html.pfmWebChat body #pfmMobileNavigation{display:none!important}
  html.pfmWebChat body #overlay.open>#pfmV271OverlayClose{top:calc(var(--pfm-chat-top,0px) + 12px)!important;right:16px!important}
  html.pfmWebChat body #overlay.open{
    position:fixed!important;inset:auto 0 auto 0!important;
    top:var(--pfm-chat-top,0px)!important;height:var(--pfm-chat-height,100dvh)!important;
    max-height:none!important;box-sizing:border-box!important;
    padding:8px!important;display:flex!important;align-items:stretch!important;overflow:hidden!important;
  }
  html.pfmWebChat body #overlay.open #modal{
    position:relative!important;inset:auto!important;transform:none!important;
    display:flex!important;flex-direction:column!important;box-sizing:border-box!important;
    width:100%!important;max-width:100%!important;height:100%!important;
    min-height:0!important;max-height:100%!important;margin:0!important;
    padding:56px 14px 0!important;overflow:hidden!important;
  }
  html.pfmWebChat body #modal>h2{flex:0 0 auto!important;font-size:24px!important;margin:0 40px 8px 0!important}
  html.pfmWebChat body #modal>p{flex:0 0 auto!important;margin:0 0 8px!important}
  html.pfmWebChat body #modal .pfmV285Messenger{display:flex!important;flex:1 1 0!important;min-height:0!important;overflow:hidden!important}
  html.pfmWebChat body #modal .pfmV285Messenger:not(.thread-open) .pfmV285Thread{display:none!important}
  html.pfmWebChat body #modal .pfmV285Messenger.thread-open .pfmV285List{display:none!important}
  html.pfmWebChat body #modal .pfmV285List{flex:1!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}
  html.pfmWebChat body #modal .pfmV285Thread{flex:1 1 0!important;height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
  html.pfmWebChat body #modal .pfmV285Back,html.pfmWebChat body #modal .pfmV285Head{flex:0 0 auto!important}
  html.pfmWebChat body #modal .pfmV285Bubbles,html.pfmWebChat body #modal .messageBox{flex:1 1 0!important;min-height:0!important;max-height:none!important;overflow-y:auto!important}
  html.pfmWebChat body #modal .pfmV285Offers{max-height:25%!important;flex-shrink:1!important;min-height:0!important}
  html.pfmWebChat body #modal .pfmV285Composer,html.pfmWebChat body #modal #pfmV67Composer,html.pfmWebChat body #modal #msgForm{
    position:relative!important;inset:auto!important;flex:0 0 auto!important;order:3!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;
    margin:0!important;padding:10px 0 max(10px,env(safe-area-inset-bottom))!important;background:#fff!important;
  }
  html.pfmWebChat body #modal textarea,html.pfmWebChat body #modal input[name=text]{font-size:16px!important;min-width:0!important;min-height:48px!important;max-height:96px!important;box-sizing:border-box!important}
  html.pfmWebChat body #overlay.pfmChatCompact #modal>p{display:none!important}
  html.pfmWebChat body #overlay.pfmChatCompact #modal{padding-top:44px!important}
  html.pfmWebChat body #overlay.pfmChatCompact #modal>h2{font-size:20px!important;margin-bottom:4px!important}
  html.pfmWebChat body #overlay.pfmChatCompact .pfmV285Back{padding-bottom:4px!important}
}