:root {
  --tulpa-accent: rgba(124, 58, 237, 1);
  --tulpa-kanade: linear-gradient(-45deg, #ffe9c7, #ffdaad, #ffdba8, #ffe7c2);
  --tulpa-philia: linear-gradient(-45deg, #e0d2f3, #d1c1eb, #d1bceb, #d8d0f0);
}

.tulpa-speech {
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 1rem 0;
}

.tulpa-speech-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tulpa-speech-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tulpa-accent);
}

.tulpa-speech-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tulpa-accent);
}

.tulpa-speech-body {
  line-height: 1.75;
}

.tulpa-speech-body > p,
.tulpa-speech-body > ul,
.tulpa-speech-body > ol,
.tulpa-speech-body > blockquote,
.tulpa-speech-body > table,
.tulpa-speech-body > pre {
  margin-bottom: 1rem;
}

.tulpa-speech-body > p:last-child,
.tulpa-speech-body > ul:last-child,
.tulpa-speech-body > ol:last-child,
.tulpa-speech-body > blockquote:last-child,
.tulpa-speech-body > table:last-child,
.tulpa-speech-body > pre:last-child {
  margin-bottom: 0;
}

.tulpa-speech-kanade {
  background-image: var(--tulpa-kanade);
  background-size: 300% 300%;
}

.tulpa-speech-philia {
  background-image: var(--tulpa-philia);
  background-size: 300% 300%;
}