/* Final device adaptation layer: phones and touch tablets use the real screen. */
html,body{max-width:100%;min-height:100%;overscroll-behavior:none}
.phone,.app-modal,.social-app,.global-assistant{box-sizing:border-box}

@media (max-width:430px), (pointer:coarse) and (max-width:1366px), (hover:none) and (max-width:1366px){
  html,body{width:100%;height:100%;min-height:100dvh;margin:0;padding:0;overflow:hidden}
  .phone{position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;min-height:0!important;margin:0!important;border-radius:0!important;box-shadow:none!important}
  .viewport{max-width:100vw!important;min-height:0!important;overflow:hidden!important}

  .app-modal,.social-app,.global-assistant{position:fixed!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;border-radius:0!important}
  .app-modal .modal-panel{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;border-radius:0!important}

  /* Chat settings and group creation are pages, never centered tablet popups. */
  .group-settings.chat-settings-portal,
  .group-builder.group-builder-portal{
    position:fixed!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
    box-sizing:border-box!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;
    margin:0!important;border-radius:0!important;box-shadow:none!important;
    padding:calc(12px + env(safe-area-inset-top)) max(18px,calc((100vw - 720px)/2)) calc(22px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
    transform:translateX(105%)!important;
  }
  .group-settings.chat-settings-portal.open,
  .group-builder.group-builder-portal.open{transform:none!important}

  /* Every secondary sheet also stays within the physical device viewport. */
  .privacy-settings,.assistant-settings,.theme-library-sheet{
    box-sizing:border-box!important;inset:0!important;width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;border-radius:0!important;
    padding-top:calc(14px + env(safe-area-inset-top))!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
  }
  .chat-utility-sheet{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;align-items:stretch!important;justify-content:stretch!important}
  .chat-utility-card{box-sizing:border-box!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;margin:0!important;border-radius:0!important;padding:calc(12px + env(safe-area-inset-top)) max(18px,calc((100vw - 720px)/2)) calc(22px + env(safe-area-inset-bottom))!important;overflow:auto!important}

  .social-app{padding:env(safe-area-inset-top) max(18px,calc((100vw - 760px)/2)) env(safe-area-inset-bottom)!important}
  .social-app .chat-room{inset:0!important;width:100%!important;max-width:none!important;height:100%!important;border-radius:0!important;padding:env(safe-area-inset-top) max(18px,calc((100vw - 760px)/2)) env(safe-area-inset-bottom)!important}
  .chat-room .message-list,.social-panel{min-height:0!important;-webkit-overflow-scrolling:touch}
  .message-composer{margin-bottom:max(9px,env(safe-area-inset-bottom))!important}
}

@media (min-width:431px) and (max-width:1366px) and (pointer:coarse),
       (min-width:431px) and (max-width:1366px) and (hover:none){
  .group-settings.chat-settings-portal>header,
  .group-builder.group-builder-portal>header,
  .chat-utility-card>header{width:100%;max-width:720px;margin-left:auto!important;margin-right:auto!important}
  .group-settings.chat-settings-portal>*:not(header),
  .group-builder.group-builder-portal>*:not(header),
  #chatUtilityBody{width:100%;max-width:720px;margin-left:auto!important;margin-right:auto!important}
}