@hivegpt/hiveai-angular 0.0.380 → 0.0.382

package/src/lib/components/chat-drawer/chat-drawer.component.scss

@@ -1,2907 +0,0 @@
-@import url('https://e1cdn.social27.com/digitalevents/liteversion/fonts/segoe-ui/stylesheet.css');
-
-.sticky-header-chat {
-  position: sticky;
-  top: -21px;
-  background: #fff;
-  z-index: 100;
-  padding: 0 0 10px;
-  border-bottom: 1px solid #ddd;
-  transition: all 1s;
-
-  @media (max-width: 768px) {
-    top: 0px;
-  }
-}
-
-/* width */
-::-webkit-scrollbar {
-  width: 5px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: #f1f1f1;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #e5ccbc;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #e5ccbc;
-}
-
-body {
-  overflow: hidden;
-}
-
-.ios-device {
-  .drawer {
-    .chat-footer {
-      .form-control {
-        font-size: 16px;
-      }
-    }
-  }
-}
-
-.hivegpt-chat-wrapper {
-  position: fixed;
-  height: 100%;
-  inset: 0;
-  opacity: 0;
-  visibility: hidden;
-  z-index: 999999;
-  background: transparent !important;
-
-  &.mat-drawer-container-has-open {
-    opacity: 1;
-    visibility: visible;
-    z-index: 999999;
-    transition: all 0.3s;
-    background: transparent !important;
-  }
-
-  .mat-drawer:not(.mat-drawer-side) {
-    box-shadow: none;
-  }
-
-  mat-drawer {
-    width: 100%;
-    //background-image: linear-gradient(180deg, #58befb0d 60%, #06f3 96.27%);
-    background-image: none !important;
-    background-color: #fff !important;
-
-    &.full-width-drawer {
-      max-width: 100%;
-    }
-  }
-
-  .mat-drawer-content {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .chat-header {
-    padding: 16px 40px 16px;
-    width: 100%;
-
-    h2 {
-      font-family: 'Segoe UI', sans-serif;
-      margin: 0;
-      font-size: 36px;
-      font-weight: 500;
-      line-height: 108%;
-      letter-spacing: -0.72px;
-      text-transform: uppercase;
-    }
-
-    .closeIcon {
-      position: absolute;
-      top: 16px;
-      right: 12px;
-      border: none;
-      padding: 0;
-      background: transparent;
-      outline: none;
-      width: 35px;
-      height: 35px;
-      border-radius: 50%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 18px;
-    }
-  }
-
-  .chat-main {
-    width: 100%;
-    flex: 1;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    .innerChat {
-      overflow-y: auto;
-      width: 100%;
-      padding: 20px 40px 10px;
-    }
-
-    .ai h3 {
-      font-size: 1.3rem !important;
-    }
-
-    .chat-box {
-      max-width: 96%;
-      width: 100%;
-
-      // .message {
-      //   padding: 12px 20px;
-      //   background: #ffffffb3;
-      //   box-shadow: 0 0.3px 0.9px #0000001f, 0 1.6px 3.6px #00000029;
-      //   margin-bottom: 5px;
-      //  // display: inline-flex;
-      //   min-height: 44px;
-      //   position: relative;
-
-
-      .message {
-        min-height: 40px;
-        padding: 0px 20px 0 0;
-        position: relative;
-        margin-top: 10px;
-        margin-left: 50px;
-
-        @media (max-width: 768px) {
-          margin-left: 0px;
-        }
-
-        p {
-          font-family: 'Segoe UI', sans-serif;
-          font-weight: 400;
-          font-size: 14px;
-          font-style: normal;
-          line-height: 160%;
-          margin: 0;
-          color: #000;
-          text-align: left;
-          color: #525252;
-
-          a {
-            cursor: pointer !important;
-            text-decoration: underline;
-            font-weight: 700;
-            color: #17235b !important;
-          }
-        }
-
-        .cta {
-          display: flow-root;
-          align-items: end;
-          grid-gap: 10px;
-          gap: 10px;
-          position: relative;
-          bottom: -7px;
-          right: -10px;
-          z-index: 5;
-
-          button {
-            background: transparent;
-            border: none;
-            color: #566563;
-            padding: 0;
-            cursor: pointer;
-            transition: all 0.3s;
-
-            i {
-              display: inline-block;
-            }
-
-            &:hover {
-              color: #17235b;
-            }
-
-            &.up {
-              &:hover {
-                i {
-                  animation: thumbsUpAnimation 0.5s ease-in-out;
-                  animation-fill-mode: forwards;
-                }
-              }
-            }
-
-            &.down {
-              &:hover {
-                i {
-                  animation: thumbsDownAnimation 0.5s ease-in-out;
-                  animation-fill-mode: forwards;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .chat {
-      &.bot {
-        .chat-box {
-          .message {}
-        }
-      }
-
-      &.user {
-        text-align: right;
-
-        .chat-box {
-          margin-left: auto;
-
-          .message {
-            border-radius: 20px 20px 0px 20px;
-            background: linear-gradient(96deg, #8b4ead -10.61%, #761c79 84.59%);
-            color: #fff;
-
-            p {
-              text-align: left;
-              color: #fff;
-            }
-          }
-        }
-
-        .dateTime {
-          text-align: right;
-        }
-
-        .time-cta {
-          justify-content: flex-end;
-        }
-      }
-
-      .Icon_TimeSTamp {
-        /* display: flex;
-        justify-content: center;
-        align-content: center;
-        align-items: center;
-        background: #f5f5f5;
-        padding: 5px 15px;
-        border-radius: 20px; */
-
-        display: flex;
-        justify-content: left;
-        align-content: center;
-        align-items: center;
-        margin: 0 -60px;
-        width: auto;
-
-        @media (max-width: 768px) {
-          margin: 0;
-
-        }
-      }
-
-      .dateTime {
-        font-size: 15px;
-        font-style: normal;
-        font-weight: 300;
-        line-height: 140%;
-        color: #333232;
-
-        span {
-          font-size: 15px;
-          font-style: normal;
-          font-weight: 500;
-          line-height: 140%;
-          color: #06f;
-          margin-left: 15px;
-          margin-right: 5px;
-        }
-      }
-
-      margin-bottom: 20px;
-
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .chatFooterWrapper {
-    background: #fff;
-    margin-top: 10px !important;
-    box-shadow: 2px 0px 5px #e1e1e1;
-    width: 75%;
-    margin: 0 auto;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-    margin-top: 0px;
-    border: 2px solid #dadada96;
-    border-radius: 10px;
-    margin-bottom: 15px;
-    transition: all 0.5s;
-
-    &:hover {
-      box-shadow: 2px 0px 4px #ddd;
-      border: 2px solid #b8b8b896;
-    }
-
-    .chat-footer-upt {
-      padding: 4px;
-    }
-
-    .note {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      line-height: 1;
-      margin: 0 auto 4px;
-      color: #000;
-      padding: 10px 25px;
-      border-radius: 15px;
-      background: #1b75bb0d;
-
-      a {
-        text-transform: capitalize;
-      }
-
-      i {
-        font-size: 18px;
-
-        svg {
-          width: 18px;
-          height: 18px;
-        }
-      }
-
-      span {
-        flex: 1;
-        gap: 4px;
-        line-height: 1.3;
-      }
-    }
-  }
-
-  .chat-footer {
-    align-items: center;
-    display: flex;
-    gap: 8px;
-    justify-content: space-between;
-    padding: 0;
-    position: relative;
-
-    .form-control {
-      // resize: none;
-      // padding: 20px;
-      // background: #eee;
-      // font-size: 14px;
-      // border-radius: 100px;
-      // width: 100%;
-      // border: none;
-      // outline: none;
-      // min-height: 54px;
-      // padding-right: 54px;
-      background: #fff !important;
-      border: 0;
-      line-height: 21px;
-      outline: 0;
-      padding: 10px;
-      position: relative;
-      width: 100%;
-
-      &::placeholder {
-        color: #6c7a78;
-      }
-
-      &:focus {
-        border-color: #e5ccbc;
-        //  box-shadow: 0 0 0 0.2rem rgba(229, 204, 188, 0.25);
-      }
-    }
-
-    .cta-footer {
-      align-items: center;
-      display: flex;
-      gap: 8px;
-      justify-content: space-between;
-      text-align: right;
-      position: absolute;
-      right: 15px;
-      margin-bottom: 10px;
-      //bottom: 5px;
-
-      .btn {
-        color: #000;
-        font-weight: 500;
-        gap: 8px;
-        max-width: 150px;
-        padding: 0px 0px;
-      }
-
-      .cta-chat {
-        align-items: center;
-        border: none;
-        border-radius: 0;
-        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
-        display: inline-flex;
-        font-size: 20px;
-        height: auto;
-        justify-content: center;
-        width: auto;
-        background: transparent !important;
-
-        &:hover {
-          opacity: 0.8;
-        }
-      }
-
-      .cta-again {
-        border: 1px solid #17235b;
-        background: #17235b;
-        color: #fff;
-      }
-    }
-  }
-
-  .cta-faqs {
-    display: flex;
-    align-items: flex-end;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 10px 0 0;
-    max-width: 80%;
-    margin-left: auto;
-
-    .cta {
-      font-family: 'Segoe UI', sans-serif;
-      font-weight: 500;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 160%;
-      margin: 0;
-      color: #333333;
-      white-space: pre-line;
-      text-align: left;
-      border-radius: 20px 20px 0px 20px;
-      background: transparent;
-      padding: 12px 20px;
-      min-height: 44px;
-      text-decoration: none;
-      transition: all 0.3s;
-      cursor: pointer;
-      border: 1px solid #c9a893;
-      text-align: left;
-      // &:hover {
-      //     text-decoration: underline;
-      // }
-    }
-  }
-}
-
-.spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-}
-
-.spinner>div {
-  width: 5px;
-  height: 5px;
-  background-color: #173330;
-  border-radius: 100%;
-  display: inline-block;
-  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
-  animation: bouncedelay 1400ms ease-in-out infinite;
-  /* Prevent first frame from flickering when animation starts */
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-.spinner .bounce1 {
-  -webkit-animation-delay: -0.32s;
-  animation-delay: -0.32s;
-}
-
-.spinner .bounce2 {
-  -webkit-animation-delay: -0.16s;
-  animation-delay: -0.16s;
-}
-
-@-webkit-keyframes bouncedelay {
-
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-    -webkit-transform: scale(0);
-  }
-
-  40% {
-    transform: scale(1);
-    -webkit-transform: scale(1);
-  }
-}
-
-@keyframes bouncedelay {
-
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-    -webkit-transform: scale(0);
-  }
-
-  40% {
-    transform: scale(1);
-    -webkit-transform: scale(1);
-  }
-}
-
-.time-cta {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  gap: 8px;
-  margin-top: 5px;
-  //margin-left: -30px;
-  //margin-left: 0px;
-}
-
-@keyframes thumbsUpAnimation {
-
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-8px);
-  }
-}
-
-@keyframes thumbsDownAnimation {
-
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(3px);
-  }
-}
-
-@media (max-width: 767px) {
-  .hivegpt-chat-wrapper .chat-main .innerChat {
-    padding: 0 24px 10px;
-  }
-
-  .hivegpt-chat-wrapper .chat-footer {
-    padding: 10px 24px;
-  }
-
-  .hivegpt-chat-wrapper .chat-footer .cta-footer .cta-chat {
-    max-width: 100%;
-  }
-
-  .hivegpt-chat-wrapper .chat-footer .form-control {
-    height: 80px;
-  }
-
-  .hivegpt-chat-wrapper .chat-header .closeIcon {
-    top: 8px;
-    right: 8px;
-    width: 28px;
-    height: 28px;
-  }
-
-  .hivegpt-chat-wrapper .chat-header .closeIcon span {
-    font-size: 14px;
-  }
-
-  .hivegpt-chat-wrapper .chat-header {
-    padding: 10px 24px;
-  }
-
-  .hivegpt-chat-wrapper .chat-header h2 {
-    font-size: 20px;
-  }
-
-  .cta-faqs {
-    padding: 10px 0 0;
-  }
-}
-
-.body-overflow-hidden {
-  overflow: hidden;
-}
-
-.chat-button {
-  background: #17235b;
-  border: #17235b;
-  border-radius: 50%;
-  width: 50px;
-  height: 50px;
-  font-size: 24px;
-  color: #fff;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-textarea {
-  caret-color: #000;
-}
-
-.cta_suggestions {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 20px;
-
-  button {
-    color: #1543cd;
-    background: #fff;
-    border: 1px solid #174ae4;
-    padding: 8px 12px;
-    border-radius: 10px;
-    font-size: 14px;
-    line-height: 1.2;
-    font-weight: 600;
-    text-align: left;
-    position: relative;
-    transition: all 0.3s;
-    box-shadow: rgba(0, 0, 0, 0.13) 0px 1.6px 3.6px 0px,
-      rgba(0, 0, 0, 0.1) 0px 0.3px 0.9px 0px;
-
-    &:hover {
-      background: #eff3ff;
-    }
-  }
-}
-
-.labelChat {
-  margin: 0 0 10px;
-  font-weight: 400;
-  font-size: 14px;
-}
-
-.labelChat {
-  margin: 0 0 10px;
-  font-weight: 400;
-  font-size: 14px;
-}
-
-.chatType {
-  h4 {
-    text-align: center;
-    color: #566563;
-  }
-
-  ul {
-    list-style: none;
-    padding: 4px;
-    margin: 0 0 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12),
-      0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
-
-    li {
-      flex: 1;
-
-      button {
-        width: 100%;
-        text-align: center;
-        background: #fff;
-        align-items: center;
-        border: none;
-        padding: 0.375rem;
-        min-height: 48px;
-        border-radius: 10px;
-        font-weight: 600;
-        text-shadow: 1px 0px rgb(0 0 0 / 20%);
-
-        &.active {
-          box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-          background: linear-gradient(96deg, #761c79 -10.61%, #761c79 84.59%);
-          color: #fff;
-        }
-      }
-    }
-  }
-}
-
-.cta_suggestions {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-bottom: 20px;
-
-  button {
-    color: #1543cd;
-    background: #fff;
-    border: 1px solid #174ae4;
-    padding: 8px 12px;
-    border-radius: 10px;
-    font-size: 14px;
-    line-height: 1.2;
-    font-weight: 600;
-    text-align: left;
-    position: relative;
-    transition: all 0.3s;
-    box-shadow: rgba(0, 0, 0, 0.13) 0px 1.6px 3.6px 0px,
-      rgba(0, 0, 0, 0.1) 0px 0.3px 0.9px 0px;
-
-    &:hover {
-      background: #eff3ff;
-    }
-  }
-}
-
-.balanced .chat-footer .cta-footer .cta-chat,
-.balanced .chat-main .chat.user .chat-box .message,
-.balanced .chatType ul li button.active {
-  color: rgb(0, 0, 0);
-  // background: linear-gradient(149deg, #0066ff 0%, #0066ff 100%);
-}
-
-.balanced .chat-main .innerChat .title p span {
-  color: #0066ff;
-}
-
-.balanced mat-drawer {
-  background-image: linear-gradient(180deg,
-      rgb(88 190 251 / 5%) 60%,
-      rgba(0, 102, 255, 0.2) 96.27%);
-}
-
-.balanced .cta_suggestions button:hover {
-  border: 1px solid #0066ff;
-}
-
-.precise .chat-footer .cta-footer .cta-chat,
-.precise .chat-main .chat.user .chat-box .message {
-  background: linear-gradient(96deg, #69ca6d -10.61%, #4caf50 84.59%);
-}
-
-.precise .chatType ul li button.active {
-  color: white;
-  background: linear-gradient(96deg, #4caf50 -10.61%, #4caf50 84.59%);
-}
-
-.precise .chat-main .innerChat .title p span {
-  color: #4caf50;
-}
-
-.precise mat-drawer {
-  background-image: linear-gradient(180deg,
-      rgba(76, 175, 80, 0.05) 60%,
-      rgba(76, 175, 80, 0.3) 96.27%);
-}
-
-.precise .cta_suggestions button:hover {
-  border: 1px solid #4caf50;
-}
-
-.title {
-  margin-bottom: 20px;
-
-  h2 {
-    font-size: 22px;
-    margin: 0 0 0px;
-
-    span {
-      color: #000;
-      display: inline-flex;
-      align-items: center;
-      gap: 10px;
-    }
-
-    i {
-      line-height: 1;
-      font-size: 30px;
-      color: #06f;
-
-      svg {
-        width: 30px;
-        height: 30px;
-      }
-    }
-  }
-
-  p {
-    margin: 0;
-    font-weight: 600;
-
-    span {
-      color: #06f;
-    }
-  }
-}
-
-.agenda-items-wrapper {
-  // min-height: 400px;
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-@media (max-width: 576px) {
-  .list-view .session-detail-wrapper {
-    flex-direction: column;
-    border: none;
-  }
-}
-
-.card-background-session {
-  background: #fff;
-  border-radius: 8px;
-
-  .body-text-color {
-    color: #111 !important;
-  }
-
-  h2 {
-    font-size: 20px;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    /* Number of lines to show */
-    -webkit-box-orient: vertical;
-    margin-bottom: 8px;
-  }
-
-  .session-description {
-    color: #111 !important;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    /* Number of lines to show */
-    -webkit-box-orient: vertical;
-    font-size: 14px;
-  }
-
-  .color-secondary {
-    color: #111 !important;
-  }
-
-  p {
-    font-size: 14px;
-  }
-}
-
-.list-view .session-detail-wrapper .s27-btn-icon {
-  background: transparent;
-  border: transparent;
-}
-
-.list-view .session-detail-wrapper {
-  margin-bottom: 4px;
-  border-left: 3px solid transparent;
-  display: flex;
-  /* grid-gap: 20px;
-        gap: 20px; */
-  margin-bottom: 16px;
-}
-
-.thumbnail {
-  width: 160px;
-  height: 160px;
-  min-width: 160px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumbnail img {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-
-@media (max-width: 576px) {
-  .thumbnail {
-    width: 100%;
-    min-height: unset;
-    height: 160px;
-  }
-}
-
-.thumbnail .play-btn {
-  font-size: 60px;
-  background-color: transparent;
-  border: 0;
-  position: absolute;
-  right: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumbnail .play-btn span {
-  font-size: 80px;
-  text-shadow: 0px 0px 14px rgb(74 74 74 / 45%);
-}
-
-.content {
-  flex-grow: 1;
-}
-
-.actions {
-  background-color: transparent !important;
-}
-
-h2 {
-  // word-break: break-all;
-}
-
-.speakers {
-  padding: 0;
-  margin-top: 10px;
-  margin-bottom: 0;
-}
-
-.speakers li {
-  display: flex;
-  align-items: unset;
-
-  .content {
-    font-size: 12px !important;
-  }
-}
-
-.speakers .image {
-  height: 40px;
-  width: 40px;
-  min-width: 40px;
-  border-radius: 100%;
-  overflow: hidden;
-}
-
-.speakers img {
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
-}
-
-.grid-2-cols {
-  display: grid;
-  grid-template-columns: calc(55% - 10px) calc(50% - 10px);
-  grid-gap: 15px;
-  padding-right: 20px;
-}
-
-@media (max-width: 768px) {
-  .grid-2-cols {
-    grid-template-columns: calc(50% - 10px) calc(50% - 10px);
-  }
-}
-
-@media (max-width: 575px) {
-  .grid-3-cols {
-    grid-template-columns: 100%;
-  }
-}
-
-.quick-prompts-extended {
-  align-items: flex-start !important;
-  margin-left: 0px !important;
-}
-
-.border-shape {
-  // background: #fff;
-  // border: 1px solid #ced4da;
-  // border-radius: 4px;
-  // overflow: hidden;
-  // padding: 0;
-  // width: 100%;
-  // min-height: 60px;
-
-  // .form-control-1 {
-  //   line-height: 21px;
-  //   padding: 10px;
-  //   width: 100%;
-  //   background: none !important;
-  //   position: relative;
-  //   border: 0;
-  //   outline: 0;
-
-  //   &:focus {
-  //     box-shadow: none;
-  //     outline: none;
-  //   }
-  //}
-
-  .s27-scroll {
-    &::-webkit-scrollbar {
-      width: 3px;
-      border-radius: 30px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: #f1f1f1;
-      border-radius: 30px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #888;
-      border-radius: 30px;
-    }
-  }
-}
-
-/* chat box card */
-
-.box {
-  width: 100%;
-  height: 275px;
-  margin: 10px 0;
-  display: table;
-}
-
-.tiktokwrapper {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  /* Two columns with equal width */
-  gap: 10px;
-  /* Gap between cards */
-  height: 100%;
-
-  .tiktokshell {
-    width: 100%;
-    min-width: 160px;
-    height: 100%;
-    min-height: 275px;
-    position: relative;
-    border-radius: 5px;
-    background: #3d2b8f;
-    box-shadow: 0px 0px 6px #494949;
-    border: 2px solid #fff;
-  }
-
-  .overlymask {
-    background-image: url(https://e1cdn.social27.com/digitalevents/HiveGpt/screen-overlay.png);
-    background-position: 0 0;
-    position: absolute;
-    z-index: 6;
-    bottom: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-  }
-
-  .videoPhotobox {
-    position: absolute;
-    z-index: 6;
-    bottom: 0px;
-    left: 0px;
-    width: auto;
-    overflow: hidden;
-    height: 272px;
-
-    video {
-      width: 100%;
-      height: 270px;
-      outline: 0;
-      object-fit: cover;
-      border-radius: 0;
-      cursor: pointer;
-      transition: 0.3s ease-in-out;
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  .playBtn {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    z-index: 10;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 1s;
-    cursor: pointer;
-    border: none;
-    width: 40px;
-    top: 105px;
-
-    &:hover {
-      transform: scale(1.2);
-    }
-  }
-
-  .noPhoto {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    z-index: 6;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 1s;
-    cursor: pointer;
-    border: none;
-    top: 105px;
-
-    h3 {
-      font-size: 46px;
-      color: #fff;
-    }
-  }
-
-  .onshell-content {
-    position: absolute;
-    bottom: 10px;
-    left: 5px;
-    z-index: 10;
-
-    .title-shell {
-      margin: 0 10px;
-    }
-
-    h3 {
-      color: #fff;
-      font-size: 13px;
-      font-weight: 500;
-    }
-
-    .companyName {
-      color: #eaeaea;
-      font-size: 12px;
-      font-weight: 400;
-    }
-
-    .button-shell button {
-      background: #4e4e4e;
-      border: none;
-      border-radius: 2px;
-      padding: 4px 7px;
-      color: #fff;
-      margin: 0 1px;
-      text-transform: capitalize;
-      font-size: 11px;
-    }
-
-    .Connectbtn {
-      background: linear-gradient(149deg, #0066ff 0%, #0066ff 100%) !important;
-    }
-  }
-}
-
-/* Skeleton Box */
-.skeleton-box {
-  display: inline-block;
-  height: 1em;
-  position: relative;
-  overflow: hidden;
-  background-color: #dddbdd;
-}
-
-.skeleton-box::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  transform: translateX(-100%);
-  background-image: linear-gradient(90deg,
-      rgba(255, 255, 255, 0) 0,
-      rgba(255, 255, 255, 0.2) 20%,
-      rgba(255, 255, 255, 0.5) 60%,
-      rgba(255, 255, 255, 0));
-  animation: shimmer 2s infinite;
-  content: '';
-  z-index: 0;
-}
-
-@keyframes shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-/* Blog Post */
-.blog-post__headline {
-  font-size: 1.25em;
-  font-weight: bold;
-}
-
-.blog-post__meta {
-  font-size: 0.85em;
-  color: #6b6b6b;
-}
-
-/* Media Object */
-.o-media {
-  display: flex;
-}
-
-.o-media__body {
-  flex-grow: 1;
-  margin-left: 1em;
-}
-
-/* Vertical Spacing */
-.o-vertical-spacing>*+* {
-  margin-top: 0.75em;
-}
-
-.o-vertical-spacing--l>*+* {
-  margin-top: 2em;
-}
-
-.copy {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 5px;
-  transition: transform 0.2s ease;
-}
-
-.copy.active {
-  transform: scale(1.1);
-}
-
-.copy svg {
-  width: 18px;
-  height: 18px;
-  fill: #566563;
-}
-
-.copyBox {
-  padding: 5px 10px;
-  position: relative;
-  border-radius: 13px;
-  width: 135px;
-  color: #566563;
-  display: flex;
-  gap: 12px;
-  float: right;
-  background: #f7f7f7;
-
-  button {
-    background: transparent;
-    border: none;
-    color: #566563;
-    padding: 0;
-    cursor: pointer;
-    transition: all 0.3s;
-
-    i {
-      display: inline-block;
-    }
-
-    &:hover {
-      color: #17235b;
-    }
-
-    &.up {
-      &:hover {
-        i {
-          animation: thumbsUpAnimation 0.5s ease-in-out;
-          animation-fill-mode: forwards;
-        }
-      }
-    }
-
-    &.down {
-      &:hover {
-        i {
-          animation: thumbsDownAnimation 0.5s ease-in-out;
-          animation-fill-mode: forwards;
-        }
-      }
-    }
-  }
-}
-
-.din {
-  display: inline-flex;
-}
-
-.chatFooterWrapper {
-  //display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  //padding: 10px;
-  border-top: 1px solid #ccc;
-  background-color: #f5f5f5;
-}
-
-.chat-footer {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  //max-width: 800px;
-  background: #fff;
-  // border-radius: 5px;
-  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  // padding: 10px;
-  margin-bottom: 10px;
-  flex-direction: column;
-  /* Space between footer and note section */
-}
-
-/* new UI chat -box */
-
-.topinfo-containerbox {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  background: #f9f9f9;
-  padding: 5px 10px 8px;
-  align-items: center;
-  border-bottom: 1px solid #efefef;
-  margin: 0px 0;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-}
-
-.agents_note_wrapper {
-  display: flex;
-  justify-content: space-around;
-}
-
-.bottombox-wrapper {
-  display: flex;
-  width: 100%;
-  padding: 10px 10px;
-}
-
-/* new UI chat -box */
-
-.dropdown-wrapper {
-  position: relative;
-  margin-right: 10px;
-}
-
-.dropdown-header {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background: #fff;
-  border-radius: 48px;
-  padding: 0.5rem 1.5rem;
-  margin-bottom: 0;
-  font-size: 14px;
-  color: #414141 !important;
-  white-space: nowrap;
-  border: 1px solid #ddd;
-}
-
-.dropdown-header span {
-  margin-right: 8px;
-}
-
-.dropdown-menu {
-  background-color: #fff;
-  border: 1px solid #ededed;
-  border-radius: 5px;
-  bottom: 100% !important;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  display: block;
-  left: 0;
-  margin-bottom: 10px;
-  max-height: 200px;
-  overflow-y: auto;
-  padding: 0;
-  position: absolute;
-  top: auto;
-  width: 230px;
-  z-index: 1000;
-}
-
-.dropdown-menu label {
-  cursor: pointer;
-  display: block;
-  padding: 5px 15px;
-  font-size: 16px;
-}
-
-.dropdown-menu label input {
-  width: 16px;
-  height: 16px;
-}
-
-.dropdown-menu label:hover {
-  background-color: #f0f0f0;
-}
-
-.border-shape {
-  flex-grow: 1;
-  // margin-right: 10px;
-}
-
-.form-control-1 {
-  width: 100%;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  padding: 10px;
-}
-
-.cta-footer {
-  display: flex;
-  align-items: center;
-}
-
-.text-left .note-section {
-  width: 100%;
-  max-width: 800px;
-  background: #fff;
-  border-radius: 5px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  margin-top: 10px;
-}
-
-.text-left .note {
-  display: flex;
-  align-items: center;
-  color: #555;
-}
-
-.text-left .note i {
-  margin-right: 8px;
-}
-
-.text-left .note .text {
-  font-size: 14px;
-}
-
-.card-container {
-  display: flex;
-  gap: 15px;
-}
-
-.custom-card {
-  width: 18rem;
-  border: 1px solid #ddd;
-  border-radius: 0.25rem;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-  background: #fffefe;
-  margin-bottom: 10px;
-}
-
-.custom-card .card-body {
-  padding: 10px;
-}
-
-.custom-card .card-title {
-  font-size: 1.25rem;
-  font-weight: bold;
-}
-
-.custom-card .card-text {
-  font-size: 1rem;
-  text-align: left;
-}
-
-.custom-card .btn-primary {
-  background-color: #007bff;
-  border: none;
-  border-radius: 0.25rem;
-}
-
-.custom-card .card-footer {
-  padding: 10px;
-  background-color: #f8f9fa;
-  text-align: center;
-  color: #6c757d;
-}
-
-.list-container {
-  list-style: none;
-  padding: 0px;
-}
-
-.list-container li {
-  font-size: 13px;
-  margin-bottom: 5px;
-  padding: 6px 12px;
-  background: #f5f5f5;
-  border-radius: 8px;
-}
-
-.list-container li:hover {
-  color: #06f;
-  cursor: pointer;
-}
-
-.collapsible-container {
-  width: 100%;
-
-  margin-bottom: 5px;
-  overflow: hidden;
-}
-
-.collapsible-header {
-  display: flex;
-
-  padding: 15px;
-  cursor: pointer;
-}
-
-.collapsible-header .header-icon {
-  font-size: 20px;
-  margin-right: 10px;
-}
-
-.collapsible-header .header-title {
-  flex: 1;
-  font-size: 18px;
-}
-
-.collapsible-header .toggle-icon {
-  font-size: 18px;
-  margin-left: 18px;
-}
-
-.collapsible-content {
-  padding: 15px;
-  background-color: #f8f9fa;
-  color: #333;
-  width: 100%;
-}
-
-.collapsible-content.show {
-  display: block;
-}
-
-.researchingCard {
-  margin: 5px auto;
-}
-
-.card-header {
-  border-bottom: 0px;
-  background: #eee;
-  padding: 8px 15px;
-  display: flex !important;
-  width: auto;
-  border-radius: 8px 8px 0 0;
-}
-
-.icon {
-  font-size: 20px;
-  line-height: 5px;
-}
-
-.rotate {
-  transform: rotate(180deg);
-}
-
-.collapse {
-  display: none;
-}
-
-.uptList {
-  background: #f5deb324;
-  border-radius: 0 0 10px 10px;
-  margin-bottom: 20px !important;
-}
-
-.list-group-item {
-  font-size: 15px;
-  color: #0f0f0f;
-  margin: 1px 0;
-  padding: 0 18px;
-}
-
-.sources-container {
-  display: flex;
-  gap: 15px;
-  align-items: flex-start;
-}
-
-.source-card {
-  position: relative;
-  background-color: #f0f3f5;
-  border-radius: 10px;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  /* Distribute space evenly */
-  width: 100%;
-  /* Fixed width */
-  cursor: pointer;
-  transition: box-shadow 0.3s ease;
-  box-sizing: border-box;
-}
-
-.popup {
-  position: absolute;
-  top: 100%;
-  /* Position above the card */
-  left: 50%;
-  transform: translateX(-50%) translateY(-10px);
-  /* Center the popup */
-  background-color: #fff;
-  padding: 10px;
-  border-radius: 5px;
-  white-space: normal;
-  /* Allow text to wrap */
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.3s ease, transform 0.3s ease;
-  z-index: 10;
-  width: 100%;
-
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.popup h5 {
-  font-size: 14px;
-  font-weight: 600;
-  margin: 0 0 10px 0;
-  line-height: 1.2;
-  margin-top: 5px;
-}
-
-.popup p {
-  font-size: 12px;
-  margin: 0;
-  line-height: 1.4;
-  /* Line height for better readability */
-}
-
-.popup h5:hover {
-  color: #007bff;
-  cursor: pointer;
-}
-
-.popup .source-url {
-  text-decoration: none;
-  color: #000;
-}
-
-.popup .source-url:hover {
-  text-decoration: underline;
-  color: #007bff;
-  cursor: pointer;
-}
-
-.source-card:hover .popup {
-  visibility: visible;
-  opacity: 1;
-  transform: translateX(-50%) translateY(-15px);
-  /* Adjust popup position */
-}
-
-.source-card:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transform: scale(1.05);
-}
-
-.source-title {
-  font-size: 14px;
-  font-weight: 500;
-  /* Use 400 for normal or 500 for slightly bold */
-
-  text-align: left;
-  display: -webkit-box;
-  /* Required for multi-line truncation */
-  -webkit-line-clamp: 2;
-  /* Limits the text to 2 lines */
-  -webkit-box-orient: vertical;
-  /* Specifies the orientation of the box */
-  overflow: hidden;
-  /* Hides text overflow */
-  text-overflow: ellipsis;
-  /* Adds ellipsis (...) to truncated text */
-  height: 55px;
-  /* Fixed height */
-  line-height: 1.5;
-
-  /* Adjust line-height as needed */
-  img {
-    width: 20px;
-    margin-left: 10px;
-  }
-}
-
-.source-url {
-  font-size: 12px;
-  color: #6c757d;
-  text-align: left;
-  display: flex;
-  align-items: center;
-}
-
-.source-url img {
-  width: 16px;
-  height: 16px;
-  margin-right: 5px;
-  /* Space between image and text */
-  border-radius: 50%;
-  /* Make the image round */
-}
-
-.sourceDraweContainer {
-  .container {
-    background-color: white;
-    padding: 20px;
-  }
-
-  .sources-list {
-    list-style: none;
-    padding: 0;
-  }
-
-  .sources-list li {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 15px;
-  }
-
-  .sources-list input[type='checkbox'] {
-    margin-right: 15px;
-    margin-top: 8px;
-    flex-shrink: 0;
-  }
-
-  .source-content {
-    flex: 1;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 12px;
-    background-color: #f5f2f2;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-  }
-
-  .source-content:hover {
-    background: #ccc;
-  }
-
-  .source-title {
-    font-size: 1rem;
-    font-weight: 500;
-    display: block;
-    margin-bottom: 4px;
-    height: auto !important;
-  }
-
-  .source-description {
-    font-size: 0.875rem;
-
-    display: block;
-  }
-
-  .image-container {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-  }
-
-  .image-container img {
-    width: 16px;
-    height: 16px;
-    margin-right: 5px;
-    border-radius: 50%;
-    border: 1px solid #ddd;
-    object-fit: cover;
-  }
-
-  .image-container span {
-    font-size: 13px;
-    color: #555;
-  }
-}
-
-.closeButtonEditor {
-  position: absolute;
-  right: 10px;
-  top: 5px;
-  padding: 0;
-  height: 32px;
-  width: 32px;
-  border: 0;
-  border-radius: 100%;
-  padding-top: 3px;
-}
-
-.closeButtonSource {
-  border-color: transparent !important;
-  color: inherit;
-  background: none !important;
-  box-shadow: none !important;
-  transition: color 0.2s ease-in-out;
-  float: right;
-  margin-top: 20px;
-  cursor: pointer;
-
-  &.closeplaygroundbutton {
-    display: none !important;
-  }
-}
-
-.graph-img {
-  width: 90%;
-  background: #fefefe3b;
-  padding: 15px;
-  border-radius: 15px;
-}
-
-.chat-textarea {
-  width: 100%;
-  // min-height: 40px;
-  padding: 10px;
-  border: none;
-  resize: none;
-  overflow-y: hidden;
-  box-sizing: border-box;
-  font-size: 15px;
-  line-height: 1.5;
-  background-color: #fff;
-  height: 30px;
-  transition: all 1s;
-
-  &:hover {
-    height: 60px;
-  }
-
-  &:focus {
-    height: 60px;
-  }
-}
-
-.chat-textarea:focus {
-  outline: none;
-}
-
-.fixed-btn {
-  position: fixed;
-  right: -22px;
-  top: 46%;
-  transform: translateY(-50%) rotate(270deg);
-  background-color: black;
-  color: white;
-  border: none;
-  padding: 5px 12px;
-  cursor: pointer;
-  transform-origin: center;
-  z-index: 1000000;
-  border-radius: 8px 8px 0 0;
-  font-size: 16px;
-  transition: all 0.5s;
-
-  &:hover {
-    background-color: #5b5b5b;
-  }
-}
-
-.fixed-btn-close {
-  position: fixed;
-  right: 549px;
-  top: 46%;
-  transform: translateY(-50%) rotate(270deg);
-  background-color: black;
-  color: white;
-  border: none;
-  padding: 5px 16px;
-  cursor: pointer;
-  transform-origin: center;
-  z-index: 1000000;
-  border-radius: 8px 8px 0 0;
-  font-size: 16px;
-  transition: all 0.5s;
-
-  &:hover {
-    background-color: #5b5b5b;
-  }
-}
-
-.btn.rotate {
-  transform: rotate(-15deg);
-}
-
-.btn.rotate:hover {
-  transform: rotate(0deg);
-}
-
-.btn.cta-chat {
-  color: #666;
-  border: none;
-  padding: 5px;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  background: #f3f3f3;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  margin: 0 auto;
-  text-align: center;
-  justify-content: center;
-  transition: all 0.5s;
-
-  &:hover {
-    background: #d7d7d7;
-    color: #666;
-  }
-}
-
-.btn.cta-chat svg {
-  vertical-align: middle;
-}
-
-.chat-footer-upt {
-  padding: 4px;
-}
-
-.workflowbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 48px;
-  padding: 0.5rem 1.5rem;
-  margin-bottom: 0;
-  font-size: 14px;
-  color: #414141 !important;
-  white-space: nowrap;
-  border: 1px solid transparent;
-  transition: all 0.5s;
-
-  &:hover {
-    border: 1px solid #ddd;
-    background: #fff;
-  }
-
-  svg {
-    margin: 0 10px;
-  }
-}
-
-.edit-boxDrawer {
-  border-left: 1px solid #ddd;
-  box-shadow: 1px 1px 15px #ddddddc4 !important;
-}
-
-.edit-boxDrawer mat-drawer-content {
-  margin-left: 0px !important;
-  margin-right: 0px !important;
-}
-
-ng-deep .edit-boxDrawer mat-drawer-content {
-  margin-left: 0px !important;
-  margin-right: 0px !important;
-}
-
-.SearchTitle {
-  font-size: 16px !important;
-  text-transform: capitalize;
-}
-
-.exicution {
-  margin: 30px 0 !important;
-  background: #f9f9f9;
-  padding: 15px 20px;
-}
-
-.new-conversationbutton {
-  position: absolute;
-  right: 88px;
-  top: 10px;
-  z-index: 1000;
-  background: #f5f5f5;
-  padding: 6px 6px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: space-around;
-  width: 120px;
-  align-items: center;
-  font-size: 14px;
-  cursor: pointer;
-  border: 1px solid #e3e3e3;
-  transition: all 0.5s;
-
-  &:hover {
-    background: #eee;
-  }
-
-  @media (max-width: 768px) {
-    position: fixed !important;
-    right: 18px !important;
-    top: 56px !important;
-    padding: 0px 0px !important;
-    width: 90px !important;
-    align-items: center;
-    font-size: 11px !important;
-
-  }
-}
-
-.NoteTxt {
-  margin: 0 auto;
-
-  .text {
-    margin: 0 5px;
-  }
-}
-
-.form-container {
-  width: 100%;
-}
-
-.progress-container {
-  display: flex;
-  align-items: center;
-}
-
-.circular-loader {
-  position: relative;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  box-sizing: border-box;
-}
-
-.loader-spinner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: 2px solid #2196f3;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: rotate-loader 1s linear infinite;
-  box-sizing: border-box;
-}
-
-.loader-text {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 12px;
-  font-weight: bold;
-  color: #333;
-}
-
-.loader-label {
-  margin-left: 20px;
-  font-size: 16px;
-  color: #333;
-}
-
-/* Checkmark styles */
-.checkmark {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.checkmark-circle {
-  stroke: #4caf50;
-  stroke-width: 4;
-  stroke-dasharray: 166;
-  stroke-dashoffset: 166;
-  animation: stroke 0.6s ease-in-out forwards;
-}
-
-.checkmark-check {
-  stroke: #4caf50;
-  stroke-width: 4;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: 48;
-  stroke-dashoffset: 48;
-  animation: stroke-check 0.4s 0.4s ease-in-out forwards;
-}
-
-@keyframes stroke {
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes stroke-check {
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes rotate-loader {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Animation for the checkmark */
-@keyframes checkmark-animation {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.circular-loader.completed .loader-spinner {
-  animation: none;
-  transform: rotate(360deg);
-}
-
-.icon-button {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  font-size: 24px;
-  color: #333;
-}
-
-.icon-button:focus {
-  outline: none;
-}
-
-.icon-button:hover {
-  color: #007bff;
-}
-
-.modal {
-  display: block;
-  position: fixed;
-  z-index: 1000001;
-  padding-top: 0;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4);
-}
-
-
-.modal-content {
-  background-color: #fff;
-  margin: 5% auto;
-  padding: 20px;
-  border-radius: 8px;
-  width: 82%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  height: 600px;
-  position: relative;
-}
-
-.close {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-
-
-/* new chat UI fixes */
-.SearchTitle.user {
-  font-size: 30px !important;
-  text-transform: none !important;
-
-  h2 {
-    font-size: 1.7rem !important;
-  }
-
-  p {
-    font-size: 1.7rem !important;
-  }
-
-
-}
-
-/* New UI for workflow */
-.title_chat {
-  display: flex;
-  margin: 0;
-  padding: 0;
-}
-
-.title_chat h2 {
-  font-size: 20px;
-  margin: 10px 0;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-
-  @media (max-width: 768px) {
-    flex-direction: column;
-    align-items: start;
-    font-size: 16px;
-  }
-}
-
-.small-title {
-  font-size: 12px;
-  margin: 2px 0;
-}
-
-.titleSection {
-  margin: 0;
-
-  h2 {
-    font-size: 20px;
-    margin: 0;
-    color: #000;
-  }
-}
-
-
-.inputs-section {
-  background-color: #f7f7f7;
-  padding: 10px 15px 0;
-  margin: 0 0 10px;
-  border-radius: 5px;
-
-}
-
-.inputs-section h3 {
-  font-size: 16px;
-}
-
-.actions-section {
-  background-color: #f9f9f9;
-  padding: 15px;
-  margin-bottom: 20px;
-  border-radius: 5px;
-  height: 500px;
-  overflow-y: auto;
-}
-
-.timeline {
-  position: relative;
-  padding-left: 40px;
-  margin-bottom: 20px;
-}
-
-.timeline:before {
-  content: "";
-  position: absolute;
-  left: 19px;
-  height: 100%;
-  border-right: 2px dashed #cecece;
-}
-
-.timeline-item {
-  position: relative;
-  margin-bottom: 20px;
-}
-
-.timeline-item:before {
-  content: "";
-  position: absolute;
-  left: -30px;
-  top: 0px;
-  width: 20px;
-  height: 20px;
-  background-color: #007bff;
-  border-radius: 50%;
-  z-index: 1;
-}
-
-.timeline-item h4 {
-  margin: 0;
-  font-weight: bold;
-  font-size: 16px;
-  color: #000;
-}
-
-.timeline-item pre {
-  background-color: #fff;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  white-space: pre-wrap;
-}
-
-.timestamp-section {
-  justify-content: space-between;
-  font-style: normal;
-  color: #666;
-}
-
-.mic-btn {
-  background-color: #ff4d4d;
-  border: none;
-  border-radius: 50%;
-  padding: 10px;
-  color: white;
-  font-size: 1.5em;
-  cursor: pointer;
-}
-
-.mic-btn:active {
-  background-color: #ff6666;
-}
-
-.actions-section h3 {
-  font-size: 16px;
-}
-
-.close-wrapper {
-  width: 100%;
-  display: flex;
-  justify-content: right;
-  position: absolute;
-  right: 22px;
-  top: 0;
-}
-
-.close_pop {
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #aaa;
-  font-size: 30px;
-  font-weight: 400;
-}
-
-.user-Box {
-  display: flex;
-  align-items: center;
-  //width: 95%;
-}
-
-.bards {
-  position: absolute;
-  right: 0;
-  top: 20px;
-}
-
-::ng-deep {
-  .code-container {
-    position: relative;
-    margin: 20px 0;
-
-
-  }
-
-  .copy-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    padding: 5px 10px;
-    cursor: pointer;
-    border-radius: 4px;
-  }
-
-  .copy-button:hover {
-    background-color: #0056b3;
-  }
-
-  .code_block.diff {
-    background-color: #f8f8f8;
-    /* Example diff background */
-    border-left: 4px solid #ccc;
-    /* Example diff border */
-    padding: 10px;
-    overflow: auto;
-    /* Enable scrolling */
-  }
-}
-
-/* playground-marke-down css starts here */
-
-::ng-deep {
-  .heading003 {
-    font-size: 20px;
-    font-weight: bold;
-    color: #06f;
-  }
-
-  .listing {
-    list-style: decimal;
-    margin: 0 25px;
-    padding: 0;
-  }
-}
-
-
-
-
-/* old loader css */
-
-/* =Animate the stuff
------------------------- */
-.line {
-  display: inline-block;
-  width: 15px;
-  height: 15px;
-  border-radius: 15px;
-  background-color: #e8e8e8;
-}
-
-.load-2 .line:nth-last-child(1) {
-  animation: loadingB 1.5s 1s infinite;
-  margin: 5px 0
-}
-
-.load-2 .line:nth-last-child(2) {
-  animation: loadingB 1.5s 0.5s infinite;
-  margin: 5px 0
-}
-
-.load-2 .line:nth-last-child(3) {
-  animation: loadingB 1.5s 0s infinite;
-  margin: 5px 0
-}
-
-
-.load-1 .line:nth-last-child(1) {
-  animation: loadingA 1.5s 1.2s infinite;
-  margin: 5px 0
-}
-
-.load-1 .line:nth-last-child(2) {
-  animation: loadingA 1.5s 0.8s infinite;
-  margin: 5px 0
-}
-
-.load-1 .line:nth-last-child(3) {
-  animation: loadingA 1.5s 0.2s infinite;
-  margin: 5px 0
-}
-
-@keyframes loadingB {
-  0% {
-    width: 65px;
-  }
-
-  50% {
-    width: 235px;
-  }
-
-  100% {
-    width: 65px;
-  }
-}
-
-@keyframes loadingA {
-  0% {
-    width: 45px;
-  }
-
-  50% {
-    width: 205px;
-  }
-
-  100% {
-    width: 45px;
-  }
-}
-
-/* old loader css */
-
-
-/* New updated  loader css */
-.loaderbox {
-  position: relative;
-  margin: 10px 0;
-  height: 60px;
-}
-
-.loader-pkg {
-  height: 20px;
-  width: 250px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-}
-
-.loader--dot {
-  animation-name: loader;
-  animation-timing-function: ease-in-out;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-  height: 20px;
-  width: 20px;
-  border-radius: 100%;
-  background-color: #1a6774;
-  position: absolute;
-  //border: 2px solid white;
-}
-
-.loader--dot:first-child {
-  background-color: #618e93;
-  animation-delay: 0.5s;
-}
-
-.loader--dot:nth-child(5) {
-  background-color: #3fb0c3;
-  animation-delay: 0.4s;
-}
-
-.loader--dot:nth-child(4) {
-  background-color: #40b8cd;
-  animation-delay: 0.3s;
-}
-
-.loader--dot:nth-child(3) {
-  background-color: #ec8828;
-  animation-delay: 0.2s;
-}
-
-.loader--dot:nth-child(2) {
-  background-color: #fdc25d;
-  animation-delay: 0.1s;
-}
-
-.loader--dot:nth-child(1) {
-  background-color: #f4e3be;
-  animation-delay: 0s;
-}
-
-.loader--text {
-  position: absolute;
-  top: 200%;
-  left: 0;
-  width: 4rem;
-  margin: 0;
-}
-
-.loader--text:after {
-  content: "Loading";
-  font-weight: bold;
-  animation-name: loading-text;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-}
-
-@keyframes loader {
-  15% {
-    transform: translateX(230px);
-  }
-
-  45% {
-    transform: translateX(0px);
-  }
-
-  65% {
-    transform: translateX(230px);
-  }
-
-  95% {
-    transform: translateX(0);
-  }
-}
-
-@keyframes loading-text {
-  0% {
-    content: "Loading";
-  }
-
-  25% {
-    content: "Loading.";
-  }
-
-  50% {
-    content: "Loading..";
-  }
-
-  75% {
-    content: "Loading...";
-  }
-}
-
-/* New updated  loader css */
-
-
-
-::ng-deep {
-
-  .h1,
-  h1 {
-    font-size: 1.165rem;
-  }
-
-  .h2,
-  h2 {
-    font-size: 1.125rem;
-  }
-
-  .h3,
-  h3 {
-    font-size: 1.125rem;
-  }
-
-  b,
-  strong {
-    font-weight: 600;
-  }
-
-  .loaderbox {
-    position: relative;
-    margin: 10px 0;
-    height: 60px;
-  }
-
-  .loader-pkg {
-    height: 20px;
-    width: 250px;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-  }
-
-  .loader--dot {
-    animation-name: loader;
-    animation-timing-function: ease-in-out;
-    animation-duration: 3s;
-    animation-iteration-count: infinite;
-    height: 20px;
-    width: 20px;
-    border-radius: 100%;
-    background-color: #1a6774;
-    position: absolute;
-    //border: 2px solid white;
-  }
-
-  .loader--dot:first-child {
-    background-color: #618e93;
-    animation-delay: 0.5s;
-  }
-
-  .loader--dot:nth-child(5) {
-    background-color: #3fb0c3;
-    animation-delay: 0.4s;
-  }
-
-  .loader--dot:nth-child(4) {
-    background-color: #40b8cd;
-    animation-delay: 0.3s;
-  }
-
-  .loader--dot:nth-child(3) {
-    background-color: #ec8828;
-    animation-delay: 0.2s;
-  }
-
-  .loader--dot:nth-child(2) {
-    background-color: #fdc25d;
-    animation-delay: 0.1s;
-  }
-
-  .loader--dot:nth-child(1) {
-    background-color: #f4e3be;
-    animation-delay: 0s;
-  }
-
-  .loader--text {
-    position: absolute;
-    top: 200%;
-    left: 0;
-    width: 4rem;
-    margin: 0;
-  }
-
-  .loader--text:after {
-    content: "Loading";
-    font-weight: bold;
-    animation-name: loading-text;
-    animation-duration: 3s;
-    animation-iteration-count: infinite;
-  }
-}
-
-/* new UI for checkbox */
-.agents-popwindowbox {
-  width: 100%;
-  padding: 10px;
-  background: #fff;
-
-  h3 {
-    font-size: 15px;
-    color: #000;
-  }
-}
-
-.dropdown-menu-agents {
-  background-color: #fff;
-  border: 1px solid #ededed;
-  border-radius: 5px;
-  bottom: 100% !important;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  display: block;
-  left: 0;
-  margin-bottom: 10px;
-  padding: 0;
-  position: absolute;
-  top: auto;
-  width: 270px;
-  z-index: 1000;
-
-  .scrollerbox {
-    display: flex;
-    flex-direction: column;
-    flex: fit-content;
-    overflow-y: auto;
-    height: 215px;
-  }
-
-  label {
-    cursor: pointer;
-    display: flex;
-    padding: 0;
-    font-size: 13px;
-    justify-content: start;
-    align-items: center;
-    line-height: 16px;
-    background: #f9f9f9;
-    padding: 7px 7px;
-    margin: 2px 0;
-    border-radius: 2px;
-
-    &:hover {
-      background: #ebebeb;
-    }
-  }
-
-  label input {
-    position: absolute;
-    opacity: 0;
-  }
-
-  .input-check {
-    position: relative;
-    display: inline-block;
-    top: 0;
-    width: 25px;
-    height: 23px;
-    border: 2px solid #ccc;
-    border-radius: 4px;
-    margin-right: 5px;
-    transition: .5s;
-  }
-
-  label input:checked~.input-check {
-    background: #06f;
-    border-color: #06f;
-    animation: animate .7s ease;
-  }
-
-  @keyframes animate {
-    0% {
-      transform: scale(1);
-    }
-
-    40% {
-      transform: scale(1.3, .7);
-    }
-
-    55% {
-      transform: scale(1);
-    }
-
-    70% {
-      transform: scale(1.2, .8);
-    }
-
-    80% {
-      transform: scale(1);
-    }
-
-    90% {
-      transform: scale(1.1, .9);
-    }
-
-    100% {
-      transform: scale(1);
-    }
-  }
-
-  .input-check::before {
-    content: '';
-    position: absolute;
-    top: 6px;
-    left: 4px;
-    width: 15px;
-    height: 6px;
-    border-bottom: 3px solid #fff;
-    border-left: 3px solid #fff;
-    transform: scale(0) rotate(-45deg);
-    transition: .5s;
-  }
-
-  label input:checked~.input-check::before {
-    transform: scale(1) rotate(-45deg);
-  }
-}
-
-/* new UI for checkbox */
-
-::ng-deep {
-
-  .h1,
-  h1 {
-    font-size: 1.165rem;
-  }
-
-  .h2,
-  h2 {
-    font-size: 1.125rem;
-  }
-
-  .h3,
-  h3 {
-    font-size: 1.125rem;
-  }
-
-  b,
-  strong {
-    font-weight: 600;
-  }
-}
-
-
-@media (max-width: 768px) {
-  .note {
-    width: 90%;
-    margin: 0 auto;
-    line-height: 15px;
-    padding: 3px 0 10px;
-  }
-}
-
-.show-hover {
-  display: none;
-}
-
-.chat.bot:hover .show-hover {
-  display: flex !important;
-}