& {
  .lbaic {
    &-recommendation {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;

      &__wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 410px;
        border-radius: 8px;
        background-color: var(--lbaic-message-bot-bg);
        overflow: hidden;
      }

      &__header {
        padding: 16px;
        border-bottom: 1px solid var(--lbaic-recommendation-border-color);
        background-color: inherit;

        &--sticky {
          position: sticky;
          top: 0;
          z-index: 10;
        }
      }

      &__header-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      &__search {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;

        &-loading {
          --lbaic-loading-circle-width: 16px;
          position: absolute;
          right: 8px;
          width: max-content;

          svg {
            width: var(--lbaic-loading-circle-width, 100%);
            height: var(--lbaic-loading-circle-width, 100%);
            flex: 0 0 var(--lbaic-loading-circle-width);
            display: block;
            fill: rgba(0, 0, 0, 0);
            stroke: var(--lbaic-recommendation-color);
            stroke-dasharray: 76;
            animation: lbaic-settings-circle-stroke 2400ms linear infinite;
            transform: rotate(-90deg);
          }
        }
      }

      &__search-icon {
        position: absolute;
        top: 50%;
        left: 14px;
        width: 16px;
        height: 16px;
        fill: var(--lbaic-recommendation-color);
        transform: translateY(-50%);
        pointer-events: none;
      }

      &__search-input {
        width: 100%;
        padding: 10px 30px 10px 40px;
        border: 1px solid var(--lbaic-recommendation-input-border-color);
        border-radius: 8px;
        background-color: transparent;
        font-size: var(--lbaic-fs-13);
        color: var(--lbaic-text-color);
        transition: border-color 160ms ease-in-out;
        line-height: 15.5px;

        &::placeholder {
          color: var(--lbaic-recommendation-color);
        }

        &:focus {
          outline: none;
          border-color: var(--lbaic-main);
          box-shadow: none;
        }
      }

      &__filter {
        padding: 8px;
      }

      &__filter-icon {
        width: 16px;
        height: 16px;
      }

      &__skip {

        &:not(:hover):not(:active):not(.has-background) {
          padding-inline: 10px;
          white-space: nowrap;
        }
      }

      &__meta {
        margin-block-start: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: var(--lbaic-fs-12);
        color: var(--lbaic-recommendation-meta-color);
      }

      &__meta-item {
        padding: 4px 8px;
        border-radius: 6px;
        background-color: var(--lbaic-message-fast-bg);
      }

      &__content {
        flex: 1 1 auto;
        padding: 12px 16px 16px 16px;
        overflow-y: auto;
        scrollbar-color: var(--lbaic-main) rgba(0, 0, 0, 0);
        scrollbar-width: thin;
        touch-action: pan-y pan-x;
        overscroll-behavior: contain;

        &--vertical {
          overflow-y:auto;
        }
      }

      &__list {
        display: flex;
        width: 100%;
        gap: 12px;

        .lbaic-recommendation-card__body-in {
          max-height: 47px;
        }

        &--vertical {
          display: grid;
          grid-template-columns: var(--lbaic-vector-search-card-grid, 1fr);
        }
      }

      &__empty {
        width: 100%;
        padding: 24px 16px;
        border: 1px dashed var(--lbaic-recommendation-border-color);
        border-radius: 8px;
        text-align: center;
        background-color: var(--lbaic-message-fast-bg);
      }

      &__empty-title {
        margin-block-end: 6px;
        font-size: var(--lbaic-fs-14);
        font-weight: 600;
        color: var(--lbaic-text-color);
      }

      &__empty-description {
        margin: 0;
        font-size: var(--lbaic-fs-12);
        color: var(--lbaic-recommendation-meta-color);
      }

      &__footer {
        padding: 12px 16px;
        border-top: 1px solid var(--lbaic-recommendation-border-color);

        &-send {

          &, &:not(:hover):not(:active):not(.has-background), &:focus {
            width: 100%;
            padding: 10px 12px;
            border: none;
            border-radius: 8px;
            background-color: #458cf6;
            font-size: var(--lbaic-fs-13);
            font-weight: 500;
            color: #ffffff;
            transition: background-color 160ms ease-in-out;
          }

          &:hover:not(:disabled) {
            background-color: #3a7de0;
          }

          &:disabled {
            opacity: 0.7;
            cursor: not-allowed;
          }

          &-label {
            flex: 0 0 auto;
          }

          &-i {
            flex: 0 0 auto;
            width: 14px;
            height: 14px;
            fill: currentColor;
          }
        }
      }

      &-card {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 1px solid var(--lbaic-recommendation-border-color);
        border-radius: 8px;
        background-color: var(--lbaic-chat-bg);

        &--vertical {
          min-width: 0;
          height: max-content;
        }

        &__media {
          position: relative;
          width: 100%;
          height: 100%;
          max-height: 148px;
          background-color: var(--lbaic-main);
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          aspect-ratio: 1/1;
          overflow: hidden;

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

        &__thumbnails {
          position: absolute;
          bottom: 6px;
          left: 6px;
          right: 6px;
          display: flex;
          gap: 6px;
        }

        &__thumbnail {
          width: 40px;
          height: 40px;
          border: 1px solid var(--lbaic-recommendation-border-color);
          border-radius: 6px;
          overflow: hidden;
          background-color: var(--lbaic-message-fast-bg);

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

        &__header {
          display: flex;
          align-items: flex-start;
          gap: 10px;
          padding: 12px 12px 6px 12px;
          background-color: var(--lbaic-chat-bg);
        }

        &__body {
          display: flex;
          flex-direction: column;

          &:first-of-type {
            .lbaic-recommendation-card__header {
              border-top-left-radius: 8px;
              border-top-right-radius: 8px;
            }
          }

          &-in {
            height: 100%;
            max-height: 93px;
            padding: 0 12px;
            overflow-y: auto;
          }
        }

        &__footer {
          display: flex;
          flex-direction: column;
          gap: 12px;
          padding: 12px;
          background-color: var(--lbaic-chat-bg);
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }

        &__title {
          flex: 1 1 auto;
          margin: 0;
          font-size: 15px;
          font-weight: 600;
          line-height: 1.3;
          color: var(--lbaic-text-color);
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        &__external {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          color: var(--lbaic-main);
          transition: opacity 160ms ease-in-out;

          &-i {
            width: 14px;
            height: 14px;
            fill: none;
          }

          &:hover {
            opacity: .8;
          }
        }

        &__description {
          margin: 0;
          font-size: 13px;
          line-height: 1.4;
          margin-block-end: 10px;
          color: var(--lbaic-recommendation-meta-color);
          display: -webkit-box;
          //-webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }


        &__select {
          &, &:not(:hover):not(:active):not(.has-background), &:focus {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: 10px 12px;
            border: none;
            border-radius: 8px;
            background-color: var(--lbaic-main);
            font-size: var(--lbaic-fs-13);
            font-weight: var(--lbaic-fw-500);
            color: var(--lbaic-white-100);
            transition: opacity 160ms ease-in-out;
            margin-inline-end: 0;

            &:not(:only-child) {
              margin-inline-end: 12px;
            }

            &:last-child {
              margin-inline-end: 0;
            }
          }

          &:hover {
            background-color: var(--lbaic-main);

            &:has(.lbaic-recommendation-card__select-i) {
              .lbaic-arrow {
                animation: moveAndBack .6s ease;
              }
            }
          }

          &:hover:not(:disabled) {
            opacity: .9;
          }

          &:disabled {
            opacity: 0.7;
            cursor: not-allowed;
          }

          &-label {
            font-size: var(--lbaic-fs-13);
            font-weight: var(--lbaic-fw-500);
            line-height: var(--lbaic-lh-16);
            color: var(--lbaic-white-100);
          }

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

      }
    }
  }
}

@keyframes lbaic-settings-circle-stroke {
  0% {
    stroke-dashoffset: 76;
  }

  50% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -76;
  }
}