.kline-workspace {
  padding: 12px;
}

.kline-workspace-modal {
  width: min(1600px, 100%);
  height: min(920px, calc(100dvh - 24px));
  max-width: none;
  border-radius: 8px;
}

.kline-workspace-chart .kline-scroll-inner,
.kline-workspace-chart svg {
  min-width: 100% !important;
}

.kline-workspace-trades {
  min-height: 0;
}

.kline-mobile-chart-surface {
  display: block !important;
  width: 100%;
}

/* The legacy SVG renderer compresses sparse trades into a flat line. Keep a
   single renderer active so mobile and desktop show the same full candles. */
.kline-desktop-chart-surface {
  display: none !important;
}

.ave-mobile-candles {
  width: 100%;
  height: 460px;
  min-height: 390px;
}

  .kline-mobile-tabs,
  .kline-mobile-actions {
  display: none;
}

.kline-trade-buy {
  color: #061812;
  background: #18b989;
  border: 1px solid #29d5a2;
}

.kline-trade-buy:hover {
  background: #29d5a2;
}

.kline-trade-sell {
  color: #fff;
  background: #d94355;
  border: 1px solid #f05a6b;
}

.kline-trade-sell:hover {
  background: #f05a6b;
}

@media (min-width: 1024px) {
  .kline-workspace-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    overflow: hidden;
  }

  .kline-workspace-header,
  .kline-workspace-stats {
    grid-column: 1 / -1;
  }

  .kline-workspace-header {
    grid-row: 1;
  }

  .kline-workspace-stats {
    grid-row: 2;
  }

  .kline-workspace-toolbar {
    grid-column: 1;
    grid-row: 3;
  }

  .kline-workspace-chart {
    grid-column: 1;
    grid-row: 4;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
  }

  .kline-workspace-chart > .kline-scroll,
  .kline-workspace-chart > div {
    width: 100%;
  }

  .kline-workspace-values {
    grid-column: 1;
    grid-row: 5;
  }

  .kline-workspace-indicators {
    grid-column: 1;
    grid-row: 6;
  }

  .kline-workspace-trades {
    grid-column: 2;
    grid-row: 3 / 7;
    display: flex;
    flex-direction: column;
    border-top: 0;
    border-left: 1px solid #1f2937;
    overflow: hidden;
  }

  .kline-trades-list {
    flex: 1;
    max-height: none !important;
  }
}

@media (max-width: 1023px) {
  .kline-workspace {
    padding: 0;
  }

  .kline-workspace-modal {
    height: 100dvh;
    border-width: 0;
    border-radius: 0;
  }

  .kline-close-button {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    right: 10px !important;
    z-index: 80 !important;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50% !important;
    background: rgba(33, 38, 45, 0.96) !important;
  }

  .kline-close-button span {
    display: none;
  }

  .kline-workspace-indicators {
    display: none !important;
  }

  .kline-workspace-scroll {
    overflow-y: auto;
    padding-bottom: 76px;
  }

  .kline-mobile-tabs {
    display: flex;
    gap: 22px;
    padding: 9px 16px 0;
    background: #151a23;
    border-bottom: 1px solid #28303d;
  }

  .kline-mobile-tabs button {
    position: relative;
    padding: 4px 0 10px;
    color: #8f98a8;
    font-size: 15px;
    font-weight: 700;
  }

  .kline-mobile-tabs button.is-active {
    color: #f2f4f8;
  }

  .kline-mobile-tabs button.is-active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #3b82f6;
    content: "";
  }

  .kline-mobile-chart-surface {
    display: block !important;
  }

  .kline-workspace-chart {
    padding: 0;
  }

  .kline-workspace-chart .ave-mobile-candles {
    height: min(56vh, 520px);
    min-height: 360px;
  }

  .kline-mobile-actions {
    display: none;
  }

  .kline-mobile-actions button {
    display: flex;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #07151a;
  }

  .kline-mobile-actions strong {
    font-size: 17px;
    line-height: 20px;
  }

  .kline-mobile-actions span {
    font-size: 11px;
    line-height: 15px;
  }

  .kline-mobile-buy {
    background: #19bd91;
  }

  .kline-mobile-sell {
    background: #f04463;
    color: #fff !important;
  }

  .kline-workspace-trades {
    display: block;
    min-height: 360px;
    margin-top: 0;
  }

  .kline-workspace-header {
    padding: 12px;
  }

  .kline-workspace-stats > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kline-workspace-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .kline-workspace-toolbar > div:last-child {
    width: 100%;
    justify-content: space-between;
  }

  .kline-workspace-chart svg {
    max-height: 390px !important;
  }

  .kline-workspace-indicators {
    align-items: flex-start;
    flex-direction: column;
  }

  .kline-workspace-indicators > div {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .kline-workspace-trades > div:first-child {
    align-items: flex-start;
    gap: 8px;
  }

  .kline-workspace-trades > div:first-child > div:first-child {
    flex-wrap: wrap;
  }

  .kline-workspace-trades > div:first-child > div:last-child {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 520px) {
  .kline-workspace-header > div {
    align-items: flex-start;
  }

  .kline-workspace-header h3 {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kline-workspace-chart {
    padding: 0;
  }

  .kline-workspace-chart svg {
    max-height: 340px !important;
  }

  .kline-workspace-trades {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .kline-workspace-trades .grid {
    min-width: 0;
    width: 100%;
    grid-template-columns: minmax(52px, 0.9fr) minmax(42px, 0.7fr) minmax(72px, 1.2fr) minmax(62px, 1fr) minmax(58px, 0.9fr) !important;
    gap: 4px !important;
  }

  .kline-workspace-trades .grid > div {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kline-trades-list {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .kline-workspace-header .text-2xl,
  .kline-workspace-header .sm\:text-3xl {
    font-size: 25px;
  }

  .kline-workspace-stats > div > div {
    min-height: 62px;
  }
}