html {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh !important;
  height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.workspace,
.content,
.chart-shell,
.show-sidebar,
.detail-panel {
  min-width: 0;
  min-height: 0;
}

.show-list,
.detail-panel,
.chart-shell {
  -webkit-overflow-scrolling: touch;
}

.workspace > .chart-shell > #chart,
.content > .chart-shell > #chart,
.workspace > #chart,
.content > #chart {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1220px) {
  .workspace,
  .content {
    flex-direction: row;
  }

  .show-sidebar {
    width: clamp(156px, 22vw, 200px);
  }

  .workspace > .detail-panel {
    display: none;
  }
}

@media (max-width: 720px) {
  html {
    overflow-y: auto;
  }

  body {
    height: auto !important;
    overflow-y: auto !important;
  }

  .workspace,
  .content {
    flex-direction: column;
    overflow: visible;
  }

  .workspace,
  .content,
  .chart-shell,
  .show-sidebar,
  .detail-panel {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .show-sidebar {
    width: auto;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid var(--border, #2a2d3a);
    overflow-y: visible;
  }

  .show-list {
    flex: none;
    max-height: min(34dvh, 320px);
    overflow-y: auto;
  }

  .chart-shell {
    flex: none;
    overflow: visible;
  }

  .workspace > .chart-shell > #chart,
  .content > .chart-shell > #chart,
  .workspace > #chart,
  .content > #chart {
    min-height: clamp(360px, 52dvh, 520px);
  }

  .top-bar,
  .chart-shell,
  .footer-note,
  .info-bar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .controls {
    width: 100%;
    justify-content: flex-start;
  }

  .brand-block,
  .controls,
  .chips,
  .show-item,
  .show-sidebar-header {
    min-width: 0;
  }

  .controls > * {
    max-width: 100%;
  }

  .segmented {
    flex-wrap: wrap;
  }

  .search-control,
  .date-range {
    width: 100%;
    flex-wrap: wrap;
  }

  .search-control input[type="text"],
  .date-range input[type="month"] {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 140px;
  }

  .show-item {
    overflow-wrap: anywhere;
  }

  .show-eps {
    flex-shrink: 0;
  }

  .workspace > .chart-shell > #chart,
  .content > .chart-shell > #chart,
  .workspace > #chart,
  .content > #chart {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px) {
  .graph-viewer-page {
    display: flex;
    flex-direction: column;
    height: auto !important;
    overflow-y: auto !important;
  }

  .graph-viewer-page #canvas-container {
    position: relative;
    inset: auto;
    order: 5;
    width: 100%;
    height: clamp(360px, 62dvh, 680px);
  }

  .graph-viewer-page .top-bar,
  .graph-viewer-page .filter-bar,
  .graph-viewer-page .search-box,
  .graph-viewer-page .show-filter-panel,
  .graph-viewer-page .help-hint {
    position: static;
    inset: auto;
    z-index: auto;
  }

  .graph-viewer-page .top-bar {
    order: 1;
    padding: 12px;
    background: #0a0c10;
    pointer-events: auto;
  }

  .graph-viewer-page .top-bar > * {
    pointer-events: auto;
  }

  .graph-viewer-page .filter-bar {
    order: 2;
    padding: 0 12px 8px;
  }

  .graph-viewer-page .search-box {
    order: 3;
    padding: 0 12px 8px;
  }

  .graph-viewer-page .search-box input {
    width: 100%;
  }

  .graph-viewer-page .show-filter-panel {
    order: 4;
    padding: 0 12px 8px;
    max-height: none;
  }

  .graph-viewer-page .show-filter-list {
    max-height: min(32dvh, 280px);
  }

  .graph-viewer-page .detail-panel {
    display: none;
    position: static;
    order: 6;
    width: auto;
    max-height: none;
    margin: 0 12px 12px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .graph-viewer-page .detail-panel.visible {
    display: flex;
  }

  .graph-viewer-page .help-hint {
    order: 7;
    padding: 0 12px 12px;
  }

  .graph-viewer-page .controls {
    width: 100%;
    justify-content: flex-start;
  }

  .graph-viewer-page .stats {
    flex-wrap: wrap;
  }
}