@import "_mixins";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --jfv-transparent: transparent;
  --jfv-current: currentColor;
  --jfv-white: #fff;
  --jfv-black: #000;
  --jfv-blue-100: #edf8ff;
  --jfv-blue-200: #77cfff;
  --jfv-blue-300: #4dbefc;
  --jfv-blue-400: #09f;
  --jfv-blue-500: #0075e3;
  --jfv-blue-600: #0066c3;
  --jfv-green-100: #edfed1;
  --jfv-green-200: #cbfb7b;
  --jfv-green-300: #a8eb38;
  --jfv-green-400: #7fca00;
  --jfv-green-500: #64b200;
  --jfv-green-600: #529300;
  --jfv-yellow-100: #fff5d2;
  --jfv-yellow-200: #ffdc7b;
  --jfv-yellow-300: #ffc42c;
  --jfv-yellow-400: #ffb629;
  --jfv-yellow-500: #f9a400;
  --jfv-yellow-600: #f49200;
  --jfv-orange-100: #ffe4cc;
  --jfv-orange-200: #fec48e;
  --jfv-orange-300: #ffa34f;
  --jfv-orange-400: #ff7b1c;
  --jfv-orange-500: #ff6100;
  --jfv-orange-600: #e55300;
  --jfv-red-100: #fef2f2;
  --jfv-red-200: #fecaca;
  --jfv-red-300: #f87171;
  --jfv-red-400: #dc2626;
  --jfv-red-500: #c90909;
  --jfv-red-600: #ab0101;
  --jfv-purple-100: #f3e2ff;
  --jfv-purple-200: #e0b7fd;
  --jfv-purple-300: #bf78f0;
  --jfv-purple-400: #9c4dd3;
  --jfv-purple-500: #892dca;
  --jfv-purple-600: #6915a4;
  --jfv-navy-10: #f9f9ff;
  --jfv-navy-25: #f3f3fe;
  --jfv-navy-50: #e3e5f5;
  --jfv-navy-75: #dadef3;
  --jfv-navy-100: #c8ceed;
  --jfv-navy-200: #979dc6;
  --jfv-navy-300: #6c73a8;
  --jfv-navy-400: #454e80;
  --jfv-navy-500: #343c6a;
  --jfv-navy-600: #252d5b;
  --jfv-navy-700: #0a1551;
  --jfv-navy-800: #091141;
  --jfv-navy-900: #050c34;
  --jfv-gray-25: #f1f1f4;
  --jfv-gray-50: #e2e3e9;
  --jfv-gray-75: #d3d6de;
  --jfv-gray-100: #bfc3ce;
  --jfv-gray-200: #a0a6b6;
  --jfv-gray-300: #7f859c;
  --jfv-gray-400: #4c536f;
  --jfv-gray-500: #434a60;
  --jfv-gray-600: #33384a;
  --jfv-gray-700: #292d3c;
  --jfv-gray-800: #131620;
  --jfv-gray-900: #08090b;
  --jfv-ai-light: #934be4;
  --jfv-ai-default: #7923dd;
  --jfv-ai-dark: #621cb1;
  --jfv-analytics-light: #b9bedf;
  --jfv-analytics-default: #8f96cc;
  --jfv-analytics-dark: #737cbf;
  --jfv-approvals-light: #008f75;
  --jfv-approvals-default: #007862;
  --jfv-approvals-dark: #006653;
  --jfv-apps-light: #bf78f0;
  --jfv-apps-default: #9c4dd3;
  --jfv-apps-dark: #892dca;
  --jfv-forms-light: #ff7b1c;
  --jfv-forms-default: #ff6100;
  --jfv-forms-dark: #e55300;
  --jfv-inbox-light: #59bed2;
  --jfv-inbox-default: #249bb4;
  --jfv-inbox-dark: #1989a0;
  --jfv-pages-light: #5887bf;
  --jfv-pages-default: #034f96;
  --jfv-pages-dark: #03294c;
  --jfv-pdf-light: #628eff;
  --jfv-pdf-default: #3e62c8;
  --jfv-pdf-dark: #2f4ead;
  --jfv-reports-light: #728ddd;
  --jfv-reports-default: #5369ab;
  --jfv-reports-dark: #344067;
  --jfv-sign-light: #94cd2a;
  --jfv-sign-default: #7bb60f;
  --jfv-sign-dark: #6da900;
  --jfv-tables-light: #37c768;
  --jfv-tables-default: #049e38;
  --jfv-tables-dark: #007b2a;
  --jfv-teams-light: #303c77;
  --jfv-teams-default: #18235c;
  --jfv-teams-dark: #0c1540;
}

//RESET DEFAULT STYLES BEGIN
.agent-material-contextMenu * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.jfLoader-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
}

.jfLoader-wrapper strong {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.jfLoader {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(52, 60, 106, 0.2);
}

.jfLoader:before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: #343c6a;
  animation: spin-loader 0.7s linear infinite;
}

@keyframes spin-loader {
  to {
    transform: rotate(360deg);
  }
}

/* Panel Reset  */
.jfpChatbot-container input[type="color"],
.jfpChatbot-container input[type="date"],
.jfpChatbot-container input[type="datetime-local"],
.jfpChatbot-container input[type="datetime"],
.jfpChatbot-container input[type="email"],
.jfpChatbot-container input[type="month"],
.jfpChatbot-container input[type="number"],
.jfpChatbot-container input[type="password"],
.jfpChatbot-container input[type="search"],
.jfpChatbot-container input[type="tel"],
.jfpChatbot-container input[type="text"],
.jfpChatbot-container input[type="time"],
.jfpChatbot-container input[type="url"],
.jfpChatbot-container input[type="week"],
.jfpChatbot-container select,
.jfpChatbot-container textarea {
  border: 0;
}

.jfpChatbot-container input[type="checkbox"]:focus,
.jfpChatbot-container input[type="color"]:focus,
.jfpChatbot-container input[type="date"]:focus,
.jfpChatbot-container input[type="datetime-local"]:focus,
.jfpChatbot-container input[type="datetime"]:focus,
.jfpChatbot-container input[type="email"]:focus,
.jfpChatbot-container input[type="month"]:focus,
.jfpChatbot-container input[type="number"]:focus,
.jfpChatbot-container input[type="password"]:focus,
.jfpChatbot-container input[type="radio"]:focus,
.jfpChatbot-container input[type="search"]:focus,
.jfpChatbot-container input[type="tel"]:focus,
.jfpChatbot-container input[type="text"]:focus,
.jfpChatbot-container input[type="time"]:focus,
.jfpChatbot-container input[type="url"]:focus,
.jfpChatbot-container input[type="week"]:focus,
.jfpChatbot-container select:focus,
.jfpChatbot-container textarea:focus {
  outline: 0;
  border: 0;
  box-shadow: none;
}

.jfpChatbot-container input[type="checkbox"],
.jfpChatbot-container input[type="radio"] {
  margin: 0;
}

.jfpChatbot-container input[type="radio"] {
  border: 2px solid #c8ceed;
}

.jfpChatbot-container input[type="radio"]:hover {
  border-color: #0075e3;
}

.jfpChatbot-container input[type="radio"]:checked {
  background-color: #0075e3;
  border-color: #0075e3;
}

.jfpChatbot-container input[type="checkbox"] {
  background-color: #fff !important;
  border: 2px solid #c8ceed !important;
  box-shadow: none;
}

.jfpChatbot-container input[type="checkbox"]:not(:disabled):hover,
.jfpChatbot-container input[type="checkbox"]:not(:disabled):focus {
  border: 2px solid #0075e3 !important;
}

.jfpChatbot-container input[type="checkbox"]:not(:disabled):focus {
  outline: 2px solid #77cfff !important;
}

.jfpChatbot-container input[type="checkbox"]:checked {
  background-color: #0075e3 !important;
  border: 2px solid #0075e3 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M18.707 7.293a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L10 14.586l7.293-7.293a1 1 0 0 1 1.414 0Z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

.jfpChatbot-container input[type="checkbox"]:checked::before {
  display: none;
}

.jfpChatbot-plugin-section > h2 {
  display: none !important;
}

@media screen and (max-width: 782px) {
  input[type="checkbox"],
  input[type="radio"] {
    width: 16px;
    height: 16px;
  }
  input[type="radio"]:checked:before {
    display: none;
  }
}

//RESET DEFAULT STYLES END

#agent-preview-root {
  .embedded-agent-container {
    position: absolute;
    margin: 0;
    zoom: 0.75;
    @include only-safari {
      zoom: 1;
      transform: scale(0.75);
    }
    @include only-firefox {
      zoom: 1;
      transform: scale(0.75);
    }
    &:not(.align-left) {
      transform-origin: right bottom;
      @media screen and (max-width: 480px) {
        // .ai-agent-chat-animation-container {
        //   padding: 32px 0 0 32px;
        // }
      }
    }
    &.align-left {
      transform-origin: left bottom;
      @media screen and (max-width: 480px) {
        // .ai-agent-chat-animation-container {
        //   padding: 32px 32px 0 0;
        // }
      }
    }
    @media screen and (max-width: 1024px) {
      zoom: 0.85;
      @include only-safari {
        zoom: 1;
        transform: scale(0.85);
      }
      @include only-firefox {
        zoom: 1;
        transform: scale(0.85);
      }
    }
  }
  .chatbot-image {
    filter: drop-shadow(0 2px 8px rgba(37, 45, 91, 0.04)) drop-shadow(0 16px 24px rgba(84, 95, 111, 0.16));
  }
  .ai-agent-chat-avatar-container {
    @media screen and (max-width: 480px) {
      right: 0;
      bottom: 0;
    }
  }
  .ai-agent-chat-animation-container {
    &.isOpened {
      max-height: 720px;
      @media screen and (max-width: 480px) {
        width: 98vw;
        &::before {
          display: none;
        }
      }
      @media screen and (max-width: 1024px) {
        max-height: 560px;
      }
    }
  }
}

#jfpChatbot-app {
  min-height: 560px;
  font-family: "Inter", sans-serif;
  position: relative;
  max-width: 1238px;
  @media screen and (min-width: 1024px) {
    height: 640px;
    margin-bottom: 64px;
  }
  @media screen and (min-width: 1280px) {
    height: 672px;
  }
  * {
    box-sizing: border-box;
  }
  h2,
  h3,
  h4,
  p {
    margin: 0;
  }
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--jfv-navy-75);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
    border-radius: 8px;
  }

  ::-webkit-scrollbar-button {
    width: 0px;
  }
}

.chatbot-header-cta-cont {
  display: flex;
  align-items: center;
  gap: 8px;
  @media screen and (max-width: 768px) {
    justify-content: center;
  }
  .mobile-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  @media screen and (max-width: 480px) {
    flex-direction: column;
  }
  .publish-cta {
    min-width: 100px;
  }
}

.jfpChatbot-container {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  background-color: transparent;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 0 24px;
  border-radius: 16px;
  transition: 0.15s gap;

  &[data-step="INITIAL"],
  &[data-step="USECASE_SELECTION"] {
    background-color: var(--jfv-white);
    box-shadow:
      0px 16px 24px 0px rgba(84, 95, 111, 0.16),
      0px 2px 8px 0px rgba(37, 45, 91, 0.04);
  }

  &[data-step="CONVERSATIONS"] {
    .jfpContent-wrapper {
      max-width: unset;
      padding: unset;
      box-shadow: unset;
      border: unset;
      background: unset;
      @media screen and (max-width: 1420px) {
        padding-right: 20px;
      }
      @media screen and (max-width: 768px) {
        padding-right: 8px;
      }
      &--conversations {
        height: 100%;
        display: flex;
        gap: 24px;
        background-color: transparent;
        @media screen and (max-width: 1024px) {
          flex-direction: column;
        }
        &-users {
          width: 100%;
          max-width: 360px;
          padding: 24px 16px 0;
          background-color: var(--jfv-white);
          box-shadow:
            0px 16px 24px 0px rgba(84, 95, 111, 0.16),
            0px 2px 8px 0px rgba(37, 45, 91, 0.04);
          border-radius: 16px;
          transition: 0.15s all;
          overflow: hidden;
          @media screen and (max-width: 1280px) {
            max-width: 320px;
          }
          @media screen and (max-width: 1024px) {
            max-width: unset;
          }
          &-title {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 24px !important;
            @media screen and (max-width: 768px) {
              margin-bottom: 16px !important;
            }
            &-content {
              color: var(--jfv-navy-700);
              font-size: 14px;
              font-weight: 600;
              line-height: 20px;
              letter-spacing: -0.084px;
            }
            &-counter {
              color: var(--jfv-navy-300);
              font-size: 10px;
              line-height: 16px;
              span {
                font-weight: 600;
                color: var(--jfv-navy-500);
              }
            }
          }
          &-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: calc(100% - 40px);
            overflow-y: scroll;
            padding-inline-end: 8px;
            margin-inline-end: -8px;
            @media screen and (max-width: 1024px) {
              max-height: 320px;
            }
          }
          &-btn {
            padding: 12px 16px;
            border-radius: 8px;
            border: 1px solid var(--jfv-navy-50);
            background-color: var(--jfv-white);
            display: flex;
            gap: 8px;
            cursor: pointer;
            transition: 0.15s all;
            &.isActive {
              border: 1px solid var(--jfv-blue-500);
              background-color: #77cfff20;
            }
            &.isUnread {
              background-color: var(--jfv-navy-10);
            }
            &:last-child {
              margin-bottom: 24px;
            }
            &-date {
              font-size: 10px;
              line-height: 16px;
              letter-spacing: 0.1px;
              color: var(--jfv-navy-300);
            }
            &-img {
              width: 40px;
              height: 40px;
              border-radius: 9998px;
              overflow: hidden;
              flex-shrink: 0;
              img {
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
                object-fit: cover;
              }
            }
            &-name-cont {
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              width: 69%;
            }
            &-name {
              color: var(--jfv-navy-700);
              font-size: 14px;
              font-weight: 600;
              line-height: 20px;
              letter-spacing: -0.084px;
            }
            &-message {
              color: var(--jfv-navy-300);
              font-size: 12px;
              line-height: 16px;
              text-align: left;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
          &-empty {
            color: #0085de;
            background-color: #cbeaff;
            padding: 12px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 8px 0;
            border-radius: 8px;
            svg {
              width: 16px;
              height: 16px;
            }
          }
          &-loader {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 0 40px;
          }
        }
        &-chats {
          display: flex;
          flex-direction: column;
          width: 100%;
          background-color: var(--jfv-white);
          box-shadow:
            0px 16px 24px 0px rgba(84, 95, 111, 0.16),
            0px 2px 8px 0px rgba(37, 45, 91, 0.04);
          border-radius: 16px;
          max-height: 100%;
          overflow: hidden;
          &-wrapper {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            padding: 16px 64px 0;
            max-height: 90%;
            border-radius: 16px;
            overflow-y: scroll;
            margin-inline-end: 8px;
            @media screen and (max-width: 1280px) {
              padding: 16px 32px 0;
            }
            @media screen and (max-width: 1024px) {
              max-height: 640px;
            }
            @media screen and (max-width: 768px) {
              padding: 16px 24px 0;
            }
          }
          &-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            padding: 18px 24px;
            border-bottom: 1px solid #e3e5f5;
            &-username {
              color: #0a1551;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            &-right {
              display: flex;
              gap: 8px;
              align-items: center;
              flex-shrink: 0;
              &-see-link {
                text-decoration: none;
                color: var(--jfv-navy-500);
                font-size: 14px;
                line-height: 18px;
                font-weight: 500;
                display: flex;
                align-items: center;
                transition: 0.15s all;
                border-radius: 4px;
                padding: 8px;
                &:hover {
                  background-color: #e8e8f2;
                }
                &:focus {
                  outline: none;
                  box-shadow: none;
                }
                @media screen and (max-width: 768px) {
                  font-size: 12px;
                  line-height: 16px;
                }
              }
              &-switch {
                height: 32px;
                padding: 0 8px;
                font-size: 12px;
                line-height: 16px;
                .jfButton--text {
                  padding: 0 4px;
                }
              }
            }
          }
          &-box {
            display: flex;
            flex-direction: column;
            &:last-child {
              margin-bottom: 32px;
            }
            &.user {
              align-items: flex-start;
              padding: 8px 0;
              @media screen and (min-width: 1280px) {
                .jfpContent-wrapper--conversations-chats-message-container {
                  padding-inline-end: 40px;
                }
              }
              .jfpContent-wrapper--conversations-chats-message {
                padding: 12px 16px;
                border-top-right-radius: 16px;
                border-bottom-right-radius: 16px;
                border-bottom-left-radius: 16px;
                background-color: #e3e5f5;
              }
            }
            &.agent {
              align-items: flex-end;
              padding: 24px 0 8px;
              .jfpContent-wrapper--conversations-chats-message-container {
                flex-direction: row-reverse;
                @media screen and (min-width: 1280px) {
                  padding-inline-start: 100px;
                }
                .jfpContent-wrapper--conversations-chats-message-wrapper {
                  align-items: flex-end;
                  .jfpContent-wrapper--conversations-chats-message {
                    padding-bottom: 32px;
                  }
                }
              }
            }
          }
          &-message-container {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            width: 100%;
          }
          &-message-wrapper {
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 100%;
          }
          &-avatar {
            border-radius: 50%;
            width: 32px;
            height: 32px;
            overflow: hidden;
            flex-shrink: 0;
            img,
            svg {
              width: 100%;
              height: 100%;
              object-fit: contain;
              object-position: center bottom;
            }
            img {
              aspect-ratio: 1 / 1;
              object-fit: cover;
            }
          }
          &-message {
            color: var(--jfv-navy-700);
            font-size: 14px;
            line-height: 20px;
            letter-spacing: -0.084px;
            word-break: break-word;
            width: fit-content;
          }
          &-time {
            font-size: 12px;
            line-height: 16px;
            color: var(--jfv-navy-300);
          }
          &-noresult {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-grow: 1;
            padding: 32px 0 80px;
            text-align: center;
            &-icon {
              width: 96px;
              height: 96px;
              margin-bottom: 24px;
            }
            &-title {
              font-size: 16px;
              line-height: 24px;
              font-weight: 700;
              color: var(--jfv-navy-700);
              text-transform: uppercase;
              margin-bottom: 4px !important;
            }
            &-desc {
              font-size: 12px;
              color: var(--jfv-navy-300);
            }
          }
        }
      }
    }
  }

  &[data-step="SETTINGS"] {
    .jfpContent-wrapper {
      max-width: unset;
      padding: unset;
      box-shadow: unset;
      border: unset;
      background: unset;
      @media screen and (max-width: 1420px) {
        padding-right: 20px;
      }
      @media screen and (max-width: 768px) {
        padding-right: 8px;
      }
      &--settings {
        height: 100%;
        display: flex;
        gap: 24px;
        background-color: transparent;
        @media screen and (max-width: 1024px) {
          flex-direction: column;
        }
        &-panel {
          width: 100%;
          max-width: 240px;
          padding: 24px 16px 0;
          background-color: var(--jfv-white);
          box-shadow:
            0px 16px 24px 0px rgba(84, 95, 111, 0.16),
            0px 2px 8px 0px rgba(37, 45, 91, 0.04);
          border-radius: 16px;
          transition: 0.15s all;
          overflow: hidden;
          @media screen and (max-width: 1280px) {
            max-width: 220px;
          }
          @media screen and (max-width: 1024px) {
            max-width: unset;
          }
          &-title {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 24px !important;
            @media screen and (max-width: 768px) {
              margin-bottom: 16px !important;
            }
            &-content {
              color: var(--jfv-navy-700);
              font-size: 14px;
              font-weight: 600;
              line-height: 20px;
              letter-spacing: -0.084px;
            }
          }
          &-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-height: calc(100% - 40px);
            overflow-y: scroll;
            padding-inline-end: 8px;
            margin-inline-end: -8px;
            @media screen and (max-width: 1024px) {
              max-height: 320px;
            }
          }
          &-btn {
            background-color: var(--jfv-white);
            display: flex;
            gap: 8px;
            cursor: pointer;
            transition: 0.15s all;
            .jfButton {
              color: var(--jfv-navy-300);
              justify-content: flex-start;
              border-radius: 8px;
              height: 44px;
              border: 1px solid transparent;
              &--text {
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .new-badge {
                margin-inline-start: 6px;
                padding: 2px 8px;
                border-radius: 4px;
                background-color: var(--jfv-blue-500);
                color: #fff;
                font-size: 10px;
                line-height: 16px;
                letter-spacing: 0.1px;
              }
              &.isActive {
                color: var(--jfv-navy-700);
                border: 1px solid var(--jfv-blue-500);
                background-color: #77cfff20;
              }
            }
            &.isUnread {
              background-color: var(--jfv-navy-10);
            }
            &:last-child {
              margin-bottom: 24px;
            }
          }
          &-empty {
            color: #0085de;
            background-color: #cbeaff;
            padding: 12px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 8px 0;
            border-radius: 8px;
            svg {
              width: 16px;
              height: 16px;
            }
          }
          &-loader {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 0 40px;
          }
        }
        &-options {
          display: flex;
          flex-direction: column;
          width: 100%;
          background-color: var(--jfv-white);
          box-shadow:
            0px 16px 24px 0px rgba(84, 95, 111, 0.16),
            0px 2px 8px 0px rgba(37, 45, 91, 0.04);
          border-radius: 16px;
          max-height: 100%;
          overflow: hidden;
          &-wrapper {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            padding: 40px 64px 0;
            // max-height: 90%;
            border-radius: 16px;
            overflow-y: scroll;
            margin-inline-end: 8px;
            gap: 24px;
            &.general {
              gap: 40px;
              @media screen and (max-width: 640px) {
                gap: 32px;
              }
            }
            @media screen and (max-width: 1280px) {
              padding: 24px 32px 0;
            }
            @media screen and (max-width: 1024px) {
              max-height: 640px;
            }
            @media screen and (max-width: 768px) {
              padding: 16px 24px 0;
            }
            &-title {
              color: var(--jfv-navy-700);
              font-size: 16px;
              line-height: 24px;
              font-weight: 700;
            }
            &-input-wrapper {
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              gap: 16px;
              @media screen and (max-width: 640px) {
                flex-direction: column;
              }
            }
            &-input {
              width: 100%;
              display: flex;
              flex-direction: column;
              gap: 8px;
              &-title {
                display: flex;
                flex-direction: column;
                gap: 2px;
                h3 {
                  color: var(--jfv-navy-700);
                  font-size: 14px;
                  line-height: 20px;
                  font-weight: 600;
                  letter-spacing: -0.084px;
                }
                p {
                  color: var(--jfv-navy-300);
                  font-size: 12px;
                  line-height: 16px;
                }
              }
            }
            &-info-box {
              background-color: var(--jfv-blue-100);
              border-radius: 4px;
              padding: 12px 16px;
              display: flex;
              align-items: center;
              gap: 8px;
              @media screen and (max-width: 640px) {
                align-items: flex-start;
              }
              &-icon {
                width: 16px;
                height: 16px;
                flex-shrink: 0;
                svg {
                  fill: var(--jfv-navy-300);
                  width: 100%;
                  height: 100%;
                }
              }
              &-message {
                color: var(--jfv-navy-300);
                font-size: 12px;
                line-height: 16px;
                strong {
                  font-weight: 600;
                }
              }
              &.jfpError {
                background-color: var(--jfv-red-100);
                .jfpContent-wrapper--settings-options-wrapper-info-box-icon svg {
                  fill: var(--jfv-red-400);
                }
                .jfpContent-wrapper--settings-options-wrapper-info-box-message {
                  color: var(--jfv-red-400);
                }
                .jfpContent-wrapper--settings-options-wrapper-info-box-link {
                  color: var(--jfv-red-400);
                  font-weight: 600;
                }
              }
            }
            &-connected {
              display: flex;
              flex-direction: column;
              gap: 16px;
              &:last-child {
                margin-bottom: 40px;
              }
              &-title {
                color: var(--jfv-navy-700);
                font-size: 16px;
                line-height: 24px;
                font-weight: 700;
              }
              &-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 24px;
                padding: 24px;
                background-color: var(--jfv-navy-10);
                border: 1px solid var(--jfv-navy-50);
                border-radius: 8px;
                @media screen and (max-width: 640px) {
                  flex-direction: column;
                  align-items: flex-start;
                }
                @media screen and (max-width: 480px) {
                  padding: 16px;
                  gap: 16px;
                }
              }
              &-icon {
                width: 40px;
                height: 40px;
                flex-shrink: 0;
                @media screen and (max-width: 480px) {
                  width: 32px;
                  height: 32px;
                }
                &.big {
                  width: 48px;
                  height: 48px;
                  @media screen and (max-width: 480px) {
                    width: 36px;
                    height: 36px;
                  }
                }
                &.full-radius {
                  border-radius: 50%;
                  border: 1px solid #fff;
                }
              }
              &-content-wrapper {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 24px;
                @media screen and (max-width: 480px) {
                  gap: 16px;
                }
              }
              &-content {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 2px;
                strong {
                  color: var(--jfv-navy-700);
                  font-size: 14px;
                  line-height: 20px;
                  font-weight: 600;
                  letter-spacing: -0.084px;
                }
                p {
                  color: var(--jfv-navy-300);
                  font-size: 14px;
                  line-height: 16px;
                  letter-spacing: -0.084px;
                }
              }
              &-btn {
                @media screen and (max-width: 480px) {
                  width: 100%;
                }
              }
            }
          }
          &-ability {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-top: 24px;
            &-title {
              color: var(--jfv-navy-700);
              font-size: 16px;
              line-height: 24px;
              font-weight: 700;
              letter-spacing: -0.176px;
            }
            &-wrapper {
              display: flex;
              flex-direction: column;
              gap: 8px;
              &.isDisabled {
                opacity: 0.4;
                pointer-events: none;
              }
            }
            &-select {
              display: flex;
              justify-content: space-between;
              align-items: center;
              gap: 8px;
              &:last-child {
                margin-bottom: 40px;
              }
              h4 {
                color: var(--jfv-navy-700);
                font-size: 14px;
                line-height: 24px;
                font-weight: 600;
                letter-spacing: -0.154px;
              }
              p {
                color: var(--jfv-navy-300);
                font-size: 12px;
                line-height: 20px;
                letter-spacing: -0.072px;
              }
              .badge {
                padding: 2px 8px;
                margin-inline-start: 4px;
                border-radius: 4px;
                background: linear-gradient(90deg, #7923dd 0%, #09f 100%);
                color: var(--jfv-white);
                font-size: 10px;
                line-height: 16px;
                font-weight: 400;
                letter-spacing: 0.1px;
              }
            }
          }
          &-connect-btn-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
          }
          &-connect-btn {
            flex: 0 0 auto;
            width: auto;
            align-self: flex-start;
          }
          &-input-error {
            flex: 0 0 auto;
            width: auto;
            align-self: flex-start;
            background-color: var(--jfv-red-400);
            color: var(--jfv-white);
            font-size: 12px;
            text-align: left;
            line-height: 16px;
            border-radius: 2px;
            padding: 4px 8px;
          }
          &-link-button {
            border: none;
            color: var(--jfv-white);
            background-color: transparent;
            cursor: pointer;
            text-decoration: underline;
            font-weight: 500;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        &-loading {
          width: 100%;
          min-height: 86px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  @media screen and (max-width: 1280px) {
    gap: 16px;
  }
  @media screen and (max-width: 1024px) {
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    padding-bottom: 32px;
    &:before,
    &:after {
      display: none;
    }
  }
  &.wizard-loading {
    @media screen and (max-width: 1024px) {
      height: 640px;
    }
  }
  .jfpContent-wrapper {
    flex: 1;
    z-index: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    padding: 8px 48px 0;
    border: 1px solid var(--jfv-navy-50);
    box-shadow:
      0px 16px 24px 0px rgba(84, 95, 111, 0.16),
      0px 2px 8px 0px rgba(37, 45, 91, 0.04);
    backdrop-filter: blur(40px);
    border-radius: 16px;
    background-color: var(--jfv-white);
    &[data-step="INITIAL"] {
      justify-content: center;
      align-items: center;
    }
    &[data-step="INITIAL"],
    &[data-step="USECASE_SELECTION"] {
      border: none;
      box-shadow: unset;
      backdrop-filter: unset;
      border-radius: unset;
      padding: 64px;
      border-radius: 16px;
      @media screen and (max-width: 1024px) {
        padding: 48px;
      }
      @media screen and (max-width: 768px) {
        padding: 32px;
      }
      @media screen and (max-width: 480px) {
        padding: 24px;
      }
    }
    @media screen and (max-width: 1280px) {
      padding: 8px 32px 24px;
    }
    @media screen and (max-width: 1024px) {
      padding: 8px 24px 24px;
    }
    &--main-tabs {
      width: 100%;
      padding: 32px 0;
      margin-bottom: 24px;
      &-toggle {
        position: absolute;
        top: 50%;
        left: 4px;
        transform: translateX(0%) translateY(-50%);
        background-color: var(--jfv-white);
        width: calc(25% - 2px);
        height: calc(100% - 8px);
        border-radius: 4px;
        transition: transform 0.1s ease-in-out;
        z-index: 0;
        @media screen and (max-width: 768px), screen and (min-width: 1024px) and (max-width: 1280px) {
          display: none;
        }
        &.invisible {
          pointer-events: none;
          display: none;
        }
      }
      &-container {
        display: flex;
        gap: 4px;
        background-color: var(--jfv-navy-10);
        padding: 4px;
        border-radius: 8px;
        position: relative;
        @media screen and (max-width: 768px), screen and (min-width: 1024px) and (max-width: 1280px) {
          display: grid;
          gap: 8px;
          grid-template-columns: repeat(2, 1fr);
          grid-auto-rows: max-content;
        }
      }
      &-button {
        flex: 1;
        color: var(--jfv-navy-300);
        background-color: transparent;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        padding: 8px 16px;
        border: none;
        cursor: pointer;
        border-radius: 4px;
        position: relative;
        z-index: 1;
        transition: 0.3s all;
        &.isActive {
          color: var(--jfv-navy-700);
        }
        @media screen and (max-width: 768px), screen and (min-width: 1024px) and (max-width: 1280px) {
          padding: 8px;
          &.isActive {
            background-color: var(--jfv-white);
          }
        }
      }
    }
    &--title {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 16px;
      h2 {
        color: var(--jfv-navy-700);
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -0.34px;
      }
      p {
        color: var(--jfv-navy-300);
        font-size: 14px;
        line-height: 20px;
      }
    }
    &--tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: start;
      align-items: center;
      gap: 4px;
      justify-content: start;
      align-items: center;
      margin-top: 24px;
      padding: 4px;
      border-radius: 8px;
      background-color: var(--jfv-navy-10);
      position: relative;
      &-toggle-active {
        position: absolute;
        top: 50%;
        left: 4px;
        transform: translateX(0%) translateY(-50%);
        background-color: var(--jfv-white);
        width: calc(50% - 4px);
        height: calc(100% - 8px);
        border-radius: 4px;
        transition: transform 0.1s ease-in-out;
        z-index: 0;
      }
      .tab-button {
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        background-color: transparent;
        border: none;
        cursor: pointer;
        color: var(--jfv-navy-300);
        white-space: nowrap;
        border-radius: 4px;
        transition: 0.3s color;
        position: relative;
        z-index: 1;
        &.isActive {
          font-weight: 500;
        }
        &.isActive,
        &:not(.isActive):hover {
          color: var(--jfv-navy-700);
        }
        @media screen and (max-width: 480px) {
          height: 32px;
          font-size: 12px;
          line-height: 16px;
        }
      }
    }
    &--select-agent {
      width: 100%;
      max-height: 288px;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 24px;
      justify-content: start;
      align-items: center;
      overflow-y: auto;
      @media screen and (max-width: 1024px) {
        max-height: 200px;
      }
      @media screen and (max-width: 480px) {
        gap: 20px;
        max-height: 220px;
      }
    }
    &--ai-persona {
      flex: 1;
      padding: 0 12px 24px 2px;
      margin: 0 -2px auto;
      @media screen and (min-width: 1024px) {
        padding: 0 12px 40px 2px;
        overflow-y: scroll;
        @include only-firefox {
          scrollbar-width: thin;
          scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
        }
      }
      @media screen and (max-width: 1024px) {
        padding: 0;
        margin: 0 0 auto;
      }
      .role-options {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        button {
          border: 0 solid transparent;
          border-radius: 9999px;
          background-color: rgb(237, 248, 255);
          padding: 8px 16px;
          span {
            color: rgb(9, 17, 65);
            font-size: 12px;
            line-height: 16px;
          }
        }
      }
      &-title {
        display: block;
        align-items: center;
        gap: 8px;
        margin-bottom: 24px;
        &:last-child {
          margin-bottom: 0;
        }
        div {
          &:first-child {
            margin-bottom: 8px;
          }
        }
        h3 {
          color: var(--jfv-navy-700);
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          letter-spacing: -0.084px;
          margin-bottom: 2px;
        }
        p {
          color: var(--jfv-navy-300);
          font-size: 12px;
          line-height: 16px;
        }
      }
      &-input {
        position: relative;
        border: 1px solid var(--jfv-navy-100) !important;
        border-radius: 4px !important;
        width: 100%;
        padding: 8px 12px !important;
      }
      &-position {
        display: flex;
        gap: 8px;
        @media screen and (max-width: 1024px) {
          overflow: scroll;
        }
        li {
          display: flex;
          width: 100%;
          label {
            border-radius: 4px;
            border: 1px solid var(--jfv-navy-100);
            padding: 8px 12px;
            width: 100%;
          }
        }
      }
      &-greeting {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }
      &-show-more {
        padding-right: 10px;
        padding-bottom: 2px;
        padding-left: 2px;
        margin-top: 8px;
      }
    }
    &--avatar-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      @media screen and (max-width: 480px) {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 4px;
      }
    }
    &--avatar-gallery {
      flex: 1;
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: max-content;
      overflow-y: scroll;
      padding-right: 10px;
      padding-bottom: 2px;
      padding-left: 2px;
      height: 300px;
      scrollbar-width: thin;
      scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
      &::-webkit-scrollbar-thumb {
        background: transparent !important;
      }
      &:hover {
        &::-webkit-scrollbar-thumb {
          background-color: var(--jfv-navy-75) !important;
        }
      }
      @media screen and (max-width: 1280px) {
        grid-template-columns: repeat(4, 1fr);
      }
      @media screen and (max-width: 1024px) {
        grid-template-columns: repeat(6, 1fr);
      }
      @media screen and (min-width: 640px) and (max-width: 768px) {
        height: 252px;
      }
      @media screen and (max-width: 640px) {
        grid-template-columns: repeat(4, 1fr);
      }
      @media screen and (max-width: 480px) {
        grid-template-columns: repeat(3, 1fr);
      }
      .avatar-button {
        border: 0;
        border-radius: 4px;
        background: var(--jfv-navy-75);
        display: flex;
        width: 100%;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        &:before {
          content: "";
          display: block;
          width: 100%;
          padding-top: 100%;
        }
        img {
          width: 88%;
          height: auto;
          max-height: 100%;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        &--selected {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          padding-bottom: 5px;
          span {
            background-color: var(--jfv-blue-400);
            color: var(--jfv-white);
            font-size: 10px;
            line-height: 18px;
            letter-spacing: 0.1px;
            padding: 0 6px;
            border-radius: 4px;
          }
          &:before {
            content: "";
            background: rgba(50, 181, 255, 0.2);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
          }
        }
      }
      @media screen and (max-width: 1024px) {
        margin-top: 0;
      }
    }
    &--avatar-custom {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 16px;
      border-radius: 4px;
      background-color: var(--jfv-navy-10);
      @media screen and (min-width: 1024px) and (max-width: 1280px) {
        flex-direction: column;
      }
      @media screen and (max-width: 640px) {
        flex-direction: column;
      }
      &-avatar {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0 !important;
        &-image {
          background-color: var(--jfv-navy-25);
          width: 80px;
          height: 80px;
          border-radius: 4px;
          overflow: hidden;
          flex-shrink: 0;
          margin-bottom: 0 !important;
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          @media screen and (max-width: 768px) {
            width: 64px;
            height: 64px;
          }
        }
        &-properties {
          flex-grow: 1;
          h4 {
            color: var(--jfv-navy-700);
            font-size: 14px;
            line-height: 20px;
            font-weight: 600;
          }
          span {
            color: var(--jfv-navy-300);
            font-size: 12px;
            line-height: 16px;
          }
        }
      }
      &-buttons {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 8px;
        @media screen and (max-width: 480px) {
          flex-direction: column;
        }
      }
    }
    &--image-upload-wizard {
      .hidden {
        display: none;
      }
      &-button {
        .jfButton--text {
          font-size: 12px;
        }
      }
    }
    &--customization {
      flex: 1;
      padding: 0 12px 24px 2px;
      margin: 0 -2px auto;
      @media screen and (min-width: 1024px) {
        padding: 0 12px 40px 2px;
        overflow-y: scroll;
        @include only-firefox {
          scrollbar-width: thin;
          scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
        }
      }
      &-layout {
        margin-bottom: 24px;
      }
      .customize-option {
        &:not(:last-child) {
          margin-bottom: 24px;
        }
        &.layout {
          width: 100%;
          .layout-container {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 16px;
            margin-top: 16px;
            @media screen and (min-width: 1024px) and (max-width: 1180px) {
              flex-direction: column;
              .layout-item {
                min-height: 180px;
                &.default {
                  .top-cont,
                  .bottom-cont {
                    max-width: 272px;
                    margin: 0 auto;
                  }
                }
              }
            }
            @media screen and (max-width: 640px) {
              flex-direction: column;
              .layout-item {
                min-height: 220px;
                align-items: center;
                justify-content: center;
                &.default {
                  .top-cont,
                  .bottom-cont {
                    max-width: 272px;
                    margin: 0 auto;
                  }
                }
              }
            }
            @media screen and (max-width: 480px) {
              .layout-item {
                min-height: 180px;
              }
            }
            .layout-wrapper {
              width: 100%;
              display: flex;
              flex-direction: column;
              gap: 8px;
              h4 {
                color: var(--jfv-navy-700);
                font-size: 16px;
                line-height: 24px;
                font-weight: 500;
                letter-spacing: -0.176px;
              }
              .layout-item {
                width: 100%;
                border-radius: 4px;
                background-color: var(--jfv-navy-25);
                border: 1px solid transparent;
                padding: 12px 20px;
                cursor: pointer;
                transition: 0.3s border-color;
                flex-grow: 1;
                & > * {
                  pointer-events: none;
                }
                &:hover {
                  border-color: #0075e3;
                }
                &.active {
                  border-color: #0075e3;
                  background: #edf8ff;
                }
                &.default {
                  display: flex;
                  flex-direction: column;
                  gap: 8px;
                  .top-cont {
                    width: 100%;
                    border-radius: 12px;
                    padding: 16px;
                    border: 1px solid var(--jfv-navy-100);
                    background-color: #fff;
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    box-shadow:
                      0px 2px 4px -2px #1018280f,
                      0px 4px 8px -2px #1018281a;
                    .greeting,
                    .suggestion-btn {
                      color: var(--jfv-navy-700);
                      font-size: 14px;
                      line-height: 20px;
                      letter-spacing: -0.084px;
                      @media screen and (max-width: 1280px) {
                        font-size: 12px;
                        line-height: 16px;
                      }
                    }
                    .suggestion-btn {
                      width: 100%;
                      padding: 8px;
                      border-radius: 8px;
                      background: rgba(227, 229, 245, 0.5);
                      border: 1px solid var(--jfv-navy-100);
                      text-align: center;
                    }
                  }
                  .bottom-cont {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 12px;
                    padding: 8px;
                    border-radius: 16px 16px 4px 16px;
                    border: 1px solid var(--jfv-navy-100);
                    background-color: #fff;
                    .agent-img {
                      width: 32px;
                      height: 32px;
                      border-radius: 50%;
                      flex-shrink: 0;
                      overflow: hidden;
                      border: 1px solid rgba(227, 229, 245, 0.5);
                      img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                      }
                    }
                    .agent-input {
                      font-size: 14px;
                      text-align: left;
                      color: var(--jfv-navy-500);
                      opacity: 0.6;
                      flex-grow: 1;
                    }
                    .agent-send {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      width: 24px;
                      height: 24px;
                      border-radius: 50%;
                      background-color: var(--jfv-blue-500);
                      color: var(--jfv-white);
                      flex-shrink: 0;
                      opacity: 0.5;
                      svg {
                        width: 16px;
                        height: 16px;
                      }
                    }
                  }
                }
                &.minimal {
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-end;
                  align-items: flex-end;
                  gap: 12px;
                  .greeting-bubble {
                    padding: 8px;
                    background-color: #fff;
                    border-radius: 12px 12px 4px 12px;
                    box-shadow:
                      0 8px 16px 0 rgba(84, 95, 111, 0.16),
                      0 2px 4px 0 rgba(37, 45, 91, 0.04);
                    span {
                      color: var(--jfv-navy-700);
                      font-size: 14px;
                      line-height: 20px;
                      letter-spacing: -0.084px;
                      @media screen and (max-width: 1280px) {
                        font-size: 12px;
                        line-height: 16px;
                      }
                    }
                  }
                  .agent-img {
                    border: 4px solid #fff;
                    width: 72px;
                    height: 72px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    overflow: hidden;
                    box-shadow:
                      0 8px 16px 0 rgba(84, 95, 111, 0.16),
                      0 2px 4px 0 rgba(37, 45, 91, 0.04);
                    img {
                      width: 100%;
                      height: 100%;
                      object-fit: cover;
                    }
                  }
                }
              }
            }
          }
        }
        &.position {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 4px;
          @media screen and (max-width: 768px) {
            flex-direction: column;
            align-items: flex-start;
          }
        }
        &.visibility {
          .jfpContent-wrapper--customization-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-shrink: 0;
            @media screen and (max-width: 768px) {
              flex-direction: column;
              align-items: flex-start;
            }
            .jfpContent-wrapper--visibility-selection {
              display: flex;
              gap: 8px;
              margin: 0;
              width: 100%;
              max-width: 254px;
              @media screen and (max-width: 768px) {
                max-width: unset;
              }
              li {
                display: flex;
                width: 100%;
                margin: 0;
                label {
                  border-radius: 4px;
                  border: 1px solid var(--jfv-navy-100);
                  width: 100%;
                  gap: 8px;
                  padding: 8px 12px;
                  @media screen and (max-width: 480px) {
                    justify-content: flex-start;
                  }
                  .jfRadio--label {
                    font-size: 14px;
                    line-height: 20px;
                  }
                }
              }
            }
          }
          .visibility-filter {
            .visibility-wrapper {
              display: flex;
              align-items: center;
              gap: 8px;
              @media screen and (max-width: 480px) {
                flex-direction: column;
              }
              .visibility-domain {
                width: 100%;
                max-width: 96px;
                @media screen and (max-width: 768px) {
                  max-width: 80px;
                }
              }
              .visibility-input {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                width: 100%;
              }
              .visibility-selector {
                width: 100%;
                display: flex;
                align-items: center;
                .jfDropdown {
                  margin-right: 0;
                  min-width: 120px;
                  width: max-content;
                  background-color: var(--jfv-navy-25) !important;
                  border-top-right-radius: unset !important;
                  border-bottom-right-radius: unset !important;
                  @media screen and (max-width: 480px) {
                    min-width: 64px;
                  }
                }
                .jfInput {
                  border-top-left-radius: unset !important;
                  border-bottom-left-radius: unset !important;
                }
              }
              .jfButton {
                @media screen and (max-width: 768px) {
                  &--text {
                    display: none;
                  }
                }
                @media screen and (max-width: 480px) {
                  width: 100%;
                  &--text {
                    display: inline-flex;
                  }
                }
              }
            }
            .condition-wrapper {
              display: flex;
              flex-direction: column;
              gap: 8px;
              margin-top: 16px;
              margin-bottom: 0;
              .condition-empty-info {
                width: 100%;
                background-color: var(--jfv-blue-100);
                color: var(--jfv-navy-300);
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 12px 16px;
                border-radius: 4px;
                &-icon {
                  width: 16px;
                  height: 16px;
                }
                &-text {
                  color: inherit;
                  font-size: 12px;
                  line-height: 16px;
                  font-weight: 400;
                  margin: 0;
                }
              }
              .condition-chips {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 8px 16px 8px 0;
                margin-bottom: 0;
                .condition-chip {
                  font-size: 14px;
                  line-height: 20px;
                  letter-spacing: -0.084px;
                  padding: 2px 12px;
                  color: var(--jfv-navy-300);
                  background-color: #f3f3fe;
                  border: 1px solid #e3e5f5;
                  border-radius: 4px;
                  flex-shrink: 0;
                }
                .value {
                  width: 100%;
                  max-width: 100%;
                  color: var(--jfv-navy-300);
                  font-size: 14px;
                  line-height: 16px;
                  letter-spacing: -0.084px;
                  margin-inline-start: 12px;
                  overflow-x: scroll;
                  scrollbar-width: thin;
                  scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
                  padding-bottom: 16px;
                  margin-bottom: -16px;
                }
                .delete-btn {
                  background: transparent;
                  padding: 4px;
                  height: 100%;
                  .jfButton--icon {
                    width: 16px;
                    height: 16px;
                  }
                  &:hover {
                    background: transparent;
                    svg {
                      fill: #454e80;
                    }
                  }
                  svg {
                    fill: #6c73a8;
                    transition: 0.3s all;
                  }
                }
              }
            }
          }
        }
      }
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
        &.big {
          h3 {
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            letter-spacing: -0.176px;
          }
        }
        &.uppercase {
          h3 {
            text-transform: uppercase;
          }
        }
        h3 {
          color: var(--jfv-navy-700);
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          letter-spacing: -0.084px;
          margin-bottom: 2px;
        }
        p {
          color: var(--jfv-navy-300);
          font-size: 12px;
          line-height: 16px;
        }
        &-toggle {
          flex-shrink: 0;
          width: 42px;
          height: 24px;
        }
      }
      &-input {
        position: relative;
      }
      &-position {
        display: flex;
        gap: 8px;
        margin: 0;
        width: 100%;
        max-width: 254px;
        @media screen and (max-width: 768px) {
          max-width: unset;
        }
        li {
          display: flex;
          width: 100%;
          margin: 0;
          label {
            border-radius: 4px;
            border: 1px solid var(--jfv-navy-100);
            width: 100%;
            gap: 8px;
            padding: 8px 12px;
            @media screen and (max-width: 480px) {
              justify-content: flex-start;
            }
            .jfRadio--label {
              font-size: 14px;
              line-height: 20px;
            }
          }
        }
      }
      .remove-chatbot {
        padding: 48px 0 0;
        @media screen and (max-width: 1024px) {
          padding: 24px 0 0;
        }
        &-btn {
          background: unset;
          border: unset;
          color: var(--jfv-red-400);
          padding: 2px;
          text-decoration: underline;
          text-decoration-color: transparent;
          text-underline-offset: 3px;
          transition: 0.15s all;
          height: unset;
          span {
            font-size: 12px;
            line-height: 16px;
            font-weight: 500;
            letter-spacing: -0.132px;
            padding: 0;
          }
          &:hover {
            color: var(--jfv-red-500);
            text-decoration-color: var(--jfv-red-500);
          }
          &:focus {
            outline: none;
          }
        }
      }
    }
    &--style {
      flex: 1;
      padding: 0 12px 24px 2px;
      @media screen and (min-width: 1024px) {
        padding: 0 12px 40px 2px;
        overflow-y: scroll;
        @include only-firefox {
          scrollbar-width: thin;
          scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
        }
      }
      &-colors {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
        margin-top: 0;
        h3 {
          color: var(--jfv-navy-700);
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          letter-spacing: -0.176px;
          width: 100%;
        }
        li {
          width: 51px;
          height: 48px;
          border-radius: 3px;
          display: flex;
          padding: 6px 7px;
          cursor: pointer;
          border: 1px solid transparent;
          .chatBg {
            flex: 1;
            height: 100%;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px;
            .chatText {
              font-size: 22px;
              line-height: 24px;
            }
            .agentBg {
              width: 6px;
              height: 100%;
              border-radius: 1px;
            }
          }
          &.isSelected {
            outline: 2px solid var(--jfv-blue-400);
          }
          @media (hover: hover) {
            &:hover {
              border-color: var(--jfv-blue-400);
              outline: 3px solid rgba(119, 207, 255, 0.5);
            }
          }
        }
      }
      &-color-select {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        h3 {
          color: var(--jfv-navy-700);
          font-size: 16px;
          font-weight: 600;
          line-height: 24px;
          letter-spacing: -0.176px;
          width: 100%;
          margin-bottom: 20px !important;
        }
        h4 {
          color: var(--jfv-navy-700);
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          letter-spacing: -0.084px;
          display: block;
          margin-bottom: 8px !important;
        }
        &-full {
          width: 100%;
          margin-bottom: 16px;
        }
        &-col {
          width: calc(50% - 5px);
        }
      }
    }
    &--cards {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin: auto 0;
      li {
        width: calc(50% - 8px);
      }
    }
    &--list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: auto 0;
      @media screen and (max-width: 1024px) {
        overflow-y: scroll;
        padding: 10px;
        margin: -10px;
        @include only-firefox {
          scrollbar-width: thin;
          scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
        }
      }
      li {
        border-radius: 8px;
        background: var(--jfv-white);
        border: 1px solid var(--jfv-white);
        box-shadow: 0 1.5px 12.6px 0 rgba(70, 38, 123, 0.05);
        padding: 16px;
        color: var(--jfv-navy-700);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.084px;
        display: flex;
        cursor: pointer;
        transition: all 0.3s;
        &.isSelected {
          border-color: var(--jfv-blue-500);
          box-shadow:
            0 4px 8px 0 rgba(84, 95, 111, 0.16),
            0 0 2px 0 rgba(37, 45, 91, 0.04);
        }
        @media (hover: hover) {
          &:hover {
            border-color: var(--jfv-navy-100);
          }
        }
      }
    }
    &--use-cases,
    &--wp-page {
      margin: 32px 0 auto;
      @media screen and (max-width: 480px) {
        margin: 24px 0 auto;
      }
    }
    &--use-cases {
      .jfpContent-wrapper--input {
        position: relative;
        &-label {
          position: absolute;
          inset: 12px;
          font-size: 14px;
          line-height: 18px;
          color: var(--jfv-navy-300);
          pointer-events: none;
        }
      }
    }
    &--wp-page {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      padding: 0 2px;
      margin: 0 -2px;
    }
    &--wp-page-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      overflow-y: scroll;
      padding: 0 2px 2px;
      margin: 22px -2px;
      @include only-firefox {
        scrollbar-width: thin;
        scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
      }
      &-item {
        &:first-child {
          margin-bottom: 16px;
        }
      }
    }
    &--buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 16px 0;
      @media screen and (max-width: 480px) {
        .jfButton {
          &--small {
            height: 28px;
          }
          &--text {
            font-size: 12px;
            line-height: 16px;
          }
        }
      }
    }
    &--line {
      border: 0;
      border-top: 1px solid var(--jfv-navy-50);
      margin: 16px 0;
      &.line-2x {
        margin: 24px 0;
      }
    }
    &--card {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: start;
      padding: 16px;
      border-radius: 8px;
      background: var(--jfv-white);
      box-shadow: 0 1.579px 12.635px 0 rgba(70, 38, 123, 0.05);
      border: 1px solid var(--jfv-white);
      transition: all 0.3s;
      @media (hover: hover) {
        &:hover {
          box-shadow: 0 7px 20px 0 rgba(70, 38, 123, 0.1);
          border-color: var(--jfv-navy-75);
        }
      }
      &-icon {
        margin-bottom: 16px;
        padding: 6px;
        border-radius: 6px;
        color: var(--jfv-white);
        display: flex;
        &.green {
          background-color: var(--jfv-green-500);
        }
        &.yellow {
          background-color: var(--jfv-yellow-400);
        }
        &.blue {
          background-color: var(--jfv-blue-400);
        }
        &.darkblue {
          background-color: var(--jfv-pdf-default);
        }
      }
      &-title {
        color: var(--jfv-navy-700);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.084px;
        margin-bottom: 2px;
      }
      &-subtitle {
        color: var(--jfv-navy-300);
        font-size: 12px;
        line-height: 16px;
      }
    }
    &--actions {
      margin-top: 16px;
      // padding-bottom: 32px;
      display: flex;
      justify-content: space-between;
      .lets-start {
        margin: 0 auto;
      }
      .btn-pos-right {
        margin-inline-start: auto;
      }
    }
    &--knowledge {
      overflow-y: scroll;
      height: 100%;
      flex: 1;
      padding: 2px 12px 40px;
      margin: -2px -2px auto -12px;
      @media screen and (max-width: 1024px) {
        padding: 2px 12px 24px;
        margin: -2px -12px auto -12px;
      }
      @include only-firefox {
        scrollbar-width: thin;
        scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
      }
      .trained-knowledge {
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-radius: 4px;
        background-color: #edf8ff;
        padding: 24px;
        &-content {
          display: flex;
          align-items: center;
          gap: 4px;
          &-icon {
            flex-shrink: 0;
            svg {
              width: 20px;
              height: 20px;
            }
          }
          &-title {
            color: #0a1551;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
          }
        }
        &-desc {
          color: #6c73a8;
          font-size: 12px;
          font-weight: 400;
          line-height: 16px;
        }
      }
      .crawl-url {
        &-container {
          display: flex;
          flex-direction: column;
          gap: 24px;
          .crawl-url-input-container {
            display: flex;
            align-items: stretch;
          }
          .jfInput {
            margin-top: 0;
          }
        }
      }
      .upload-document {
        &-container {
          display: flex;
          flex-direction: column;
          gap: 16px;
          .jfMaterialEditor--label-wrapper {
            h3 {
              color: #0a1551;
              font-size: 14px;
              font-weight: 600;
              line-height: 20px;
            }
            p {
              color: #6c73a8;
              font-size: 12px;
              font-weight: 400;
              line-height: 16px;
            }
          }
        }
        &-preview {
          display: flex;
          align-items: center;
          padding: 8px 16px;
          border-radius: 4px;
          border: 1px dashed var(--jfv-navy-100);
          &-text {
            font-size: 14px;
            color: var(--jfv-navy-700);
            flex-grow: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            &-close {
              width: 32px;
              height: 32px;
              &:hover {
                background-color: transparent;
              }
            }
          }
          &-icon {
            width: 24px;
            height: 24px;
            fill: #c8ceed;
            margin-right: 8px;
          }
        }
        .upload-area {
          &-container {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: center;
            justify-content: center;
            padding: 40px 32px;
            background-color: #fbfcff;
            border: 1px dashed var(--jfv-navy-100);
            border-radius: 4px;
            .cloud-icon {
              width: 48px;
              height: 48px;
              fill: #c8ceed;
            }
          }
          &-title {
            font-size: 14px;
            font-weight: 500;
            color: var(--jfv-navy-700);
            text-align: center;
          }
          &-desc {
            font-size: 12px;
            font-weight: 500;
            color: var(--jfv-navy-500);
            text-align: center;
          }
          &-link {
            color: var(--jfv-blue-500);
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
      .question-wrapper {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .answer-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
        span {
          color: var(--jfv-navy-700);
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
        }
        .jfTextarea-container {
          textarea {
            width: 100%;
            height: 208px;
            border: 1px solid var(--jfv-navy-100);
            border-radius: 4px;
          }
        }
      }
    }
    &--share {
      display: flex;
      flex-direction: column;
      align-items: end;
      gap: 10px;
      margin-bottom: auto;
      p {
        color: var(--jfv-navy-300);
        font-size: 12px;
        line-height: 16px;
      }
      &-code {
        background-color: var(--jfv-gray-600);
        width: 100%;
        height: 144px;
        padding: 8px 16px;
        border-radius: 4px;
        display: flex;
        overflow: scroll;
        code {
          word-wrap: break-word;
          text-wrap: wrap;
          width: 100%;
          height: 100%;
          font-size: 12px;
          line-height: 16px;
          color: var(--jfv-white);
          font-family: Circular, BlinkMacSystemFont, Helvetica;
        }
      }
    }
  }
  .agent-preview-text {
    position: absolute;
    bottom: -100px;
    height: 68px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: var(--jfv-navy-300);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.084px;
    gap: 4px;
    &.align-left {
      left: 80px;
    }
    &.align-right {
      right: 80px;
    }
  }
  .agent-preview {
    width: 100%;
    max-width: 440px;
    padding: 56px 64px;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border-radius: 16px;
    background: var(--jfv-white);
    box-shadow:
      0px 16px 24px 0px rgba(84, 95, 111, 0.16),
      0px 2px 8px 0px rgba(37, 45, 91, 0.04);
    backdrop-filter: blur(40px);
    border: 1px solid var(--jfv-navy-50);
    overflow: hidden;
    @media screen and (max-width: 1280px) {
      padding: 32px 24px;
      max-width: 372px;
    }
    @media screen and (max-width: 1024px) {
      width: 100%;
      height: auto;
      margin-inline-start: 0;
      max-width: 412px;
      .chatbot-image {
        display: none;
      }
    }
    @media screen and (max-width: 480px) {
      max-width: unset;
      padding: 24px;
    }
    &-bg {
      pointer-events: none;
      overflow: hidden;
      width: calc(100% - 80px);
      height: calc(100% - 80px);
      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22367%22%20height%3D%22592%22%20viewBox%3D%220%200%20367%20592%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20opacity%3D%220.13%22%3E%3Cpath%20d%3D%22M118.918%208.48164C118.918%203.79736%20122.714%201.8776e-06%20127.397%201.8776e-06L147.393%201.87761e-06C152.076%201.87761e-06%20155.873%203.79736%20155.873%208.48164C155.873%2013.1659%20152.076%2016.9633%20147.393%2016.9633H127.397C122.714%2016.9633%20118.918%2013.1659%20118.918%208.48164Z%22%20fill%3D%22url(%23paint0_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M0.000122045%208.48164C0.000122045%203.79736%203.79651%201.87761e-06%208.47965%201.87761e-06H65.7169C70.4001%201.87761e-06%2074.1965%203.79736%2074.1965%208.48164C74.1965%2013.1659%2070.4001%2016.9633%2065.7169%2016.9633H8.47965C3.79651%2016.9633%200.000122045%2013.1659%200.000122045%208.48164Z%22%20fill%3D%22url(%23paint1_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M164.024%208.48164C164.024%203.79736%20167.821%201.87761e-06%20172.504%201.87761e-06L211.898%200C216.581%200%20220.378%203.79736%20220.378%208.48164C220.378%2013.1659%20216.581%2016.9633%20211.898%2016.9633L172.504%2016.9633C167.821%2016.9633%20164.024%2013.1659%20164.024%208.48164Z%22%20fill%3D%22url(%23paint2_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M228.395%208.48164C228.395%203.79736%20232.191%201.87761e-06%20236.874%201.87761e-06H269.462C274.145%201.87761e-06%20277.941%203.79736%20277.941%208.48164C277.941%2013.1659%20274.145%2016.9633%20269.462%2016.9633H236.874C232.191%2016.9633%20228.395%2013.1659%20228.395%208.48164Z%22%20fill%3D%22url(%23paint3_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M325.45%208.48164C325.45%203.79736%20329.246%201.87761e-06%20333.93%201.87761e-06H358.52C363.204%201.87761e-06%20367%203.79736%20367%208.48164C367%2013.1659%20363.204%2016.9633%20358.52%2016.9633H333.93C329.246%2016.9633%20325.45%2013.1659%20325.45%208.48164Z%22%20fill%3D%22url(%23paint4_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M0%20444.495C0%20439.811%203.79645%20436.014%208.47959%20436.014L138.567%20437.031C143.25%20437.031%20147.046%20440.829%20147.046%20445.513V583.518C147.046%20588.203%20143.25%20592%20138.567%20592L8.47959%20590.983C3.79645%20590.983%200%20587.185%200%20582.501V444.495Z%22%20fill%3D%22url(%23paint5_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M0%2061.0677C0%2056.3834%203.79645%2052.5861%208.47959%2052.5861H358.52C363.203%2052.5861%20367%2056.3834%20367%2061.0677V262.249C367%20266.933%20363.203%20270.73%20358.52%20270.73H8.47959C3.79645%20270.73%200%20266.933%200%20262.249V61.0677Z%22%20fill%3D%22url(%23paint6_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M0%20299.353C0%20294.669%203.79645%20290.871%208.47959%20290.871H197.004C201.687%20290.871%20205.484%20294.669%20205.484%20299.353V407.013C205.484%20411.697%20201.687%20415.494%20197.004%20415.494H8.47953C3.79639%20415.494%200%20411.697%200%20407.013V299.353Z%22%20fill%3D%22url(%23paint7_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M224.471%20299.353C224.471%20294.669%20228.267%20290.872%20232.951%20290.872H358.52C363.203%20290.872%20367%20294.669%20367%20299.353V407.013C367%20411.697%20363.203%20415.494%20358.52%20415.494H232.951C228.267%20415.494%20224.471%20411.697%20224.471%20407.013V299.353Z%22%20fill%3D%22url(%23paint8_linear_2271_3580)%22%2F%3E%3Cpath%20d%3D%22M168.964%20444.495C168.964%20439.811%20172.761%20436.014%20177.444%20436.014L358.52%20437.031C363.203%20437.031%20367%20440.829%20367%20445.513V583.518C367%20588.203%20363.203%20592%20358.52%20592L177.444%20590.983C172.761%20590.983%20168.964%20587.185%20168.964%20582.501V444.495Z%22%20fill%3D%22url(%23paint9_linear_2271_3580)%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint1_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint2_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint3_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint4_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint5_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint6_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint7_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint8_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22paint9_linear_2271_3580%22%20x1%3D%22366.932%22%20y1%3D%22121.759%22%20x2%3D%2239.5158%22%20y2%3D%22364.243%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23849DAD%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23849DAD%22%20stop-opacity%3D%220.2%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      inset: 40px;
      @media screen and (max-width: 1280px) {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        inset: 20px;
      }
    }
    #agent-preview-root {
      width: 100%;
      height: 100%;
      position: relative;
    }
    &--buttons {
      margin-top: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    #agent-preview-root {
      height: 720px;
      @media screen and (max-width: 1024px) {
        height: 480px;
      }
    }
  }
  .first-step {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    width: 416px;
    margin-bottom: 4px;
    h2 {
      color: var(--jfv-navy-700);
      font-size: 28px;
      font-style: normal;
      font-weight: 700;
      line-height: 40px;
      letter-spacing: -0.588px;
    }
    p {
      color: var(--jfv-navy-300);
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -0.176px;
    }
    .lets-start {
      margin-top: 16px;
    }
    &--logo {
      margin-bottom: 16px;
      display: flex;
    }
    &--terms {
      display: flex;
      align-items: center;
      color: var(--jfv-navy-300);
      font-size: 12px;
      line-height: 16px;
      margin-top: 44px;
      gap: 8px;
      text-align: left;
      a {
        color: var(--jfv-blue-500);
        text-decoration: underline;
      }
      &.jfpContent-wrapper--terms {
        margin-top: 32px;
      }
    }
    @media screen and (max-width: 1024px) {
      width: 100%;
    }
  }
  .generic-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--jfv-red-100);
    border-radius: 4px;
    padding: 12px 16px;
    max-width: 540px;
    margin-top: 72px;
    &--icon {
      flex-shrink: 0;
      margin-top: 2px;
      svg {
        width: 14px;
        height: 14px;
        fill: var(--jfv-red-400);
      }
    }
    &--content {
      flex: 1;
      p {
        margin: 0;
        color: var(--jfv-red-400);
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
  .introduction {
    flex: 1;

    display: flex;
    align-items: center;
    max-width: 440px;
    video {
      display: flex;
      clip-path: inset(1px);
      background-color: transparent;
      transform: translateX(-40px) scale(1.15);
    }
    @media screen and (max-width: 1024px) {
      margin-block: -24px;
      margin-inline-end: 0;
      display: none;
    }
  }
  &--platformmode {
    &[data-step="INITIAL"],
    &[data-step="USECASE_SELECTION"] {
    }
    .jfpContent-wrapper {
      max-width: 768px;
      @media screen and (max-width: 1024px) {
        max-width: unset;
      }
    }
  }
}

.chatbot-footer {
  padding: 12px 24px 32px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  max-width: 1238px;
  @media screen and (max-width: 1024px) {
  }
  @media screen and (max-width: 640px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  .how-to-use-link {
    text-decoration: none;
    color: var(--jfv-navy-500);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: 0.15s all;
    border-radius: 4px;
    padding: 8px;
    &:hover {
      background-color: #e8e8f2;
    }
    &:focus {
      outline: none;
      box-shadow: none;
    }
  }
}

#wpbody-content {
  // overflow: hidden;
  .wrap {
    & > h1 {
      display: flex !important;
    }
  }
  @media screen and (max-width: 782px) {
    padding-bottom: 24px;
  }
}

header.jotform-ai-chatbot-header .notice,
header.jotform-ai-chatbot-header [class*="notice"],
header.jotform-ai-chatbot-header [id*="notice"] {
  display: none !important;
}

.jotform-ai-chatbot-header {
  padding: 6px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  // width: 100%;
  max-width: 1190px;
  > div:not(.jotform-ai-chatbot-logo):not(#button-wrapper-root) {
    display: none !important;
  }
  .jotform-ai-chatbot-logo {
    > *:not(.jf-title):not(.jf-logo) {
      display: none !important;
    }
  }
}

@media screen and (min-width: 1280px) {
  .jotform-ai-chatbot-header {
    width: 100%;
    svg {
      height: 40px;
    }
  }
}

@media screen and (max-width: 768px) {
  .jotform-ai-chatbot-header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
    padding: 24px;
  }
}

.jotform-ai-chatbot-header .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

#headlessui-dialog-1:has(.chatbot-onboarding-modal) {
  top: var(--jf-header-size);
  padding: 0;
  background-color: var(--jfv-white);
  align-items: flex-start;
  .chatbot-onboarding-modal {
    width: 100%;
    height: 100%;
    & > div {
      width: 100%;
      height: 100%;
      padding: 0;
    }
  }
  @media only screen and (min-width: 30rem) {
    padding: 0;
  }
}

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

.jfPrompt-suggestion {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--jfv-white);
  margin: 8px 0;
  width: 100%;
  height: 100%;
  max-height: 140px;
  overflow-y: scroll;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
  z-index: 1;
  @include only-firefox {
    scrollbar-width: thin;
    scrollbar-color: var(--jfv-navy-75) var(--jfv-navy-75);
  }

  @media screen and (min-width: 1024px) {
    max-width: 640px;
  }

  html[dir="rtl"] & {
    padding-right: 0;
    padding-left: 16px;
  }

  &-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    // padding: 8px;
  }

  .jfPrompt-skeleton-item {
    height: 44px;
    width: 100%;
    background: transparent;
    padding: 4px 8px 4px 28px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    .rectangle-container {
      display: flex;
      width: 100%;
      gap: 8px;
      .rectangle {
        background-color: var(--jfv-navy-10);
        border-radius: 16px;
        height: 12px;
      }
    }
    &:before {
      content: "";
      position: absolute;
      top: 6px;
      left: 8px;
      width: 16px;
      height: 16px;
      background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3432 0.572264C11.2253 0.253581 10.7746 0.253581 10.6566 0.572265L10.4831 1.04131C10.2359 1.70926 9.70926 2.2359 9.04131 2.48306L8.57227 2.65663C8.25358 2.77455 8.25358 3.22529 8.57227 3.34321L9.04131 3.51677C9.70926 3.76394 10.2359 4.29058 10.4831 4.95853L10.6566 5.42757C10.7746 5.74626 11.2253 5.74626 11.3432 5.42757L11.5168 4.95853C11.7639 4.29058 12.2906 3.76394 12.9585 3.51677L13.4276 3.34321C13.7463 3.22529 13.7463 2.77455 13.4276 2.65662L12.9585 2.48306C12.2906 2.2359 11.7639 1.70926 11.5168 1.04131L11.3432 0.572264ZM4.15408 4.07578C4.39309 4.16422 4.39309 4.50228 4.15408 4.59072L3.8023 4.72089C3.30133 4.90627 2.90635 5.30125 2.72098 5.80221L2.59081 6.15399C2.50236 6.39301 2.16431 6.39301 2.07587 6.15399L1.94569 5.80221C1.76032 5.30125 1.36534 4.90627 0.864377 4.72089L0.512595 4.59072C0.273583 4.50228 0.273583 4.16422 0.512595 4.07578L0.864377 3.94561C1.36534 3.76024 1.76032 3.36526 1.94569 2.86429L2.07587 2.51251C2.16431 2.2735 2.50236 2.2735 2.59081 2.51251L2.72098 2.86429C2.90635 3.36526 3.30133 3.76024 3.80229 3.94561L4.15408 4.07578ZM10.6415 9.15164C11.1195 9.32853 11.1195 10.0046 10.6415 10.1815L9.93792 10.4419C8.93599 10.8126 8.14603 11.6026 7.77529 12.6045L7.51494 13.3081C7.33806 13.7861 6.66195 13.7861 6.48506 13.3081L6.22472 12.6045C5.85397 11.6026 5.06401 10.8126 4.06208 10.4419L3.35852 10.1815C2.8805 10.0046 2.8805 9.32853 3.35852 9.15164L4.06208 8.8913C5.06401 8.52056 5.85397 7.7306 6.22472 6.72867L6.48506 6.0251C6.66195 5.54708 7.33806 5.54708 7.51494 6.0251L7.77528 6.72867C8.14603 7.7306 8.93599 8.52056 9.93792 8.8913L10.6415 9.15164Z' fill='%23979DC6'/%3E%3C/svg%3E%0A");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      html[dir="rtl"] & {
        left: auto;
        right: 8px;
      }
    }
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: -150px;
      height: 100%;
      width: 180px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
      animation: shimmer 1.5s infinite;
    }
  }

  @keyframes shimmer {
    0% {
      left: -150px;
    }
    100% {
      left: 100%;
    }
  }

  &-item {
    border: none;
    margin: 0;
    color: var(--jfv-gray-500);
    background-color: transparent;
    padding: 4px 8px 4px 28px;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    transition: all 150ms;
    border-radius: 8px;
    position: relative;
    text-align: start;

    html[dir="rtl"] & {
      padding: 4px 28px 4px 8px;
    }

    &:before {
      content: "";
      position: absolute;
      top: 6px;
      left: 8px;
      width: 16px;
      height: 16px;
      background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3432 0.572264C11.2253 0.253581 10.7746 0.253581 10.6566 0.572265L10.4831 1.04131C10.2359 1.70926 9.70926 2.2359 9.04131 2.48306L8.57227 2.65663C8.25358 2.77455 8.25358 3.22529 8.57227 3.34321L9.04131 3.51677C9.70926 3.76394 10.2359 4.29058 10.4831 4.95853L10.6566 5.42757C10.7746 5.74626 11.2253 5.74626 11.3432 5.42757L11.5168 4.95853C11.7639 4.29058 12.2906 3.76394 12.9585 3.51677L13.4276 3.34321C13.7463 3.22529 13.7463 2.77455 13.4276 2.65662L12.9585 2.48306C12.2906 2.2359 11.7639 1.70926 11.5168 1.04131L11.3432 0.572264ZM4.15408 4.07578C4.39309 4.16422 4.39309 4.50228 4.15408 4.59072L3.8023 4.72089C3.30133 4.90627 2.90635 5.30125 2.72098 5.80221L2.59081 6.15399C2.50236 6.39301 2.16431 6.39301 2.07587 6.15399L1.94569 5.80221C1.76032 5.30125 1.36534 4.90627 0.864377 4.72089L0.512595 4.59072C0.273583 4.50228 0.273583 4.16422 0.512595 4.07578L0.864377 3.94561C1.36534 3.76024 1.76032 3.36526 1.94569 2.86429L2.07587 2.51251C2.16431 2.2735 2.50236 2.2735 2.59081 2.51251L2.72098 2.86429C2.90635 3.36526 3.30133 3.76024 3.80229 3.94561L4.15408 4.07578ZM10.6415 9.15164C11.1195 9.32853 11.1195 10.0046 10.6415 10.1815L9.93792 10.4419C8.93599 10.8126 8.14603 11.6026 7.77529 12.6045L7.51494 13.3081C7.33806 13.7861 6.66195 13.7861 6.48506 13.3081L6.22472 12.6045C5.85397 11.6026 5.06401 10.8126 4.06208 10.4419L3.35852 10.1815C2.8805 10.0046 2.8805 9.32853 3.35852 9.15164L4.06208 8.8913C5.06401 8.52056 5.85397 7.7306 6.22472 6.72867L6.48506 6.0251C6.66195 5.54708 7.33806 5.54708 7.51494 6.0251L7.77528 6.72867C8.14603 7.7306 8.93599 8.52056 9.93792 8.8913L10.6415 9.15164Z' fill='%23979DC6'/%3E%3C/svg%3E%0A");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      html[dir="rtl"] & {
        left: auto;
        right: 8px;
      }
    }
    &:hover {
      background-color: var(--jfv-navy-10);
    }
  }

  @media screen and (max-width: 1024px) {
    max-height: 72px;
  }
}