/* Geometry for the expanded candle chart only. Sphere rendering is unaffected. */
#detached:has(> .detached-frame > .card.detached[data-sphere-view="chart"]) > .detached-frame {
  width: min(1600px, 100%) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 24px) !important;
  height: auto !important;
  box-sizing: border-box;
  margin-inline: auto;
  padding: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

#detached:has(> .detached-frame > .card.detached[data-sphere-view="chart"]) > .detached-frame > .detached-close {
  position: sticky !important;
  top: 8px !important;
  right: auto !important;
  width: 44px !important;
  height: 44px !important;
  display: flex;
  margin-left: auto;
  margin-right: 8px;
  margin-bottom: -44px;
  z-index: 30;
}

#detached .card.detached[data-sphere-view="chart"] {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

#detached .card.detached[data-sphere-view="chart"] .card-head {
  box-sizing: border-box;
  padding-right: 56px !important;
}

#detached .card.detached[data-sphere-view="chart"] .card-tools {
  flex-wrap: wrap !important;
}

#detached .card.detached[data-sphere-view="chart"] .chart-shell {
  max-height: none !important;
  min-height: 0 !important;
  flex: none !important;
}

#detached .card.detached[data-sphere-view="chart"] .chart-wrapper {
  flex-shrink: 0 !important;
}

#detached .card.detached[data-sphere-view="chart"] .sr-live-tick-badge {
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  max-width: calc(100% - 120px) !important;
}

@media (max-width: 900px) {
  #detached .card.detached[data-sphere-view="chart"] .card-head {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: auto;
  }

  #detached .card.detached[data-sphere-view="chart"] .symbol-wrap {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #detached .card.detached[data-sphere-view="chart"] .symbol-wrap h2 {
    min-width: 0;
  }

  #detached .card.detached[data-sphere-view="chart"] .pattern-pill {
    grid-column: 1 / -1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* Keep indicator labels and their compact values legible in the expanded chart. */
@media (max-width:900px) {
  #detached .card.detached .indicator-hud { grid-template-columns:repeat(auto-fit,minmax(115px,1fr)) !important; pointer-events:auto; }
  #detached .card.detached .indicator-chip { white-space:nowrap !important; overflow-wrap:normal !important; }
  #detached .card.detached .indicator-chip strong { flex-shrink:0; white-space:nowrap; }
}