/* ==========================================================================
   The panel inside a Telegram Mini App.

   Scoped entirely to html.in-telegram, which partner-tgauth.js sets only when
   Telegram actually handed the page an initData. Nothing here can reach the
   panel in a normal browser.

   Three things are different inside Telegram and none of them are "a narrow
   screen", which the panel already handles well:

   1. 100vh is a lie. The client draws its own header and the sheet can be
      half-height, so the usable area is Telegram's viewport height — and it
      changes as the user drags the sheet. Every fixed 100vh calculation
      overflows or leaves dead space.
   2. There is no browser chrome to anchor against, so elements positioned
      against the top of the window sit under Telegram's header instead.
   3. It is reached by thumb on a short screen, so anything that was merely
      tight on a phone becomes unusable.
   ========================================================================== */

html.in-telegram,
html.in-telegram body {
  /* --tg-vh is written by partner-tgauth.js from viewportStableHeight and
     updated on every viewportChanged, because the CSS variable Telegram
     provides is not present on older clients. */
  height: var(--tg-vh, 100vh);
  min-height: 0;
  overflow: hidden;
}

html.in-telegram #app {
  min-height: 0;
  height: var(--tg-vh, 100vh);
}

html.in-telegram .main-wrapper {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* The one scrolling surface. With the shell fixed to the viewport, this is what
   moves — which is also what stops Telegram interpreting a content scroll as a
   drag on the sheet and closing the app. */
html.in-telegram .content-pane {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 10px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Telegram draws the title; a second sticky bar underneath wastes a fifth of a
   short screen. */
html.in-telegram .top-bar {
  position: static;
  min-height: 46px;
  padding: 0 10px;
}

/* Nothing may stick.
 *
 * .pm-tab-rail carries `position: sticky; top: 90px` as an INLINE style in
 * index.html — 90px is the height of the sticky top bar it was meant to sit
 * below. Two things here break that: the top bar is no longer sticky, and
 * .content-pane is now the scrolling container, so `sticky` resolves against it
 * instead of the page. The rail ends up parked over the middle of the content,
 * which is the overlap that appears while scrolling the Players screen.
 *
 * !important because it is fighting an inline style; a media query cannot. */
html.in-telegram .pm-tab-rail,
html.in-telegram .site-hub-nav,
html.in-telegram .pm-cs-table thead th {
  position: static !important;
  top: auto !important;
}

/* The notification dropdown is a fixed-width panel anchored to the bell; at
   420px it runs off the right edge. Make it a full-width sheet instead, and
   bound it to the Telegram viewport so its own list scrolls rather than the
   page growing behind it. */
html.in-telegram #pm-notification-dropdown {
  position: fixed !important;
  left: 8px !important;
  right: 8px !important;
  top: 56px !important;
  width: auto !important;
  max-width: none !important;
  max-height: calc(var(--tg-vh, 100vh) - 76px) !important;
  overflow-y: auto;
}

/* Every height computed against the window has to be re-based, or the chat and
   the tables run off the bottom of the sheet. The min-heights are the worse
   half: 520px of forced chat in a ~600px viewport leaves nothing for the
   composer. */
html.in-telegram .chat-global-shell,
html.in-telegram .chat-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

html.in-telegram .chat-messages,
html.in-telegram .chat-thread-list,
html.in-telegram .pm-ud-table-scroll,
html.in-telegram .table-container {
  max-height: none !important;
}

/* The floating helper starts at top:152px on the right, which on a phone-sized
   sheet lands squarely on the first row of whatever table is showing — visible
   in the screenshot sitting on top of a player's name. Tuck it into the corner
   and shrink it; it is draggable, so this is only where it begins. */
html.in-telegram .pm-help-fab,
html.in-telegram .help-fab,
html.in-telegram [class*="help-fab"] {
  top: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  right: 12px !important;
  width: 38px !important;
  height: 38px !important;
  opacity: 0.85;
}

/* Same reasoning for the notification bell, which overlapped the same row. */
html.in-telegram #pm-notification-wrapper {
  position: static;
}

/* Toasts belong above the thumb, not under it. */
html.in-telegram #pm-toast-container {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  right: 10px !important;
  left: 10px !important;
  max-width: none !important;
}

/* The sound bell sits bottom-right where Telegram puts its own controls.
   !important only here: partner-sounds.js injects its own stylesheet at runtime
   and re-creates this button, so the relative order of the two sheets is not
   something this file can depend on. Everywhere else plain specificity is
   enough and is left alone. */
html.in-telegram .pm-snd-btn {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  right: 12px !important;
  width: 38px !important;
  height: 38px !important;
}

/* The Players activity bar.
 *
 * #pm-users-activity is the real id — the earlier attempt here guessed at class
 * names like .pm-filter-chips that exist nowhere, so it styled nothing while
 * looking plausible. This bar is built in JS and inserted with insertBefore
 * ahead of the .glass-panel it belongs to, which is why the chips sit flush
 * against the screen edge while the search box above them is inset: they are
 * outside the card and inherit none of its padding.
 *
 * Its inner container carries inline styles, so overriding them needs
 * !important — nothing else here does. */
html.in-telegram #pm-users-activity {
  padding: 0 12px;
  margin-bottom: 10px;
}

/* One scrolling strip rather than five wrapped rows, which is most of a short
   screen spent on filters. */
html.in-telegram #pm-users-activity > div {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px !important;
  padding-bottom: 2px;
}
html.in-telegram #pm-users-activity > div::-webkit-scrollbar { display: none; }
html.in-telegram #pm-users-activity button { flex: 0 0 auto; margin-right: 0 !important; }

/* The 1px decorative divider between the two chip groups strands itself on a
   wrapped row and reads as a stray mark. */
html.in-telegram #pm-users-activity > div > span[style*="width:1px"] { display: none !important; }

/* "Online now: 0 · placed at least one bet" is pushed right with margin-left:auto,
   which on a scrolling strip drags it off the end. Give it its own line. */
html.in-telegram #pm-users-activity > div > span[style*="margin-left:auto"] {
  margin-left: 0 !important;
  flex: 0 0 auto;
  padding-left: 4px;
}

/* A table that refuses to reflow must scroll on its own rather than be clipped
   by the body's overflow:hidden — that is what cut a player's name off with no
   way to reach the rest of the row. */
html.in-telegram table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
html.in-telegram table thead,
html.in-telegram table tbody { display: table; width: 100%; }

/* Modals get the sheet, not a floating card: there is no room around one. */
html.in-telegram .modal-overlay {
  padding: 0 !important;
  align-items: flex-end !important;
}
html.in-telegram .modal-overlay > * {
  width: 100% !important;
  max-width: 100% !important;
  max-height: calc(var(--tg-vh, 100vh) - 40px) !important;
  border-radius: 14px 14px 0 0 !important;
  overflow-y: auto !important;
}

/* Section padding is generous for a desktop card and cramped for a 420px sheet;
   the content matters more than the frame here. */
html.in-telegram .section,
html.in-telegram .glass-panel {
  padding: 12px !important;
  border-radius: 10px;
}

html.in-telegram .metrics-grid,
html.in-telegram .metrics-grid-2 {
  gap: 8px !important;
}