.autosave-field {
  position: relative;
}

.autosave-feedback {
  position: absolute;
  z-index: 3;
  top: var(--autosave-feedback-top, 50%);
  right: var(--autosave-feedback-right, .85rem);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef3e4;
  color: #55704f;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.65);
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.autosave-feedback[data-state="saving"] {
  opacity: 1;
  animation: autosave-pulse .8s ease-in-out infinite alternate;
}

.autosave-feedback[data-state="saved"] {
  background: #214d3e;
  color: #fff;
  opacity: 1;
  animation: autosave-check-pop .5s cubic-bezier(.2, 1.7, .45, 1) both;
}

.autosave-feedback[data-state="error"] {
  background: #fff0e8;
  color: #a63f35;
  opacity: 1;
  animation: autosave-check-pop .35s ease-out both;
}

.autosave-message {
  position: fixed;
  z-index: 1000;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 15px;
  border: 1px solid #d99579;
  border-radius: 12px;
  box-shadow: 0 14px 36px #173d3129;
  background: #fff0e8;
  color: #8b351b;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

@keyframes autosave-pulse {
  to { opacity: .5; transform: translateY(-50%) scale(.82); }
}

@keyframes autosave-check-pop {
  0% { opacity: 0; transform: translateY(-50%) scale(.3) rotate(-18deg); }
  70% { transform: translateY(-50%) scale(1.18) rotate(3deg); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .autosave-feedback { animation: none !important; }
}