.history-chart-shell,
.history-chart {
  width: 100%;
  height: 440px;
}

.history-chart-shell .history-chart {
  height: 100%;
}

.history-chart-shell {
  position: relative;
}

.history-chart-controls {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.history-chart-line-mode {
  padding: 3px;
}

.archive-avgline-mode-control .history-chart-line-mode button {
  border-radius: 0;
}

.archive-avgline-mode-control .history-chart-line-mode button:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.archive-avgline-mode-control .history-chart-line-mode button:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.segmented--range-preset button {
  border-radius: 0;
}

.segmented--range-preset button:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.segmented--range-preset button:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.history-chart-line-mode button {
  font-size: inherit;
}

.chart-section--archive .history-chart-shell,
.chart-section--archive .history-chart {
  flex: 1;
  min-height: 520px;
  height: calc(100dvh - 280px);
}

.chart-placeholder {
  min-height: 260px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(148, 163, 184, 0.2);
  border-radius: var(--radius);
}

.chart-tooltip-title {
  margin-bottom: 8px;
  color: #e5e7eb;
  font-weight: 750;
}

.chart-tooltip-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 5px;
}

.chart-tooltip-label {
  min-width: 0;
  overflow: hidden;
  color: #cbd5e1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-tooltip-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--chart-tooltip-marker-color, currentColor);
}

.chart-tooltip-row strong {
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.chart-section--archive .chart-placeholder {
  flex: 1;
  min-height: 520px;
  height: calc(100dvh - 280px);
}

@media (max-width: 680px) {
  .chart-section--archive .history-chart-shell,
  .chart-section--archive .history-chart,
  .chart-section--archive .chart-placeholder {
    min-height: 420px;
    height: calc(100dvh - 340px);
  }
}