.residue-hover {
  cursor: help;
  border-bottom: 1px dotted #9aa1a9;
}

.residue-hover:hover {
  background-color: #eef0f2;
  border-bottom-color: currentColor;
}

/* Toggled by molviewer_controller when the matching atom is hovered in the
   3D view -- keeps sequence text and structure in sync in both directions. */
.residue-active {
  font-weight: 700;
  background-color: #fff3b0;
  border-radius: 2px;
}

/* Sidebar + main-pane workspace shell used by the predictions views. */
.workspace {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
}

.workspace-sidebar {
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid var(--bs-border-color);
  padding-right: 1rem;
}

.workspace-main {
  flex: 1;
  min-width: 0;
  max-width: 46rem;
}

.workspace-list .list-group-item {
  border-left: none;
  border-right: none;
  border-radius: 0 !important;
}

.workspace-list .list-group-item.active {
  background-color: #eef0f2;
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .workspace {
    flex-direction: column;
  }

  .workspace-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--bs-border-color);
    padding-right: 0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}

/* Pipeline stepper -- same visual language as NgsOrchestrator's (own copy,
   not shared -- no view/asset code is shared between engines in this
   platform). Status drives the icon circle's color; see
   Folding::PredictionsHelper for how each stage's status is computed. */
.pipeline-map-icon {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-color);
}

.pipeline-map-stage-done .pipeline-map-icon {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success);
}

.pipeline-map-stage-in_progress .pipeline-map-icon {
  /* Bootstrap's --bs-info-bg-subtle is a fixed value baked into its
     compiled CSS (not derived from --bs-info at runtime), so it stays
     Bootstrap's default light cyan regardless of the host's teal
     --bs-info override. color-mix() keeps this in sync with whatever
     --bs-info actually is. */
  background-color: color-mix(in srgb, var(--bs-info) 15%, white);
  color: var(--bs-info);
}

.pipeline-map-stage-failed .pipeline-map-icon {
  background-color: var(--bs-danger-bg-subtle);
  color: var(--bs-danger);
}

.pipeline-map-arrow {
  margin-top: 1.1rem;
}