@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;
        gap: 10px;
      }

      .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;
            @include focus-visible-ring;

            &: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;
        @include focus-visible-ring;
        .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;
              @include focus-visible-ring;

              .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 {
      &.show-suggestion-banner {
        bottom: 155px;
      }
      position: absolute;
      top: 56px;
      bottom: 110px;
      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;
            @include focus-visible-ring;
          }
          .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;
              border-radius: 4px;
              @include focus-visible-ring;
            }
            .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;
    @include focus-visible-ring;
  }
}

.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;
  border-radius: 6px;
  @include focus-visible-ring;
  .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;
  @include focus-visible-ring;

  &: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;
  @include focus-visible-ring;

  &:hover {
    background: #f3f4f6;
  }
}
.history-item:hover .item-menu-trigger {
  opacity: 1;
}
.item-menu-trigger:focus-visible {
  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;
  @include focus-visible-ring;

  &: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;
}
