/* GUARDEER PRIME — wide touch / compact laptop desktop-fit correction.
 *
 * The core bundle historically selected the complete phone shell for every
 * coarse-pointer device, including 1280/1366px touch laptops.  Keep the phone
 * shell at <= 920px, but restore the normal desktop chart geometry above it.
 * This file deliberately avoids transform/zoom so chart and drawing pointer
 * coordinates remain in the same CSS-pixel coordinate system.
 */

@media (min-width: 921px) and (hover: none) and (pointer: coarse) {
  html,
  body,
  body.terminal-active,
  body.gp-terminal-active {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.terminal-active #app,
  body.gp-terminal-active #app {
    display: grid !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    gap: 8px !important;
    padding: 0 8px 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-items: stretch !important;
  }

  body.terminal-active .gp-mobile-quick-rail,
  body.gp-terminal-active .gp-mobile-quick-rail,
  body.terminal-active .gp-mobile-action-dock,
  body.gp-terminal-active .gp-mobile-action-dock,
  body.terminal-active .bottom-nav,
  body.gp-terminal-active .bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.terminal-active .header,
  body.gp-terminal-active .header {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: initial !important;
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 8px !important;
    gap: clamp(4px, .55vw, 8px) !important;
    overflow: hidden !important;
  }

  body.terminal-active .header__logo,
  body.gp-terminal-active .header__logo {
    display: flex !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body.terminal-active .header__logo span,
  body.gp-terminal-active .header__logo span {
    display: inline !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(12px, 1.15vw, 16px) !important;
  }

  body.terminal-active #exchange-selector,
  body.gp-terminal-active #exchange-selector,
  body.terminal-active #symbol-selector,
  body.gp-terminal-active #symbol-selector,
  body.terminal-active .header__timeframe,
  body.gp-terminal-active .header__timeframe {
    display: none !important;
  }

  body.terminal-active .gp-terminal-livebar,
  body.gp-terminal-active .gp-terminal-livebar {
    order: 80 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: min(178px, 22vw) !important;
    height: 30px !important;
    padding: 0 8px !important;
    margin-left: auto !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body.terminal-active .header__controls,
  body.gp-terminal-active .header__controls {
    order: 90 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  body.terminal-active .header__controls .btn,
  body.gp-terminal-active .header__controls .btn,
  body.terminal-active #fullscreen-btn,
  body.gp-terminal-active #fullscreen-btn {
    display: inline-flex !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
  }

  body.terminal-active .gp-terminal-side,
  body.gp-terminal-active .gp-terminal-side {
    grid-column: 1 !important;
    grid-row: 2 / 5 !important;
    order: initial !important;
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 64px !important;
    max-width: 64px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px 4px !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.terminal-active .gp-terminal-side nav,
  body.gp-terminal-active .gp-terminal-side nav,
  body.terminal-active .gp-terminal-side .gp-plan-card,
  body.gp-terminal-active .gp-terminal-side .gp-plan-card {
    display: none !important;
    visibility: hidden !important;
  }

  body.terminal-active .gp-market-overview,
  body.gp-terminal-active .gp-market-overview {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
    order: initial !important;
    display: grid !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.terminal-active .main,
  body.gp-terminal-active .main {
    grid-column: 2 / -1 !important;
    grid-row: 3 !important;
    order: initial !important;
    position: static !important;
    display: block !important;
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.terminal-active .chart-container,
  body.gp-terminal-active .chart-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.terminal-active .timeframes,
  body.gp-terminal-active .timeframes {
    display: flex !important;
    flex: 0 0 34px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px 10px !important;
    overflow: hidden !important;
  }

  body.terminal-active .timeframes__scroll,
  body.gp-terminal-active .timeframes__scroll {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.terminal-active .timeframes__scroll::-webkit-scrollbar,
  body.gp-terminal-active .timeframes__scroll::-webkit-scrollbar {
    display: none !important;
  }

  body.terminal-active .chart-area,
  body.gp-terminal-active .chart-area {
    display: block !important;
    flex: 1 1 auto !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.terminal-active .analytics,
  body.gp-terminal-active .analytics {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    flex: 0 0 82px !important;
    order: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.terminal-active .cvd-container,
  body.gp-terminal-active .cvd-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body.terminal-active.gp-dashboard-chart-mode .gp-dashboard-tab-panels,
  body.gp-terminal-active.gp-dashboard-chart-mode .gp-dashboard-tab-panels {
    display: none !important;
  }

  body.terminal-active.gp-dashboard-chart-mode .gp-terminal-bottom,
  body.gp-terminal-active.gp-dashboard-chart-mode .gp-terminal-bottom {
    grid-column: 2 / -1 !important;
    grid-row: 4 !important;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) and (hover: none) and (pointer: coarse) {
  body.terminal-active.gp-dashboard-chart-mode #app,
  body.gp-terminal-active.gp-dashboard-chart-mode #app {
    grid-template-columns: 64px minmax(245px, .78fr) minmax(0, 1.55fr) minmax(340px, .94fr) !important;
    grid-template-rows: 48px 76px minmax(520px, calc(100dvh - 144px)) minmax(420px, 58dvh) !important;
  }
}

@media (min-width: 1501px) and (hover: none) and (pointer: coarse) {
  body.terminal-active.gp-dashboard-chart-mode #app,
  body.gp-terminal-active.gp-dashboard-chart-mode #app {
    grid-template-columns: 64px minmax(270px, .78fr) minmax(0, 1.68fr) minmax(370px, .96fr) !important;
    grid-template-rows: 48px 78px minmax(560px, calc(100dvh - 146px)) minmax(440px, 58dvh) !important;
  }
}

@media (min-width: 921px) and (max-width: 1180px) and (hover: none) and (pointer: coarse) {
  body.terminal-active.gp-dashboard-chart-mode #app,
  body.gp-terminal-active.gp-dashboard-chart-mode #app {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    grid-template-rows: 46px 70px minmax(440px, calc(100dvh - 132px)) !important;
    gap: 6px !important;
    padding: 0 6px 6px !important;
  }

  body.terminal-active .header,
  body.gp-terminal-active .header {
    height: 46px !important;
    min-height: 46px !important;
    padding-inline: 6px !important;
    overflow: hidden !important;
  }

  body.gp-step44-topbar-ready.terminal-active .gp-step44-header-nav,
  body.gp-step44-topbar-ready.gp-terminal-active .gp-step44-header-nav {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.gp-step44-topbar-ready.terminal-active .gp-step44-header-nav::-webkit-scrollbar,
  body.gp-step44-topbar-ready.gp-terminal-active .gp-step44-header-nav::-webkit-scrollbar {
    display: none !important;
  }

  body.gp-step44-topbar-ready.terminal-active .gp-step44-header-nav__btn,
  body.gp-step44-topbar-ready.gp-terminal-active .gp-step44-header-nav__btn {
    flex: 0 0 auto !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-inline: 7px !important;
    gap: 4px !important;
    font-size: 9px !important;
  }

  body.terminal-active .gp-terminal-side,
  body.gp-terminal-active .gp-terminal-side {
    width: 56px !important;
    max-width: 56px !important;
  }

  body.terminal-active .gp-terminal-livebar,
  body.gp-terminal-active .gp-terminal-livebar {
    max-width: 124px !important;
    font-size: 10px !important;
  }

  body.terminal-active .gp-market-overview,
  body.gp-terminal-active .gp-market-overview {
    grid-template-columns: repeat(7, minmax(132px, 1fr)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.terminal-active .gp-market-overview::-webkit-scrollbar,
  body.gp-terminal-active .gp-market-overview::-webkit-scrollbar {
    display: none !important;
  }

  body.terminal-active .header__controls .btn,
  body.gp-terminal-active .header__controls .btn,
  body.terminal-active #fullscreen-btn,
  body.gp-terminal-active #fullscreen-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

@media (min-width: 1181px) and (max-height: 760px) and (hover: none) and (pointer: coarse) {
  body.terminal-active.gp-dashboard-chart-mode #app,
  body.gp-terminal-active.gp-dashboard-chart-mode #app {
    grid-template-rows: 44px 66px minmax(430px, calc(100dvh - 122px)) minmax(360px, 52dvh) !important;
  }

  body.terminal-active .header,
  body.gp-terminal-active .header {
    height: 44px !important;
    min-height: 44px !important;
  }

  body.terminal-active .gp-market-overview,
  body.gp-terminal-active .gp-market-overview {
    min-height: 66px !important;
    max-height: 66px !important;
  }

  body.terminal-active .analytics,
  body.gp-terminal-active .analytics {
    flex-basis: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
}

@media (min-width: 921px) and (max-width: 1180px) and (max-height: 760px) and (hover: none) and (pointer: coarse) {
  body.terminal-active.gp-dashboard-chart-mode #app,
  body.gp-terminal-active.gp-dashboard-chart-mode #app {
    grid-template-rows: 44px 66px minmax(430px, calc(100dvh - 122px)) !important;
  }

  body.terminal-active .header,
  body.gp-terminal-active .header {
    height: 44px !important;
    min-height: 44px !important;
  }

  body.terminal-active .gp-market-overview,
  body.gp-terminal-active .gp-market-overview {
    min-height: 66px !important;
    max-height: 66px !important;
  }

  body.terminal-active .analytics,
  body.gp-terminal-active .analytics {
    flex-basis: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
}
