.ahura-avatar,
.ahura-portrait {
  display: block;
  object-fit: cover;
}

.ahura-avatar {
  border-radius: 50%;
  background: #f6e1dc;
}

.ahura-portrait-wrap {
  position: relative;
  width: min(280px, 70vw);
}

.ahura-portrait {
  width: 100%;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(42, 20, 24, 0.16);
}

.ahura-listening .ahura-avatar,
.ahura-speaking .ahura-avatar,
.ahura-listening .ahura-portrait-wrap,
.ahura-speaking .ahura-portrait-wrap {
  animation: ahura-listen 1.8s ease-in-out infinite;
}

.ahura-speaking .ahura-avatar,
.ahura-speaking .ahura-portrait-wrap {
  animation-name: ahura-speak;
  animation-duration: 1.15s;
}

@keyframes ahura-listen {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(114, 36, 58, 0.28);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(114, 36, 58, 0);
    transform: scale(1.04);
  }
}

@keyframes ahura-speak {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(141, 106, 61, 0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(141, 106, 61, 0);
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ahura-listening .ahura-avatar,
  .ahura-speaking .ahura-avatar,
  .ahura-listening .ahura-portrait-wrap,
  .ahura-speaking .ahura-portrait-wrap {
    animation: none;
    outline: 2px solid #72243a;
    outline-offset: 3px;
    transform: none;
  }
}

.ahura-voice {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}

.ahura-voice p {
  margin: 0;
  font: 400 13px/1.45 Outfit, sans-serif;
  color: #5c514b;
}

.ahura-voice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ahura-voice button {
  border: 1px solid rgba(114, 36, 58, 0.25);
  background: #fffaf6;
  color: #1d1412;
  border-radius: 999px;
  font: 600 14px Outfit, sans-serif;
  padding: 8px 12px;
  cursor: pointer;
}

.ahura-voice button[aria-pressed='true'] {
  background: #72243a;
  color: #f3ece4;
  border-color: #72243a;
}

.ahura-captions {
  min-height: 2.6em;
  margin: 0;
  white-space: pre-wrap;
  font: 400 14px/1.45 Outfit, sans-serif;
}

.ahura-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 10px;
}

.ahura-msg p {
  margin: 0;
  white-space: pre-wrap;
}

.ahura-header {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.ahura-header strong {
  display: block;
  font-family: Fraunces, serif;
}

.ahura-header span {
  font-size: 12px;
  color: #5c514b;
}