/* Chat column  -  fixed left rail; main content stays in a dedicated grid column */

:root {
  --chat-column-width: clamp(260px, 32vw, 400px);
}

@media (max-width: 900px) {
  :root {
    --chat-column-width: clamp(240px, 36vw, 320px);
  }
}

.site-chat-stack {
  display: block;
  flex-shrink: 0;
  width: var(--chat-column-width);
  min-width: var(--chat-column-width);
  max-width: var(--chat-column-width);
  min-height: calc(100dvh - var(--navbar-height));
}

.chat-popup-backdrop,
.chat-mobile-fab {
  display: none !important;
}

.site-chat-column {
  display: flex;
  position: fixed;
  left: 0;
  top: var(--navbar-height);
  width: var(--chat-column-width) !important;
  max-width: var(--chat-column-width) !important;
  height: calc(100dvh - var(--navbar-height));
  max-height: calc(100dvh - var(--navbar-height));
  min-width: 0;
  transform: none !important;
  box-shadow: none;
  z-index: 50;
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  box-sizing: border-box;
}

.site-chat-inner {
  min-height: 0;
  height: 100%;
}

#chat-messages {
  flex: 1 1 auto;
  min-height: 0;
}

.chat-empty {
  padding: 16px;
  font-size: 0.875rem;
  color: #64748b;
  text-align: center;
}

.chat-panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 0 16px;
  flex-shrink: 0;
}

.chat-panel-top__info {
  flex: 1;
  min-width: 0;
}

.chat-panel-close {
  display: none !important;
}

/* Two-column shell: reserved chat rail + scrollable main (nothing under fixed chat) */
.site-page-shell.flex:has(#site-chat-column),
.site-page-shell.flex:has(#site-chat-mount:not(:empty)) {
  display: grid !important;
  grid-template-columns: var(--chat-column-width) minmax(0, 1fr);
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.site-page-shell.flex:has(#site-chat-column) > #site-chat-mount,
.site-page-shell.flex:has(#site-chat-column) > .site-chat-stack,
.site-page-shell.flex:has(#site-chat-mount:not(:empty)) > #site-chat-mount {
  grid-column: 1;
  grid-row: 1;
  width: var(--chat-column-width);
  min-width: var(--chat-column-width);
  max-width: var(--chat-column-width);
}

.site-page-shell.flex:has(#site-chat-column) > main,
.site-page-shell.flex:has(#site-chat-mount:not(:empty)) > main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

#site-chat-mount {
  flex: 0 0 var(--chat-column-width);
  width: var(--chat-column-width);
  min-width: var(--chat-column-width);
  max-width: var(--chat-column-width);
}

.site-page-shell.flex > main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--navbar-height));
}

/* Footer lives in main  -  keep full width of content column */
.site-page-shell.flex > main #site-footer-mount,
.site-page-shell.flex > main .site-footer {
  width: 100%;
  max-width: 100%;
}

/* Legacy: footer appended to body still clears the chat rail */
body:has(#site-chat-column) > #site-footer-mount,
body:has(#site-chat-column) > .site-footer {
  margin-left: var(--chat-column-width);
  width: calc(100% - var(--chat-column-width));
  box-sizing: border-box;
}

/* ---------- Phones: no fixed chat rail; content gets the full width, chat opens as a popup ----------
   Previously the 240px rail stayed on screen at 390px wide and games were squeezed into ~150px.
   site-chat.js already wires #chat-mobile-fab / #chat-popup-backdrop / .chat-popup--open. */
@media (max-width: 767px) {
  :root {
    --chat-column-width: 0px;
  }
  .site-page-shell.flex:has(#site-chat-column),
  .site-page-shell.flex:has(#site-chat-mount:not(:empty)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-page-shell.flex:has(#site-chat-column) > main,
  .site-page-shell.flex:has(#site-chat-mount:not(:empty)) > main {
    grid-column: 1;
  }
  #site-chat-mount,
  #site-chat-mount:empty,
  .site-chat-stack {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
  }
  /* Lift the (zero-width) chat mount above <main>, which is its own layer (view-transition-name),
     so the fixed Chat button / popup aren't painted underneath the game. */
  #site-chat-mount {
    position: relative;
    z-index: 155;
  }
  .site-chat-column {
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 160;
    border-right: 0;
    transform: translateY(100%) !important;
    visibility: hidden;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
  }
  .site-chat-column.chat-popup--open {
    transform: none !important;
    visibility: visible;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .chat-mobile-fab {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 155;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--tb-accent, rgb(43 99 244));
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  }
  .chat-mobile-fab .fab-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(32 208 149);
  }
  .chat-popup-backdrop:not([hidden]) {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 158;
    background: rgba(4, 6, 20, 0.6);
  }
  /* Bottom sheet: leaves the top of the page visible so tapping the backdrop closes it. */
  body .site-chat-column {
    top: auto;
    bottom: 0;
    height: min(78dvh, calc(100dvh - var(--navbar-height, 56px) - 48px));
    max-height: none;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
  }
  .chat-panel-close {
    display: inline-flex !important;
  }
  body:has(#site-chat-column) > #site-footer-mount,
  body:has(#site-chat-column) > .site-footer {
    margin-left: 0;
    width: 100%;
  }
}