/* ===== VYRO V7.3.2 WIDE CHART + KEEP MTF RIGHT ===== */

/* Main layout: wide chart + slim persistent MTF rail */
.main.vyroWideMainKeepMtf{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 300px!important;
  gap:10px!important;
  width:100%!important;
  align-items:start!important;
}
.main.vyroWideMainKeepMtf > .chartCard{
  grid-column:1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
#vyroMtfRightRail{
  grid-column:2!important;
  width:300px!important;
  min-width:280px!important;
  max-width:320px!important;
  position:sticky!important;
  top:10px!important;
  align-self:start!important;
  z-index:20!important;
}
#vyroMtfRightRail .panel{
  width:100%!important;
  max-height:calc(100vh - 28px)!important;
  overflow:auto!important;
}
#vyroMtfRightRail .panel h3{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:inherit!important;
  padding-bottom:8px!important;
}

/* Chart gets most of the screen */
#chart{
  width:100%!important;
  height:700px!important;
  min-height:620px!important;
}

/* Secondary analysis opens above chart, not in the persistent MTF rail */
.vyroViewToolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 10px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(8,18,25,.96);
  box-shadow:0 8px 26px rgba(0,0,0,.22);
}
.vyroViewToolbar button{
  border:1px solid var(--aqua);
  border-radius:11px;
  background:#062820;
  color:var(--aqua);
  padding:9px 14px;
  font-weight:1000;
  cursor:pointer;
}
.vyroViewToolbar span{
  color:#8aa1aa;
  font-size:12px;
  font-weight:800;
}
.vyroAnalysisDrawer{
  margin:0 0 10px;
  overflow:hidden;
  max-height:1400px;
  opacity:1;
  transition:max-height .22s ease,opacity .18s ease,margin .22s ease;
}
.vyroAnalysisDrawer.collapsed{
  max-height:0!important;
  opacity:0!important;
  margin:0!important;
  pointer-events:none!important;
}
.vyroExtraPanels{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.vyroExtraPanels .panel{
  min-width:0!important;
  height:auto!important;
}

/* Manual trade remains accessible and separate from MTF rail */
#tradeOpenBtn.vyroTradeFloatingBtn{
  position:fixed!important;
  right:18px!important;
  bottom:18px!important;
  left:auto!important;
  top:auto!important;
  z-index:4400!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:172px!important;
  min-height:48px!important;
  padding:11px 17px!important;
  border-radius:999px!important;
  visibility:visible!important;
  opacity:1!important;
  box-shadow:0 14px 38px rgba(0,0,0,.45),0 0 20px rgba(23,215,192,.24)!important;
}
#tradePanel.vyroTradeDrawer{
  position:fixed!important;
  top:16px!important;
  right:16px!important;
  bottom:16px!important;
  left:auto!important;
  width:min(410px,calc(100vw - 32px))!important;
  max-height:none!important;
  overflow-y:auto!important;
  z-index:4500!important;
  padding:15px!important;
  border-radius:20px!important;
  box-shadow:0 24px 90px rgba(0,0,0,.65)!important;
}
#tradePanel.vyroTradeDrawer.hidden{display:none!important}
#tradePanel.vyroTradeDrawer .tradeDrag{
  position:sticky!important;
  top:-15px!important;
  z-index:2!important;
  padding:12px 4px 10px!important;
  background:rgba(5,12,17,.98)!important;
}

/* Large monitors: chart gets even more room, MTF stays readable */
@media (min-width:1450px){
  .main.vyroWideMainKeepMtf{
    grid-template-columns:minmax(0,1fr) 310px!important;
  }
  #vyroMtfRightRail{width:310px!important}
  #chart{height:760px!important}
}

/* Medium screens: keep MTF right but narrower */
@media (max-width:1199px) and (min-width:901px){
  .main.vyroWideMainKeepMtf{
    grid-template-columns:minmax(0,1fr) 270px!important;
  }
  #vyroMtfRightRail{
    width:270px!important;
    min-width:250px!important;
  }
  #chart{
    height:620px!important;
    min-height:560px!important;
  }
}

/* Mobile/tablet: chart first, MTF immediately below; never hidden */
@media (max-width:900px){
  .main.vyroWideMainKeepMtf{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }
  .main.vyroWideMainKeepMtf > .chartCard{
    order:1!important;
    width:100%!important;
  }
  #vyroMtfRightRail{
    order:2!important;
    position:relative!important;
    top:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  #vyroMtfRightRail .panel{
    max-height:none!important;
  }
  .vyroExtraPanels{
    grid-template-columns:1fr!important;
  }
  #chart{
    height:58vh!important;
    min-height:440px!important;
  }
}

/* Small phones */
@media (max-width:650px){
  body{padding:7px!important}
  .vyroViewToolbar{
    padding:7px!important;
    gap:7px!important;
  }
  .vyroViewToolbar button{
    width:100%!important;
    min-height:42px!important;
  }
  .vyroViewToolbar span{display:none!important}
  #tradeOpenBtn.vyroTradeFloatingBtn{
    right:10px!important;
    bottom:10px!important;
    min-width:148px!important;
    min-height:44px!important;
    padding:9px 13px!important;
    font-size:11px!important;
  }
  #tradePanel.vyroTradeDrawer{
    top:auto!important;
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    width:auto!important;
    max-height:88vh!important;
    border-radius:20px 20px 14px 14px!important;
  }
  #tradePanel.vyroTradeDrawer .tradeGrid{
    grid-template-columns:1fr!important;
  }
}

/* ===== END V7.3.2 ===== */