.nebulaOne, .nebulaOne > * {
  cursor: default;
  font-family: system-ui;
  color: var(--nebula-one-menu-text-primary, #fff);
}


/* Chat Button */
.nebulaOne.chat-button {
  overflow: visible;
  background: transparent;
  margin: auto;
  margin-right: 24px; /* Default: Align right */
  margin-bottom: 24px;
  cursor: pointer;
  border: 0;
  animation: nebulaOne-scale-in 0.5s ease-out forwards;
  -webkit-appearance: none
}

/* Styles for left-aligned chat button */
.nebulaOne.chat-button.left {
  margin-left: 24px;
  margin-right: auto;
}


.nebulaOne.chat-button > span {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  background: #000;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}
.nebulaOne.chat-button svg {
  width: 22px; height: 20px;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.nebulaOne.chat-button .circle-1,
.nebulaOne.chat-button .circle-2,
.nebulaOne.chat-button .circle-3,
.nebulaOne.chat-button .circle-4,
.nebulaOne.chat-button .circle-5,
.nebulaOne.chat-button .circle-6,
.nebulaOne.chat-button .circle-7,
.nebulaOne.chat-button .circle-8 {
  position: absolute; top: 5px; left: 3px;
  width: 100%; height: 100%;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  cursor: pointer;
  background-color: none;
}

.nebulaOne.chat-button .circle-1 {
  border: #3F39F8 solid 2px;
  border-radius: 50%;
  filter: blur(1.2px);

  animation-name: circle1;
  animation-duration: 2s;
}
.nebulaOne.chat-button .circle-2 {
  border: #362DF5 solid 4px;
  border-radius: 45%;
  filter: blur(2px);

  animation-name: circle2;
  animation-duration: 2s;
}
.nebulaOne.chat-button .circle-3 {
  top: 2px; left: 0px;
  border: #4C4BFF solid 4px;
  border-radius: 40%;
  box-shadow: #7070cf 3px 0px 2px 2px;

  animation-name: circle3;
  animation-duration: 2s;
}
.nebulaOne.chat-button .circle-4 {
  top: 3px; left: 0;
  border: #4C4BFF solid 4px;
  border-radius: 50%;
  filter: blur(2px);

  animation-name: spin1, morph1;
  animation-duration: 2s;
}
.nebulaOne.chat-button .circle-5 {
  border: #7E7AF9 solid 2px;
  border-radius: 50%;
  filter: blur(2px);

  animation-name: spin2, morph2;
  animation-duration: 3s;
}
.nebulaOne.chat-button .circle-6 {
  border: #ffffff solid 2px;
  border-radius: 50%;
  filter: blur(2px);

  animation-name: circle1;
  animation-duration: 5s;
}
.nebulaOne.chat-button .circle-7 {
  opacity: 0.2;
  border: #362DF5 solid 4px;
  border-radius: 45%;
  filter: blur(3px);

  animation-name: circle7;
  animation-duration: 2s;
}
.nebulaOne.chat-button .circle-8 {
  left: 2px;
  border: #ffffff solid 2px;
  border-radius: 50%;

  animation-name: circle8;
  animation-duration: 3s;
}


@keyframes circle1 {
  0%, 100% { transform: rotate(30deg); width: 85%; height: 85%; border-radius: 60% 60% 50% 50% / 60% 60% 40% 40%; }
  25% { transform: rotate(135deg) translateX(2px); width: 82%; height: 85%; border-radius: 60% 60% 50% 50% / 50% 50% 50% 50%; }
  50% { transform: rotate(90deg) translateX(4px); width: 85%; height: 82%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
  75% { transform: rotate(45deg) translateX(2px); width: 82%; height: 85%; border-radius: 60% 60% 50% 50% / 50% 50% 60% 60%; }
}
@keyframes circle2 {
  0%, 100% { transform: rotate(0deg) scale(1.1); width: 80%; height: 82%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
  33% { transform: rotate(135deg) scale(1.0); width: 85%; height: 80%; border-radius: 60% 60% 50% 50% / 50% 50% 50% 50%; }
  66% { transform: rotate(45deg) scale(1.1); width: 82%; height: 80%; border-radius: 50%; }
}

@keyframes circle3 {
  0%, 100% { transform: rotate(0deg) scale(0.9); width: 85%; height: 85%; border-radius: 60% 60% 50% 50% / 50% 50% 50% 50%; }
  33% { transform: rotate(135deg) scale(1.0); width: 85%; height: 85%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
  66% { transform: rotate(45deg) scale(1.1); width: 80%; height: 80%; border-radius: 48%; }
}
@keyframes circle7 {
  0%, 100% { transform: rotate(0deg) scale(1.1); width: 80%; height: 82%; border-radius: 40%; opacity: 0.2; }
  33% { transform: rotate(135deg) scale(1.0); width: 85%; height: 80%; border-radius: 46%; opacity: 0.4; }
  66% { transform: rotate(45deg) scale(1.1); width: 82%; height: 80%; border-radius: 50%; opacity: 0.6; }
}
@keyframes circle8 {
  0%, 100% { transform: rotate(30deg); width: 85%; height: 85%; border-radius: 50%; }
  25% { transform: rotate(135deg) translateX(2px); width: 85%; height: 85%; border-radius: 45%; }
  50% { transform: rotate(90deg) translateX(3px); width: 85%; height: 85%; border-radius: 50%; }
  75% { transform: rotate(45deg) translateX(2px); width: 85%; height: 85%; border-radius: 45%; }
}


@keyframes spin1 {
  from { transform: rotate(0deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1.2); }
}

@keyframes spin2 {
  from { transform: rotate(180deg) scale(0.9); }
  to { transform: rotate(-180deg) scale(1.1); }
}

@keyframes spin3 {
  from { transform: rotate(45deg) scale(1); }
  to { transform: rotate(-45deg) scale(0.9); }
}

@keyframes morph1 {
  0%, 100% { width: 80%; height: 85%; border-radius: 50%; }
  50% { width: 75%; height: 70%; border-radius: 47%; }
}

@keyframes morph2 {
  0%, 100% { width: 85%; height: 80%; border-radius: 46%; }
  33% { width: 88%; height: 85%; border-radius: 48%; }
  66% { width: 82%; height: 82%; border-radius: 50%; }
}

@media (hover: hover) {
  .nebulaOne.chat-button:hover > span {
    transform: scale(1.07);
  }
  .nebulaOne.chat-button:hover > span > svg {
    transform: scale(0.93);
  }
}


/* Chat Dialog */
.nebulaOne.chat-dialog {
  background-color:  #000;
  margin: 0px 0px 0px auto;
  width: 40%;
  min-width: min(100vw, 450px);
  height: 100%;
  max-height: 100vh;
  opacity: 1;
  padding: 0;
  border: none;
}
.nebulaOne.chat-dialog[open] {
  animation: nebulaOne-slide-in 0.5s ease-out;
}
.nebulaOne.chat-dialog[open]::backdrop {
  animation: nebulaOne-backdrop-fade-in 0.7s ease-in forwards;
  background-color: rgb(0 0 0 / 50%);
}

/* Styles for left-aligned chat dialog */
.nebulaOne.chat-dialog.left {
  margin: 0px auto 0px 0px;
}
/* New animation for left slide-in for the dialog */
.nebulaOne.chat-dialog.left[open] {
  animation: nebulaOne-slide-in-left 0.5s ease-out;
}


.nebulaOne.chat-dialog > form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  height: 100%;
  width: 100%;
}
.nebulaOne.chat-dialog > form > header {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: 5px;
  background-color: #000;
}
.nebulaOne.chat-dialog > form > article {
  overflow: hidden;
}
.nebulaOne.chat-dialog .title {
  color: var(--nebula-one-menu-text-primary, #fff);
  text-align: center;
  font-size: 20px;
  line-height: 20px;
  width: 100%;
  user-select: none;
  margin: auto auto auto 50px;
  font-family: inherit;
}
.nebulaOne.chat-dialog .close-dialog {
  width: 37px;
  height: 30px;
  font-size: 25px;
  line-height: 25px;
  text-align: center;
  justify-self: right;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 250ms;
  margin: 10px;
}
.nebulaOne.chat-dialog .close-dialog:hover {
  background-color: #784FD3;
}
.nebulaOne.chat-dialog > form > article,
.nebulaOne.chat-dialog > form > article > iframe {
  height: 100%;
  width: 100%;
  border: none;
  background-color: #F6F6F6;
}

@keyframes nebulaOne-scale-in {
  0% {
      opacity: 0;
      transform: scaleY(0) scaleX(0);
  }
  100% {
      opacity: 1;
      transform: scaleY(1) scaleX(1);
  }
}
@keyframes nebulaOne-slide-in {
  0% {
      transform: translateX(100%);
  }
  100% {
      transform: translateX(0%);
  }
}
/* New animation for the dialog sliding in from the left */
@keyframes nebulaOne-slide-in-left {
  0% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(0%);
  }
}
@keyframes nebulaOne-backdrop-fade-in {
  0% {
      background-color: rgb(0 0 0 / 0%);
  }
  100% {
      background-color: rgb(0 0 0 / 50%);
  }
}