/* Interactive Results Viewer */
#interactive-viewer .viewer-container {
  background-color: #f5f5f5;
  border-radius: 15px;
  padding: 1.5rem;
}

/* Image viewer layout */
#interactive-viewer .image-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wraps image and SVG overlay tightly */
#interactive-viewer .image-display-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  display: block;
}

/* Image fills width, keeps aspect ratio */
#interactive-viewer #viewer-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
}

/* SVG overlay matches image size */
#interactive-viewer #viewer-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  pointer-events: none;
  z-index: 5;
}

/* Trace lines */
#interactive-viewer .trace-line {
  fill: none;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

#interactive-viewer .trace-line[data-trace-type="Ground-Truth"] {
  stroke: #008000;
  stroke-dasharray: 8 4;
}
#interactive-viewer .trace-line[data-trace-type="Gemini 2.5 Pro"] {
  stroke: #2892d2;
}
#interactive-viewer .trace-line[data-trace-type="GPT-5"] {
  stroke: #d37d4c;
}
#interactive-viewer .trace-line[data-trace-type="Qwen 3 VL"] {
  stroke: #6bcccb;
}
#interactive-viewer .trace-line[data-trace-type="o3"] {
  stroke: #c35497;
}

#interactive-viewer .nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  color: white;
  background-color: rgba(54, 54, 54, 0.8);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
#interactive-viewer .nav-arrow:hover {
  background-color: rgba(54, 54, 54, 0.6);
}

#interactive-viewer .nav-arrow.nav-prev {
  left: 1rem;
}
#interactive-viewer .nav-arrow.nav-next {
  right: 1rem;
}
#interactive-viewer .nav-arrow .icon {
  font-size: 1.5rem;
  height: auto;
  width: auto;
}

#interactive-viewer .viewer-instruction {
  margin-top: 0.75rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #363636;
  padding: 0.5em 1em;
  border-radius: 15px;
  background-color: #ffffff;
}

#interactive-viewer .viewer-controls {
  margin-top: 1.5rem;
  padding: 1rem 1rem;
  border-radius: 15px;
  background-color: #ffffff;
}

#interactive-viewer .embodiment-tabs ul {
  border-bottom: none;
}
#interactive-viewer .embodiment-tabs a {
  border: none;
  border-radius: 9999px;
  margin: 0 5px;
  padding: 0.5em 1em;
  transition: background-color 0.2s ease, color 0.2s ease;
  background-color: #f5f5f5;
  color: #363636;
  font-weight: 500;
  display: flex;
  align-items: center;
}
#interactive-viewer .embodiment-tabs a .icon {
  object-fit: contain;
  vertical-align: middle;
  width: 24px;
  height: 24px;
}

#interactive-viewer .embodiment-tabs li:not(.is-active) a:hover {
  background-color: #d8d8d8;
}
#interactive-viewer .embodiment-tabs li.is-active a {
  background-color: #363636;
  color: #ffffff;
  pointer-events: none;
}

/* Custom styles for trace toggles */
#interactive-viewer .trace-toggles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
#interactive-viewer .trace-toggle {
  border: none;
  border-radius: 9999px;
  padding: 0.5em 1em;
  font-weight: 500;
  background-color: #f5f5f5;
  color: #363636;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
}
#interactive-viewer .trace-toggle:hover {
  background-color: #e8e8e8;
}

/* Active state for toggles */
#interactive-viewer .trace-toggle.is-active {
  background-color: #363636;
  color: #ffffff;
}

/* Color key circle */
#interactive-viewer .trace-toggle .color-key {
  width: 24px;
  height: 12px;
  border-radius: 9999px;
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* Reasoning Box */
#interactive-viewer .viewer-reasoning {
  margin-top: 1.5rem;
  border-radius: 15px;
  background-color: #ffffff;
  padding: 1rem;
}

/* Toggle button */
#interactive-viewer .reasoning-toggle {
  border: none;
  border-radius: 0;
  background-color: transparent;
  font-weight: 600;
  color: #363636;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin-bottom: 0.5rem;
}

#interactive-viewer .reasoning-toggle:hover {
  background-color: transparent;
}

/* Hidden content */
#interactive-viewer .reasoning-content {
  display: none;
}

#interactive-viewer .viewer-reasoning.is-active .reasoning-content {
  display: block;
}

/* Model buttons - match trace toggle style */
#interactive-viewer .reasoning-model-controls {
  margin-bottom: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

#interactive-viewer .reasoning-model-controls .trace-toggle {
  border: none;
  border-radius: 9999px;
  padding: 0.5em 1em;
  font-weight: 500;
  background-color: #f5f5f5;
  color: #363636;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#interactive-viewer .reasoning-model-controls .trace-toggle:hover {
  background-color: #e8e8e8;
}

#interactive-viewer .reasoning-model-controls .trace-toggle.is-active {
  background-color: #363636;
  color: #ffffff;
}

#interactive-viewer .reasoning-model-controls .color-key {
  width: 24px;
  height: 12px;
  border-radius: 9999px;
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* Reasoning text */
#interactive-viewer .reasoning-text {
  background-color: #ffffff;
  padding: 1rem;
  max-height: 300px;
  overflow-y: auto;
  font-size: 0.95rem;
  text-align: left;
  color: #444;
  line-height: 1.6;
}

#interactive-viewer .reasoning-text h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  color: #222;
}

#interactive-viewer .reasoning-text h4 {
  font-size: 1.05em;
  font-weight: 600;
  margin-top: 0.4em;
  margin-bottom: 0.25em;
  color: #222;
}

#interactive-viewer .reasoning-text h5 {
  font-size: 1em;
  font-weight: 600;
  margin-top: 0.3em;
  margin-bottom: 0.2em;
  color: #222;
}

#interactive-viewer .reasoning-text strong {
  font-weight: 600;
  color: #222;
}

#interactive-viewer .reasoning-text em {
  font-style: italic;
}

#interactive-viewer .reasoning-text code {
  background-color: #e8e8e8;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}