/* Importing Google Font - Inter   
@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap");
*/

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/UcCo3FwrK3iLTcvvYwYZ90A2N59MKw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/UcCo3FwrK3iLTcvmYwYZ90A2N59MKw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/UcCo3FwrK3iLTcvuYwYZ90A2N59MKw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/UcCo3FwrK3iLTcvhYwYZ90A2N59MKw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/UcCo3FwrK3iLTcvtYwYZ90A2N59MKw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/UcCo3FwrK3iLTcvsYwYZ90A2N59MKw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/UcCo3FwrK3iLTcviYwYZ90A2N58.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* fallback */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/sykd-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIv15yDcOq7BDF-SddU.woff2) format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}


/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

body {
  /*display: flex;
  align-items: center;
  justify-content: center;
background: linear-gradient(#eeeeff, #ffeeff);
      */ 
  /*min-height: 100vh;*/
  
}


#chatbot-toggler {
  position: fixed;
  bottom: 30px;
  right: 1%;
  border: none;
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background: #5350c4;
  transition: all 0.2s ease;
}

.show-chatbot #chatbot-toggler {
  transform: rotate(90deg);
}

#chatbot-toggler span {
  color: #fff;
  position: absolute;
}

.show-chatbot #chatbot-toggler span:first-child,
#chatbot-toggler span:last-child {
  opacity: 0;
}

.show-chatbot #chatbot-toggler span:last-child {
  opacity: 1;
}

.chatbot-popup {
  font-family: "Inter", serif;
  position: fixed;
  right: 1%;
  bottom: 90px;
  width: 420px;
  transform: scale(0.2);
  transform-origin: bottom right;
  background: #fff;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border-radius: 15px;
  box-shadow: 0 0 128px rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
  transition: all 0.1s ease;
}

.show-chatbot .chatbot-popup {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(#5350c4, #9f00ff); /*#5350c4;*/
  padding: 15px 22px;
}

.chat-header .header-info {
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-header .header-info .chatbot-logo {
  height: 35px;
  width: 35px;
  background: #fff;
  border-radius: 50%;
  fill: #5350c4;
  padding: 5px;
  flex-shrink: 0;
}

.header-info .logo-text {
  color: #fff;
  font-size: 1.31rem;
  font-weight: 600;
}

.chat-header #close-chatbot {
  border: none;
  color: #fff;
  height: 40px;
  width: 40px;
  font-size: 1.9rem;
  margin-right: -10px;
  padding-top: 2px;
  cursor: pointer;
  border-radius: 50%;
  background: none;
  transition: 0.2s ease;

  &:hover {
    background: #3d39ac;
  }
}

.chat-body {
  padding: 25px 22px;
  display: flex;
  gap: 20px;
  flex-direction: column;
  overflow-y: auto;
  height: 460px;
  margin-bottom: 82px;

  scrollbar-width: thin;
  scrollbar-color: #ccccf5 transparent;
}

.chat-body .message {
  display: flex;
  align-items: center;
  gap: 11px;
}
.chat-body .bot-message .bot-avatar {
  height: 35px;
  width: 35px;
  background: #5350c4;
  border-radius: 50%;
  fill: #fff;
  padding: 5px;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
}
.chat-body .user-message {
  flex-direction: column;
  align-items: flex-end;
}

.chat-body .user-message .attachment {
  width: 50%;
  margin-top: -7px;
  border-radius: 13px 3px 13px 13px;
}

.chat-body .message .message-text {
  padding: 12px 16px;
  max-width: 75%;
  overflow: hidden;
  font-size: 0.95rem;
  background: #f2f2ff;
  margin: 0;
}

.chat-body .bot-message .thinking .message-text {
  padding: 2px 16px;
}

.chat-body .bot-message .message-text {
  background: #f2f2f2;
  border-radius: 13px 13px 13px 3px;
}
.chat-body .user-message .message-text {
  color: #f2f2f2;
  background-color: #5350c4;
  border-radius: 13px 13px 3px 13px;
}

.chat-body .bot-message .thinking-indicator {
  display: flex;
  gap: 5px;
  padding-block: 5px;
}

.chat-body .bot-message .thinking-indicator .dot {
  height: 7px;
  width: 7px;
  opacity: 0.7;
  border-radius: 50%;
  background: #5350c4;
  animation: dotPulse 1.8s ease-in-out infinite;
}

.chat-body .bot-message .thinking-indicator .dot:nth-child(1) {
  animation-delay: 0.2s;
}
.chat-body .bot-message .thinking-indicator .dot:nth-child(2) {
  animation-delay: 0.3s;
}
.chat-body .bot-message .thinking-indicator .dot:nth-child(3) {
  animation-delay: 0.4s;
}
/* .Chat-body .bot-message .thinking-indicator .dot:nth-child(4){
  animation-delay: 0.8s;
} */

@keyframes dotPulse {
  0%,
  44% {
    transform: translateY(0);
  }
  28% {
    opacity: 0.4;
    transform: translateY(-4px);
  }
  44% {
    opacity: 0.2;
  }
}

.chat-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 15px 22px 20px;
}

.chat-footer .chat-form {
  display: flex;
  position: relative;
  align-items: center;
  background: #fff;
  outline: 1px solid #cccce5;
  border-radius: 32px;
}

.chat-footer .chat-form:focus-within {
  outline: 2px solid #5350c4;
}

.chat-form .message-input {
    font-family: "Inter", serif;
  border: none;
  outline: none;
  height: 47px;
  width: 100%;
  font-size: 0.95rem;
  padding: 14px 0 13px 18px;
  border-radius: inherit;
  resize: none; /* Prevent resizing */
  max-height: 180px;
  /* overflow: hidden; Prevent scrollbar  */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.chat-form .message-input:hover {
  scrollbar-color: #ccccf5 transparent;
}

.chat-form .chat-controls {
  display: flex;
  height: 47px;
  align-items: center;
  align-self: flex-end;
  padding-right: 6px;
  gap: 4px;
}

.chat-form .chat-controls button {
  height: 35px;
  width: 35px;
  font-size: 1.15rem;
  border: none;
  cursor: pointer;
  color: #706db0;
  background: none;
  border-radius: 50%;
  transition: 0.2s ease;

  &:hover {
    background: #f1f1ff;
  }
}

.chat-form .chat-controls #send-message {
  background: #5350c4;
  display: none;
  color: #fff;
}
.chat-form .chat-controls #send-message:hover {
  background: #3d39ac;
}

.chat-form .message-input:valid ~ .chat-controls #send-message {
  display: block;
}

.chat-form .file-upload-wrapper {
  height: 35px;
  width: 35px;
  position: relative;
}
.chat-form .file-upload-wrapper :where(img, button) {
  position: absolute;
}

.chat-form .file-upload-wrapper #file-cancel {
  color: #ff0000;
  background: #fff;
}
.chat-form .file-upload-wrapper img {
  /* position: absolute; */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.chat-form .file-upload-wrapper :where(img, #file-cancel),
.chat-form .file-uploaded #file-upload {
  display: none;
}

.chat-form .file-uploaded img,
.chat-form .file-uploaded:hover #file-cancel {
  display: block !important;
}

em-emoji-picker {
  position: absolute;
  left: 50%;
  top: -337px;
  width: 100%;
  max-width: 350px;
  max-height: 330px;
  transform: translate(-50%);
  visibility: hidden;
}

.show-emoji-picker em-emoji-picker {
  visibility: visible;
}

/* Responsive Designe */

@media (max-width: 520px) {
  #chatbot-toggler {
    bottom: 20px;
    right: 20px;
  }

  .chatbot-popup {
    width: 100%;
    right: 0;
    bottom: 0;
    border-radius: 0;
    height: 100%;
  }

  .chatbot-popup .chat-header {
    padding: 12px 15px;
  }

  .chat-body {
    height: calc(90% - 55px);
    padding: 60px;
  }

  .chat-footer {
    padding: 10px 15px 15px;
  }

  .chat-form .file-upload-wrapper .file-uploaded #file-cancel {
    opacity: 0;
  }
}