/* QatarWish mobile private-chat isolation fix.
   Keep the private conversation as one full-screen view and prevent the
   homepage/feed from appearing underneath it on iPhone/Safari/PWA. */

html:has(body.messages-open){
  overflow:hidden!important;
  overscroll-behavior:none;
}

body.messages-open{
  overflow:hidden!important;
  overscroll-behavior:none;
}

#messagesModal.messages-overlay:not(.hidden){
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
}

@media (max-width:900px){
  html:has(body.messages-open),
  body.messages-open{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  /* The conversation must be the only visible page while it is open. */
  body.messages-open > .topbar,
  body.messages-open > nav.site-nav,
  body.messages-open > main.shell,
  body.messages-open > footer,
  body.messages-open > .ambient{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #messagesModal.messages-overlay:not(.hidden){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    overflow-x:hidden!important;
    background:#13090e!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  #messagesModal .messages-sheet{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    overflow-x:hidden!important;
    background:linear-gradient(155deg,#241019,#13090e)!important;
  }

  #messagesModal .messages-head,
  #messagesModal .chat-toolbar,
  #messagesModal .chat-compose,
  #messagesModal .chat-safety-note{
    flex:0 0 auto!important;
    max-width:100%!important;
  }

  #messagesModal .inbox-view,
  #messagesModal .chat-view{
    min-height:0!important;
    min-width:0!important;
    max-width:100%!important;
    flex:1 1 auto!important;
  }

  #messagesModal .chat-view{
    overflow:hidden!important;
    overflow-x:hidden!important;
  }

  #messagesModal .chat-messages{
    min-height:0!important;
    min-width:0!important;
    max-width:100%!important;
    flex:1 1 auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch;
  }

  #messagesModal .chat-compose{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    grid-template-columns:minmax(0,1fr) 78px!important;
    gap:8px!important;
    padding:10px max(12px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))!important;
  }

  /* iPhone Safari automatically zooms the whole page when a focused input is
     below 16px. The legacy private-chat textarea was 13px, which caused the
     first-open zoom shown by users. Keep it at 16px so the viewport stays 1:1. */
  #messagesModal .chat-compose textarea,
  #messagesModal #chatInput{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:48px!important;
    max-height:110px!important;
    font-size:16px!important;
    line-height:1.5!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }

  #messagesModal .chat-compose #sendChatBtn{
    width:78px!important;
    min-width:78px!important;
    max-width:78px!important;
    margin:0!important;
    padding:10px 8px!important;
    touch-action:manipulation;
  }

  #messagesModal .chat-safety-note{
    width:100%!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    padding-inline:max(12px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-right,0px))!important;
  }
}

/* Same safeguard for iOS Safari even when its CSS viewport is reported wider
   than expected while the keyboard/visual viewport is changing. */
@supports (-webkit-touch-callout:none){
  #messagesModal .chat-compose textarea,
  #messagesModal #chatInput{
    font-size:16px!important;
  }
}