impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/ChatBot/chatBot.style.scss

@@ -1,1295 +0,0 @@
-@import "../../styles/index.scss";
-@import "../../styles/base/color.scss";
-
-.chatbot-modal-wrapper {
-  position: fixed;
-  top: 56px;
-  right: 0;
-  z-index: 1300;
-
-  .chatbot-component-container {
-    background: #fff;
-    box-shadow: 0 8px 32px 0 rgba(16, 30, 54, 0.16);
-    height: calc(100vh - 56px);
-    padding: 10px;
-
-    .chatbot-component-header-close-icon {
-      width: 26px;
-      height: 26px;
-    }
-
-    //Landing screen
-    .chatbot-landing-screen-container {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-
-      .chatbot-landing-screen-container-body {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: calc(100vh - 125px);
-      }
-
-      .chatbot-landing-screen-container-close-icon {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        pointer-events: auto;
-      }
-
-      .chatbot-landing-screen-container-circle-1 {
-        position: absolute;
-        width: 118px;
-        height: 118px;
-        border-radius: 50%;
-        background: $chatBotLightBlue;
-        filter: blur(68px);
-        left: calc(50% - 120px);
-        top: calc(50% - 60px);
-        z-index: 1;
-      }
-
-      .chatbot-landing-screen-container-circle-2 {
-        position: absolute;
-        width: 189px;
-        height: 189px;
-        border-radius: 50%;
-        background: $chatBotLightPink;
-        filter: blur(80px);
-        left: calc(50% - 20px);
-        top: calc(50% - 40px);
-        z-index: 2;
-      }
-    }
-
-    .chatbot-component-left-side {
-      width: 60px;
-      height: 100%;
-      position: relative;
-      &::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        padding: 1px;
-        border-radius: 12px;
-        background: linear-gradient(
-          180deg,
-          #b3bdf8 0%,
-          #eceefd 61%,
-          rgba(247, 190, 163, 0.7) 100%
-        );
-        -webkit-mask: linear-gradient(#fff 0 0) content-box,
-          linear-gradient(#fff 0 0);
-        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-        -webkit-mask-composite: xor;
-        mask-composite: exclude;
-        pointer-events: none;
-        z-index: 2;
-      }
-      &.chatbot-component-left-side-open {
-        width: 400px;
-      }
-      .chatbot-component-menu-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        &.chatbot-component-menu-container-open {
-          justify-content: unset;
-
-          & .book-mark-panel-container-wrapper {
-            padding: 12px 12px 12px 0;
-            height: 100%;
-            flex: 1;
-
-            & .book-mark-panel-container {
-              position: relative;
-              display: flex;
-              flex-direction: column;
-              gap: 16px;
-              width: 100%;
-              height: 100%;
-              padding: 20px 16px 0 16px;
-              // filter: blur(4px);
-              box-shadow: 12px 13px 45px -1px #402b701c;
-              background: linear-gradient(
-                180deg,
-                rgba(240, 242, 255, 0.6) 0%,
-                rgba(255, 239, 248, 0.444) 50%,
-                rgba(255, 236, 235, 0.252) 100%
-              );
-
-              &::before {
-                content: "";
-                position: absolute;
-                inset: 0;
-                border-radius: 12px;
-                padding: 1px;
-                background: linear-gradient(
-                  187.22deg,
-                  rgba(179, 189, 248, 0.7) 0%,
-                  #ffffff 57.21%,
-                  #cdcaf5 100%
-                );
-                -webkit-mask: linear-gradient(#fff 0 0) content-box,
-                  linear-gradient(#fff 0 0);
-                mask: linear-gradient(#fff 0 0) content-box,
-                  linear-gradient(#fff 0 0);
-                -webkit-mask-composite: xor;
-                mask-composite: exclude;
-                pointer-events: none;
-                z-index: 2;
-              }
-
-              .book-mark-panel-header {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                width: 100%;
-
-                .book-mark-panel-header-left {
-                  display: flex;
-                  align-items: center;
-                  gap: 7px;
-
-                  .book-mark-panel-header-left-title {
-                    font-size: $mediumFontSize;
-                    font-weight: $ExtraFontWeight;
-                    color: $darkColor;
-                    line-height: 24px;
-                  }
-                }
-
-                .book-mark-panel-header-right {
-                  display: flex;
-                  align-items: center;
-                  gap: 12px;
-                }
-              }
-            }
-          }
-        }
-        background: linear-gradient(
-          180deg,
-          rgba(240, 242, 255, 0.6) 0%,
-          rgba(255, 239, 248, 0.444) 50%,
-          rgba(255, 236, 235, 0.252) 100%
-        );
-        border-radius: 12px;
-        position: relative;
-        z-index: 1;
-
-        .chatbot-component-menu-container-icon {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          align-items: center;
-          padding-block: 12px;
-          transition: all 0.3s ease-in-out;
-          &.chatbot-component-menu-container-icon-open {
-            width: 60px;
-            padding: 12px;
-          }
-
-          .chatbot-component-menu-list {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 12px;
-            padding: 0;
-            margin: 0;
-            list-style: none;
-          }
-
-          .chatbot-component-menu-list li {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 37px;
-            height: 37px;
-            border-radius: 8px;
-            cursor: pointer;
-
-            &:hover {
-              background: linear-gradient(
-                152deg,
-                rgba(179, 189, 248, 0.17) 17.25%,
-                rgba(179, 189, 248, 0.61) 122.41%
-              );
-            }
-          }
-          .utility-list li {
-            &:hover {
-              background: linear-gradient(
-                152deg,
-                rgba(179, 189, 248, 0.17) 17.25%,
-                rgba(179, 189, 248, 0.61) 122.41%
-              ) !important;
-            }
-          }
-          .active {
-            background: linear-gradient(
-              152deg,
-              rgba(179, 189, 248, 0.17) 17.25%,
-              rgba(179, 189, 248, 0.61) 122.41%
-            );
-            // border: 1px solid $primaryColor;
-          }
-        }
-
-        .chatbot-component-menu-list img {
-          cursor: pointer;
-        }
-
-        .chatbot-component-menu-container-icon-new-chat {
-          margin-bottom: 10px;
-        }
-
-        .chatbot-component-menu-container-icon-notification {
-          width: 16px;
-          height: 16px;
-        }
-      }
-    }
-  }
-
-  .chatbot-component-right-side {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    left: 70px;
-    padding: 16px;
-    transition: none !important;
-    // transition: all 0.3s ease-in-out;
-    &.chatbot-component-right-side-open {
-      left: 410px;
-    }
-
-    .chatbot-component-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .chatbot-component-header-dropdown {
-        .ia-btn-icon {
-          margin-bottom: 0px;
-        }
-
-        .chatbot-component-header-dropdown-text {
-          font-size: 12px;
-          font-weight: 400;
-        }
-      }
-    }
-
-    .chatbot-component-body {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: calc(100% - 45px);
-
-      .chatbot-component-body-container {
-        display: flex;
-        justify-content: center;
-        gap: 10px;
-        flex: 1;
-        flex-direction: column;
-
-        .chatbot-component-body-icon {
-          &.rotating {
-            animation: chatbot-rotate 0.7s linear;
-          }
-
-          width: 84px;
-          height: 84px;
-          margin: auto;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          @keyframes chatbot-rotate {
-            0% {
-              transform: rotate(0deg);
-            }
-            100% {
-              transform: rotate(360deg);
-            }
-          }
-
-          width: 54px;
-          height: 54px;
-        }
-      }
-
-      .chatbot-component-body-text {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 5px;
-        .chatbot-component-body-text-title {
-          color: $mainFontColor;
-          font-size: 26px;
-          font-weight: 600;
-          .chatbot-component-body-text-username {
-            font-weight: 700;
-            background: linear-gradient(82deg, #ec7550 10.92%, #a0508f 81.37%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            color: transparent;
-            line-height: 47px;
-
-            img {
-              width: 20px;
-              height: 20px;
-              vertical-align: middle;
-              margin-left: 6px;
-              margin-top: -2px;
-            }
-          }
-        }
-        .chatbot-component-body-text-description {
-          color: $inputInfoColor;
-          font-size: 16px;
-          font-weight: 500;
-          margin-bottom: 15px;
-        }
-      }
-    }
-  }
-
-  .conversation-screen-container {
-    // Conversation screen header starts here
-
-    .conversation-screen-container-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      .left_logo_arrow_container {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        .conversation_chatbot_logo_container {
-          img {
-            width: 18px;
-            height: 18px;
-          }
-          .left_logo_arrow_container {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-          }
-        }
-      }
-
-      // Center options starts here
-
-      .center_options_container {
-        height: 30px;
-        background: linear-gradient(
-          91deg,
-          #f8f8ff 54.01%,
-          rgba(255, 228, 228, 0) 107.24%
-        );
-        width: calc(100% - 136px);
-        border: 1px solid $accordionBgBackground;
-        border-radius: 37px;
-        display: flex;
-        .left_tabs_container {
-          ul {
-            display: flex;
-            padding-left: 15px;
-            box-sizing: border-box;
-            gap: 2px;
-            li {
-              padding: 4px 12px;
-              font-size: 12px;
-              color: $mainFontColor;
-              border-radius: 4px 4px 0 0;
-              gap: 4px;
-              height: 25px;
-              margin-top: 4px;
-              display: flex;
-              align-items: center;
-              cursor: pointer;
-
-              .close_thread {
-                img {
-                  width: 8px;
-                  height: 8px;
-                }
-              }
-
-              &.active {
-                background: $whiteColor;
-                border: 1px solid $accordionBgBackground;
-                border-bottom: none;
-              }
-            }
-          }
-        }
-      }
-
-      // Center options ends here
-
-      //Rigth options starts here
-
-      .right_close_save_icon_container {
-        display: flex;
-        gap: 10px;
-      }
-    }
-
-    // Conversation body starts here
-
-    .conversation-body-container {
-      position: absolute;
-      top: 56px;
-      bottom: 155px;
-      left: 0;
-      right: 0;
-      overflow: auto;
-      padding: 8px 32px;
-      box-sizing: border-box;
-      scrollbar-width: none;
-
-      .time_stamp_badge_chat_container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 10px;
-        .time_stamp_badge_chat {
-          border: 1px solid $disabledSecondaryBorder;
-          background: linear-gradient(
-            90deg,
-            #f5f5f5 6%,
-            rgba(245, 245, 245, 0) 120%
-          );
-          padding: 2px 8px;
-          color: $textButtonFontColor;
-          font-size: 12px;
-          font-weight: 500;
-          max-width: 100%;
-          height: 23px;
-          box-sizing: border-box;
-          border-radius: 23px;
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      // User response Chat container starts
-      .user_chat_messages_container {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
-        justify-content: flex-end;
-        gap: 10px;
-        margin-bottom: 35px;
-        .user_chat_message {
-          background: linear-gradient(
-            91deg,
-            rgba(223, 231, 255, 0.4) 0.67%,
-            rgba(228, 216, 255, 0.32) 56.16%,
-            rgba(255, 203, 204, 0.27) 111.65%
-          );
-          border-radius: 12px;
-          padding: 16px 16px 8px 16px;
-          max-width: 550px;
-
-          .user_chat_message_text {
-            font-size: 14px;
-            font-weight: 500;
-            color: $mainFontColor;
-            line-height: 18px;
-            word-wrap: break-word;
-          }
-          .time_chat {
-            font-size: 12px;
-            font-weight: 500;
-            color: $textButtonFontColor;
-            text-align: right;
-            margin-top: 4px;
-          }
-        }
-      }
-
-      //Agent response chat container starts
-
-      .assistant_chat_messages_container {
-        display: flex;
-        width: 100%;
-        margin-bottom: 35px;
-        .chat_logo_circle {
-          background: url("../../assets/chat-icon-circle.svg") no-repeat center;
-          width: 25px;
-          height: 25px;
-        }
-        .chat_logo_circle_empty {
-          width: 25px;
-          height: 25px;
-        }
-        .loading_messages {
-          width: 25px;
-          height: 25px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          gap: 4px;
-          background: transparent;
-          border: none;
-          animation: none;
-          margin-left: 12px;
-          .dot {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: $mainFontColor;
-            opacity: 1;
-            animation: loading-dot-bounce-vertical 1.2s infinite;
-            transform: translateY(0);
-          }
-          .dot:nth-child(1) {
-            animation-delay: 0s;
-          }
-          .dot:nth-child(2) {
-            animation-delay: 0.2s;
-          }
-          .dot:nth-child(3) {
-            animation-delay: 0.4s;
-          }
-        }
-
-        .response_main_container {
-          margin-left: 12px;
-          width: 80%;
-          word-wrap: break-word;
-          .assistant_with_dropdown_container {
-            color: $inputInfoColor;
-            font-size: 12px;
-            margin-bottom: 10px;
-            background: url("../../assets/accordion-chevron.svg") no-repeat;
-            background-position: right center;
-            display: inline-flex;
-            padding-right: 13px;
-            cursor: pointer;
-          }
-          .thinking_response_container {
-            background: url("../../assets/accordion-chevron-up.svg") no-repeat;
-            background-position: right center;
-            margin-bottom: 12px;
-          }
-          .thinking_response_content {
-            max-height: 0px;
-            overflow: hidden;
-            transition: all 0.3s ease-in-out;
-            color: $textButtonFontColor;
-            border-left: 1px solid $disabledSecondaryBorder;
-            padding: 0px 12px;
-            font-size: $normalFontSize;
-            font-weight: 400;
-            line-height: 160%;
-          }
-          .show-thinking-response-content {
-            max-height: 350px;
-            transition: all 0.3s ease-in-out;
-            color: $textButtonFontColor;
-            margin-bottom: 10px;
-            border-left: 1px solid $disabledSecondaryBorder;
-            padding: 4px 12px;
-            font-size: $normalFontSize;
-            font-weight: 400;
-            overflow: auto;
-            scrollbar-width: none;
-          }
-          .assistant_main_container {
-            border-radius: 12px;
-            background: $whiteColor;
-            padding: 16px 16px 8px 16px;
-            box-shadow: 0px 0px 4px 0px #7c5cb1;
-            &.questions-container {
-              background: transparent;
-              box-shadow: none;
-            }
-            .assistant_text_container {
-              font-size: 14px;
-              color: $mainFontColor;
-              line-height: 18px;
-            }
-            .assistant_form_container {
-              display: flex;
-              flex-direction: column;
-              gap: 8px;
-              .dateRangePicker-container {
-                width: 100%;
-              }
-              .datePicker-input-container {
-                width: 100%;
-              }
-            }
-            .time_chat {
-              font-size: 12px;
-              font-weight: 500;
-              color: $textButtonFontColor;
-              text-align: right;
-              margin-top: 4px;
-            }
-          }
-
-          .questions-container {
-            background: transparent;
-          }
-
-          .assistant_actions_container {
-            margin-top: 12px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            .asst_feedback_buttons {
-              border: none;
-              background: transparent;
-              cursor: pointer;
-            }
-            .left_icon_container_action {
-              gap: 4px;
-              display: flex;
-
-              .good_feedback {
-                background: url("../../assets/thumbs-up.svg") no-repeat;
-                width: 20px;
-                height: 20px;
-                background-size: cover;
-                transition: background-image 0.2s;
-              }
-              .animatingLike {
-                animation: rotateUpDown 1s forwards;
-              }
-              .animatingDislike {
-                animation: rotateDownUp 1s forwards;
-              }
-              .liked {
-                background: url("../../assets/thumbs-up-filled.svg") no-repeat;
-                background-size: cover;
-              }
-              .bad_feedback {
-                background: url("../../assets/thumbs-down.svg") no-repeat;
-                width: 20px;
-                height: 20px;
-                background-size: cover;
-              }
-              .disliked {
-                background: url("../../assets/thumbs-down-filled.svg") no-repeat;
-                background-size: cover;
-              }
-              .speaker {
-                background: url("../../assets/speaker.svg") no-repeat;
-                width: 20px;
-                height: 20px;
-                background-size: cover;
-              }
-            }
-            .button_url_container {
-              border-left: 1px solid $disabledSecondaryBorder;
-              padding-left: 10px;
-              .asst_feedback_buttons {
-                color: $textButtonFontColor;
-                background: url("../../assets/add-thread.svg") no-repeat;
-                padding-left: 24px;
-              }
-            }
-          }
-        }
-
-        @keyframes loading-dot-bounce-vertical {
-          0%,
-          80%,
-          100% {
-            transform: translateY(0);
-          }
-          40% {
-            transform: translateY(-8px);
-          }
-        }
-      }
-    }
-
-    // Conversation body ends here
-
-    // Conversation footer starts here
-
-    // Conversation footer ends here
-  }
-
-  .chatbot-component-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    bottom: 10px;
-    left: calc(50% - 259px);
-    right: calc(50% - 259px);
-
-    .chatbot-component-footer-text,
-    .chatbot-component-footer-text-link {
-      color: $inputInfoColor;
-      font-size: 12px;
-      font-weight: 500;
-    }
-  }
-}
-
-.chatbot-modal-wrapper
-  .chatbot-component-container
-  .chatbot-component-left-side
-  .chatbot-component-menu-container
-  .chatbot-component-menu-container-icon
-  .chatbot-component-menu-list
-  li:first-child:hover {
-  background: transparent;
-}
-
-// Some global classes
-
-.dis_none {
-  display: none !important;
-}
-.bold {
-  font-weight: 700;
-}
-.green_text {
-  color: $greenBadge;
-}
-.red_text {
-  color: $redBadge;
-}
-
-.resizer {
-  width: 5px;
-  cursor: col-resize;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 10;
-}
-
-.no-select {
-  user-select: none !important;
-  -webkit-user-select: none !important;
-  -moz-user-select: none !important;
-  -ms-user-select: none !important;
-}
-
-// Bookmark Panel Tabs and List Styles
-
-.book-mark-panel-tabs-container {
-  height: 38px;
-}
-.bookmark-tabs {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  position: relative;
-  height: 100%;
-  &::after {
-    position: absolute;
-    left: -16px;
-    right: -16px;
-    background: $accordionBgBackground;
-    height: 1px;
-    content: " ";
-    bottom: 0;
-  }
-}
-.bookmark-tab {
-  font-size: $mediumFontSize;
-  font-weight: $normalFontWeight;
-  color: $textButtonFontColor;
-  cursor: pointer;
-  transition: color 0.2s;
-  position: relative;
-}
-.bookmark-tab.active::after {
-  content: "";
-  position: absolute;
-  bottom: -10px;
-  height: 2px;
-  background: $primaryColor;
-  right: -25px;
-  left: -25px;
-}
-
-.bookmark-panel-body {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: transparent;
-  padding: 8px 0 8px 0;
-}
-.drag-handle {
-  font-size: 22px;
-  color: #b3b3b3;
-  cursor: grab;
-  user-select: none;
-}
-.bookmark-question-text {
-  font-size: $mediumFontSize;
-  color: $chatBotTextColor;
-  font-weight: $normalFontWeight;
-  line-height: 1.2;
-}
-.bookmark-menu {
-  font-size: 26px;
-  color: #b3b3b3;
-  margin-left: 16px;
-  cursor: pointer;
-}
-
-@keyframes rotateUpDown {
-  0% {
-    transform: rotate(0deg);
-    background-image: url("../../assets/thumbs-up.svg");
-  }
-  20% {
-    transform: rotate(-15deg);
-    background-image: url("../../assets/thumbs-up-blue.svg");
-  }
-  80% {
-    transform: rotate(0deg);
-    background-image: url("../../assets/thumbs-up-blue.svg");
-  }
-  100% {
-    transform: rotate(0deg);
-    background-image: url("../../assets/thumbs-up-filled.svg");
-  }
-}
-
-@keyframes rotateDownUp {
-  0% {
-    transform: rotate(0deg);
-    background-image: url("../../assets/thumbs-down.svg");
-  }
-  20% {
-    transform: rotate(15deg);
-    background-image: url("../../assets/thumbs-down-blue.svg");
-  }
-  80% {
-    transform: rotate(0deg);
-    background-image: url("../../assets/thumbs-down-blue.svg");
-  }
-  100% {
-    transform: rotate(0deg);
-    background-image: url("../../assets/thumbs-down-filled.svg");
-  }
-}
-
-// .chatbot-component-body-input-container {
-//   .impact_inputbox_container {
-//     width: 100%;
-//   }
-//   .MuiTextField-root {
-//     .MuiOutlinedInput-root {
-//       fieldset {
-//         border: 1px solid #d9dde7;
-//       }
-//       &:hover {
-//         fieldset {
-//           border: 1px solid $accordionBgBackground;
-//         }
-//       }
-//       &.Mui-focused {
-//         fieldset {
-//           border: 1px solid $accordionBgBackground;
-//         }
-//       }
-//     }
-//   }
-//   .css-1eow9i0-MuiInputBase-root-MuiOutlinedInput-root {
-//     padding: 12px;
-//     font-size: 14px;
-//   }
-// }
-
-.conversation-footer-container {
-  height: 64px;
-  padding: 0 23px;
-  box-sizing: border-box;
-  padding-top: 8px;
-
-  .MuiTextField-root {
-    .MuiOutlinedInput-root {
-      fieldset {
-        border: 1px solid #d9dde7;
-      }
-      &:hover {
-        fieldset {
-          border: 1px solid $accordionBgBackground;
-        }
-      }
-      &.Mui-focused {
-        fieldset {
-          border: 1px solid $accordionBgBackground;
-        }
-      }
-    }
-  }
-  .css-1eow9i0-MuiInputBase-root-MuiOutlinedInput-root {
-    padding: 12px;
-    font-size: 14px;
-  }
-}
-
-.suggestion-banner {
-  position: relative;
-  background: linear-gradient(90deg, #eceefd 0%, #f5ecfd 100%);
-  color: #425690;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: 8px;
-  gap: 8px;
-  height: 32px;
-  padding-inline: 8px;
-  box-shadow: 0px 0px 16px 2px #0000000f;
-  overflow: hidden;
-  img {
-    width: 20px;
-    height: 20px;
-  }
-  .suggestion-banner-content {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-  .suggestion-banner-text {
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 21px;
-  }
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: 9px;
-    background: linear-gradient(
-      90deg,
-      #b3bdf8 0%,
-      rgba(214, 203, 230, 0.2) 100%
-    );
-    z-index: 0;
-    padding: 1px;
-    -webkit-mask: linear-gradient(#fff 0 0) content-box,
-      linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-  }
-}
-
-.stop-icon-button {
-  .ia-btn-icon {
-    width: auto;
-    height: auto;
-    margin-bottom: 0;
-  }
-}
-
-.chat-input-box {
-  position: absolute;
-  bottom: 30px;
-  width: 90% !important;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-
-  &.new-chat-screen {
-    position: relative;
-    width: 100% !important;
-    bottom: 0px;
-  }
-  &.custom-screen {
-    width: 95% !important;
-    bottom: 15px;
-  }
-}
-
-.chat-input-container {
-  width: 100%;
-  position: relative;
-  border-radius: 12px;
-  padding: 12px;
-  background: #fff;
-  border: 1px solid $disabledSecondaryBorder;
-  box-shadow: 0px 0px 12px 8px #0000000f;
-  &:hover {
-    border: 1px solid $accordionBgBackground;
-  }
-  &:focus-within {
-    border: 1px solid $accordionBgBackground;
-  }
-}
-
-.chat-input-wrapper {
-  display: flex;
-  align-items: flex-end;
-  width: 100%;
-  max-height: 182px;
-  transition: all 0.2s ease-in-out;
-}
-.chat-input-wrapper.stacked {
-  flex-direction: column;
-  align-items: stretch;
-}
-.chat-input-wrapper.empty {
-  flex-direction: row;
-  align-items: flex-end;
-}
-.chat-input-wrapper.single-line-textarea {
-  align-items: center;
-}
-.chat-textarea {
-  flex: 1;
-  resize: none;
-  border: none;
-  outline: none;
-  font-size: 14px;
-  padding: 0;
-  background: transparent;
-  line-height: 160%;
-  overflow-y: hidden;
-  max-height: 142px;
-  font-family: $fontFamily;
-  font-weight: 400;
-  color: $mainFontColor;
-  &::placeholder {
-    color: $lightGrayColor;
-  }
-  transition: all 0.2s ease-in-out;
-}
-
-.chat-textarea.scrollable {
-  overflow-y: auto;
-}
-
-.chat-actions {
-  display: flex;
-  align-items: flex-end;
-  gap: 12px;
-  justify-content: flex-end;
-  height: 32px;
-  &.fixed {
-    height: 36px;
-  }
-  &.not-fixed {
-    height: 32px;
-  }
-}
-
-.history-panel-container {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  margin: 12px;
-  border: 1px solid black;
-  margin-left: 0;
-  border-radius: 8px;
-  flex-direction: column;
-  padding: 12px;
-  gap: 12px;
-}
-
-.history-panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 8px;
-  border-bottom: 1px solid $disabledSecondaryBorder;
-  span {
-    font-weight: 600;
-  }
-  img {
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-  }
-}
-
-.history-panel-search {
-  input {
-    width: 100%;
-    border: 1px solid $disabledSecondaryBorder;
-    border-radius: 8px;
-    padding: 8px 10px;
-    outline: none;
-    background: #fff;
-    font-family: $fontFamily;
-    font-size: 14px;
-    color: $mainFontColor;
-    &::placeholder {
-      color: $lightGrayColor;
-    }
-    &:focus {
-      border: 1px solid $accordionBgBackground;
-    }
-  }
-}
-
-.history-panel-groups {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow: auto;
-  height: 100%;
-}
-
-.history-pinned-list {
-  list-style: none;
-  margin: 0 0 8px 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.history-pinned-item {
-  background: rgba(99, 102, 241, 0.08); // subtle indigo-ish
-  border-color: $accordionBgBackground;
-}
-
-.history-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.history-group-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  background: transparent;
-  border: none;
-  padding: 6px 2px;
-  text-align: left;
-  cursor: pointer;
-  color: $mainFontColor;
-  .chevron {
-    width: 12px;
-    display: inline-block;
-  }
-  .group-title {
-    font-weight: 600;
-  }
-}
-
-.history-group-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.history-item {
-  background: #fff;
-  border: 1px solid $disabledSecondaryBorder;
-  border-radius: 8px;
-  padding: 10px 12px;
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  &:hover {
-    border-color: $accordionBgBackground;
-  }
-  &.active {
-    border: 2px solid $accordionBgBackground;
-  }
-}
-
-.history-item-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-}
-
-.item-menu-trigger {
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 2px 6px;
-  border-radius: 6px;
-  line-height: 1;
-  opacity: 0;
-  transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out;
-  &:hover {
-    background: #f3f4f6;
-  }
-}
-.history-item:hover .item-menu-trigger {
-  opacity: 1;
-}
-.item-menu-trigger.always-visible {
-  opacity: 1;
-}
-
-.history-item-menu {
-  position: absolute;
-  top: 36px;
-  right: 8px;
-  min-width: 180px;
-  background: #fff;
-  border: 1px solid $disabledSecondaryBorder;
-  border-radius: 10px;
-  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  z-index: 5;
-}
-.history-item-menu .menu-item {
-  border: none;
-  background: transparent;
-  padding: 10px 10px;
-  border-radius: 8px;
-  text-align: left;
-  cursor: pointer;
-  color: $mainFontColor;
-  &:hover {
-    background: #f7f7f9;
-  }
-}
-.history-item-menu .menu-item.danger {
-  color: #d12c2c;
-}
-
-.history-item-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: $mainFontColor;
-  line-height: 21px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.pin-icon {
-  margin-right: 8px;
-}
-
-.history-empty-state {
-  color: $lightGrayColor;
-  font-size: 12px;
-  padding: 12px 0;
-  display: flex;
-  align-items: center;
-  flex: 1;
-  justify-content: center;
-}