/* FlashChat mobile browser compatibility v14 */

.fc-v14-language-control{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-width:0;
  color:inherit;
  font-weight:800;
}
.fc-v14-language-control .input,
.fc-v14-language-control select{
  min-width:150px;
  max-width:100%;
  height:38px;
  color:var(--text, #0f172a) !important;
  background:var(--panel, #fff) !important;
  border:1px solid var(--border, #94a3b8) !important;
  border-radius:10px;
  padding:5px 9px;
  font:inherit;
}
#fcMobileAccountChoice{
  font-weight:900 !important;
  border-color:var(--accent, #2563eb) !important;
}

@media (max-width:1100px), (pointer:coarse){
  body.fc-mobile-webapp .fc-webapp-topbar{
    grid-template-columns:42px minmax(42px,1fr) auto !important;
    gap:5px !important;
    padding-inline:8px !important;
    min-width:0 !important;
  }
  body.fc-mobile-webapp #fcWebMenuBtn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:3 !important;
    width:40px !important;
    min-width:40px !important;
    flex:0 0 40px !important;
  }
  body.fc-mobile-webapp .fc-webapp-title{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    font-size:clamp(15px,4.6vw,22px) !important;
  }
  body.fc-mobile-webapp .fc-webapp-actions{
    display:flex !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    overflow:visible !important;
    gap:1px !important;
  }
  body.fc-mobile-webapp .fc-webapp-actions .fc-webapp-btn{
    width:36px !important;
    min-width:36px !important;
    height:38px !important;
    font-size:21px !important;
  }
  body.fc-mobile-webapp #fcMobileMoreBtn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* The mobile LiveKit panel uses the desktop/new broadcast implementation,
     but leaves enough room for messages and the composer underneath. */
  body.fc-mobile-webapp .fc-lk6-manager{
    top:calc(var(--fc-app-header-h,64px) + var(--fc-app-ticker-h,36px) + 6px) !important;
    right:5px !important;
    left:5px !important;
    bottom:auto !important;
    width:auto !important;
    max-height:min(46vh, 390px) !important;
    transform:none !important;
    resize:none !important;
  }
  body.fc-mobile-webapp .fc-lk6-manager .fc-lk6-body{
    max-height:calc(min(46vh, 390px) - 50px) !important;
  }
  body.fc-mobile-webapp .fc-lk6-watch,
  body.fc-mobile-webapp .fc-lk6-free,
  body.fc-mobile-webapp .fc-lk6-free-single{
    top:calc(var(--fc-app-header-h,64px) + var(--fc-app-ticker-h,36px) + 6px) !important;
    right:5px !important;
    left:5px !important;
    width:auto !important;
    height:min(38vh, 300px) !important;
    min-width:0 !important;
    min-height:145px !important;
    transform:none !important;
    resize:none !important;
  }
  body.fc-mobile-webapp .fc-lk6-free-single:nth-of-type(2n){
    top:calc(var(--fc-app-header-h,64px) + var(--fc-app-ticker-h,36px) + 18px) !important;
  }
}

@media (max-width:520px){
  body.fc-mobile-webapp #fcWebRadioBtn,
  body.fc-mobile-webapp #fcWebStatusBtn{
    display:none !important;
  }
}
@media (max-width:375px){
  body.fc-mobile-webapp #fcWebSettingsBtn{
    display:none !important;
  }
  body.fc-mobile-webapp .fc-webapp-actions .fc-webapp-btn{
    width:34px !important;
    min-width:34px !important;
  }
}

@media (max-width:900px){
  /* Rooms header: a long server/site title may shrink, never the hamburger. */
  header .brand{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) 44px !important;
    align-items:center !important;
    width:100% !important;
    min-width:0 !important;
    gap:8px !important;
  }
  header .brand > div{
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }
  #mobileMenuBtn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:4 !important;
    width:44px !important;
    min-width:44px !important;
    height:42px !important;
    padding:0 !important;
  }
  #mobileMenuBody .fc-v14-language-control{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    width:100% !important;
    padding:7px 2px !important;
  }
  #mobileMenuBody .fc-v14-language-control .fc-v14-language-label{
    grid-column:2;
  }
  #mobileMenuBody .fc-v14-language-control select{
    grid-column:1 / -1;
    width:100% !important;
    min-width:0 !important;
  }
  .langSwitch .fc-v14-language-control{
    flex-wrap:wrap;
  }
  .langSwitch .fc-v14-language-control select{
    min-width:175px;
  }

  /* iPhone/Safari-safe login/register dialog. All three account tabs remain
     visible and the form scrolls inside the usable visual viewport. */
  html.fc-oldchat-rooms .authOverlay,
  html.fc-oldchat-rooms .authOverlay.show,
  html.fc-oldchat-rooms .authOverlay[style*="display: flex"]{
    align-items:flex-start !important;
    justify-content:center !important;
    height:var(--fc-v14-mobile-vh, 100dvh) !important;
    max-height:var(--fc-v14-mobile-vh, 100dvh) !important;
    padding:max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
  html.fc-oldchat-rooms .authModal{
    width:100% !important;
    max-width:620px !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(var(--fc-v14-mobile-vh, 100dvh) - 16px) !important;
    margin:0 auto !important;
    overflow:hidden !important;
    grid-template-columns:minmax(0,1fr) !important;
  }
  html.fc-oldchat-rooms .authLeft{
    width:100% !important;
    min-width:0 !important;
    max-height:calc(var(--fc-v14-mobile-vh, 100dvh) - 16px) !important;
    padding:16px 14px max(28px, env(safe-area-inset-bottom)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
  }
  html.fc-oldchat-rooms .authRight{
    display:none !important;
  }
  html.fc-oldchat-rooms .authModal .tabs{
    position:sticky !important;
    top:0 !important;
    z-index:8 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:6px 0 !important;
    background:linear-gradient(180deg,var(--fc-oldchat-panel),var(--fc-oldchat-panel2)) !important;
  }
  html.fc-oldchat-rooms .authModal .tab{
    min-width:0 !important;
    padding-inline:6px !important;
    white-space:normal !important;
  }
  html.fc-oldchat-rooms .authModal form.authForm{
    min-width:0 !important;
    padding-bottom:28px !important;
  }
}

/* v15: true edge-to-edge composer on phones and tablets.
   Older mobile rules combined fixed left/right offsets with an additional
   width and horizontal margins, which pushed the composer past the viewport. */
@media (max-width:1100px), (pointer:coarse){
  html,
  body.fc-mobile-webapp{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }
  body.fc-mobile-webapp .layout,
  body.fc-mobile-webapp section.panel.chat,
  body.fc-mobile-webapp .panel.chat{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin-inline:0 !important;
    transform:none !important;
  }
  body.fc-mobile-webapp section.panel.chat > .composer.composerV6,
  body.fc-mobile-webapp section.panel.chat > .composer,
  body.fc-mobile-webapp .panel.chat > .composer.composerV6,
  body.fc-mobile-webapp .panel.chat > .composer,
  body.fc-mobile-webapp .composer.composerV6,
  body.fc-mobile-webapp .composer{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    inset-inline:0 !important;
    box-sizing:border-box !important;
    width:100% !important;
    inline-size:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    margin-inline:0 !important;
    transform:none !important;
    padding-left:max(9px, env(safe-area-inset-left, 0px)) !important;
    padding-right:max(9px, env(safe-area-inset-right, 0px)) !important;
  }
  body.fc-mobile-webapp .composer > .tools,
  body.fc-mobile-webapp .composer.composerV6 > .tools{
    left:0 !important;
    right:0 !important;
    inset-inline:0 !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-inline:0 !important;
  }
  body.fc-mobile-webapp .composer textarea#text,
  body.fc-mobile-webapp .composer > #text,
  body.fc-mobile-webapp #text{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-inline:0 !important;
  }
  body.fc-mobile-webapp .composer #affiliateTicker,
  body.fc-mobile-webapp .composer .affiliateTicker{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-inline:0 !important;
  }
}