figure.mdx-chat .chat-container {
  display: flex;
  flex-direction: column;
  > * {
    align-items: flex-start;
  }
  >*+* { margin-top: 0.75em;}
  padding: 1em;
  border: 1px solid #ddd;
  border-radius: 8px;
  // max-width: 30em;
}

.chat-item {
  margin: 0;
  max-width: 80%;
  display: inherit;
  > * {
    width: auto;
    align-self: inherit;
  }
}

.chat-bubble {
  border-radius: 50vmin;
  padding: 0.8em 2em;
  position: relative;
  font-size: 0.9em;
  // &::after {
  //   content: '';
  //   display: block;
  //   position: absolute;
  //   width: 0;
  //   height: 0;
  //   bottom: 0;
  //   background: none;
  // }
}
.chat-note {
  color: #888;
  font-size: 0.8em;
  --stack-gap: 0.5em !important;
  line-height: 1.5;
  max-width: 80%;
}
.chat-input {
  align-self: flex-end;
  text-align: right;
  > .chat-bubble {
    color: white;
    background: #8471FF;
    border-bottom-right-radius: 0;
    // &::after {
    //   left: 100%;
    //   border: 0.5em solid #8471FF;
    //   border-top-color: transparent;
    //   border-right-color: transparent;
    // }
  }
}

.chat-output {
  align-self: flex-start;
  > .chat-bubble {
    border-bottom-left-radius: 0;
    background: #F2F4FA;
    // &::after {
    //   right: 100%;
    //   border: 0.5em solid #F2F4FA;
    //   border-top-color: transparent;
    //   border-left-color: transparent;
    // }
  }
}

.sr-only,
.sr-only-focusable:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}