/* VYRO V8.3.0 — MOBILE LAYOUT RESET + FULLSCREEN
   Final UI layer for the current V8.2 source.
   No candle/data/API logic changes.
*/

/* Redundant top symbol strip stays hidden. Fund cards are the selector. */
.marketbar .products{display:none!important}
#manualTradeLauncher{display:none!important}

/* ================= MOBILE ================= */
@media(max-width:900px){
  html,body{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
    background:#020b13!important;
  }

  body{
    position:static!important;
    inset:auto!important;
    margin:0!important;
    padding:4px!important;
  }

  /* Admin/sidebar hero is not useful on phone and consumes height. */
  #ksHero,
  .ks-market-hero{
    display:none!important;
  }

  .ks-sidebar{
    max-width:82vw!important;
  }

  /* Header compact */
  .top{
    position:relative!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0 0 5px!important;
    padding:7px 8px 7px 58px!important;
    overflow:hidden!important;
  }

  .top .brand{
    width:100%!important;
    min-width:0!important;
    margin:0 0 6px!important;
  }

  .top .status{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    width:100%!important;
  }

  .top .status > *{
    min-width:0!important;
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    margin:0!important;
    padding:0 6px!important;
    font-size:9px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  #uptime{display:none!important}
  #xagEmaGuardBadge{display:none!important}
  #vyroEngineV2Bubble{display:none!important}

  /* Market controls = one small horizontal strip */
  .marketbar,
  body.compactFundLayout .marketbar{
    position:relative!important;
    top:auto!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 5px!important;
    padding:5px!important;
    overflow:hidden!important;
  }

  .marketbar .tfbar,
  .marketbar .tools,
  body.compactFundLayout .marketbar .tools{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    width:100%!important;
    max-width:100%!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 .tfbar::-webkit-scrollbar,
  .marketbar .tools::-webkit-scrollbar{display:none!important}

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

  /* IMPORTANT: cards are horizontal, not a giant multi-row wall. */
  .fundOverview{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 5px!important;
    padding:4px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    background:transparent!important;
  }

  .fundOverview::-webkit-scrollbar{display:none!important}

  .fundCard{
    flex:0 0 145px!important;
    width:145px!important;
    min-width:145px!important;
    max-width:145px!important;
    min-height:66px!important;
    height:66px!important;
    margin:0!important;
    padding:7px 8px!important;
    overflow:hidden!important;
  }

  .fundCard b,
  .fundCard small,
  .fundCard .px{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .fundCard b{font-size:10px!important}
  .fundCard .px{font-size:15px!important;margin:3px 0!important}
  .fundCard small{font-size:8px!important}

  /* Signal summary compact; never reserves a huge block. */
  #alert.signal,
  .signal{
    width:100%!important;
    max-width:100%!important;
    min-height:52px!important;
    height:auto!important;
    margin:0 0 5px!important;
    padding:7px 9px!important;
    overflow:hidden!important;
  }

  .decision{font-size:17px!important}
  .conf{font-size:18px!important}
  .reason{
    max-width:66vw!important;
    font-size:9px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Wide-chart desktop DOM movers are disabled on phone by V830 JS.
     Original DOM now uses a simple one-column layout. */
  .main,
  .main.vyroWideMainKeepMtf{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    align-items:stretch!important;
    gap:6px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

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

  .chartHead{
    width:100%!important;
    margin:0 0 4px!important;
  }

  .chartActions{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    width:100%!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}
  .chartActions button{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:32px!important;
    height:28px!important;
    padding:0 7px!important;
    font-size:9px!important;
  }

  /* One authoritative mobile chart height. */
  #chart{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:56dvh!important;
    min-height:360px!important;
    max-height:590px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    contain:none!important;
    isolation:auto!important;
    background:#071018!important;
  }

  #chart canvas{
    max-width:none!important;
    max-height:none!important;
  }

  /* Classroom is one-line horizontal and cannot push chart down. */
  .vyroClassroomBar{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    width:100%!important;
    max-width:100%!important;
    margin:3px 0 4px!important;
    padding:3px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }
  .vyroClassroomBar::-webkit-scrollbar{display:none!important}
  .vyroClassroomBar b,
  .vyroClassroomBar button{flex:0 0 auto!important}
  .vyroClassroomBar button{
    height:25px!important;
    min-height:25px!important;
    padding:0 6px!important;
    font-size:8px!important;
  }

  /* Side stays immediately below chart. */
  .side,
  #vyroMtfRightRail{
    order:2!important;
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
  }

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

  /* If old wide UI elements somehow exist, remove them on mobile. */
  #vyroViewToolbar,
  #vyroAnalysisDrawer{
    display:none!important;
  }

  /* Lower strategy panels are after chart; never fixed. */
  #emaManager,
  .emaManager,
  #sidewayPanel,
  .sidewayPanel,
  #v123Panel,
  .v123Panel{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:6px 0 0!important;
  }

  /* One floating trade button only. */
  #tradeOpenBtn.vyroTradeFloatingBtn,
  #tradeOpenBtn.manualTradeMainBtn{
    position:fixed!important;
    right:8px!important;
    left:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:auto!important;
    min-width:118px!important;
    max-width:44vw!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 10px!important;
    margin:0!important;
    font-size:9px!important;
    z-index:4300!important;
  }
}

@media(max-width:430px){
  #chart{
    height:54dvh!important;
    min-height:340px!important;
    max-height:540px!important;
  }
}

/* ================= FULLSCREEN ================= */
#vyroExit830{display:none}

body.vyroFs830{
  overflow:hidden!important;
  background:#020b13!important;
}

body.vyroFs830 > *:not(.main):not(#vyroExit830){
  display:none!important;
}

body.vyroFs830 .main,
body.vyroFs830 .main.vyroWideMainKeepMtf{
  position:fixed!important;
  inset:0!important;
  z-index:2147482000!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  margin:0!important;
  padding:3px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 260px!important;
  gap:3px!important;
  overflow:hidden!important;
  background:#020b13!important;
}

body.vyroFs830 .chartCard{
  position:relative!important;
  width:100%!important;
  height:calc(100dvh - 6px)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

body.vyroFs830 .chartCard > *:not(#chart){
  display:none!important;
}

body.vyroFs830 #chart{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
}

body.vyroFs830 #chart [class*="DrawingCanvas"],
body.vyroFs830 #chart [class*="DrawingBadge"]{
  display:none!important;
}

body.vyroFs830 .side,
body.vyroFs830 #vyroMtfRightRail{
  display:block!important;
  position:relative!important;
  inset:auto!important;
  width:260px!important;
  height:calc(100dvh - 6px)!important;
  max-height:none!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
}

body.vyroFs830 .side > *,
body.vyroFs830 #vyroMtfRightRail > *{
  display:none!important;
}

body.vyroFs830 .vyroFsFlow830{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:8px!important;
  overflow-y:auto!important;
}

body.vyroFs830 #vyroExit830{
  display:inline-flex!important;
  position:fixed!important;
  top:max(7px,env(safe-area-inset-top))!important;
  right:270px!important;
  z-index:2147483647!important;
  width:auto!important;
  min-width:70px!important;
  height:32px!important;
  padding:0 9px!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #38d9ff!important;
  border-radius:8px!important;
  background:rgba(3,18,30,.92)!important;
  color:#fff!important;
  font-weight:900!important;
}

@media(max-width:900px) and (orientation:landscape){
  body.vyroFs830 .main,
  body.vyroFs830 .main.vyroWideMainKeepMtf{
    grid-template-columns:minmax(0,1fr) 180px!important;
  }
  body.vyroFs830 .side,
  body.vyroFs830 #vyroMtfRightRail{width:180px!important}
  body.vyroFs830 #vyroExit830{
    right:188px!important;
    min-width:32px!important;
    width:32px!important;
    font-size:0!important;
  }
  body.vyroFs830 #vyroExit830::before{content:'✕';font-size:15px!important}
}

@media(max-width:720px) and (orientation:portrait){
  body.vyroFs830 .main,
  body.vyroFs830 .main.vyroWideMainKeepMtf{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) 28dvh!important;
  }
  body.vyroFs830 .chartCard{height:100%!important}
  body.vyroFs830 .side,
  body.vyroFs830 #vyroMtfRightRail{
    width:100%!important;
    height:28dvh!important;
  }
  body.vyroFs830 #vyroExit830{right:7px!important}
}