/* ==========================================================
   Desktop Shell
   ==========================================================

   These pages were laid out for a ~390px Telegram Mini App viewport. Opened
   in a browser they stretch to the whole window, which is what makes every
   card and row look weirdly wide.

   Above 600px the app is held to one phone-width column, centred on a
   backdrop, and everything `position: fixed` is aligned to that column
   rather than the viewport. Below 600px nothing here applies, so a phone and
   Telegram Desktop's own webview render exactly as they did before.

   Load this LAST — it deliberately overrides component rules such as
   .nav-bottom's `left: 0; right: 0`, and a media query adds no specificity.
   ========================================================== */

@media (min-width: 600px) {
  :root {
    /* Matches .modal's existing max-width, the layout's natural column. */
    --app-width: 480px;
  }

  body {
    background: var(--tg-theme-secondary-bg-color);
  }

  #app {
    width: 100%;
    max-width: var(--app-width);
    margin-inline: auto;
    /* Separated from the backdrop by colour alone — a hairline ring or drop
       shadow here reads as a cheap floating card. */
    background: var(--tg-theme-bg-color);
  }

  .nav-bottom {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-width);
  }

  .toast-container {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: calc(var(--app-width) - 2 * var(--space-lg));
  }

  /* Pin the badge to the column's top-right corner, not the window's. */
  .signed-in-badge {
    left: 50%;
    right: auto;
    transform: translateX(calc(var(--app-width) / 2 - 100% - var(--space-sm)));
    max-width: calc(var(--app-width) - 2 * var(--space-sm));
  }
}