#evo-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  font-family: Manrope, sans-serif;

  opacity: 0;
  transform: translateY(20px);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

#evo-chat-button {
  width: 68px;
  height: 68px;
  padding: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 35% 28%,
      rgba(63, 230, 255, 0.16),
      transparent 42%
    ),
    #07111f;

  border: 1px solid rgba(85, 223, 245, 0.24);
  border-radius: 50%;

  cursor: pointer;

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(63, 230, 255, 0.08),
    0 0 28px rgba(63, 230, 255, 0.18);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

#evo-chat-button:hover {
  transform: translateY(-3px) scale(1.05);

  border-color: rgba(85, 223, 245, 0.45);

  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(63, 230, 255, 0.16),
    0 0 38px rgba(63, 230, 255, 0.28);
}

#evo-chat-button:active {
  transform: translateY(-1px) scale(0.98);
}

#evo-chat-button img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
}

#evo-chat-window {
  width: min(390px, calc(100vw - 32px));
  height: min(590px, calc(100vh - 110px));
  margin-bottom: 16px;

  display: none;
  flex-direction: column;
  overflow: hidden;

  color: #eaf7ff;

  background:
    radial-gradient(
      circle at top right,
      rgba(35, 203, 225, 0.16),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(46, 132, 255, 0.08),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #0b1929 0%,
      #08121f 100%
    );

  border: 1px solid rgba(102, 221, 239, 0.18);
  border-radius: 22px;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 42px rgba(34, 199, 221, 0.07);

  animation:
    evo-window-open
    0.32s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.evo-header {
  min-height: 78px;
  padding: 14px 16px;

  display: flex;
  align-items: center;
  gap: 13px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      rgba(27, 198, 219, 0.13),
      transparent 48%
    ),
    rgba(5, 15, 27, 0.94);

  border-bottom:
    1px solid
    rgba(102, 221, 239, 0.11);

  backdrop-filter: blur(14px);
}

.evo-header img {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;

  display: block;
  object-fit: cover;

  border:
    1px solid
    rgba(85, 223, 245, 0.22);

  border-radius: 50%;

  box-shadow:
    0 0 0 4px
    rgba(85, 223, 245, 0.035),
    0 0 24px
    rgba(85, 223, 245, 0.16);
}

.evo-header h3 {
  margin: 0;

  color: #ffffff;

  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.evo-header span {
  display: block;
  margin-top: 4px;

  color: #8fa9bb;

  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

#evo-close {
  width: 38px;
  height: 38px;
  margin-left: auto;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #b9cfdd;
  background: rgba(255, 255, 255, 0.02);

  border: 1px solid transparent;
  border-radius: 11px;

  font-size: 27px;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

#evo-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.065);

  border-color: rgba(255, 255, 255, 0.07);

  transform: rotate(3deg);
}

.evo-body {
  flex: 1;
  overflow-y: auto;

  padding: 18px 20px 20px;

  scroll-behavior: smooth;
}

.evo-body::-webkit-scrollbar {
  width: 7px;
}

.evo-body::-webkit-scrollbar-track {
  background: transparent;
}

.evo-body::-webkit-scrollbar-thumb {
  background: rgba(143, 169, 187, 0.2);
  border-radius: 999px;
}

.evo-body::-webkit-scrollbar-thumb:hover {
  background: rgba(143, 169, 187, 0.32);
}

.evo-stage-hidden {
  display: none;
}

.evo-stage-visible {
  display: block;

  animation:
    evo-stage-enter
    0.42s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.evo-message {
  padding: 16px 17px;

  color: #dbeaf3;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.02)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.065);

  border-radius: 16px;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.025),
    0 10px 26px
    rgba(0, 0, 0, 0.12);
}

.evo-message strong {
  display: block;
  margin-bottom: 10px;

  color: #ffffff;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.evo-message p {
  margin: 0 0 12px;

  color: #b8cad6;

  font-size: 14px;
  line-height: 1.6;
}

.evo-message p:last-child {
  margin-bottom: 0;
}

.evo-typing {
  min-height: 72px;
  padding: 15px 16px;

  display: flex;
  align-items: center;
  gap: 12px;

  color: #dbeaf3;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.02)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.065);

  border-radius: 16px;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.025),
    0 10px 26px
    rgba(0, 0, 0, 0.12);

  animation:
    evo-stage-enter
    0.35s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.evo-typing__avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #04131b;

  background:
    linear-gradient(
      135deg,
      #6cf1f7 0%,
      #26cee2 58%,
      #35b9ef 100%
    );

  border-radius: 50%;

  font-size: 14px;
  font-weight: 900;

  box-shadow:
    0 8px 20px
    rgba(35, 200, 223, 0.2);
}

.evo-typing__dots {
  min-height: 16px;

  display: flex;
  align-items: center;
  gap: 5px;
}

.evo-typing__dots span {
  width: 7px;
  height: 7px;

  display: block;

  background: #5fe8f2;

  border-radius: 50%;

  opacity: 0.35;

  animation:
    evo-dot-pulse
    1.1s
    ease-in-out
    infinite;
}

.evo-typing__dots span:nth-child(2) {
  animation-delay: 0.14s;
}

.evo-typing__dots span:nth-child(3) {
  animation-delay: 0.28s;
}

.evo-typing small {
  display: block;
  margin-top: 5px;

  color: #8fa9bb;

  font-size: 11px;
  line-height: 1.3;
}

.evo-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 12px;

  margin-top: 18px;
}

.evo-shortcuts.evo-stage-visible {
  display: flex;
}

.evo-shortcuts button {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;

  color: #dcecf4;

  background:
    linear-gradient(
      90deg,
      rgba(29, 197, 221, 0.08),
      transparent 72%
    ),
    rgba(255, 255, 255, 0.032);

  border:
    1px solid
    rgba(87, 211, 231, 0.12);

  border-radius: 12px;

  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;

  cursor: pointer;

  opacity: 0;
  transform: translateY(8px);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.018);

  animation:
    evo-shortcut-enter
    0.34s
    ease
    forwards;

  transition:
    transform 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.evo-shortcuts button:nth-child(1) {
  animation-delay: 0.05s;
}

.evo-shortcuts button:nth-child(2) {
  animation-delay: 0.11s;
}

.evo-shortcuts button:nth-child(3) {
  animation-delay: 0.17s;
}

.evo-shortcuts button:nth-child(4) {
  animation-delay: 0.23s;
}

.evo-shortcuts button:nth-child(5) {
  animation-delay: 0.29s;
}

.evo-shortcuts button:hover {
  color: #ffffff;

  background:
    linear-gradient(
      90deg,
      rgba(29, 197, 221, 0.16),
      rgba(255, 255, 255, 0.045)
    );

  border-color:
    rgba(87, 211, 231, 0.28);

  transform: translateX(4px);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.03),
    0 8px 22px
    rgba(0, 0, 0, 0.13);
}

.evo-shortcuts button:active {
  transform:
    translateX(2px)
    scale(0.995);
}

.evo-user-message {
  max-width: 86%;
  margin: 14px 0 14px auto;
  padding: 12px 14px;

  color: #04131b;

  background:
    linear-gradient(
      135deg,
      #6cf1f7 0%,
      #26cee2 58%,
      #35b9ef 100%
    );

  border-radius:
    15px 15px 4px 15px;

  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;

  box-shadow:
    0 10px 24px
    rgba(35, 200, 223, 0.2);

  animation:
    evo-stage-enter
    0.3s
    ease;
}

.evo-assistant-message {
  max-width: 92%;
  margin: 14px auto 14px 0;
  padding: 14px 15px;

  color: #dbeaf3;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.025)
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.065);

  border-radius:
    15px 15px 15px 4px;

  font-size: 13px;
  line-height: 1.6;

  box-shadow:
    0 10px 26px
    rgba(0, 0, 0, 0.12);

  animation:
    evo-stage-enter
    0.34s
    ease;
}

.evo-input {
  display: flex;
  align-items: stretch;
  gap: 10px;

  padding: 14px 15px 15px;

  background:
    linear-gradient(
      180deg,
      rgba(4, 12, 21, 0.84),
      rgba(3, 10, 18, 0.94)
    );

  border-top:
    1px solid
    rgba(102, 221, 239, 0.1);

  backdrop-filter: blur(12px);
}

.evo-input input {
  min-width: 0;
  min-height: 48px;
  flex: 1;

  padding: 12px 13px;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.045);

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 12px;

  font: inherit;
  font-size: 13px;

  outline: none;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.evo-input input::placeholder {
  color: #7890a2;
}

.evo-input input:focus {
  background: rgba(255, 255, 255, 0.06);

  border-color:
    rgba(85, 223, 245, 0.5);

  box-shadow:
    0 0 0 3px
    rgba(85, 223, 245, 0.085),
    inset 0 1px 0
    rgba(255, 255, 255, 0.02);
}

.evo-input button {
  min-width: 74px;
  min-height: 48px;
  padding: 0 16px;

  color: #03121a;

  background:
    linear-gradient(
      135deg,
      #6cf1f7 0%,
      #26cee2 58%,
      #35b9ef 100%
    );

  border: none;
  border-radius: 12px;

  font: inherit;
  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 10px 24px
    rgba(35, 200, 223, 0.22),
    inset 0 1px 0
    rgba(255, 255, 255, 0.32);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.evo-input button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);

  box-shadow:
    0 13px 30px
    rgba(35, 200, 223, 0.3),
    inset 0 1px 0
    rgba(255, 255, 255, 0.38);
}

.evo-input button:active {
  transform:
    translateY(0)
    scale(0.98);
}

#evo-chat-button:focus-visible,
#evo-close:focus-visible,
.evo-shortcuts button:focus-visible,
.evo-input input:focus-visible,
.evo-input button:focus-visible {
  outline: 2px solid #55dff5;
  outline-offset: 3px;
}

@keyframes evo-window-open {
  from {
    opacity: 0;
    transform:
      translateY(16px)
      scale(0.975);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes evo-stage-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes evo-shortcut-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes evo-dot-pulse {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@media (max-width: 640px) {
  #evo-chat {
    right: 14px;
    bottom: 14px;
  }

  #evo-chat-button {
    width: 60px;
    height: 60px;
  }

  #evo-chat-window {
    width: calc(100vw - 28px);
    height: min(590px, calc(100vh - 92px));
    margin-bottom: 12px;

    border-radius: 18px;
  }

  .evo-header {
    min-height: 72px;
    padding: 12px 14px;
  }

  .evo-header img {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .evo-body {
    padding: 16px;
  }

  .evo-shortcuts {
    gap: 10px;
  }

  .evo-input {
    padding: 12px;
  }

  .evo-input input {
    min-height: 46px;
  }

  .evo-input button {
    min-width: 68px;
    min-height: 46px;
    padding: 0 13px;
  }
}

@media (max-height: 650px) {
  #evo-chat-window {
    height: calc(100vh - 90px);
  }
}