/* Mobile lobby UX pass: clear empty states, readable chat controls, usable composer */
@media(max-width:900px){
  html body #root .mobileTablesHead b,
  html body #root .mobileChatTitle b{font-size:15px!important;line-height:1.2!important}
  html body #root .mobileTablesHead small,
  html body #root .mobileChatTitle span{font-size:12px!important}
  html body #root .mobileTableHeadActions button{min-width:38px!important;min-height:36px!important;font-size:12px!important}
  html body #root .mobileEmptyTable{
    box-sizing:border-box!important;flex:0 0 100%!important;width:100%!important;min-width:0!important;
    grid-column:1/-1!important;height:76px!important;min-height:76px!important;max-height:76px!important;
    display:grid!important;grid-template-rows:auto auto auto!important;align-content:center!important;
    justify-items:center!important;gap:2px!important;
    border:1px solid var(--border)!important;border-radius:14px!important;
    background:linear-gradient(135deg,var(--surface-2),var(--surface))!important;
    color:var(--text)!important;font-size:13px!important;font-weight:650!important;line-height:1.35!important;
    text-align:center!important;padding:8px 14px!important
  }
  html body #root .mobileEmptyTable::before{content:"🀄";font-size:18px!important;line-height:1!important}
  html body #root .mobileEmptyTable::after{
    content:"İlk masayı açmak için üstteki + düğmesine dokunun."!important;
    color:var(--muted)!important;font-size:11px!important;font-weight:400!important
  }
  html body #root .mobileLobbyChat{display:flex!important;flex-direction:column!important;min-height:0!important}
  html body #root .mobileChatTitle{min-height:52px!important;box-sizing:border-box!important;align-items:center!important}
  html body #root .mobileChatTitleActions button{
    min-height:38px!important;border-radius:11px!important;padding:0 11px!important;
    font-size:13px!important;font-weight:700!important;white-space:nowrap!important
  }
  html body #root .mobileLobbyChat .richChat{
    display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
    min-height:0!important;height:100%!important;background:var(--surface)!important
  }
  html body #root .mobileLobbyChat .socialToolBar{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;
    padding:7px 9px!important
  }
  html body #root .mobileLobbyChat .socialToolBar button{
    min-height:38px!important;border-radius:11px!important;padding:7px 5px!important;
    font-size:12px!important;font-weight:650!important
  }
  html body #root .mobileLobbyChat .chatTabs{
    gap:7px!important;padding:6px 9px!important
  }
  html body #root .mobileLobbyChat .chatTabs button{
    min-height:36px!important;border-radius:10px!important;padding:7px 10px!important;
    font-size:12px!important;font-weight:650!important
  }
  html body #root .mobileLobbyChat .chatMessages{
    display:flex!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;
    justify-content:flex-start!important;align-content:flex-start!important;
    gap:10px!important;padding:14px 12px!important;font-size:14px!important
  }
  html body #root .mobileLobbyChat .chatEmpty{
    box-sizing:border-box!important;width:min(100%,360px)!important;margin:8px auto 0!important;
    padding:16px 14px!important;border:1px solid var(--border)!important;border-radius:16px!important;
    background:linear-gradient(145deg,var(--surface-2),var(--surface))!important;
    color:var(--text)!important;text-align:center!important;font-size:14px!important;
    line-height:1.4!important;box-shadow:0 8px 24px #00000012!important
  }
  html body #root .mobileLobbyChat .chatEmpty::before{
    content:"💬";display:block!important;margin:0 auto 7px!important;font-size:26px!important;line-height:1!important
  }
  html body #root .mobileLobbyChat .chatEmpty::after{
    content:"Sohbeti başlatmak için aşağıya bir mesaj yaz."!important;
    display:block!important;margin-top:5px!important;color:var(--muted)!important;
    font-size:12px!important;line-height:1.4!important;font-weight:400!important
  }
  html body #root .mobileLobbyChat .chatMessage{font-size:13px!important}
  html body #root .mobileLobbyChat .chatMessage p{font-size:14px!important}
  html body #root .mobileLobbyChat .chatComposer{
    flex:none!important;min-height:60px!important;padding:7px 9px calc(7px + env(safe-area-inset-bottom))!important
  }
  html body #root .mobileLobbyChat .chatComposer .chatSend{
    grid-template-columns:44px minmax(0,1fr) 70px!important;gap:7px!important;padding:0!important;
    align-items:center!important
  }
  html body #root .mobileLobbyChat .chatComposer .emojiButton{
    box-sizing:border-box!important;width:44px!important;height:44px!important;min-height:44px!important;
    border-radius:12px!important;font-size:21px!important
  }
  html body #root .mobileLobbyChat .chatComposer .chatSend input{
    box-sizing:border-box!important;height:44px!important;min-width:0!important;
    padding:0 12px!important;font-size:14px!important
  }
  html body #root .mobileLobbyChat .chatComposer .chatSend button{
    box-sizing:border-box!important;min-width:70px!important;height:44px!important;
    padding:0 10px!important;font-size:13px!important;font-weight:750!important
  }
}
@media(max-width:390px){
  html body #root .mobileChatTitleActions button{padding:0 8px!important;font-size:12px!important}
  html body #root .mobileLobbyChat .chatComposer .chatSend{grid-template-columns:40px minmax(0,1fr) 64px!important;gap:6px!important}
  html body #root .mobileLobbyChat .chatComposer .emojiButton{width:40px!important}
  html body #root .mobileLobbyChat .chatComposer .chatSend button{min-width:64px!important}
}

/* Keep the table list and message history independently scrollable on phones */
@media(max-width:900px){
  html body #root .mobileLobbyChat{min-height:0!important;overflow:hidden!important}
  html body #root .mobileLobbyChat .richChat{
    min-height:0!important;overflow:hidden!important
  }
  html body #root .mobileLobbyChat .socialToolBar,
  html body #root .mobileLobbyChat .chatTabs,
  html body #root .mobileLobbyChat .chatComposer{flex:none!important}
  html body #root .mobileLobbyChat .chatMessages{
    flex:1 1 auto!important;min-height:0!important;height:auto!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior-y:contain!important;touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;
    scrollbar-color:#52647e transparent!important
  }
  html body #root .mobileLobbyChat .chatMessages::-webkit-scrollbar,
  html body #root .mobileTablesScroller::-webkit-scrollbar{width:4px!important}
  html body #root .mobileLobbyChat .chatMessages::-webkit-scrollbar-thumb,
  html body #root .mobileTablesScroller::-webkit-scrollbar-thumb{
    background:#52647e!important;border-radius:8px!important
  }
}
@media(max-width:760px) and (orientation:portrait){
  html body #root .mobileTablesPanel{
    display:flex!important;flex-direction:column!important;min-height:0!important;
    max-height:min(31dvh,250px)!important;overflow:hidden!important
  }
  html body #root .mobileTablesHead{flex:none!important}
  html body #root .mobileTablesScroller{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:start!important;flex:1 1 auto!important;min-height:0!important;
    max-height:none!important;width:100%!important;overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior-y:contain!important;touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;scrollbar-width:thin!important;
    scrollbar-color:#52647e transparent!important
  }
  html body #root .mobileTableCard{width:100%!important;min-width:0!important;max-width:none!important}
}


/* Mobile header audio controls */
@media(max-width:900px){
  html body #root .mobileLobbyTopbar{grid-template-columns:minmax(0,1fr) auto auto auto!important;grid-template-rows:auto auto!important}
  html body #root .mobileLobbyTopbar .mobileRadioToggle{
    grid-column:1!important;grid-row:2!important;justify-self:start!important
  }
  html body #root .mobileLobbyTopbar .mobileSoundToggle{
    grid-column:2!important;grid-row:2!important;justify-self:start!important
  }
  html body #root .mobileLobbyTopbar .mobileRadioToggle,
  html body #root .mobileLobbyTopbar .mobileSoundToggle{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:34px!important;padding:0 9px!important;border:1px solid var(--border)!important;
    border-radius:10px!important;background:var(--surface-2)!important;color:var(--text)!important;
    font-size:11px!important;font-weight:700!important;white-space:nowrap!important
  }
}
@media(max-width:390px){
  html body #root .mobileLobbyTopbar .mobileRadioToggle,
  html body #root .mobileLobbyTopbar .mobileSoundToggle{padding:0 6px!important;font-size:10px!important}
}