/* Geometry depends only on viewport and explicit UI state, never message content. */
body.has-chat-dock { padding-bottom: 68px; }
#mobilePageScroll, #mobileChatBar { display: contents; }
#chatHome { position: relative; min-width: 0; min-height: 0; }
#chatHome > .site-chat { position: absolute; inset: 0; width: 100%; }
#streamPanel.chat-portable .stream-content { grid-template-columns: minmax(0, 1fr); }
#streamPanel.chat-portable #chatHome { display: none; }
#chatLauncher { position: fixed; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 44; width: 116px; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid var(--line); color: var(--paper); background: var(--panel); font: 600 16px var(--body-type, sans-serif); cursor: pointer; }
#chatUnread { width: 3ch; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
#chatLauncher[hidden], #chatRail[hidden], #chatClose[hidden] { display: none !important; }
#chatRail { position: fixed; z-index: 30; right: 12px; top: 186px; width: 320px; height: min(600px, calc(100dvh - 202px)); }
#chatRail > .site-chat, #chatDialog > .site-chat { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border: 1px solid var(--line); }
#persistentChat { overflow-anchor: none; grid-template-rows: 48px minmax(0, 1fr) 44px 38px; }
#persistentChat .site-chat-heading { gap: 6px; padding: 6px 10px; }
#persistentChat .site-chat-heading strong { font-size: 16px; white-space: nowrap; }
#persistentChat #chatStatus { margin-left: auto; width: 11ch; flex: 0 0 11ch; text-align: right; overflow: hidden; }
#persistentChat .chat-notice { overflow: auto; margin: 0; }
#persistentChat .chat-messages { overscroll-behavior: contain; overflow-anchor: none; }
#chatClose { flex: 0 0 auto; min-height: 36px; border: 0; padding: 6px; color: var(--paper); background: transparent; font: 600 12px var(--body-type, sans-serif); cursor: pointer; }
#chatLauncher:focus-visible, #chatClose:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
#chatDialog { position: fixed; inset: auto 12px calc(var(--chat-view-bottom, 0px) + 12px) auto; margin: 0; padding: 0; width: min(360px, calc(100vw - 24px)); height: min(620px, calc(var(--chat-view-height, 100dvh) - 24px)); max-width: none; max-height: none; border: 0; color: var(--paper); background: var(--panel); overflow: hidden; }
#chatDialog { z-index: 80; }
body.has-betting-dock[data-bet-dock-layout="rail"] #chatLauncher { right: 68px; }
@media (max-width: 900px) { #chatHome { height: 340px; } }
@media (max-width: 700px) {
  html:has(body.has-chat-dock) { overflow: hidden; }
  body.has-chat-dock { --mobile-chat-safe: env(safe-area-inset-bottom, 0px); --mobile-chat-height: calc(56px + var(--mobile-chat-safe)); min-height: 0; height: var(--mobile-page-height, 100dvh); overflow: hidden; padding-bottom: 0; }
  body.has-chat-dock.has-betting-dock[data-bet-dock-layout="bottom"] { --mobile-chat-safe: 0px; padding-bottom: 0; }
  body.has-chat-dock #mobilePageScroll { display: block; height: max(0px, calc(var(--mobile-page-height, 100dvh) - var(--mobile-chat-height) - var(--mobile-ticket-height, 0px))); overflow-y: auto; overflow-x: clip; overscroll-behavior-y: contain; scroll-padding-block: 20px; }
  #mobileChatBar { display: flex; align-items: flex-start; position: fixed; inset: auto 0 var(--mobile-ticket-height, 0px); height: var(--mobile-chat-height); padding: 6px 16px calc(6px + var(--mobile-chat-safe)); border-top: 1px solid var(--line); background: var(--panel); z-index: 44; }
  #mobileChatBar #chatLauncher { position: static; width: 100%; height: 44px; padding-inline: 4px; border: 0; background: transparent; }
  #mobileChatBar #chatLauncher:not(:disabled):hover { color: var(--gold); }
  body.has-chat-dock .vip-theme-preview-bar { bottom: calc(var(--mobile-chat-height) + var(--mobile-ticket-height, 0px) + 8px); width: min(420px, calc(100vw - 24px)); }
  #chatDialog { right: 0; bottom: var(--chat-view-bottom, 0px); width: 100%; height: min(680px, calc(var(--chat-view-height, 100dvh) * .82)); }
  #chatDialog .chat-form input { font-size: 16px; }
}
@media (max-height: 650px) { #chatRail { top: 12px; height: calc(100dvh - 24px); } #chatDialog { height: calc(var(--chat-view-height, 100dvh) - 12px); } }