/* Mini-app boot states + Telegram theme integration. */

/* Initial loading splash — keeps the page from flashing real content
   before MiniAppShell decides if we're inside Telegram AND, if so,
   whether to send the user straight to their owned listing. */
.tm-mini-shell-loading {
  position: fixed;
  inset: 0;
  background: var(--bg-color, #17212b);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #fff;
}
.tm-mini-shell-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent-color, #4eb2ff);
  border-radius: 50%;
  animation: tm-mini-shell-spin 0.8s linear infinite;
}
.tm-mini-shell-spinner-text {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-color, #8794a1);
}
@keyframes tm-mini-shell-spin {
  to { transform: rotate(360deg); }
}

/* "Open in Telegram" wall when accessed outside the mini-app context. */
.tm-mini-shell-wall {
  position: fixed;
  inset: 0;
  background: var(--bg-color, #17212b);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
  color: #fff;
}
.tm-mini-shell-wall-inner {
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.tm-mini-shell-wall-inner h1 {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 12px;
}
.tm-mini-shell-wall-inner p {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-color, #8794a1);
  margin: 0 0 24px;
}

/* Header layout: force a single row at every width, vertically centered.
   Without this, on narrow viewports the pill + Connect TON were sitting
   in a band BELOW the logo instead of on the same row. */
.tm-header {
  align-items: center;
  flex-wrap: nowrap;
}

/* Connected-Telegram pill in the header. We need a flex row only on the
   *visible* actions container (the other one is hidden by display:none
   !important in auction.css's media queries) — overriding .tm-header-actions
   globally with !important would defeat those hide rules and cause the
   hidden container to render too, pushing the hamburger off-screen. */
.tm-header-actions-wide,
.tm-header-actions-thin {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  flex-shrink: 0;
}
.tm-header-actions-wide {
  display: flex;
}
@media (max-width: 767px) {
  /* At narrow widths only the -thin variant is visible — give it flex too
     so the pill + Connect TON sit inline instead of stacking. */
  .tm-header-actions-thin {
    display: flex;
  }
  /* The tabs row is absolutely positioned below the header (top: 48px),
     so the actual flex row inside .tm-header only needs space for logo
     + actions + hamburger — collapse the body so it doesn't reserve
     width that could push items to wrap. */
  .tm-header-body {
    flex-grow: 0;
    min-width: 0;
  }
}
.tm-tg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(78, 178, 255, 0.12);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  max-width: 160px;
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
}
@media (max-width: 767px) {
  /* Telegram-narrow: tighten the pill so it doesn't crowd Connect TON. */
  .tm-tg-pill {
    max-width: 110px;
    padding: 4px 8px;
    font-size: 12px;
  }
  /* And let Connect TON shrink if needed too. */
  .tm-header-actions-thin .tm-header-button {
    flex-shrink: 0;
  }
}
.tm-tg-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5aec8c;
  flex-shrink: 0;
}
.tm-tg-pill-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Honor Telegram's theme params when present. We map them onto the
   existing Fragment CSS variables so the rest of the app picks them up
   without per-component changes. */
:root[data-tg-scheme="light"] {
  --bg-color: var(--tg-bg, #fff);
  --header-color: var(--tg-text, #000);
  --text-color: var(--tg-hint, #707579);
  --accent-color: var(--tg-link, #2481cc);
  --btn-primary-bg-color: var(--tg-button, #2481cc);
  --btn-primary-color: var(--tg-button-text, #fff);
  --field-bg-color: var(--tg-secondary-bg, #f4f4f5);
  --table-bg-color: var(--tg-secondary-bg, #f4f4f5);
}