/* =========================================================
   VYRO V7.6.7 — MOBILE FULL CHART
   This file was referenced by index.html but missing in 2709.
   UI-only. Does NOT touch chart data/API/backend.
   ========================================================= */

@media (max-width: 900px){

  html,
  body{
    width:100% !important;
    max-width:100vw !important;
    min-width:0 !important;
    margin:0 !important;
    overflow-x:hidden !important;
    background:#050a10 !important;
  }

  body{
    padding:5px !important;
  }

  body *,
  body *::before,
  body *::after{
    box-sizing:border-box !important;
  }

  /* ---------- HEADER ---------- */
  .top{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:block !important;
    padding:8px !important;
    margin:0 0 6px !important;
    overflow:hidden !important;
    border-radius:12px !important;
  }

  .brand{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    margin-bottom:7px !important;
  }

  .vyroLogo,
  .vyroLogoWrap{
    flex:0 0 82px !important;
    min-width:82px !important;
    max-width:82px !important;
    height:42px !important;
  }

  .vyroLogo img,
  .vyroLogoWrap img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }

  .brand h1{
    font-size:18px !important;
    line-height:1.05 !important;
  }

  .brand .sub{
    max-width:calc(100vw - 115px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:8px !important;
  }

  .status{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    justify-content:stretch !important;
  }

  .status > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:36px !important;
    height:36px !important;
    margin:0 !important;
    padding:0 6px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:9px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    border-radius:9px !important;
  }

  #uptime{
    display:none !important;
  }

  #vyroMasterAutoBtn,
  #vyroTradeLockBtn{
    width:100% !important;
    margin:0 !important;
  }

  /* XAG guard is redundant on phone and can overlay content */
  #xagEmaGuardBadge{
    display:none !important;
  }

  /* ---------- MARKET / TOOLS ---------- */
  .marketbar{
    position:relative !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:block !important;
    padding:5px !important;
    margin:0 0 6px !important;
    overflow:hidden !important;
  }

  .marketbar .products,
  .marketbar .tfbar,
  .marketbar .tools{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    margin:0 !important;
    padding:2px 0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .marketbar .products::-webkit-scrollbar,
  .marketbar .tfbar::-webkit-scrollbar,
  .marketbar .tools::-webkit-scrollbar{
    display:none !important;
  }

  .marketbar .pill,
  .marketbar button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:38px !important;
    min-height:29px !important;
    height:29px !important;
    margin:0 !important;
    padding:0 8px !important;
    font-size:9px !important;
    white-space:nowrap !important;
  }

  /* ---------- FUND CARDS ---------- */
  .fundOverview{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:5px !important;
    padding:0 !important;
    margin:0 0 6px !important;
    overflow:hidden !important;
  }

  .fundCard{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:62px !important;
    padding:7px !important;
    overflow:hidden !important;
  }

  .fundCard b,
  .fundCard small{
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* ---------- SIGNAL ---------- */
  .signal{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:8px !important;
    margin:0 0 6px !important;
  }

  .decision{font-size:20px !important}
  .conf{font-size:22px !important}
  .reason{
    max-width:70vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* ---------- VIEW TOOLBAR ---------- */
  #vyroViewToolbar,
  .vyroViewToolbar,
  #vyroAnalysisDrawer,
  .vyroAnalysisDrawer{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .vyroViewToolbar{
    padding:5px !important;
    gap:4px !important;
  }

  .vyroViewToolbar button{
    width:100% !important;
    min-height:34px !important;
    font-size:9px !important;
  }

  .vyroViewToolbar span{
    display:none !important;
  }

  /* ---------- MAIN: ALWAYS ONE COLUMN ---------- */
  .main,
  .main.vyroWideMainKeepMtf{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .main > *,
  .main.vyroWideMainKeepMtf > *{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .chartCard{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:5px !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  /* ---------- CHART HEADER ---------- */
  .chartHead{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:block !important;
    margin-bottom:3px !important;
  }

  .chartActions{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    padding:3px 0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }

  .chartActions::-webkit-scrollbar{
    display:none !important;
  }

  .chartActions .ct{
    flex:0 0 auto !important;
    font-size:8px !important;
    white-space:nowrap !important;
  }

  .chartActions button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:32px !important;
    min-height:28px !important;
    height:28px !important;
    padding:0 7px !important;
    font-size:9px !important;
  }

  /* ---------- ONE AUTHORITATIVE MOBILE CHART SIZE ----------
     Overrides:
       style.css 390/460/540
       wide_chart 58vh + min-height 440
       compact_fund calc(100dvh - 410px)
  ---------------------------------------------------------- */
  #chart{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:54dvh !important;
    min-height:350px !important;
    max-height:560px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#071018 !important;
  }

  /* Do NOT force width/max-width on LightweightCharts canvas.
     Let the chart library own its DPR canvas dimensions. */

  /* ---------- CLASSROOM ---------- */
  .vyroClassroomBar{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:3px !important;
    padding:4px !important;
    margin:3px 0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }

  .vyroClassroomBar::-webkit-scrollbar{
    display:none !important;
  }

  .vyroClassroomBar button{
    flex:0 0 auto !important;
    width:auto !important;
    min-height:26px !important;
    height:26px !important;
    padding:0 6px !important;
    font-size:8px !important;
  }

  /* ---------- LOWER PANELS ---------- */
  #emaManager,
  .emaManager,
  #sidewayPanel,
  .sidewayPanel,
  #v123Panel,
  .v123Panel,
  [class*="Radar"],
  [id*="Radar"],
  .sem-panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* ---------- MTF RAIL BELOW CHART ---------- */
  #vyroMtfRightRail,
  .side{
    order:2 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
  }

  #vyroMtfRightRail .panel,
  .side .panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    max-height:none !important;
    margin:0 0 6px !important;
  }

  /* ---------- REMOVE LARGE DECISION BUBBLE ON MOBILE ---------- */
  #vyroEngineV2Bubble,
  .vyroEngineV2Bubble{
    display:none !important;
  }

  /* ---------- FLOATING TRADE BUTTON ---------- */
  #tradeOpenBtn.vyroTradeFloatingBtn,
  .manualTradeMainBtn{
    position:fixed !important;
    right:8px !important;
    left:auto !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    min-width:116px !important;
    max-width:44vw !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 10px !important;
    margin:0 !important;
    font-size:9px !important;
    z-index:4100 !important;
  }
}

@media (max-width: 430px){
  body{padding:3px !important}

  #chart{
    height:51dvh !important;
    min-height:320px !important;
    max-height:500px !important;
  }

  .status{
    grid-template-columns:1fr 1fr !important;
  }
}

/* Phone landscape: maximize chart */
@media (max-height: 540px) and (orientation: landscape){
  .top,
  .marketbar,
  .fundOverview,
  .signal,
  .vyroViewToolbar{
    display:none !important;
  }

  #chart{
    height:calc(100dvh - 52px) !important;
    min-height:260px !important;
    max-height:none !important;
  }

  .chartCard{
    padding:2px !important;
  }
}