/* inherit from chat_message */

:host(.card) {
  box-shadow:
    color-mix(in srgb, var(--panel-shadow-color) 30%, transparent) 0px 1px 2px
      0px,
    color-mix(in srgb, var(--panel-shadow-color) 15%, transparent) 0px 1px 3px
      1px;
  background-color: var(--panel-surface-color, #f1f1f1);
}

:host(.card) .card-header {
  border-bottom: 1px solid var(--panel-border-color, #e0e0e0);
  background-color: var(--panel-surface-color, #f1f1f1);
  padding-block: 15px;
}

:host(.step-header) {
  width: fit-content;
}

.step-title {
  width: calc(100% - 50px);
  font-size: 1.25em;
  text-align: left;
  overflow-wrap: break-word;
}

.step-message {
  font-size: 1.25em;
  padding-block: 0px;
  padding-inline: 7px;
}

.step-avatar-container {
  width: 15px;
  height: 15px;
  margin: 3px;
}

.step-avatar {
  width: 15px;
  height: 15px;
}