.traceNode {
  position: relative;
}

.childRow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.spanNode {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  background-color: var(--span-background);
  color: var(--span-text);
  border: 1px solid var(--span-border);
  border-radius: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: var(--ds-shadow-small);
  overflow: hidden;
  text-overflow: ellipsis;
  content-visibility: auto;
  cursor: pointer;
  user-select: none;
  z-index: 2;

  &.huge {
    overflow: visible;

    & .spanName {
      flex: 0 1 auto;
      position: sticky;
      left: 0;
    }

    & .spanSpacer {
      flex: 1 0 0;
    }

    & .spanDuration {
      position: sticky;
      right: 0;
      background-color: var(--span-background);
      padding-left: 6px;
      box-shadow: -8px 0 16px 8px var(--span-background);
    }
  }

  &::after {
    position: absolute;
    left: -1px;
    top: -1px;
    width: var(--span-width);
    height: var(--row-height);
    content: "";
  }

  &.small:not(.xHover)::after {
    top: -7px;
  }

  &:hover:not([data-selected]) {
    filter: brightness(0.95);
  }

  &.xHover {
    z-index: 3;
    min-width: var(--span-width);
    max-width: 75%;
    background: linear-gradient(
      90deg,
      var(--span-background) calc(var(--span-width) - 1px),
      var(--span-line),
      var(--geist-background) calc(var(--span-width) + 1px)
    );

    &[data-right-side="true"] {
      background: linear-gradient(
        270deg,
        var(--span-background) calc(var(--span-width) - 1px),
        var(--span-line),
        var(--geist-background) calc(var(--span-width) + 1px)
      );
    }

    & .spanName {
      max-width: max(var(--span-width), 40vw);
    }

    & .spanDuration {
      background: none;
      box-shadow: none;
    }
  }

  &.small:not(.xHover) {
    background-color: var(--span-background);
    border-color: var(--span-border);
    border-radius: 4px;
  }

  &[data-selected] {
    border-width: 2px;
    outline: 2px solid var(--span-border);
    outline-offset: -1px;

    &:hover {
      filter: brightness(0.95);
    }
  }

}

.spanNodeEvent {
  position: absolute;
  height: var(--row-height);
  pointer-events: none;
  z-index: 4;

  & .eventDiamond {
    --size: 7px;
    --offset: -4px;
    position: absolute;
    left: var(--offset);
    bottom: calc(var(--offset) + 1px);
    width: var(--size);
    height: var(--size);
    border: 1px solid var(--span-secondary);
    border-radius: 2px;
    background: var(--span-background);
    transform-origin: 50% 50% 0;
    transform: rotate(45deg);
  }

  /* Workflow-specific: Use custom event color if provided */
  &.customEventColor .eventDiamond {
    border-color: var(--event-color, var(--span-border));
    background: var(--event-color, var(--span-background));
    opacity: 0.8;
  }
  &.customEventColor .hoverInfo {
    border-color: var(--span-border);
    background: var(--span-background);
  }
  &.customEventColor .hoverInfo .eventName {
    color: var(--span-text);
    font-weight: 500;
  }
  &.customEventColor .hoverInfo .eventTimestamp {
    color: var(--span-secondary);
  }

  & .hoverInfo {
    position: absolute;
    margin-top: -1px;
    top: 100%;
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1;
    background: var(--span-background);
    border: 1px solid var(--span-border);
    border-radius: 6px;
    box-shadow: var(--ds-shadow-small);
    transform: translateY(-50%);

    &.alignStart {
      left: -10px;
      padding-left: 18px;
    }
    &.alignEnd {
      right: -10px;
      padding-right: 18px;
    }

    & .eventName {
      color: var(--span-text);
    }
    & .eventTimestamp {
      color: var(--span-secondary);
      font-variant-numeric: tabular-nums;
    }
  }

  &[data-hovered="true"] {
    z-index: 4;

    & .eventDiamond {
      background: var(--span-text);
      border-color: var(--span-text);
    }
    & .hoverInfo {
      display: flex;
    }
  }
}

.colorVercel {
  --span-background: var(--ds-background-100);
  --span-border: var(--ds-gray-500);
  --span-line: var(--ds-gray-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-gray-900);
  --geist-background: var(--ds-gray-100);
}
.color0 {
  --span-background: var(--ds-teal-200);
  --span-border: var(--ds-teal-500);
  --span-line: var(--ds-teal-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-teal-900);
}
.color1 {
  --span-background: var(--ds-blue-200);
  --span-border: var(--ds-blue-500);
  --span-line: var(--ds-blue-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-blue-900);
}
.color2 {
  --span-background: var(--ds-green-200);
  --span-border: var(--ds-green-500);
  --span-line: var(--ds-green-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-green-900);
}
.color3 {
  --span-background: var(--ds-purple-200);
  --span-border: var(--ds-purple-500);
  --span-line: var(--ds-purple-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-purple-900);
}
.color4 {
  --span-background: var(--ds-pink-200);
  --span-border: var(--ds-pink-500);
  --span-line: var(--ds-pink-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-pink-900);
}
.colorHighlight {
  --span-background: var(--ds-amber-200);
  --span-border: var(--ds-amber-500);
  --span-line: var(--ds-amber-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-amber-900);
}

.unlit {
  opacity: 0.3;
}

:global(.dark-theme),
:global(.dark) {
  & .mapContainer canvas {
    filter: invert(1);
  }

  & .spanNode.small {
    &.xHover,
    &:focus-visible {
      &::before {
        text-shadow: 0 1px 0 black;
      }
    }
  }

  & .spanNode:hover:not([data-selected]) {
    filter: brightness(1.05);
  }

  & .spanNode[data-selected]:hover {
    filter: brightness(1.05);
  }
}

@media (prefers-color-scheme: dark) {
  :global(:root:not(.light)) {
    & .mapContainer canvas {
      filter: invert(1);
    }

    & .spanNode.small {
      &.xHover,
      &:focus-visible {
        &::before {
          text-shadow: 0 1px 0 black;
        }
      }
    }

    & .spanNode:hover:not([data-selected]) {
      filter: brightness(1.05);
    }

    & .spanNode[data-selected]:hover {
      filter: brightness(1.05);
    }
  }
}

.spanName {
  flex: 1 1 auto;
  padding-inline: 6px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.spanDuration {
  flex: 0 0 auto;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--span-secondary, var(--ds-gray-alpha-700));
  position: relative;
  z-index: 1;
}

/* SPAN DETAIL PANEL */
.spanDetailPanel {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 1 auto;
}

.spanDetailPanelResizer {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;

  display: none;
  @media (hover: hover) {
    display: block;
  }
}

.spanDetailPanelTop {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 0 1 auto;
  justify-content: space-between;
  position: relative;
}

.spanDetailPanelBody {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  flex: 1 1 0;
  min-height: 0;
  padding: 16px 12px 24px;
  overflow-x: hidden;
  overflow-y: auto;
}

.spanDetailPanelTopInfo {
  --row-height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  font-size: 12px;
  border-bottom: 1px solid var(--border-color);
  flex: 0 1 auto;
}

.spanNameDetailPanel {
  font-size: inherit;
  color: var(--ds-gray-1000);
  word-break: break-word;
}

.spanDetailPanelTruncatedHeading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 1 100%;
  overflow: hidden;
  justify-content: flex-start;
}

.spanDetailPanelName {
  flex: 1 1 0;
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-gray-1000);
}

.spanDetailPanelDuration {
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ds-gray-600);
  background-color: var(--ds-gray-200);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.spanDetailPanelCorner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: var(--row-height);
  justify-content: flex-end;
}

.spanDetailPanelCornerInner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 1 auto;
}

.spanDetailPanelCloseVerticalRule {
  border-left: 1px solid var(--ds-gray-300);
  height: 16px;
}

.spanDetailPanelClose {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover,
  &:focus-visible {
    background-color: var(--ds-gray-200);
  }
}

.spanDetailPanelAttribute {
  margin: 0;
  padding-block: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid var(--border-color);

  &:last-child {
    border-bottom: none;
  }
}

.spanDetailPanelAttributeKey {
  flex: 0 0 auto;
  margin: 0;
  padding-left: 8px;
  font-size: inherit;
  color: var(--ds-gray-900);
}

.spanDetailPanelAttributeValue {
  flex: 0 1 auto;
  margin: 0;
  padding-right: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.spanDetailPanelQuickLink {
  color: inherit;
  text-decoration: none;
  &:hover .spanDetailPanelQuickLinkLabel {
    text-decoration: underline;
  }
}

.spanDetailPanelQuickLinkLabel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font: inherit;
}

.detailGroup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 1 auto;
  &::after {
    margin: 12px -12px 0;
    height: 1px;
    background: var(--border-color);
    content: "";
  }
}

.expanded,
.collapsed,
.ancestorGroup {
  /* Explicit class tokens used by TS for CSS Modules */
}

.detailHeading {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  background: none;
  color: var(--ds-gray-1000);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  &:hover,
  &:focus-visible {
    background-color: var(--ds-gray-100);
  }
}

/* Local replacements for external UI */
.buttonLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  color: var(--ds-gray-1000);
  text-decoration: none;
  background-color: var(--ds-background-100);
  border: 1px solid var(--accents-2);
  border-radius: 6px;
}

.buttonLink:hover,
.buttonLink:focus-visible {
  background-color: var(--ds-gray-100);
}

.note {
  padding: 8px 10px;
  color: var(--ds-gray-900);
  background-color: var(--ds-background-100);
  border: 1px solid var(--ds-gray-300);
  border-radius: 6px;
}

.skeleton {
  display: inline-block;
  background-color: var(--ds-gray-200);
  border-radius: 4px;
}

.skeletonRounded {
  border-radius: 50%;
}

.detailGroup.collapsed .detailHeadingIcon {
  transform: rotate(-90deg);
}

.infraSpanDescription {
  padding: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ds-gray-900);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ancestorNode {
  padding: 8px 8px 8px;
  font-family: inherit;
  font-size: 13px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  &:hover,
  &:focus-visible {
    background: var(--ds-gray-100);
  }
}

.ancestorText {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  color: var(--ds-gray-900);
  white-space: nowrap;
}

.ancestorName {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ancestorDuration {
  /* font-family: var(--font-mono); */
  font-variant-numeric: tabular-nums;
}

.ancestorLineContainer {
  position: relative;
  margin-top: 6px;
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--ds-gray-alpha-400);

  &::before,
  &::after {
    position: absolute;
    top: -2px;
    width: 1px;
    height: 5px;
    background-color: inherit;
    content: "";
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }
}

.ancestorLine {
  position: absolute;
  top: -2px;
  height: 5px;
  background-color: var(--span-background);
  border: 1px solid var(--span-line);
  border-radius: 1px;
}

.ancestorNode {
  &:hover,
  &:focus-visible,
  &:last-of-type {
    & .ancestorName {
      color: var(--ds-gray-1000);
    }

    & .ancestorLine {
      background-color: var(--span-line);
      border-color: var(--span-border);
    }
  }
}

/* ZOOM BUTTON */
.zoomButtonGroup {
  display: inline-flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 1 auto;
  background-color: var(--geist-background);
  border-radius: 10ex;
  box-shadow: var(--ds-shadow-small);
  border: 1px solid var(--accents-2);
  animation: zoom-buttons-fade-in 0.3s ease 0.3s backwards;
}

@keyframes zoom-buttons-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.zoomButton {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  height: 32px;
  width: 38px;
  background-color: transparent;
  border: none;
  color: var(--accents-5);
  box-shadow: none !important;
  cursor: pointer;

  &:hover,
  &:focus-visible {
    color: var(--accents-7);
  }
}

.zoomButton:hover {
  background-color: transparent;
  color: var(--accents-7);
}

.zoomButton:focus-visible {
  /* TODO */
}

.divider {
  width: 1px;
  background-color: var(--accents-2);
  margin: -1px;
}

/* TRACE */
.markersContainer {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 100%;
  height: calc(100% - var(--scrollbar-width));
  line-height: 1;
  z-index: 4;
  pointer-events: none;
}

.markers {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  gap: calc(var(--marker-width) - 1px);
  height: var(--marker-height);
  padding-left: 8px;
  background: var(--ds-background-200);
  overflow: hidden;
  box-shadow: 0 4px 8px 0 var(--ds-background-200);
  border-bottom: 1px solid var(--marker-color);
}

.marker {
  position: relative;
  flex: 0 0 1px;
  border-left: 1px solid var(--marker-color);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--ds-gray-900);

  height: var(--marker-height);
  &.notch {
    top: calc(var(--marker-height) - var(--marker-notch-height));
    height: var(--marker-notch-height);
  }
}

.markerLabel {
  position: absolute;
  left: 2px;
  bottom: 6px;
  color: var(--ds-gray-900);
  user-select: none;
  white-space: nowrap;
}

.markerClockTime {
  display: block;
  font-size: 9px;
  color: var(--ds-gray-alpha-500);
  margin-top: 1px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.eventMarkersContainer {
  position: absolute;
  top: -8px;
  width: var(--timeline-scroll-width);
  height: calc(100% - var(--scrollbar-width));
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

.eventMarkers {
  position: sticky;
  top: 0;
  height: calc(100% + 2 * var(--timeline-padding));
  overflow: hidden;
}

.eventMarker {
  position: absolute;
  border-left: 1px dotted var(--ds-gray-500);
  height: 100%;
}

.cursorMarkerStickyParent {
  position: absolute;
  left: 0;
  top: -8px;
  width: var(--timeline-scroll-width);
  height: calc(100% + 2 * var(--timeline-padding));
  pointer-events: none;
}

.cursorMarkerLabelContainer {
  position: sticky;
  top: 0;
  left: 0;
  display: none;
  width: 1px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.cursorMarkerLabel {
  position: sticky;
  top: 4px;
  width: 1px;
  height: var(--marker-height);
  background-color: var(--marker-color);

  &[data-text]::before {
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 6px;
    height: 18px;
    line-height: 16px;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    background-color: var(--ds-background-100);
    color: var(--ds-gray-900);
    border: 1px solid var(--ds-gray-500);
    border-radius: 10ex;
    box-shadow: var(--ds-shadow-small);
    content: attr(data-text);
  }

  &[data-align="left"]::before {
    left: -6px;
    transform: unset;
  }

  &[data-align="right"]::before {
    left: unset;
    right: -6px;
    transform: unset;
  }
}

.cursorMarkerContainer {
  position: sticky;
  top: 0;
  width: 1px;
  height: 100%;
  pointer-events: none;
}

.cursorMarker {
  position: sticky;
  top: 0;
  width: 1px;
  height: 100%;
  display: none;
  background-color: var(--marker-color);
  z-index: 1;
}

.cursorSelection {
  position: absolute;
  top: 0;
  height: 100%;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  background-color: var(--ds-gray-100);
  border-inline: 1px solid var(--ds-gray-300);

  &::before,
  &::after {
    position: sticky;
    bottom: 8px;
    padding: 0 6px;
    height: 18px;
    line-height: 16px;
    font-size: 10px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    background-color: var(--ds-background-100);
    color: var(--ds-gray-900);
    border: 1px solid var(--ds-gray-500);
    border-radius: 10ex;
    box-shadow: var(--ds-shadow-small);
    white-space: nowrap;
  }

  &::before {
    margin-left: 8px;
    content: attr(data-range);
  }
  &::after {
    margin-right: 8px;
    content: attr(data-duration);
  }
}

@keyframes span-skeleton {
  from {
    opacity: 0.6;
  }

  to {
    opacity: 0.3;
  }
}

.traceViewer {
  &.skeleton {
    & * {
      pointer-events: none !important;
    }

    & .mapCanvas {
      display: none;
    }

    & .markerLabel {
      display: none;
    }

    & .spanNode {
      animation: span-skeleton 1s infinite alternate;

      & * {
        display: none;
      }
    }

    & .zoomButtonTraceViewer {
      display: none;
    }
  }

  & .markers {
    border-top: 1px solid var(--marker-color);
    border-bottom: none;
  }

  & .marker.notch {
    top: 0;
  }

  & .markerLabel {
    bottom: 3px;
  }

  & .cursorMarkerLabel {
    top: 8px;
  }
}

.timeline:hover {
  & .cursorMarkerLabelContainer,
  & .cursorMarker {
    display: block;
  }
}

/* SEARCH BAR */
.searchBar {
  position: absolute;
  left: 0;
  top: var(--search-gap);
  display: flex;
  flex-direction: row;
  gap: var(--search-gap);
  width: 100%;
  padding-inline: var(--search-gap);
  height: var(--search-height);
}

.searchInput {
  flex: 0 1 100%;
  position: relative;
  height: var(--search-height);
  background: var(--ds-background-100);
}

.searchInputLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--border-color, var(--ds-gray-alpha-400));

  & input {
    margin-left: -16px;
    padding-inline: 12px;
    font-family: inherit;
    font-size: 14px;
    background: transparent;
    border: none;
    outline: none;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
      display: none;
    }
  }
}

.searchInputPrefix {
  width: var(--search-height);
  height: var(--search-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-gray-800);
}

/* MINI MAP */
.mapContainer {
  position: absolute;
  left: 0;
  top: calc(var(--search-height) + 2 * var(--search-gap));
  /* border-bottom: 1px solid var(--border-color); */
  cursor: move;
}

.mapCanvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}

:global(.dark-theme) .mapCanvas,
:global(.dark) .mapCanvas {
  mix-blend-mode: screen;
}

@media (prefers-color-scheme: dark) {
  :global(:root:not(.light)) .mapCanvas {
    mix-blend-mode: screen;
  }
}

.mapThumb {
  position: absolute;
  top: 0;
  height: var(--map-height);
  background: var(--ds-gray-alpha-200);
  border: 1px solid var(--ds-gray-alpha-400);
  border-radius: 3px;
  box-shadow: var(--ds-shadow-small);
  transform: translateX(var(--timeline-padding));
  pointer-events: none;
}

/* TRACE VIEWER */
.traceViewer,
.spanDetailPanelTraceViewer {
  --border-color: var(--ds-gray-300);
  --marker-color: var(--ds-gray-300);
}

.traceViewer {
  --scrollbar-width: 0;
  position: relative;
  display: flex;
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  background-color: var(--ds-background-200);

  & button {
    font-family: inherit;
  }
}

.traceViewerContent {
  position: absolute;
  left: 0;
  top: calc(var(--search-height) + 3 * var(--search-gap) + var(--map-height));
  width: calc(var(--timeline-width) + 2 * var(--timeline-padding));
  height: calc(
    var(--timeline-height) - 2 * var(--timeline-padding) -
      var(--scrollbar-width) - var(--marker-height) - var(--search-height)
  );

  &.inert {
    display: none;
  }
}

.timeline {
  width: calc(var(--timeline-width) + 2 * var(--timeline-padding));
  height: var(--timeline-height);
  font-size: 13px;
  overflow-y: scroll;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.zoomButtonTraceViewer {
  position: absolute;
  bottom: calc(-12px - var(--search-height) - var(--scrollbar-width));
  right: calc(var(--scrollbar-width) + 12px);
  z-index: 10;
}

.spanDetailPanelTraceViewer {
  position: absolute;
  margin-top: -1px;
  right: 0;
  top: calc(
    var(--search-height) + 2 * var(--search-gap) + var(--map-height) + 9px
  );
  bottom: 0;
  width: var(--panel-width);
  border-top: 1px solid var(--ds-gray-200);
  border-left: 1px solid var(--ds-gray-200);
  background-color: var(--geist-background);
  z-index: 10;

  &.hidden {
    display: none;
  }

  &.mobile {
    --panel-width: calc(var(--timeline-width) + 2 * var(--timeline-padding));
    top: 0;
    border-left: none;
  }
}

/* Workflow-specific styles */

/* Step statuses */
.spanRunning,
.spanPending {
  --span-background: var(--ds-blue-200);
  --span-border: var(--ds-blue-500);
  --span-line: var(--ds-blue-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-blue-900);
}

.spanCompleted {
  --span-background: var(--ds-green-200);
  --span-border: var(--ds-green-500);
  --span-line: var(--ds-green-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-green-900);
}

.spanCancelled {
  --span-background: var(--ds-amber-200);
  --span-border: var(--ds-amber-500);
  --span-line: var(--ds-amber-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-amber-900);
}

.spanFailed {
  --span-background: var(--ds-red-200);
  --span-border: var(--ds-red-500);
  --span-line: var(--ds-red-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-red-900);
}

/* Striped background for pending status */
.spanPendingStriped {
  --span-background: repeating-linear-gradient(
    45deg,
    var(--ds-blue-200),
    var(--ds-blue-200) 10px,
    color-mix(in srgb, var(--ds-blue-200) 70%, white) 10px,
    color-mix(in srgb, var(--ds-blue-200) 70%, white) 20px
  );
  --span-border: var(--ds-blue-500);
  --span-line: var(--ds-blue-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-blue-900);
}

.hasQueuedTime {
  &::before {
    content: "";
    position: absolute;
    left: var(--queued-width);
    height: 100%;
    border-left: 2px dotted var(--ds-gray-700);
    pointer-events: none;
  }
}

/* Sleep step - light yellow/orange */
.spanSleep {
  --span-background: var(--ds-amber-200);
  --span-border: var(--ds-amber-500);
  --span-line: var(--ds-amber-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-amber-900);
}

/* Hooks - gray color scheme */
.spanHook {
  --span-background: var(--ds-gray-200);
  --span-border: var(--ds-gray-500);
  --span-line: var(--ds-gray-400);
  --span-text: var(--ds-gray-1000);
  --span-secondary: var(--ds-gray-900);
}

/* ──────────────────────────────────────────────────────────────────────── */
/* Span segments — colored sections overlaid inside span bars              */
/* ──────────────────────────────────────────────────────────────────────── */

.segmentLayer {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}

.segment {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
  overflow: hidden;
}

.segmentLabel {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 4px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ds-gray-900);
  opacity: 0.7;
  pointer-events: none;
  user-select: none;
}

/* Inline segment tags rendered next to the span name */
.segmentTag {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
  white-space: nowrap;
}

/* Queued: hatched — waiting to start */
.segQueued {
  background: repeating-linear-gradient(
    45deg,
    var(--ds-gray-200),
    var(--ds-gray-200) 6px,
    var(--ds-gray-100) 6px,
    var(--ds-gray-100) 12px
  );
}

/* Running: soft blue — actively executing */
.segRunning {
  background-color: var(--ds-blue-200);
}

/* Failed: soft red — attempt ended in failure */
.segFailed {
  background-color: var(--ds-red-200);
}

/* Retrying: hatched — waiting between retry attempts */
.segRetrying {
  background: repeating-linear-gradient(
    45deg,
    var(--ds-gray-alpha-200),
    var(--ds-gray-alpha-200) 6px,
    var(--ds-gray-alpha-100) 6px,
    var(--ds-gray-alpha-100) 12px
  );
}

/* Succeeded: soft green — final successful attempt */
.segSucceeded {
  background-color: var(--ds-green-200);
}

/* Waiting: hatched — hook waiting for payload */
.segWaiting {
  background: repeating-linear-gradient(
    45deg,
    var(--ds-gray-alpha-200),
    var(--ds-gray-alpha-200) 6px,
    var(--ds-gray-alpha-100) 6px,
    var(--ds-gray-alpha-100) 12px
  );
}

/* Sleeping: soft amber — sleep in progress */
.segSleeping {
  background-color: var(--ds-amber-200);
}

/* Received: soft blue — hook received payload */
.segReceived {
  background-color: var(--ds-blue-200);
}

/* Boundary markers — workflow events shown as thin vertical lines instead of diamonds */
.boundaryMarker {
  & .boundaryLine {
    position: absolute;
    left: -0.5px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: transparent;
    z-index: 0;
    transition: background-color 0.15s ease;
  }

  &[data-hovered="true"] .boundaryLine {
    background-color: var(--ds-gray-alpha-400);
  }

  /* Tooltip must sit above the boundary line */
  & .hoverInfo {
    z-index: 1;
  }
}

/* When segments are active, make span background transparent so segments show */
.spanNode.hasSegments {
  background-color: transparent;

  &.small:not(.xHover) {
    background-color: transparent;
  }

  /* Suppress hover expansion gradient — segments handle the background */
  &.xHover {
    background: none;
    min-width: var(--span-width);
    max-width: var(--span-width);

    &[data-right-side="true"] {
      background: none;
    }
  }

  /* Remove duration label background bleed — segments provide the visual */
  & .spanDuration {
    background-color: transparent;
    box-shadow: none;
  }

  /* Let segment tooltips receive pointer events */
  &::after {
    pointer-events: none;
  }

  & .segmentLayer {
    pointer-events: auto;
  }
}

/* Event markers */

/* Failure events - Red */
.eventFailed {
  --event-color: var(--ds-red-600);
  --span-background: var(--ds-red-100);
  --span-border: var(--ds-red-500);
  --span-text: var(--ds-red-900);
  --span-secondary: var(--ds-red-700);
}

/* Retry events - Orange/Yellow */
.eventRetrying {
  --event-color: var(--ds-amber-600);
  --span-background: var(--ds-amber-100);
  --span-border: var(--ds-amber-500);
  --span-text: var(--ds-amber-900);
  --span-secondary: var(--ds-amber-700);
}

/* Webhook-related events - Purple */
.eventHook {
  --event-color: var(--ds-purple-600);
  --span-background: var(--ds-purple-100);
  --span-border: var(--ds-purple-500);
  --span-text: var(--ds-purple-900);
  --span-secondary: var(--ds-purple-700);
}

/* Default event - Blue */
.eventDefault {
  --event-color: var(--ds-blue-600);
  --span-background: var(--ds-blue-100);
  --span-border: var(--ds-blue-500);
  --span-text: var(--ds-blue-900);
  --span-secondary: var(--ds-blue-700);
}