.trv-live-chart {
  position: relative;
  width: 100%;
  min-height: clamp(16rem, 42vw, 28rem);
  background: linear-gradient(180deg, #121418 0%, #0c0e11 100%);
}

.trv-live-chart--fullscreen {
  min-height: 100vh;
}

.trv-live-chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0.9rem 0.35rem;
  color: #e8edf2;
  font-size: 0.82rem;
}

.trv-live-chart__symbol {
  font-weight: 800;
  letter-spacing: 0.04em;
}

.trv-live-chart__price {
  font-size: 1.15rem;
  font-weight: 900;
  color: #9ef0c4;
}

.trv-live-chart__meta {
  opacity: 0.82;
}

.trv-live-chart__badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 196, 86, 0.18);
  color: #ffd98a;
  border: 1px solid rgba(255, 196, 86, 0.35);
}

.trv-live-chart__badge--err {
  background: rgba(255, 96, 96, 0.16);
  color: #ffb4b4;
  border-color: rgba(255, 96, 96, 0.35);
}

.trv-live-chart canvas {
  display: block;
  width: 100%;
  height: clamp(14rem, 38vw, 24rem);
}

.trv-live-chart--fullscreen canvas {
  height: calc(100vh - 3.2rem);
}

.trv-live-chart__tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem 0.65rem;
  background: rgba(0, 0, 0, 0.22);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.trv-live-chart__tab {
  border: 1px solid rgba(198, 239, 213, 0.28);
  background: rgba(16, 24, 22, 0.55);
  color: #d8efe4;
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.trv-live-chart__tab.is-active,
.trv-live-chart__tab[aria-selected="true"] {
  background: rgba(126, 203, 159, 0.22);
  border-color: rgba(198, 239, 213, 0.55);
  color: #f7fff9;
}

.ml-chart-figure--live .ml-chart-figure__img {
  display: none;
}

.ml-chart-figure--live::after {
  inset: 0 0 4.5rem;
}

.ml-chart-figure--live .ml-chart-signal-card {
  bottom: auto;
}

@media (max-width: 640px) {
  .ml-chart-figure--live .ml-chart-signal-card {
    position: relative;
    right: auto;
    top: auto;
    width: auto;
    margin: 0.5rem 0.75rem 0;
  }

  .ml-chart-figure--live::after {
    display: none;
  }
}