/* ItnaOne Connect V1.11.2 — cross-device responsive compatibility.
   UI-only overrides. Loaded after V1.11.1 Messenger CSS. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body.mail-ui-page{
  overflow-x:hidden!important;
}
body.mail-ui-page *,
body.mail-ui-page *::before,
body.mail-ui-page *::after{
  box-sizing:border-box;
}

/* Hard containment: nothing in Connect may widen the viewport. */
.rt-messenger-page,
.rt-messenger-shell,
.rt-messenger-sidebar,
.rt-messenger-chat-main,
.rt-new-chat-card,
.rt-messenger-start-form,
.rt-messenger-support-form,
.rt-messenger-conversation-list,
.rt-messenger-conversation,
.rt-conversation-copy,
.rt-messenger-room-head,
.rt-messenger-message-form,
.rt-messenger-call-stage,
.rt-messenger-video-grid{
  min-width:0!important;
  max-width:100%!important;
}
.rt-messenger-page img,
.rt-messenger-page video,
.rt-messenger-page canvas,
.rt-messenger-page svg{
  max-width:100%;
}
.rt-messenger-page input,
.rt-messenger-page textarea,
.rt-messenger-page select,
.rt-messenger-page button{
  max-width:100%;
}

/* V1.11.0 legacy selector assigned 40px width to BOTH support spans.
   This explicitly restores the text span so Android cannot collapse it. */
.rt-messenger-support-form .rt-support-btn{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 11px!important;
  text-align:left!important;
}
.rt-messenger-support-form .rt-support-btn>.rt-support-icon{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
}
.rt-messenger-support-form .rt-support-btn>span:not(.rt-support-icon){
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  max-width:100%!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.rt-messenger-support-form .rt-support-btn b,
.rt-messenger-support-form .rt-support-btn small{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  line-height:1.25!important;
}
.rt-messenger-support-form .rt-support-btn b{font-size:.86rem!important}
.rt-messenger-support-form .rt-support-btn small{font-size:.72rem!important;margin-top:2px!important}

/* New-chat form stays inside its card even at 320px. */
.rt-messenger-start-form{
  width:100%!important;
  min-width:0!important;
}
.rt-start-input-wrap{
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}
.rt-start-input-wrap input{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  font-size:16px!important; /* avoid mobile browser focus zoom */
}
.rt-messenger-start-form>button{
  min-width:44px!important;
  min-height:44px!important;
  flex:0 0 auto!important;
}

/* Conversation list: avatar | flexible copy | badge. */
.rt-messenger-conversation{
  width:100%!important;
  grid-template-columns:44px minmax(0,1fr) auto!important;
  align-items:center!important;
}
.rt-conversation-copy,
.rt-conversation-title{
  min-width:0!important;
  max-width:100%!important;
}
.rt-conversation-title{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:6px!important;
}
.rt-conversation-title strong,
.rt-messenger-conversation .rt-conversation-copy>small{
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.rt-conversation-title time{white-space:nowrap!important}

/* Header and bottom dock containment for small Android widths. */
@media (max-width:760px){
  body.mail-ui-page .itnaone-view-stage,
  body.mail-ui-page .content-pad,
  body.mail-ui-page .rt-page{
    min-width:0!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }
  body.mail-ui-page .itnaone-gmail-topbar{
    width:100%!important;
    min-width:0!important;
    max-width:100vw!important;
  }
  body.mail-ui-page .itnaone-global-search,
  body.mail-ui-page .itnaone-global-search input{
    min-width:0!important;
    max-width:100%!important;
  }
  body.mail-ui-page .itnaone-mobile-dock,
  body.mail-ui-page .itnaone-mobile-dock>*{
    min-width:0!important;
    max-width:100%!important;
  }

  .rt-messenger-page{
    width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .rt-messenger-hero{
    width:100%!important;
    align-items:center!important;
    gap:10px!important;
  }
  .rt-messenger-hero>div{min-width:0!important}
  .rt-messenger-hero h1{font-size:clamp(2rem,10vw,2.65rem)!important}
  .rt-messenger-notify{
    flex:0 0 auto!important;
    min-width:48px!important;
    max-width:48%!important;
  }
  .rt-messenger-shell{width:100%!important;border-radius:24px!important}
  .rt-messenger-sidebar{width:100%!important;padding:14px!important}
  .rt-messenger-sidebar-head{gap:8px!important}
  .rt-messenger-sidebar-head>div{min-width:0!important}
  .rt-messenger-sidebar-head h2{
    font-size:clamp(1.35rem,7vw,1.65rem)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .rt-new-chat-round{width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important}

  .rt-people-rail{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .rt-person-card{flex:0 0 62px!important;min-width:0!important}
  .rt-person-avatar{width:52px!important;height:52px!important}
  .rt-person-card small{font-size:.68rem!important}

  .rt-new-chat-card{width:100%!important;padding:12px!important;border-radius:18px!important}
  .rt-new-chat-copy{min-width:0!important}
  .rt-new-chat-copy strong{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .rt-messenger-start-form{grid-template-columns:minmax(0,1fr) 46px!important;gap:7px!important}
  .rt-messenger-start-form>button{width:46px!important;height:46px!important;padding:0!important;justify-content:center!important}
  .rt-messenger-start-form>button span{display:none!important}

  .rt-messenger-conversation-list{width:100%!important;overflow:visible!important}
  .rt-messenger-conversation{padding:10px 7px!important;gap:9px!important}
  .rt-messenger-avatar{width:44px!important;height:44px!important;min-width:44px!important}
  .rt-conversation-title strong{font-size:.9rem!important}
  .rt-messenger-conversation .rt-conversation-copy>small{font-size:.78rem!important}
  .rt-conversation-title time{font-size:.62rem!important}

  .rt-messenger-room-head{width:100%!important;min-width:0!important}
  .rt-room-person{min-width:0!important}
  .rt-messenger-call-actions{flex:0 0 auto!important}
  .rt-messenger-messages{width:100%!important}
  .rt-messenger-message-form{width:100%!important}
  .rt-message-input-shell{min-width:0!important}
  .rt-messenger-message-form textarea{font-size:16px!important}

  /* Call screen fits both Android Chrome and iOS Safari/PWA. */
  .rt-messenger-call-page{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }
  .rt-messenger-call-stage{
    width:100%!important;
    min-height:calc(100svh - 215px)!important;
    max-width:100%!important;
  }
  @supports(height:100dvh){
    .rt-messenger-call-stage{min-height:calc(100dvh - 215px)!important}
  }
  .rt-messenger-video-grid #rtLocalVideo{
    width:clamp(88px,29vw,118px)!important;
    height:clamp(118px,39vw,158px)!important;
  }
  .rt-messenger-call-controls,
  .rt-messenger-incoming-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .rt-messenger-call-controls button,
  .rt-messenger-incoming-actions button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
}

/* Compact Android phones / older 320–374px devices. */
@media (max-width:374px){
  body.mail-ui-page .itnaone-gmail-topbar{
    grid-template-columns:40px minmax(0,1fr) 108px!important;
    gap:5px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  body.mail-ui-page .itnaone-menu-button{width:40px!important;height:40px!important;min-width:40px!important}
  body.mail-ui-page .itnaone-top-actions{
    width:108px!important;
    min-width:108px!important;
    grid-template-columns:repeat(3,34px)!important;
    gap:3px!important;
  }
  body.mail-ui-page .itnaone-apps-toplink,
  body.mail-ui-page .itnaone-drive-toplink,
  body.mail-ui-page .itnaone-top-actions .itnaone-account-button{
    width:34px!important;height:34px!important;min-width:34px!important;
  }
  body.mail-ui-page .itnaone-global-search{padding-left:9px!important;padding-right:8px!important}
  body.mail-ui-page .itnaone-global-search input{font-size:14px!important}

  .rt-messenger-page{padding-left:7px!important;padding-right:7px!important}
  .rt-messenger-hero{padding-left:2px!important;padding-right:2px!important}
  .rt-messenger-hero h1{font-size:2rem!important}
  .rt-messenger-sidebar{padding:10px!important}
  .rt-messenger-sidebar-head h2{font-size:1.35rem!important}
  .rt-person-card{flex-basis:58px!important}
  .rt-person-avatar{width:48px!important;height:48px!important;font-size:.92rem!important}
  .rt-new-chat-card{padding:10px!important}
  .rt-start-input-wrap{padding-left:8px!important;padding-right:8px!important}
  .rt-start-input-wrap svg{width:18px!important;height:18px!important}
  .rt-messenger-start-form{grid-template-columns:minmax(0,1fr) 42px!important}
  .rt-messenger-start-form>button{width:42px!important;height:44px!important;min-width:42px!important}
  .rt-messenger-support-form .rt-support-btn{grid-template-columns:32px minmax(0,1fr)!important;gap:8px!important;padding:9px!important}
  .rt-messenger-support-form .rt-support-btn>.rt-support-icon{width:32px!important;height:32px!important;min-width:32px!important}
  .rt-messenger-conversation{grid-template-columns:40px minmax(0,1fr) auto!important;gap:8px!important;padding:9px 5px!important}
  .rt-messenger-avatar{width:40px!important;height:40px!important;min-width:40px!important;font-size:.82rem!important}
  .rt-conversation-title strong{font-size:.84rem!important}
  .rt-messenger-conversation .rt-conversation-copy>small{font-size:.72rem!important}

  .rt-messenger-call-stage{padding:13px 9px!important;border-radius:22px!important}
  .rt-messenger-call-person{margin-top:15px!important}
  .rt-messenger-call-avatar{width:78px!important;height:78px!important;font-size:1.6rem!important}
  .rt-messenger-call-person h1{font-size:1.4rem!important}
  .rt-messenger-video-grid{min-height:250px!important}
  .rt-messenger-video-grid.audio-only{min-height:220px!important}
  .rt-messenger-call-controls,.rt-messenger-incoming-actions{gap:6px!important}
  .rt-messenger-call-controls button,.rt-messenger-incoming-actions button{min-height:72px!important;padding:7px 4px!important;border-radius:18px!important}
  .rt-control-icon svg{width:23px!important;height:23px!important}
  .rt-control-label{font-size:.68rem!important}
  .rt-messenger-call-note{font-size:.62rem!important}

  body.mail-ui-page .itnaone-mobile-dock>a>small,
  body.mail-ui-page .itnaone-mobile-direct-logout button>small{font-size:8px!important}
}

/* Very narrow fallback. Preserve functionality instead of overflowing. */
@media (max-width:339px){
  body.mail-ui-page .itnaone-gmail-topbar{grid-template-columns:38px minmax(0,1fr) 72px!important}
  body.mail-ui-page .itnaone-top-actions{width:72px!important;min-width:72px!important;grid-template-columns:repeat(2,34px)!important}
  body.mail-ui-page .itnaone-apps-toplink{display:none!important}
  .rt-messenger-notify .rt-notify-text{display:none!important}
  .rt-new-chat-copy{display:block!important}
  .rt-messenger-support-form .rt-support-btn small{font-size:.67rem!important}
}

/* Tablets: use the available width without a squeezed sidebar. */
@media (min-width:761px) and (max-width:1100px){
  .rt-messenger-page{padding-left:18px!important;padding-right:18px!important}
  .rt-messenger-shell{grid-template-columns:minmax(270px,34%) minmax(0,1fr)!important}
  .rt-messenger-sidebar{padding:17px!important}
  .rt-messenger-call-stage{width:min(100%,860px)!important;margin-left:auto!important;margin-right:auto!important}
}

/* Desktop: centered, readable working area. */
@media (min-width:1101px){
  .rt-messenger-page{width:min(100%,1500px)!important;margin-left:auto!important;margin-right:auto!important}
  .rt-messenger-shell{width:100%!important}
}

/* Phone landscape / short viewport. */
@media (max-height:620px) and (orientation:landscape){
  .rt-messenger-call-page{padding-top:6px!important;padding-bottom:12px!important}
  .rt-messenger-call-stage{min-height:calc(100svh - 20px)!important;padding:10px 14px!important}
  .rt-messenger-call-person{margin:4px 0 8px!important;display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;column-gap:12px!important;align-items:center!important;text-align:left!important}
  .rt-messenger-call-avatar{grid-row:1/3;width:64px!important;height:64px!important;font-size:1.35rem!important}
  .rt-messenger-call-person h1{margin:0!important;font-size:1.25rem!important}
  .rt-messenger-call-person p{margin:2px 0 0!important}
  .rt-messenger-video-grid{min-height:180px!important}
  .rt-messenger-call-controls,.rt-messenger-incoming-actions{margin-top:8px!important}
  .rt-messenger-call-controls button,.rt-messenger-incoming-actions button{min-height:62px!important}
  .rt-messenger-call-note{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  .rt-audio-ripple span{animation:none!important}
}