ava-composer { display: block; position: relative; width: 100%; }

ava-composer > form {
  background:
    radial-gradient(90% 140% at 50% -40%, var(--glass-hl), transparent 60%),
    var(--glass),
    var(--glass-plate);
  border-color: transparent;
  box-shadow:
    var(--glass-rim),
    0 0 0 1px var(--glass-edge),
    0 12px 28px -18px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: box-shadow var(--dur-medium) var(--ease-out);
}
ava-composer > form:hover { border-color: transparent; }
ava-composer > form:focus-within {
  border-color: transparent;
  box-shadow:
    var(--glass-rim),
    0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent),
    0 14px 32px -16px color-mix(in srgb, var(--accent) 70%, transparent);
}

.ava-send {
  --s: calc(32 * var(--u, 1px));
  position: relative;
  flex: none;
  display: grid;
  width: var(--s);
  height: var(--s);
}

.ava-send-goo {
  position: absolute;
  inset: -80px -10px 0 -10px;
  filter: url(#ava-goo);
  pointer-events: none;
}
.ava-send-goo i { position: absolute; border-radius: 50%; background: var(--accent); }
.ava-send-goo .ava-send-base {
  right: 10px;
  bottom: 0;
  width: var(--s);
  height: var(--s);
  transition: transform .45s var(--ease-spring), opacity .2s;
}
.ava-send-goo .ava-send-drop {
  right: calc(10px + var(--s) / 2 - 10px);
  bottom: calc(var(--s) / 2 - 10px);
  width: 20px;
  height: 20px;
  opacity: 0;
}
ava-composer[empty] .ava-send-base { transform: scale(.3); opacity: 0; }

.ava-send > button[type="submit"] {
  position: relative;
  width: var(--s);
  height: var(--s);
  color: var(--accent-ink);
  background: none;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: color var(--dur-short), box-shadow var(--dur-short), scale .18s var(--ease-out);
}
.ava-send > button[type="submit"]:hover:not(:disabled) { color: var(--accent-ink); background: none; }
.ava-send > button[type="submit"]:active:not(:disabled) { scale: .9; }
ava-composer[empty] .ava-send > button[type="submit"] { color: var(--muted); box-shadow: none; }
ava-composer[empty] .ava-send > button[type="submit"]:hover:not(:disabled) { color: var(--accent-deep); background: var(--ava-tint); }

.syn-echo-msg.is-me.is-arriving { animation-name: ava-bubble-born; }
@keyframes ava-bubble-born {
  0% { transform: scale(.2, .3); opacity: .6; filter: blur(3px); }
  60% { transform: scale(1.03, .97); opacity: 1; filter: blur(0); }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ava-send-goo .ava-send-base, .ava-send > button[type="submit"] { transition-duration: 1ms; }
  .syn-echo-msg.is-me.is-arriving { animation-name: none; }
}

ava-composer > form.is-offline { outline: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent); outline-offset: -1.5px; }