/**
 * Layout for DexScreener <nav> + #root.
 * Desktop (≥62em): fixed left sidebar. Mobile: full-width top bar.
 */

:root {
  --ds-nav-width: 210px;
  --ds-nav-width-collapsed: 64px;
  --ds-nav-mobile-height: 0px; /* updated by ds-sidebar.js */
}

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* —— Desktop: left sidebar —— */
@media screen and (min-width: 62em) {
  html {
    --ds-nav-offset: var(--ds-nav-width);
  }

  html[data-ds-nav-collapsed] {
    --ds-nav-offset: var(--ds-nav-width-collapsed);
  }

  body {
    padding-left: var(--ds-nav-offset) !important;
    padding-top: 0 !important;
    transition: padding-left 0.2s ease;
  }

  nav.custom-37joim,
  nav.custom-174tzon {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    z-index: 1000 !important;
    width: var(--ds-nav-width) !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: 100dvh !important;
    box-sizing: border-box;
    transform: none !important;
  }

  html[data-ds-nav-collapsed] nav.custom-37joim,
  html[data-ds-nav-collapsed] nav.custom-174tzon {
    width: var(--ds-nav-width-collapsed) !important;
  }
}

/* —— Mobile: top nav bar (DexScreener native width/height) —— */
@media screen and (max-width: 61.98em) {
  html,
  html[data-ds-nav-collapsed] {
    --ds-nav-offset: 0px;
  }

  body {
    padding-left: 0 !important;
    padding-top: var(--ds-nav-mobile-height) !important;
    transition: padding-top 0.2s ease;
  }

  nav.custom-37joim,
  nav.custom-174tzon {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: min(72dvh, 560px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1000 !important;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateY(0);
    transition: transform 0.2s ease, max-height 0.2s ease;
  }

  html[data-ds-nav-collapsed] nav.custom-37joim,
  html[data-ds-nav-collapsed] nav.custom-174tzon {
    transform: translateY(-100%);
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
  }

  html[data-ds-nav-collapsed] {
    --ds-nav-mobile-height: 0px !important;
  }
}

#root {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 61.98em) {
  #root {
    min-height: calc(100dvh - var(--ds-nav-mobile-height));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}