/**
 * GT Mobile Shell — wead.live phone layout owner (≤720px)
 * Collapses 3 edge rails into one Tools FAB + sheet.
 * Desktop (≥721px) untouched.
 */

@media (max-width: 720px) {
  /* —— Hide legacy edge rails (tools moved to FAB) —— */
  #wead-analyst-strip,
  #wead-analyst-strip.paid,
  #wead-risk-chip,
  #wead-alerts-bell {
    display: none !important;
    pointer-events: none !important;
  }

  /* Dense header chrome on phone — keep lang/auth only */
  .seoai-checker-trigger,
  .seoai-checker-trigger *,
  .header-live-clock,
  .header-live-clock-row,
  .header-live-clock-tz {
    display: none !important;
  }

  /* Beat header-align specificity so SEOAI never shows as broken Ai square */
  #root header .seoai-checker-trigger,
  #root header .seoai-checker-trigger::before,
  #root header .seoai-checker-trigger::after {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  /* Keep logo inside the phone header */
  #root > div > header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 {
    padding-left: 0.2rem !important;
    margin-left: 0 !important;
  }
  #root > div > header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 img {
    margin-left: 0 !important;
    height: 1.55rem !important;
  }


  /* —— Tools FAB —— sit under VIEW/nav (not over Brief / Asset Class / music) —— */
  #gt-tools-fab {
    position: fixed;
    top: var(--gt-tools-fab-top, max(96px, calc(env(safe-area-inset-top, 0px) + 84px)));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: auto;
    left: auto;
    z-index: 9200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 40px;
    min-width: 40px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 255, 136, 0.45);
    background: rgba(8, 14, 18, 0.92);
    color: #e8fff3;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #gt-tools-fab .gt-tools-fab-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff4d4d;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #gt-tools-fab[hidden],
  body.gt-sheet-open #gt-tools-fab {
    display: none !important;
  }

  /* —— Tools sheet —— */
  #gt-tools-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9210;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  #gt-tools-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  #gt-tools-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9220;
    max-height: min(70vh, 520px);
    display: flex;
    flex-direction: column;
    background: #0b1218;
    border: 1px solid rgba(0, 255, 136, 0.22);
    border-bottom: none;
    border-radius: 18px 18px 0 0;
    transform: translateY(105%);
    transition: transform 0.22s ease;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
  }

  #gt-tools-sheet.open {
    transform: translateY(0);
  }

  #gt-tools-sheet .gt-tools-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    margin: 10px auto 6px;
  }

  #gt-tools-sheet .gt-tools-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  #gt-tools-sheet .gt-tools-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #f4f1ea;
    letter-spacing: 0.02em;
  }

  #gt-tools-sheet .gt-tools-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(244, 241, 234, 0.7);
    font-size: 1.1rem;
    cursor: pointer;
  }

  #gt-tools-sheet .gt-tools-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 1rem 0.5rem;
    overflow-y: auto;
  }

  #gt-tools-sheet .gt-tools-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #f4f1ea;
    cursor: pointer;
    font-family: Inter, system-ui, sans-serif;
  }

  #gt-tools-sheet .gt-tools-item:active {
    background: rgba(0, 255, 136, 0.08);
    border-color: rgba(0, 255, 136, 0.35);
  }

  #gt-tools-sheet .gt-tools-item .gt-tools-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }

  #gt-tools-sheet .gt-tools-item[data-tool="alerts"] .gt-tools-ico {
    background: rgba(61, 187, 255, 0.15);
    color: #3dbbff;
  }

  #gt-tools-sheet .gt-tools-item[data-tool="risk"] .gt-tools-ico {
    background: rgba(0, 255, 136, 0.12);
    color: #00ff88;
  }

  #gt-tools-sheet .gt-tools-item[data-tool="analyst"] .gt-tools-ico {
    background: rgba(255, 176, 32, 0.14);
    color: #ffb020;
  }

  #gt-tools-sheet .gt-tools-meta {
    flex: 1;
    min-width: 0;
  }

  #gt-tools-sheet .gt-tools-meta strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
  }

  #gt-tools-sheet .gt-tools-meta span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: rgba(244, 241, 234, 0.55);
  }

  #gt-tools-sheet .gt-tools-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 77, 77, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #gt-tools-sheet .gt-tools-count:empty {
    display: none;
  }

  /* When native risk/alerts panels open, keep FAB/tools out of the way */
  body.gt-panel-open #gt-tools-fab,
  body.gt-panel-open #gt-tools-sheet,
  body.gt-panel-open #gt-tools-backdrop {
    display: none !important;
  }

  /* —— Compact header: brand + utilities only (kill 300px stats wrap) —— */
  #root > div > header .flex.flex-wrap.items-stretch {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.4rem 0.55rem !important;
    min-height: 0 !important;
  }

  /* Hide metric cards (TOTAL FLOW, CORRIDORS, CRYPTO, etc.) */
  #root > div > header .flex.flex-wrap.items-stretch > .px-4.py-2 {
    display: none !important;
  }

  /* Keep brand block */
  #root > div > header .flex.flex-wrap.items-stretch > .flex.items-center.gap-3 {
    display: flex !important;
    border: none !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: 0.25rem 0.35rem !important;
  }

  /* Keep utility cluster (clock / lang / auth) */
  #root > div > header .flex.flex-wrap.items-stretch > .flex.items-center.gap-2.ml-auto,
  #root > div > header .flex.flex-wrap.items-stretch > .ml-auto {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 58%;
    padding: 0 !important;
    gap: 0.3rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #root > div > header .header-live-clock {
    display: none !important;
  }

  #root > div > header {
    overflow: hidden !important;
  }

  /* —— Scrollable phone layout (don't cram map+brief+music into one screen) —— */
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  #root {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  #root > div {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  #root > div > div.h-full,
  #root main,
  #root main > div {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Map stage — gtm19: non-map blocks only; .map-interactive gets square face */
  #root main .relative.w-full.h-full:not(.map-interactive),
  #root main .flex-1.min-h-0:not(.map-interactive) {
    min-height: min(52vh, 420px) !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Browse expands/collapses in document flow under the map (not an overlay) */
  #root main .lg\:hidden.shrink-0,
  #root main .gt-mobile-browse-panel {
    position: relative !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
  }

  /* Keep Pull up hint visible + tappable on every tab */
  #root main .gt-pull-up-hint {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
  }

  /* gtm20/gtm21: Browse Show/Hide grows in document flow; PAGE scrolls to end. */
  #root main .lg\:hidden.shrink-0 .max-h-\[34vh\],
  #root main .lg\:hidden.shrink-0 .max-h-\[34vh\] .overflow-y-auto,
  #root main .lg\:hidden.shrink-0 .overflow-y-auto,
  #root main .lg\:hidden.shrink-0 .flex-1.overflow-y-auto {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Clear fixed music/brief dock so last Browse rows are reachable */
  #root main .lg\:hidden.shrink-0 {
    padding-bottom: calc(var(--gt-persist-chrome-h, 110px) + 48px) !important;
  }

  /* Brief + music stay in document flow under Asset Class (survive Browse Show/Hide) */
  .gt-brief-footer-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    z-index: 40 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
    visibility: visible !important;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  }

  .gt-brief-footer {
    width: 100% !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1;
    padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Always show music under Brief — never hide via blanket sc-player rules */
  .gt-brief-footer .sc-player,
  .gt-brief-footer-wrap .sc-player,
  #root .gt-brief-footer .sc-player {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  .gt-brief-footer .sc-player__track {
    max-width: none !important;
    flex: 1 1 auto;
  }

  /* Persistent dock owns footer — do not force React Brief/player visible */
  body.gt-persist-chrome-on .gt-brief-footer-wrap,
  body.gt-persist-chrome-on .gt-brief-footer,
  body.gt-persist-chrome-on .gt-brief-footer .sc-player,
  body.gt-persist-chrome-on .gt-brief-footer-wrap .sc-player,
  body.gt-persist-chrome-on #root .gt-brief-footer .sc-player {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }

  #root > div {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Tools FAB stays top-right (clears pinned Brief + music + Asset Class) */
  #gt-tools-fab {
    top: var(--gt-tools-fab-top, max(96px, calc(env(safe-area-inset-top, 0px) + 84px))) !important;
    bottom: auto !important;
  }

  /* —— Main tabs → single dropdown (hide horizontal strip) —— */
  nav[aria-label="Global data views"].gt-main-tabs-compact {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0.4rem 0.55rem 0.55rem !important;
    position: relative !important;
  }

  #gt-main-tab-dd {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    z-index: 2;
  }

  #gt-main-tab-dd .gt-main-tab-dd-label {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232, 255, 243, 0.55);
    font-family: Inter, system-ui, sans-serif;
  }

  #gt-main-tab-select {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 0.45rem 2rem 0.45rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(61, 187, 255, 0.4);
    background: rgba(8, 14, 18, 0.95)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233dbbff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
      no-repeat right 0.75rem center;
    background-size: 12px 8px;
    color: #e8fff3;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  #gt-main-tab-select:focus {
    outline: none;
    border-color: rgba(61, 187, 255, 0.75);
    box-shadow: 0 0 0 2px rgba(61, 187, 255, 0.2);
  }

  /* Park original tab strip off-screen (still clickable via JS) */
  nav[aria-label="Global data views"].gt-main-tabs-compact > *:not(#gt-main-tab-dd) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* —— Weather Maps: chip when collapsed, panel when open —— */
  .weather-layer-menu.gt-weather-collapsible {
    z-index: 40 !important;
  }

  .weather-layer-menu.gt-weather-collapsible .gt-weather-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
  }

  .weather-layer-menu.gt-weather-collapsible .gt-weather-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232, 255, 243, 0.85);
    font-family: Inter, system-ui, sans-serif;
  }

  .weather-layer-menu.gt-weather-collapsible .gt-weather-toggle {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(61, 187, 255, 0.45);
    background: rgba(61, 187, 255, 0.12);
    color: #9fd9ff;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Hide SPA's own WEATHER MAPS heading — we inject our bar */
  .weather-layer-menu.gt-weather-collapsible > .weather-layer-menu__heading,
  .weather-layer-menu.gt-weather-collapsible > h2,
  .weather-layer-menu.gt-weather-collapsible > h3 {
    display: none !important;
  }

  .weather-layer-menu.gt-weather-collapsible:not(.gt-weather-open) {
    inset: auto 10px max(72px, calc(56px + env(safe-area-inset-bottom, 0px))) auto !important;
    left: auto !important;
    right: 10px !important;
    bottom: max(72px, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
    top: auto !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: none !important;
    padding: 0.45rem 0.55rem !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  }

  .weather-layer-menu.gt-weather-collapsible:not(.gt-weather-open) .weather-layer-menu__list,
  .weather-layer-menu.gt-weather-collapsible:not(.gt-weather-open) .weather-layer-menu__footer,
  .weather-layer-menu.gt-weather-collapsible:not(.gt-weather-open) > *:not(.gt-weather-bar) {
    display: none !important;
  }

  .weather-layer-menu.gt-weather-collapsible.gt-weather-open {
    inset: auto 8px max(72px, calc(56px + env(safe-area-inset-bottom, 0px))) 8px !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(72px, calc(56px + env(safe-area-inset-bottom, 0px))) !important;
    top: auto !important;
    width: auto !important;
    /* gtm23: weather layers expand with content; page scroll, not 320px trap */
    max-height: none !important;
    overflow: visible !important;
    padding: 0.55rem 0.65rem 0.7rem !important;
  }

  .weather-layer-menu.gt-weather-collapsible.gt-weather-open .gt-weather-bar {
    margin-bottom: 0.45rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* Footer music under Brief — all viewports */
.gt-brief-footer .sc-player {
  display: flex !important;
  width: 100%;
  max-width: 100%;
}

.gt-brief-footer-wrap {
  width: 100%;
}

/* Desktop: never show mobile tools chrome / tab dropdown */
@media (min-width: 721px) {
  #gt-tools-fab,
  #gt-tools-sheet,
  #gt-tools-backdrop,
  #gt-main-tab-dd {
    display: none !important;
  }

  .weather-layer-menu .gt-weather-bar {
    display: none !important;
  }
}

/* Instant View menu — no native <select> / iOS Done bar */
@media (max-width: 720px) {
  #gt-main-tab-dd {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    z-index: 8800;
  }

  #gt-main-tab-select {
    display: none !important;
  }

  #gt-main-tab-btn.gt-main-tab-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 0.45rem 2rem 0.45rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(61, 187, 255, 0.4);
    background: rgba(8, 14, 18, 0.95)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%233dbbff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E")
      no-repeat right 0.75rem center;
    background-size: 12px 8px;
    color: #e8fff3;
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #gt-main-tab-btn.gt-main-tab-btn[aria-expanded="true"] {
    border-color: rgba(0, 255, 136, 0.55);
  }

  #gt-main-tab-menu.gt-main-tab-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: min(62vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 8900;
    margin: 0;
    padding: 0.35rem;
    border-radius: 14px;
    border: 1px solid rgba(61, 187, 255, 0.35);
    background: rgba(8, 14, 18, 0.98);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  }

  #gt-main-tab-menu[hidden] {
    display: none !important;
  }

  .gt-main-tab-opt {
    display: block;
    width: 100%;
    text-align: left;
    min-height: 44px;
    padding: 0.65rem 0.75rem;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(232, 255, 243, 0.88);
    font-family: Inter, system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .gt-main-tab-opt:active,
  .gt-main-tab-opt:hover {
    background: rgba(61, 187, 255, 0.12);
  }

  .gt-main-tab-opt.is-active {
    background: rgba(0, 255, 136, 0.12);
    color: #00ff88;
  }
}


@media (max-width: 720px) {
  .gt-main-tab-opt[data-kind="topmarkets"] {
    color: #7ec8ff;
  }
  .gt-main-tab-opt[data-kind="topmarkets"].is-active {
    color: #00ff88;
  }
}


/* gtm17: black edge scrollbar on phone (Mini + non-Mini). PC untouched. */
@media (max-width: 820px) {
  html,
  body {
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: #000000 #0a0a0a;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  #root::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    background: #0a0a0a !important;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  #root::-webkit-scrollbar-track,
  *::-webkit-scrollbar-track {
    background: #0a0a0a !important;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  #root::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb {
    background: #000000 !important;
    border-radius: 999px !important;
    border: 1px solid #111111 !important;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  *::-webkit-scrollbar-thumb:hover {
    background: #000000 !important;
  }

  html::-webkit-scrollbar-corner,
  body::-webkit-scrollbar-corner,
  *::-webkit-scrollbar-corner {
    background: #0a0a0a !important;
  }
}


/* gtm18: lock page zoom / rubber-band on phone. Map+globe keep gestures. */
@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    /* gtm20: allow vertical page scroll through expanded Browse / Brief */
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    -ms-touch-action: pan-y !important;
  }

  #root,
  #root > div {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    /* gtm21/gtm22: page (html) is the only vertical scroller */
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  /* Map / globe: app-owned gestures (pinch zoom here, not browser page zoom) */
  .leaflet-container,
  .leaflet-container *,
  .map-interactive,
  .map-interactive *,
  .climate-satellite-view__map,
  .climate-satellite-view__map *,
  .cyclone-map-view__map,
  .cyclone-map-view__map *,
  [class*="globe"],
  [class*="Globe"],
  canvas {
    touch-action: none !important;
    -ms-touch-action: none !important;
  }
}


/* gtm19: mobile map/globe layout */
/* gtm19c canvas square */

@media (max-width: 820px) {
  #root main .map-interactive {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important; /* gtm19h map overflow */
    position: relative !important;
  }

  /* Square globe/map face — prevents stretched Earth */
  #root main .map-interactive > .relative.w-full.h-full.overflow-hidden,
  #root main .map-interactive > .relative.overflow-hidden {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  #root main .map-interactive .scene-container {
    width: 100% !important;
    height: 100% !important;
  }
  #root main .map-interactive canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  #root main .map-interactive.relative.w-full.flex-1.min-h-0 {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Legend + chips sit just under the square globe face (not on top of Earth) */
  #root main .map-interactive > .relative.w-full.h-full.overflow-hidden,
  #root main .map-interactive > .relative.overflow-hidden {
    overflow: visible !important;
    margin-bottom: 0.35rem !important;
  }
  #root main .map-interactive .scene-container {
    overflow: hidden !important;
    border-radius: inherit;
  }


  /* Classic globe.gl badge → left; keep Mapbox badge top-right (avoids zoom collision) */
  #root main .map-interactive .absolute.top-3.right-3:not(.gt-mapbox-badge) {
    top: 0.45rem !important;
    right: auto !important;
    left: 0.45rem !important;
  }
  #root main .map-interactive .gt-mapbox-badge {
    top: 0.45rem !important;
    right: 0.45rem !important;
    left: auto !important;
    font-size: 0.6rem !important;
    padding: 0.2rem 0.4rem !important;
  }

  /* Reserve space under map so legend/trade don't cover Browse */
  #root main .map-interactive {
    padding-bottom: 7.25rem !important;
  }


  /* gtm19i: clone legend under map; hide originals on the globe face */
  #root main .map-interactive .gt-map-legend-source,
  #root main .map-interactive .gt-map-trade-source {
    display: none !important;
  }
  #gt-map-legend-dock {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    width: 100% !important;
    margin: 0.1rem 0 0 !important;
    padding: 0 0.15rem !important;
    box-sizing: border-box !important;
    order: 3;
  }
  #gt-map-legend-dock .gt-map-legend-clone,
  #gt-map-legend-dock .gt-map-trade-clone {
    position: relative !important;
    width: 100% !important;
    pointer-events: none !important;
  }
  #gt-map-legend-dock .flex.gap-2,
  #gt-map-legend-dock .flex.gap-2.flex-wrap,
  #gt-map-legend-dock .flex.gap-1,
  #gt-map-legend-dock .flex.gap-1.flex-wrap {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  /* Compact Energy/Metals/Inflow chips — no 44px touch inflation on map keys */
  #gt-map-legend-dock .gt-map-legend-clone span,
  #gt-map-legend-dock .gt-mapbox-legend-chip,
  #gt-map-legend-dock span {
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0.12rem 0.35rem !important;
    font-size: 0.58rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
  }

  /* gtmob1: hide only the ORIGINAL pill on mobile — the dock clone stays visible */
  #root main .map-interactive .gt-map-period--snapshot {
    display: none !important;
  }

  /* gtmob1: one-row under-map chrome — legend left, Period pill right */
  #gt-map-legend-dock {
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
  }
  #gt-map-legend-dock .gt-map-legend-clone {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  #gt-map-legend-dock .gt-map-trade-clone {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 48% !important;
    margin-left: auto !important;
    text-align: right !important;
  }
  #gt-map-legend-dock .gt-map-trade-clone .gt-map-period,
  #gt-map-legend-dock .gt-map-trade-clone span {
    position: relative !important;
  }

  #root main .map-interactive {
    padding-bottom: 0.25rem !important;
  }

  /* Mapbox globe: dock is in-flow — do not reserve a dead band above TOKEN / Asset / Commodity */
  #root main .map-interactive.gt-has-globe:has(.gt-mapbox-globe-root) {
    padding-bottom: 0.1rem !important;
  }
  #root main .map-interactive.gt-has-globe:has(.gt-mapbox-globe-root) #gt-map-legend-dock {
    margin-top: 0.08rem !important;
    margin-bottom: 0 !important;
  }

  /* Black scrollbars on news / top markets */
  body.gt-news-active .gt-news-stage,
  .gt-fc-list-wrap {
    scrollbar-width: thin;
    scrollbar-color: #000000 #0a0a0a;
  }
  body.gt-news-active .gt-news-stage::-webkit-scrollbar,
  .gt-fc-list-wrap::-webkit-scrollbar {
    width: 5px !important;
    background: #0a0a0a !important;
  }
  body.gt-news-active .gt-news-stage::-webkit-scrollbar-thumb,
  .gt-fc-list-wrap::-webkit-scrollbar-thumb {
    background: #000000 !important;
    border-radius: 999px !important;
  }
  body.gt-news-active .gt-news-stage::-webkit-scrollbar-track,
  .gt-fc-list-wrap::-webkit-scrollbar-track {
    background: #0a0a0a !important;
  }
}


/* gtm20: Leaflet + flat-map tabs — square face, bottom chrome under map */
@media (max-width: 820px) {
  /* Square map hosts used by Climate / Cyclones / custom flat maps */
  #root main .map-interactive .climate-satellite-view,
  #root main .map-interactive .cyclone-map-view,
  #root main .map-interactive .leaflet-container,
  #root main .map-interactive .absolute.inset-0.w-full.h-full.overflow-hidden.touch-none {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
  }

  #root main .map-interactive .cyclone-map-view__map.leaflet-container,
  #root main .map-interactive .climate-satellite-view .leaflet-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }

  /* Under-map chrome: ONE row — legend left + Period right (no stacked black band) */
  #root main .map-interactive .absolute.bottom-2.left-2,
  #root main .map-interactive .absolute.bottom-2.right-2,
  #root main .map-interactive .gt-map-period,
  #root main .map-interactive .cyclone-map-view__legend,
  #root main .map-interactive .climate-satellite-view__legend {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 0.3rem !important;
    z-index: 30 !important;
  }

  #root main .map-interactive .gt-map-period,
  #root main .map-interactive .absolute.bottom-2.right-2.gt-map-period {
    right: 0.1rem !important;
    left: auto !important;
    max-width: min(58%, 220px) !important;
    z-index: 1100 !important;
  }

  #root main .map-interactive .absolute.bottom-2.left-2,
  #root main .map-interactive .cyclone-map-view__legend,
  #root main .map-interactive .climate-satellite-view__legend {
    left: 0.1rem !important;
    right: auto !important;
    max-width: min(40%, 150px) !important;
    width: auto !important;
  }

  /* Compact legend copy on the shared row */
  #root main .map-interactive .cyclone-map-view__legend,
  #root main .map-interactive .absolute.bottom-2.left-2 {
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
    padding: 0.35rem 0.45rem !important;
  }
  #root main .map-interactive .cyclone-map-view__legend > div:nth-child(2),
  #root main .map-interactive .absolute.bottom-2.left-2 > div:nth-child(2),
  #root main .map-interactive .absolute.bottom-2.left-2 > div:nth-child(3) {
    display: none !important; /* drop long blurb / zoom tip — title row only */
  }
  #root main .map-interactive .cyclone-map-view__legend .flex.gap-1\.5,
  #root main .map-interactive .cyclone-map-view__legend .flex.gap-1 {
    margin-top: 0.25rem !important;
  }

  /* Let bottom chrome render outside the clipped map face */
  #root main .map-interactive > .relative.w-full.h-full.overflow-hidden,
  #root main .map-interactive > .relative.overflow-hidden {
    overflow: visible !important;
  }
  #root main .map-interactive .climate-satellite-view,
  #root main .map-interactive .cyclone-map-view,
  #root main .map-interactive .absolute.inset-0.w-full.h-full.overflow-hidden.touch-none {
    overflow: visible !important;
  }
  /* Keep the actual map tiles clipped */
  #root main .map-interactive .leaflet-container,
  #root main .map-interactive .cyclone-map-view__map {
    overflow: hidden !important;
    border-radius: inherit;
  }

  /* One under-map row only — kill the black band above Pull up */
  #root main .map-interactive.gt-has-flat-map,
  #root main .map-interactive:has(.leaflet-container),
  #root main .map-interactive:has(.cyclone-map-view),
  #root main .map-interactive:has(.climate-satellite-view),
  #root main .map-interactive:has(.flat-map-leaflet-view) {
    padding-bottom: 4.35rem !important;
  }

  /* Hide globe legend dock on flat-map tabs */
  #root main .map-interactive.gt-has-flat-map #gt-map-legend-dock {
    display: none !important;
  }
}


/* gtm21: Space orrery — keep HUD/Speed on canvas; no under-map legend parking */
#root main .map-interactive.gt-has-space #gt-map-legend-dock {
  display: none !important;
}
#root main .map-interactive.gt-has-space .gt-map-legend-source,
#root main .map-interactive.gt-has-space .gt-map-trade-source {
  /* Space overlays stay in-canvas; do not force-hide like parked globe legends */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#root main .map-interactive.gt-has-space > .relative {
  overflow: hidden;
}


/* gtm23: inert closed bottom sheets so they never steal Browse page scroll */
@media (max-width: 820px) {
  #root main [role="dialog"][aria-modal="true"].translate-y-full,
  #root [role="dialog"][aria-modal="true"].translate-y-full {
    pointer-events: none !important;
    visibility: hidden !important;
  }
}