/* VYRO V8.2.2 — UI CLEAN + FULLSCREEN FINAL */

/* Never show redundant top symbol pills. Cards below remain the selector. */
.marketbar .products{
  display:none !important;
}

/* Avoid duplicate manual trade launcher */
#manualTradeLauncher{
  display:none !important;
}

/* ---------- MOBILE CLEAN ---------- */
@media(max-width:900px){
  html,body{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
    background:#020b13 !important;
  }

  body{
    padding:4px !important;
  }

  .top,
  .marketbar,
  .signal,
  .main,
  .chartCard,
  #vyroMtfRightRail,
  .side{
    max-width:100% !important;
    min-width:0 !important;
  }

  .marketbar{
    display:block !important;
    padding:5px !important;
    margin:0 0 6px !important;
    overflow:hidden !important;
  }

  .marketbar .tfbar,
  .marketbar .tools{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
    margin:0 !important;
    padding:2px 0 !important;
  }

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

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

  .main,
  .main.vyroWideMainKeepMtf{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:6px !important;
    width:100% !important;
  }

  .chartCard{
    order:1 !important;
    width:100% !important;
    padding:5px !important;
    overflow:hidden !important;
  }

  #chart{
    width:100% !important;
    height:54dvh !important;
    min-height:350px !important;
    max-height:560px !important;
    background:#071018 !important;
    contain:none !important;
    isolation:auto !important;
  }

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

  #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;
    overflow:visible !important;
  }

  #xagEmaGuardBadge,
  #vyroEngineV2Bubble{
    display:none !important;
  }

  #tradeOpenBtn.vyroTradeFloatingBtn,
  #tradeOpenBtn.manualTradeMainBtn{
    right:8px !important;
    bottom:calc(8px + env(safe-area-inset-bottom)) !important;
    min-width:120px !important;
    max-width:45vw !important;
    height:38px !important;
    min-height:38px !important;
    font-size:9px !important;
    z-index:4300 !important;
  }

  .vyroClassroomBar{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }
  .vyroClassroomBar::-webkit-scrollbar{display:none !important}
}

/* ---------- FULLSCREEN FINAL ---------- */
#vyroExit822{
  display:none;
}

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

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

body.vyroFs822 .main,
body.vyroFs822 .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:4px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 270px !important;
  gap:4px !important;
  overflow:hidden !important;
  background:#020b13 !important;
}

body.vyroFs822 .chartCard{
  position:relative !important;
  width:100% !important;
  height:calc(100dvh - 8px) !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#071018 !important;
}

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

body.vyroFs822 #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;
  contain:none !important;
}

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

body.vyroFs822 #vyroMtfRightRail,
body.vyroFs822 .side{
  position:relative !important;
  inset:auto !important;
  width:270px !important;
  height:calc(100dvh - 8px) !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#06111d !important;
}

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

body.vyroFs822 .vyroFsFlow822{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  overflow-y:auto !important;
  margin:0 !important;
  padding:8px !important;
  box-sizing:border-box !important;
}

body.vyroFs822 #vyroExit822{
  display:inline-flex !important;
  position:fixed !important;
  top:max(8px,env(safe-area-inset-top)) !important;
  right:284px !important;
  z-index:2147483647 !important;
  height:34px !important;
  min-width:76px !important;
  padding:0 10px !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #38d9ff !important;
  border-radius:9px !important;
  background:rgba(3,18,30,.9) !important;
  color:#fff !important;
  font-weight:900 !important;
  cursor:pointer !important;
}

@media(max-width:900px) and (orientation:landscape){
  body.vyroFs822 .main,
  body.vyroFs822 .main.vyroWideMainKeepMtf{
    grid-template-columns:minmax(0,1fr) 190px !important;
    padding:2px !important;
    gap:2px !important;
  }
  body.vyroFs822 #vyroMtfRightRail,
  body.vyroFs822 .side{
    width:190px !important;
    height:calc(100dvh - 4px) !important;
  }
  body.vyroFs822 .chartCard{
    height:calc(100dvh - 4px) !important;
  }
  body.vyroFs822 #vyroExit822{
    right:196px !important;
    min-width:34px !important;
    width:34px !important;
    padding:0 !important;
    font-size:0 !important;
  }
  body.vyroFs822 #vyroExit822::before{
    content:'✕';
    font-size:16px !important;
  }
}

@media(max-width:720px) and (orientation:portrait){
  body.vyroFs822 .main,
  body.vyroFs822 .main.vyroWideMainKeepMtf{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) 30dvh !important;
    padding:2px !important;
    gap:2px !important;
  }
  body.vyroFs822 .chartCard{
    width:100% !important;
    height:100% !important;
  }
  body.vyroFs822 #vyroMtfRightRail,
  body.vyroFs822 .side{
    width:100% !important;
    height:30dvh !important;
  }
  body.vyroFs822 #vyroExit822{
    right:8px !important;
  }
}