@keyframes lbaic-message-show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.lbaic {
  &-message {
    &-row {
      display: grid;
      animation: lbaic-message-show 360ms var(--lbaic-ts-tf) forwards;

      &:not(:last-child) {
        padding-bottom: 4px;
      }
    }

    &-title {
      display: flex;
      align-items: center;

      &:not(:last-of-type) {
        padding-bottom: 4px;
      }

      &-icon {
        width: 24px;
        height: 24px;
        display: flex;
        background-color: var(--lbaic-chatbot-avatar-bg);
        border-radius: 50%;

        svg {
          width: 20px;
          height: 20px;
          display: block;
          margin: auto;
          fill: var(--lbaic-main);
        }
      }

      &-in {
        padding-left: 4px;
        font-size: var(--lbaic-fs-12);
        font-weight: var(--lbaic-fw-500);
        color: var(--lbaic-text-color);
        line-height: var(--lbaic-lh-24);
      }
    }

    & {
      display: flex;
      align-items: center;
      color: var(--lbaic-text-color);
    }

    &-in {
      padding: 14px;
    }

    &-body {
      &-in {
        width: var(--lbaic-message-mw);
        display: grid;
      }

      &:has(.lbaic-message-body-in:not(:only-child)) {
        .lbaic-message-body-in {
          display: flex;
          align-items: center;
          padding-block-end: 4px;
        }
      }
    }

    &-info {
      font-size: var(--lbaic-fs-14);
      font-weight: var(--lbaic-fw-400);
      line-height: var(--lbaic-lh-24);
      word-break: break-word;

      strong, b {
        font-weight: var(--lbaic-fw-700, 700);
      }

      & > p {
        user-select: text;
      }

      ol {
        list-style-type: auto;
      }

      ul {
        list-style-type: disc;

        li {
          user-select: text;
        }
      }
    }

    &-action-submission {
      display: flex;
      gap: 8px;
      align-items: flex-start;

      &-status {
        &.success {
          .lbaic-message-action-submission-status-i {
            fill: currentColor;
            background-color: var(--lbaic-main);
            padding: 2px;
            border-radius: 11px;
          }
        }

        &.error {
          .lbaic-message-action-submission-status-i {
            fill: currentColor;
            background-color: var(--lbaic-red-100);
            padding: 2px;
            border-radius: 11px;
          }
        }

        &-i {
          width: 20px;
          height: 20px;
        }
      }

      &-content {
        flex: 1;
        min-width: 0;
      }
    }

    &-data {
      &-divider {
        height: 12px;
      }

      &-fields {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 4px 12px;
        font-size: var(--lbaic-fs-12);
        font-weight: var(--lbaic-fw-400);
        line-height: var(--lbaic-lh-24);
      }

      &-field {
        &-row {
          display: contents;
        }

        &-label {
          font-weight: var(--lbaic-fw-500);
          color: var(--lbaic-input-action-color);
          user-select: text;
          white-space: nowrap;
        }

        &-value {
          user-select: text;
          word-break: break-word;
        }
      }
    }

    &-actions {
      display: flex;
      padding-block-start: 4px;

      &-in {
        position: relative;

        &:not(:last-child) {
          padding-inline-end: 4px;
        }
      }
    }

    &-error {
      display: flex;
      align-items: center;

      &:not(:first-of-type) {
        padding-block-start: 10px;
      }

      &-in {
        padding-inline-end: 10px;
        font-size: var(--lbaic-fs-12);
        color: var(--lbaic-red-100);
        line-height: var(--lbaic-lh-24);
        user-select: text;
      }

      &-action {
        --lbaic-button-color: var(--lbaic-red-100);
      }
    }
  }
}