node-detail.module.css

.overlay {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  width: 28rem;
  max-height: 60vh;
  background: var(--wb-app-bar-background);
  border: 0.0625rem solid var(--wb-app-bar-border-color);
  border-radius: var(--wb-app-bar-border-radius);
  color: var(--ax-txt-primary-default, #151516);
  display: flex;
  flex-direction: column;
  z-index: 11;
  font-size: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 0.0625rem solid var(--wb-app-bar-border-color);
  flex-shrink: 0;
}

.header-title {
  font-weight: 600;
  font-size: 0.75rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
}

.status--completed {
  color: var(--ai-studio-status-color--completed);
  background: var(--ai-studio-status-bg--completed);
}

.status--failed {
  color: var(--ai-studio-status-color--failed);
  background: var(--ai-studio-status-bg--failed);
}

.close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: none;
  color: var(--ax-txt-secondary-default);
  cursor: pointer;
  border-radius: 0.25rem;
  font-size: 0.85rem;
  line-height: 1;
  flex-shrink: 0;

  &:hover {
    background: color-mix(in srgb, var(--wb-app-bar-border-color), transparent 30%);
  }

  svg {
    width: 100%;
    height: 100%;
  }
}

.body {
  overflow-y: auto;
  flex: 1;
  padding: 0.5rem 0.75rem;
}

.output {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--ax-txt-primary-default);
}