.fx-send-button {
  --send-primary: #9d72ff;
  --send-primary-soft: #d39bff;
  --send-surface: #160d27;
  --send-surface-2: #24143d;
  --send-radius: 14px;
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 18px 26px;
  border: 1px solid rgba(211, 155, 255, .38);
  border-radius: var(--send-radius);
  color: #f8f4ff;
  background: linear-gradient(145deg, var(--send-surface-2), var(--send-surface));
  box-shadow: 0 14px 30px rgba(3, 1, 10, .34), inset 0 1px rgba(255,255,255,.1);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform 400ms cubic-bezier(.175,.885,.32,1.275), border-color 300ms ease, box-shadow 300ms ease;
}

.fx-send-button::before {
  position: absolute;
  inset: 6px;
  z-index: -1;
  content: "";
  border-radius: calc(var(--send-radius) - 5px);
  background: linear-gradient(100deg, rgba(82,39,255,.68), rgba(151,72,255,.72) 48%, rgba(255,159,252,.55));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 -8px 18px rgba(25,5,55,.36);
  transition: filter 300ms ease, transform 300ms ease;
}

.fx-send-button:hover {
  border-color: rgba(239,218,255,.75);
  box-shadow: 0 19px 38px rgba(82,39,255,.28), 0 0 24px rgba(255,159,252,.12), inset 0 1px rgba(255,255,255,.12);
  transform: translateY(-2px) scale(1.01);
}
.fx-send-button:hover::before { filter: brightness(1.12); transform: scale(1.01); }
.fx-send-button:active { transform: scale(.985); }
.fx-send-button:focus-visible { outline: 2px solid #d9b8ff; outline-offset: 4px; }
.fx-send-button:disabled { cursor: wait; }

.fx-send-outline {
  position: absolute;
  inset: -2px;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 300ms ease;
}
.fx-send-outline::before {
  position: absolute;
  inset: -180%;
  content: "";
  background: conic-gradient(from 180deg, transparent 60%, #ff9ffc 78%, #8b6cff 89%, transparent 100%);
  animation: fx-send-spin 2.5s linear infinite paused;
}
.fx-send-button:hover .fx-send-outline,
.fx-send-button:focus-visible .fx-send-outline { opacity: 1; }
.fx-send-button:hover .fx-send-outline::before,
.fx-send-button:focus-visible .fx-send-outline::before { animation-play-state: running; }

.fx-send-state {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.fx-send-icon { display: grid; place-items: center; transition: transform 300ms ease; }
.fx-send-icon svg { overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-send-icon::before {
  position: absolute;
  top: 50%;
  right: 100%;
  width: 0;
  height: 2px;
  content: "";
  background: linear-gradient(to left, rgba(255,255,255,.75), transparent);
}
.fx-send-button:hover .fx-send-state--default .fx-send-icon { transform: rotate(42deg) scale(1.12); }

.fx-send-letters { display: flex; }
.fx-send-letters > span:not(.fx-send-space) { display: block; animation: fx-send-land 600ms ease both calc(var(--i) * 25ms); }
.fx-send-button:hover .fx-send-letters > span:not(.fx-send-space) { animation: fx-send-wave 500ms ease both calc(var(--i) * 22ms); }

.fx-send-state--sent {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.8);
}
.fx-send-button.is-sending .fx-send-state--default .fx-send-icon { animation: fx-send-takeoff 800ms ease forwards; }
.fx-send-button.is-sending .fx-send-state--default .fx-send-icon::before { animation: fx-send-contrail 800ms ease forwards; }
.fx-send-button.is-sending .fx-send-letters { opacity: .55; }
.fx-send-button.is-sent .fx-send-state--default { opacity: 0; transform: translateY(-12px); }
.fx-send-button.is-sent .fx-send-state--sent { animation: fx-send-appear 650ms cubic-bezier(.175,.885,.32,1.275) forwards; }
.fx-send-button.is-sent::before { background: linear-gradient(100deg, #5332ba, #7c5ce0 52%, #ad77e8); }

@keyframes fx-send-spin { to { transform: rotate(360deg); } }
@keyframes fx-send-wave {
  0%,100% { transform: translateY(0); color: #fff; }
  48% { transform: translateY(-5px); color: #f4c5ff; }
}
@keyframes fx-send-land {
  from { opacity: 0; transform: translateY(-10px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes fx-send-takeoff {
  0% { opacity: 1; transform: rotate(42deg) scale(1.1); }
  70% { opacity: 1; transform: translate(95px,-12px) rotate(42deg) scale(1.7); }
  100% { opacity: 0; transform: translate(180px,-22px) rotate(42deg) scale(.2); }
}
@keyframes fx-send-contrail {
  0% { width: 0; opacity: 1; }
  60% { width: 95px; opacity: .75; }
  100% { width: 155px; opacity: 0; }
}
@keyframes fx-send-appear {
  0% { opacity: 0; transform: translateY(14px) scale(.65) rotate(-8deg); filter: blur(4px); }
  65% { opacity: 1; transform: translateY(0) scale(1.12); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-send-button,
  .fx-send-button::before,
  .fx-send-outline,
  .fx-send-outline::before,
  .fx-send-icon,
  .fx-send-letters > span { animation: none!important; transition: none!important; }
}