/* static/css/terminal_chart.css */

.terminal-chart-wrap{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
  overflow:hidden;

  position:relative;

  display:flex;
  flex-direction:column;
  min-height:0;
}

/* TradingView-like draggable splitter between price and volume panels */
.tv-volume-splitter{
  position:absolute;
  left:0;
  right:0;
  height:10px;
  margin-top:-5px;
  cursor:row-resize;
  z-index:5;
}

.tv-volume-splitter::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:4px;
  height:1px;
  background: rgba(255,255,255,.10);
}

.tv-volume-splitter:hover::before,
.tv-volume-splitter.is-dragging::before{
  background: rgba(255,255,255,.22);
}


/* TradingView-like right price scale drag zone (↕ to scale Y / candle height) */
.tv-y-scale-handle{
  position:absolute;
  right:0;
  /* top/height/width are set dynamically from JS */
  cursor: ns-resize;
  z-index:6;
}

.tv-y-scale-handle::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background: rgba(255,255,255,.08);
}

.tv-y-scale-handle:hover::before,
.tv-y-scale-handle.is-dragging::before{
  background: rgba(255,255,255,.18);
}


.terminal-chart-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  height:55px;
  box-sizing:border-box;

  border-bottom:1px solid rgba(255,255,255,.10);
  background:#000;
  flex-shrink:0;
}

.chart-btn{
  height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.20);
  color:#fff;
  cursor:pointer;
}

/* active state for toolbar toggles */
.chart-btn.is-active{
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.10);
}

/*
  IMPORTANT:
  We do NOT "guess" chart height with clamp()/vh.
  The wrap is a flex child that takes remaining page height;
  the chart itself takes remaining height under the toolbar.
*/
.terminal-chart{
  width: 100%;
  flex: 1;
  min-height: 0;
  background:#000;
}

/* Make Plotly fill container height */
.terminal-chart .js-plotly-plot,
.terminal-chart .plot-container,
.terminal-chart .svg-container{
  height: 100% !important;
}

.terminal-chart .js-plotly-plot{
  background:#000 !important;
}