.chat-form {
   /* Base variables */
   --bg-color: #E5F3FF;
   --chat-width: 500px;
   --chat-padding: 2.5rem;

   --offsetMargin: calc(58px - 80px);

   /* Message variables */
   --msg-in: #008CFF;
   --msg-in-hover: #0077D4;

   --msg-out: #B3B4B4;
   --msg-out-hover: #999A9A;

   --msg-gap: 0.5rem;
   --msg-padding-y: 0.5rem;
   --msg-padding-x: 0.725rem;
   --msg-border-radius: 0.325rem;

   --icon-size: 40px;

   --msg-decorator-size: 0.5rem;

   @media (max-width: 1200px) {
      --offsetMargin: -1px;
   }

   /* Resetting container standards */
   max-width: initial;
   min-height: 600px;
   margin-top: var(--offsetMargin);
   background-color: var(--bg-color);

   & .chat-form__wrapper {
      max-width: var(--chat-width);
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      padding-block: calc((var(--icon-size) / 2) + var(--chat-padding)) var(--chat-padding);
   }

   & .chat-form__msg-group {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;

      &.msg-in {
         &:has(.user-icon) {
            & .msg {
               &:not(:first-child) {
                  margin-left: calc(var(--icon-size) + var(--msg-decorator-size) + var(--msg-gap));
               }
            }
         }

         & .msg {
            &.options {
               & .content {
                  & .option {
                     color: #212529;
                  }
               }
            }

            &.option {
               & .content {
                  &:hover {
                     background-color: var(--msg-in-hover);
                  }
               }
            }

            & .content {
               background-color: var(--msg-in);
               color: #fff;
            }

            &:first-child {
               & .content {
                  border-top-left-radius: 0;

                  &::before {
                     content: '';
                     position: absolute;
                     top: 0;
                     left: calc(var(--msg-decorator-size) * -1);
                     border-top: var(--msg-decorator-size) solid var(--msg-in);
                     border-left: var(--msg-decorator-size) solid transparent;
                  }
               }
            }
         }

         & .loader span {
            background-color: #fff;
         }
      }

      &.msg-out {
         align-self: flex-end;

         &:has(.user-icon) {
            & .msg {
               &:not(:first-child) {
                  margin-right: calc(var(--icon-size) + var(--msg-decorator-size) + var(--msg-gap));
               }
            }
         }

         & .msg {
            flex-direction: row-reverse;

            &.option {
               & .content {
                  &:hover {
                     background-color: var(--msg-out-hover);
                  }
               }
            }

            & .content {
               background-color: var(--msg-out);
            }

            &:first-child {
               & .content {
                  border-top-right-radius: 0;

                  &::before {
                     content: '';
                     position: absolute;
                     top: 0;
                     right: calc(var(--msg-decorator-size) * -1);
                     border-top: var(--msg-decorator-size) solid var(--msg-out);
                     border-right: var(--msg-decorator-size) solid transparent;
                  }
               }
            }
         }

         & .loader span {
            background-color: #212529;
         }
      }

      & .msg {
         position: relative;
         display: flex;
         gap: calc(var(--msg-decorator-size) + var(--msg-gap));

         &.option {
            &:hover {
               & .content {
                  cursor: pointer;
               }
            }
         }

         & .user-icon {
            transform: translateY(-50%);
            width: var(--icon-size);
            height: var(--icon-size);
            border-radius: 50%;
            overflow: hidden;

            & img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               object-position: center;
            }
         }

         & .content {
            position: relative;
            max-width: calc(var(--chat-width) - var(--icon-size) - var(--msg-decorator-size) - var(--msg-gap));
            padding: var(--msg-padding-y) var(--msg-padding-x);
            border-radius: var(--msg-border-radius);

         }

         &.options,
         &.form {
            & .content {
               display: flex;
               flex-direction: column;
               gap: 0.5rem;

               & .option {
                  background-color: var(--msg-out);
                  padding: var(--msg-padding-y) var(--msg-padding-x);
                  border-radius: var(--msg-border-radius);
                  margin: 0;
                  cursor: pointer;

                  &:hover {
                     background-color: var(--msg-out-hover);
                  }
               }
            }
         }

         &.form {
            & .content {
               gap: 0.875rem;
            }

            form {
               display: flex;
               flex-direction: column;
               gap: 0.75rem;

               & .form-item {

                  &:has(input[type="text"]),
                  &:has(input[type="tel"]),
                  &:has(input[type="email"]) {
                     display: flex;
                     flex-direction: column;
                     gap: 0.25rem;

                     label {
                        font-size: 0.875rem;
                        margin: 0;
                     }

                     input {
                        padding: 0.25rem;
                        border-radius: var(--msg-border-radius);
                        border: none;
                        outline: none;
                        font-size: 0.875rem;
                        background-color: #fff;
                        color: #212529;
                     }
                  }

                  label {
                     &:has(input[type="checkbox"]) {
                        position: relative;
                        display: flex;
                        gap: 0.5rem;

                        &::before {
                           content: '';
                           position: relative;
                           flex-shrink: 0;
                           top: 2px;
                           left: 1px;
                           width: 1rem;
                           height: 1rem;
                           border-radius: 0.25rem;
                           border: 3px solid var(--msg-in);
                           outline: 1px solid #fff;
                           background-color: transparent;
                           cursor: pointer;
                           padding: 3px;
                        }

                        &:has(input[type="checkbox"]:checked) {
                           &::before {
                              background-color: #fff;
                           }
                        }

                        input {
                           /* Hide the checkbox */
                           position: absolute;
                           width: 1px;
                           height: 1px;
                           padding: 0;
                           margin: -1px;
                           overflow: hidden;
                           clip: rect(0, 0, 0, 0);
                           white-space: nowrap;
                           border: 0;
                        }

                        span {
                           font-size: 0.875rem;
                           margin: 0;
                        }
                     }
                  }
               }
            }

            & .submit {
               margin-inline: calc(var(--msg-padding-x) * -1);
               margin-bottom: calc(var(--msg-padding-y) * -1);
               border-radius: 0 0 var(--msg-border-radius) var(--msg-border-radius);
               overflow: hidden;
               border-top: 1px solid #fff;

               button[type="submit"] {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 0.75rem;
                  width: 100%;
                  padding: calc(var(--msg-padding-y) * 2) var(--msg-padding-x);
                  border-radius: 0;
                  border: none;
                  background-color: transparent;
                  color: #fff;

                  &:hover:not([disabled]) {
                     background-color: var(--msg-in-hover);
                  }

                  .icon {
                     position: relative;
                     width: 1.25rem;
                     height: 1.25rem;
                     scale: -1 1;
                  }

                  &:disabled {
                     opacity: 0.5;
                     cursor: not-allowed;
                  }
               }
            }

            & .requirement {
               font-size: 0.75rem;
               color: #fff;
               text-align: right;
            }
         }
      }
   }
}

.loader {
   display: flex;
   gap: 6px;
   align-items: flex-end;
   height: 20px;

   span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      animation: bounce 0.6s infinite ease-in-out;

      &:nth-child(1) {
         animation-delay: 0s;
      }

      &:nth-child(2) {
         animation-delay: 0.1s;
      }

      &:nth-child(3) {
         animation-delay: 0.2s;
      }

      &:nth-child(4) {
         animation-delay: 0.3s;
      }
   }
}

.chat-form--admin {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 20px;
   min-height: 100vh;
   font-family: 'sans-serif'
}

.chat-form--admin .content {
   display: flex;
   gap: 8px;
   margin: 32px 0;
   border: 1px solid #ccc;
   padding: 24px;
}

.chat-form--admin .content button {
   margin-left: auto;
   cursor: pointer;
}

@keyframes bounce {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-8px);
   }
}