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

  100% {
    opacity: 1;
  }
}

@keyframes lbaic-message-check-show {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  50% {
    opacity: 1;
    transform: scale(1.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

& {
  .lbaic {
    &-message {
      &-container {
        &-in {
          width: fit-content;
        }
      }

      &-row {
        display: grid;

        &:not(.lbaic-no-animation) {
          animation: lbaic-message-show 360ms var(--lbaic-ts-tf) forwards
        }

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

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

        &-typing {
          display: flex;
          align-items: center;
          gap: 3px;
          padding: 8px 0;

          &-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: var(--lbaic-gray-400);
            animation: typingDot 1.4s ease-in-out infinite;

            &:nth-child(2) {
              animation-delay: 0.2s;
            }

            &:nth-child(3) {
              animation-delay: 0.4s;
            }
          }
        }
      }

      &-title {
        display: flex;
        align-items: center;
        gap: 8px;

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

        &-icon {
          width: 24px;
          height: 24px;
          display: flex;
          background-color: var(--lbaic-button-primary-bg);
          border-radius: 50%;
          overflow: hidden;

          svg {
            width: 16px;
            height: 16px;
            display: block;
            margin: auto;
            fill: var(--lbaic-white-100);
            color: var(--lbaic-white-100);
          }

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        &-in {
          font-size: 13px;
          font-weight: var(--lbaic-fw-500);
          line-height: 1.2;
          color: var(--lbaic-text-color);
          letter-spacing: -0.2px;
        }
      }

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

      &-in {
        padding: 12px 14px;

        &-with-check {
          display: flex;
          gap: 8px;
          align-items: flex-start;
        }
      }

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

      &-check {
        width: 16px;
        height: 24px;
        flex-shrink: 0;
        animation: lbaic-message-check-show 400ms ease-out forwards;

        svg {
          width: 100%;
          height: 100%;
          fill: currentColor;
        }
      }

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

          .lbaic-message-actions {
            opacity: 0;
            transition: opacity 300ms ease-in-out;
          }

          &:hover {
            .lbaic-message-actions {
              opacity: 1;
            }
          }

          &.last {
            .lbaic-message-actions {
              opacity: 1;
            }
          }

        }
      }

      &-info {
        font-size: var(--lbaic-fs-14);
        font-weight: var(--lbaic-fw-400);
        line-height: 1.5;
        letter-spacing: 0.28px;
        word-break: break-word;

        & * {
          color: currentColor;
          user-select: text;
        }

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

        ol, ul {
          list-style-type: auto;
          list-style-position: outside;
          padding-inline-start: 16px;
        }

        & > p {
          user-select: text;
        }

        ol {
          list-style-type: auto;
        }

        ul {
          list-style-type: disc;

          li {
            user-select: text;
          }
        }

        h1 {
          font-size: 3.6em;
        }

        h2 {
          font-size: 2.8em;
        }

        h3 {
          font-size: 2.2em;
        }

        h4 {
          font-size: 1.8em;
        }

        h5 {
          font-size: 1.4em;
        }

        h6 {
          font-size: 1.2em;
        }

        h1, h2, h3, h4, h5, h6 {
          font-weight: 500;
        }

        .lbaic-message-table-wrapper {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          max-width: var(--lbaic-message-table-max-width);
          padding-block-end: 10px;

          table {
            border-collapse: collapse;
            width: 100%;
            min-width: 200px;

            thead tr {
              border-block-end: 1px solid var(--lbaic-message-table-border);
            }

            tr {
              border-block-end: 1px solid var(--lbaic-message-table-border);

              th {
                padding: 5px;
                width: max-content;
                font-size: 14px;
                font-weight: 500;
                text-align: left;
              }

              td {
                padding: 5px;
                font-size: 12px;
              }
            }

            td, th {
              min-width: 80px;
              vertical-align: middle;

              &:not(:last-child) {
                border-inline-end: 1px solid var(--lbaic-message-table-border);
              }
            }
          }
        }

        pre, code {
          max-width: 100%;
          overflow-x: auto;
          white-space: pre-wrap;
          word-wrap: break-word;
        }
      }

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

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

          &.error {
            .lbaic-message-action-submission-status-i {
              fill: var(--lbaic-white-100);
              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 {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        margin-block-start: 4px;
        margin-inline-start: 8px;
        opacity: 0;

        &-in {
          position: relative;
          display: flex;
          align-items: center;

          .lbaic-button {
            svg {
              fill: none;
              stroke: currentColor;
            }
          }
        }
      }

      &-sources {
        &-popover {
          position: absolute;
          width: max-content;
          max-width: var(--lbaic-source-popover-max-width, 310px);
          transform: var(--lbaic-sources-popover-transform);
          pointer-events: none;
          z-index: 2001;

          &-in {
            opacity: 1;
            transform: var(--lbaic-sources-popover-show-transform);
            transition: transform 360ms ease-in-out, opacity 360ms ease-in-out;
            pointer-events: auto;

            &.hide {
              opacity: 0;
              pointer-events: none;
            }
          }

          &-inner {
            position: relative;
            width: 100%;
            padding: 8px;
            background-color: #2a2a2a;
            border: 1px solid #3a3a3a;
            border-radius: 6px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            display: flex;
            flex-direction: column;
            gap: 4px;
          }

          &-link {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #ffffff;
            font-size: 12px;
            text-decoration: none;
            transition: color 0.2s ease-in-out;

            &:hover {
              color: #458cf6;
            }

            .lbaic-intro-row-icon {
              width: 18px;
              height: 18px;
              fill: currentColor;
            }
          }

          &-p {
            &-top {
              bottom: 100%;
              --lbaic-sources-popover-show-transform: translate3d(0, 0, 0);

              .hide {
                --lbaic-sources-popover-show-transform: #{translate3d(0, 8px, 0)};
              }

              &.lbaic-message-sources-popover-a {
                &-left {
                  left: 0;
                  --lbaic-sources-popover-transform: #{translate3d(0, -10px, 0)};
                }

                &-center {
                  --lbaic-sources-popover-transform: #{translate3d(calc(-50% + 12px), -10px, 0)};
                }

                &-right {
                  right: 0;
                  --lbaic-sources-popover-transform: #{translate3d(0, -10px, 0)};
                }
              }
            }
          }
        }
      }

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

        &: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;
          display: block;
          white-space: pre-wrap;
        }

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

      &-time {
        font-size: var(--lbaic-fs-11);
        font-weight: var(--lbaic-fw-400);
        color: #666;
      }

      &-agent-name {
        font-size: var(--lbaic-fs-11);
        font-weight: var(--lbaic-fw-400);
        color: #666;
      }
    }
  }
}