/* PC chat: scrollable multi-row emoji picker independent of clipped chat composer */
@media(min-width:761px){
html body #root .richChat .emojiPicker{
 position:fixed!important;left:auto!important;right:clamp(12px,3vw,58px)!important;
 top:auto!important;bottom:clamp(80px,12vh,145px)!important;
 width:min(390px,calc(100vw - 30px))!important;min-width:280px!important;
 height:min(440px,65vh)!important;min-height:260px!important;max-height:65vh!important;
 display:flex!important;flex-direction:column!important;overflow-y:auto!important;
 overflow-x:hidden!important;overscroll-behavior:contain!important;
 z-index:2147483000!important;box-sizing:border-box!important;
}
html body #root .richChat .emojiPicker .emojiGrid{
 display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;
 grid-auto-rows:minmax(39px,auto)!important;gap:5px!important;
 overflow-y:auto!important;overflow-x:hidden!important;min-height:140px!important;
 height:auto!important;max-height:310px!important;flex:1 1 auto!important;
}
html body #root .richChat .emojiPicker .emojiTabs,
html body #root .richChat .emojiPicker .emojiSubTabs{flex:0 0 auto!important;min-height:34px!important}
html body #root .richChat .chatTabs{justify-content:flex-start!important;overflow-x:auto!important}
html body #root .richChat .privateConversationTabs{max-width:42%!important;flex:0 1 42%!important}
}
html body #root .richChat .chatTabs .privateReturnLobby{
 flex:0 0 auto!important;display:inline-flex;align-items:center;justify-content:center;
 min-height:32px!important;padding:5px 10px!important;background:#315e48!important;
 border:1px solid #73b594!important;border-radius:8px!important;color:#fff!important;
 white-space:nowrap!important;cursor:pointer;order:-20!important
}
html body #root .richChat .chatTabs .privateReturnLobby[hidden]{display:none!important}

/* Table chat: keep tools, editor, feedback, and media within reach. */
@layer darkTableChatRepair {
#root .richChat[data-chat-context="table"]{min-width:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#root .richChat[data-chat-context="table"]>.chatMessages{flex:1 1 0!important;min-height:0!important;overflow-y:auto!important}
#root .richChat[data-chat-context="table"]>.chatComposer{position:relative!important;flex:0 0 auto!important;height:auto!important;min-height:96px!important;max-height:none!important;width:100%!important;box-sizing:border-box!important;padding:6px!important;overflow:visible!important}
#root .richChat[data-chat-context="table"] .chatSend{display:grid!important;grid-template-columns:32px 32px 32px minmax(0,1fr) 60px!important;grid-template-rows:32px 38px!important;gap:4px!important;width:100%!important;min-width:0!important;padding:0!important;box-sizing:border-box!important}
#root .richChat[data-chat-context="table"] .chatSend>.chatUploadButton{grid-area:1/1!important}
#root .richChat[data-chat-context="table"] .chatSend>.chatGiftQuickButton{grid-area:1/2!important;display:grid!important}
#root .richChat[data-chat-context="table"] .chatSend>.emojiButton{grid-area:1/3!important}
#root .richChat[data-chat-context="table"] .chatSend>button:not(:last-child){position:static!important;transform:none!important;width:32px!important;min-width:0!important;max-width:32px!important;height:32px!important;min-height:0!important;padding:3px!important;display:grid!important;place-items:center!important}
#root .richChat[data-chat-context="table"] .chatSend>input{grid-area:2/1/3/5!important;position:static!important;width:100%!important;min-width:0!important;max-width:100%!important;height:38px!important;padding:6px!important;box-sizing:border-box!important}
#root .richChat[data-chat-context="table"] .chatSend>button:last-child{grid-area:2/5!important;position:static!important;width:60px!important;min-width:0!important;max-width:60px!important;height:38px!important;padding:3px!important;font-size:12px!important}
#root .richChat .chatComposer>input[type="file"]{display:none!important}
#root .richChat[data-chat-context="table"] .chatUploadStatus{display:block!important;font-size:11px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important;margin-top:4px!important}
#root .richChat .chatMediaPicker .chatMediaGrid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;min-height:0!important;overflow:auto!important;flex:1 1 auto!important}
#root .richChat .chatMediaPicker .chatMediaCell>button{box-sizing:border-box!important;width:100%!important;min-width:0!important;padding:4px!important;min-height:66px!important}
#root .richChat .chatMediaPicker .chatMediaCell img{width:100%!important;height:58px!important;max-width:100%!important;object-fit:contain!important}
#root .richChat .chatMediaPicker .chatMediaStatus{flex:0 0 auto!important;font-size:12px!important;line-height:1.35!important;margin:4px!important}
}

@layer darkHandTotalReadability {
#root .gameScreen .openingHandTotal{font-size:20px!important;font-weight:900!important;line-height:1!important;color:#ff4646!important;text-shadow:0 1px 3px #000b!important;vertical-align:middle!important}
#root .gameScreen .openingHandTotal.ready{color:#fff!important;text-shadow:0 0 5px #fff9,0 0 10px #fff5!important}
#root .gameScreen .rack101Score:not(.compactScore) strong{font-size:28px!important;font-weight:900!important;color:#ff4646!important;text-shadow:0 1px 3px #000b!important}
#root .gameScreen .rack101Score.ready:not(.compactScore) strong{color:#fff!important;text-shadow:0 0 5px #fff9,0 0 10px #fff5!important}
@media(max-width:700px){#root .gameScreen .openingHandTotal{font-size:17px!important}#root .gameScreen .rack101Score:not(.compactScore) strong{font-size:25px!important}}
}

@layer darkIndicatorClaimControl {
#root .gameScreen .drawIndicator:has(.indicatorClaimButton){min-height:92px!important;top:-102px!important;overflow:visible!important}
#root .gameScreen .indicatorClaimButton{display:grid!important;place-items:center!important;box-sizing:border-box!important;min-width:48px!important;min-height:30px!important;width:auto!important;height:30px!important;padding:3px 6px!important;font:800 11px/1 system-ui!important;background:#e7c36e!important;color:#14241c!important;border:1px solid #fff0b0!important;border-radius:5px!important;pointer-events:auto!important;cursor:pointer!important;touch-action:manipulation!important}
}

/* Both Okey families: steady red light around the central block for my turn. */
@layer darkMyTurnRedGlow {
#root .gameScreen .centerDeck.myTurnRedGlow::before{content:""!important;display:block!important;position:absolute!important;inset:-4px!important;width:auto!important;height:auto!important;box-sizing:border-box!important;border:2px solid #ff2424!important;border-radius:14px!important;background:transparent!important;box-shadow:0 0 7px 2px #ff2020b3,0 0 19px 5px #ff161666,inset 0 0 5px #ff202066!important;pointer-events:none!important;z-index:3!important;transform:none!important;animation:none!important}
}

@layer darkRackTurnLight {
#root .gameScreen .rackBoardShell.myRackTurnGlow::after{content:""!important;display:block!important;position:absolute!important;inset:-4px!important;width:auto!important;height:auto!important;box-sizing:border-box!important;border:3px solid #ff2424!important;border-radius:12px!important;background:transparent!important;box-shadow:0 0 8px 2px #ff1818cc,0 0 22px 5px #ff181866,inset 0 0 7px #ff181866!important;pointer-events:none!important;z-index:25!important;transform:none!important;animation:none!important}
}

@media(min-width:761px){#root .richChat .chatMediaPicker .chatMediaGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important}#root .richChat .chatMediaPicker .chatMediaCell>button{padding:1px!important;min-height:60px!important;border-radius:5px!important}#root .richChat .chatMediaPicker .chatMediaCell img{height:58px!important;object-fit:contain!important}}

/* Player GIF panel follows the catalog height instead of reserving 440px. */
html body #root#root#root#root .richChat .emojiPicker.chatMediaPicker:not(.chatMediaManager){
 height:auto!important;min-height:0!important;max-height:65vh!important;max-height:65dvh!important;
 display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
 padding-bottom:10px!important;overflow:hidden!important;
}
html body #root#root#root#root .richChat .emojiPicker.chatMediaPicker:not(.chatMediaManager) .chatMediaGrid{
 flex:0 1 auto!important;height:auto!important;min-height:0!important;
 align-content:start!important;overflow-y:auto!important;overscroll-behavior:contain!important;
}

/* Test QA 2026-10-26: keep private chat tabs scrollable inside the toolbar,
   and account for the recipient select's side margins in its width. */
html body #root#root#root#root#root#root .richChat .socialToolBar .chatTabs{
 box-sizing:border-box!important;min-width:0!important;max-width:100%!important;
 overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;
}
html body #root#root#root#root#root#root .richChat .privateRecipient{
 box-sizing:border-box!important;width:calc(100% - 20px)!important;
 max-width:calc(100% - 20px)!important;margin:10px!important;
}