/* xFi v0.5.37 — Mobile / PWA layout polish.
   UI-only. No order/position/account business logic is changed.
   This stylesheet intentionally loads after bot-trading.css. */
@media (max-width:560px) {
  /* Precisely five evenly-sized tabs when Bot Trading is disabled.
     Reverts to six only if an administrator later shows Bots on mobile. */
  body.terminal-body .mobile-xfi-nav {
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    gap:0!important;
    left:max(12px,env(safe-area-inset-left,0px))!important;
    right:max(12px,env(safe-area-inset-right,0px))!important;
    bottom:calc(9px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:none!important;
    height:72px!important;
    padding:5px!important;
    border:1px solid #38383b!important;
    border-radius:39px!important;
    background:#1a1a1ceF!important;
    backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    z-index:110!important;
  }
  body.terminal-body .mobile-xfi-nav:has(>button[data-view="bots"]:not([hidden])) {
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  body.terminal-body .mobile-xfi-nav>button[hidden]{display:none!important}
  body.terminal-body .mobile-xfi-nav>button{
    box-sizing:border-box!important;
    min-width:0!important;
    width:100%!important;
    height:100%!important;
    padding:4px 1px!important;
    margin:0!important;
    border:0!important;
    border-radius:32px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    color:#f6f6f6!important;
    background:transparent!important;
    position:relative;
    font:500 11.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif!important;
    letter-spacing:0!important;
    text-align:center!important;
    white-space:nowrap!important;
    -webkit-tap-highlight-color:transparent;
  }
  body.terminal-body .mobile-xfi-nav>button.active{color:#46a9ff!important}
  body.terminal-body .mobile-xfi-nav>button.active::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0!important;
    left:0!important;
    right:0!important;
    top:0!important;
    bottom:0!important;
    border-radius:32px!important;
    background:#3a3a3e!important;
  }
  body.terminal-body .mobile-xfi-nav>button>.xfi-mobile-nav-icon {
    display:flex!important;
    flex:0 0 auto!important;
    justify-content:center!important;
    align-items:center!important;
    width:29px!important;
    height:29px!important;
    line-height:1!important;
    font-size:initial!important;
    font-weight:normal!important;
  }
  body.terminal-body .mobile-xfi-nav>button>.xfi-mobile-nav-icon svg {
    display:block!important;
    width:27px!important;
    height:27px!important;
    flex:none!important;
    overflow:visible!important;
  }
  body.terminal-body .mobile-xfi-nav>button>span {
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    font-size:inherit!important;
    line-height:1.25!important;
    text-align:center!important;
  }
  body.terminal-body .mobile-xfi-nav>button:focus-visible {
    outline:2px solid #66b6ff!important;
    outline-offset:-4px!important;
  }

  /* Quote screen: keep market table and headings aligned with the five-column nav. */
  body.mobile-view-quotes .watch-panel {
    padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important;
  }
  body.mobile-view-quotes .watch-colheads,
  body.mobile-view-quotes .market-row {
    font-variant-numeric:tabular-nums!important;
  }

  /* Chart: keep the native full-height view, but remove oversized toolbar / candle UI.
     The viewport draws more candles by default in terminal.js, maintaining real price scale. */
  body.terminal-body.mobile-view-chart .chart-workspace {
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  body.terminal-body.mobile-view-chart .chart-toolbar {
    height:49px!important;
    min-height:49px!important;
    max-height:49px!important;
    gap:5px!important;
  }
  body.terminal-body.mobile-view-chart .chart-trade-toolbar,
  body.terminal-body.mobile-view-chart .chart-trade-toolbar>.chart-quick,
  body.terminal-body.mobile-view-chart .chart-trade-toolbar>.chart-volume-control {
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
  }
  body.terminal-body.mobile-view-chart .chart-trade-toolbar {
    grid-template-rows:62px!important;
    grid-template-columns:minmax(0,31%) minmax(0,38%) minmax(0,31%)!important;
  }
  body.terminal-body.mobile-view-chart .chart-trade-toolbar>.chart-volume-control {
    grid-template-rows:62px!important;
  }
  body.terminal-body.mobile-view-chart .chart-trade-toolbar>.chart-quick b {
    font-size:clamp(16px,4.35vw,20px)!important;
    letter-spacing:-.015em!important;
  }
  body.terminal-body.mobile-view-chart .chart-trade-toolbar>.chart-quick span {
    font-size:11px!important;
  }
  body.terminal-body.mobile-view-chart .chart-trade-toolbar .chart-volume-control>input {
    font-size:clamp(15px,4vw,19px)!important;
  }
  body.terminal-body.mobile-view-chart .chart-legend {
    min-height:40px!important;
    max-height:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    font-size:11px!important;
  }
  body.terminal-body.mobile-view-chart .chart-surface {
    min-height:0!important;
    max-height:none!important;
    flex:1 1 auto!important;
    overflow:hidden!important;
  }
  body.terminal-body.mobile-view-chart .chart-main,
  body.terminal-body.mobile-view-chart #chart {
    min-height:0!important;
    max-height:none!important;
  }

  /* Trade screen: smaller, properly aligned account stats / position rows. */
  body.terminal-body.mobile-view-trade .xfi-mobile-trade {
    padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(104px + env(safe-area-inset-bottom,0px))!important;
  }
  body.terminal-body.mobile-view-trade .xfi-trade-header strong {
    font-size:19px!important;
    font-weight:650!important;
  }
  body.terminal-body.mobile-view-trade .xfi-trade-summary {
    padding:10px 2px 12px!important;
  }
  body.terminal-body.mobile-view-trade .xfi-trade-summary>strong {
    font-size:21px!important;
    line-height:1.2!important;
    margin:8px 0 17px!important;
    font-weight:650!important;
    font-variant-numeric:tabular-nums!important;
  }
  body.terminal-body.mobile-view-trade .xfi-trade-summary>div {
    gap:9px!important;
  }
  body.terminal-body.mobile-view-trade .xfi-trade-summary span {
    font-size:14.5px!important;
    line-height:1.35!important;
    min-height:21px!important;
    gap:15px!important;
    align-items:baseline!important;
    color:#a8abb0!important;
  }
  body.terminal-body.mobile-view-trade .xfi-trade-summary span b {
    font-size:14.5px!important;
    font-weight:500!important;
    color:#f5f5f6!important;
    font-variant-numeric:tabular-nums!important;
    text-align:right!important;
    white-space:nowrap!important;
  }
  body.terminal-body.mobile-view-trade .xfi-mobile-trade h3 {
    font-size:14px!important;
    margin:13px -3px 3px!important;
    padding:9px 5px!important;
  }
  body.terminal-body.mobile-view-trade .xfi-position-row {
    padding:11px 0!important;
  }
  body.terminal-body.mobile-view-trade .xfi-position-top,
  body.terminal-body.mobile-view-trade .xfi-position-top strong {
    font-size:14.5px!important;
    line-height:1.4!important;
  }
  body.terminal-body.mobile-view-trade .xfi-position-top b {
    font-size:15px!important;
    font-weight:600!important;
  }
  body.terminal-body.mobile-view-trade .xfi-position-bottom {
    font-size:12px!important;
    line-height:1.3!important;
    margin-top:4px!important;
  }
  body.terminal-body.mobile-view-trade .xfi-mobile-empty {
    font-size:13px!important;
  }
}
@media (max-width:350px) {
  body.terminal-body .mobile-xfi-nav>button{font-size:10.5px!important}
  body.terminal-body .mobile-xfi-nav>button>.xfi-mobile-nav-icon svg{width:24px!important;height:24px!important}
  body.terminal-body.mobile-view-trade .xfi-trade-summary span,
  body.terminal-body.mobile-view-trade .xfi-trade-summary span b{font-size:13.5px!important}
}