/* src/client/styles/domain/feedback-form.css */
.feedback-form-container {
  position: fixed;
  bottom: var(--size-medium);
  right: var(--size-medium);
  z-index: 1000;
}

.feedback-toggle {
  background: var(--color-primary);
  color: var(--color-background);
}

.feedback-toggle:hover {
  background: var(--color-accent);
}

.feedback-modal {
  position: fixed;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  display: flex;
  z-index: 1001;
  opacity: 0;
  justify-content: center;
  align-items:  center;
  width: 0%;
  height: 0%;
  transition: opacity .3s;
  top: 0;
  left: 0;
}

.feedback-modal.active {
  opacity: 1;
  width: 100%;
  height: 100%;
}

.feedback-modal-content {
  background: color-mix(in srgb, var(--color-background), var(--color-primary) 2%);
  border-radius: var(--size-small);
  overflow-y: auto;
  box-shadow: 0 var(--size-medium) var(--size-large) color-mix(in srgb, var(--color-primary) 20%, transparent);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  padding: 0;
  transition: transform .3s;
  transform: scale(.9);
}

.feedback-modal.active .feedback-modal-content {
  transform: scale(1);
}

.feedback-header, .feedback-form, .feedback-confirmation {
  padding: var(--size-large);
  display: flex;
}

:is(.feedback-header, .feedback-form, .feedback-confirmation).is-hidden {
  display: none;
}

.feedback-header {
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary), var(--color-background) 80%);
  padding-top: var(--size-medium);
  padding-bottom: var(--size-medium);
  justify-content: space-between;
  align-items: baseline;
}

.feedback-close {
  font-size: var(--size-large);
  color: var(--color-secondary);
  cursor: pointer;
  width: var(--size-large);
  height: var(--size-large);
  display: flex;
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items:  center;
  padding: 0;
  transition: color .2s;
}

.feedback-close:hover {
  color: var(--color-accent);
}

.feedback-form, .feedback-confirmation {
  gap: var(--size-medium-large);
  flex-direction: column;
}

.feedback-confirmation {
  align-items:  center;
}

.feedback-confirmation p {
  color: var(--color-secondary);
}

.feedback-form textarea#message {
  resize: vertical;
}

.form-help {
  display: block;
  margin-top: var(--size-extra-small);
  font-size: var(--size-text-small);
  color: var(--color-text-secondary);
}

.feedback-confirmation .icon {
  fill: var(--color-text-secondary);
  width: 3rem;
  height: 3rem;
}

.feedback-confirmation .confirmation-message {
  display: flex;
  flex-direction: column;
  align-items:  center;
}

.feedback-confirmation .confirmation-action {
  margin-top: var(--size-medium);
}

#feedback-submit {
  transition: transform .3s;
}

#feedback-submit .icon {
  transform: translateX(-1px)translateY(1px);
}

#feedback-submit:hover .icon {
  transform: translateX(-2px)translateY(2px)scale(1.1);
}

#feedback-submit:active .icon {
  transform: translateX(1px)translateY(-1px)scale(.9);
}

#feedback-submit.sending .icon {
  animation: fly-pulse 1.75s linear infinite;
  fill: var(--color-background);
}

@keyframes fly-pulse {
  0% {
    transform: translateX(1px)translateY(-1px)scale(.9);
  }

  10% {
    transform: translateX(4px)translateY(-4px)scale(.8);
  }

  15% {
    transform: translateX(3px)translateY(-5px)scale(.6);
  }

  20% {
    transform: translateX(0)translateY(-6px)scale(.5);
  }

  30% {
    transform: translateX(-5px)translateY(-8px)scale(.4);
  }

  40% {
    transform: translateX(-8px)translateY(-7px)scale(.3);
  }

  50% {
    transform: translateX(-10px)translateY(-6px)scale(.2);
  }

  60% {
    transform: translateX(-12px)translateY(-3px)scale(.1);
  }

  70% {
    transform: translateX(-14px)translateY(0)scale(.2);
  }

  80% {
    transform: translateX(-16px)translateY(1px)scale(.3);
  }

  85% {
    transform: translateX(-18px)translateY(4px)scale(.4);
  }

  90% {
    transform: translateX(-12px)translateY(8px)scale(.7);
  }

  95% {
    transform: translateX(-6px)translateY(8px)scale(1.2);
  }

  100% {
    transform: translateX(-1px)translateY(1px)scale(.9);
  }
}

@media (max-width: 768px) {
  .feedback-toggle {
    padding: var(--size-small-medium) var(--size-medium);
    font-size: var(--size-text-small);
  }

  .feedback-modal-content {
    margin: var(--size-medium-large);
    width: 95%;
  }

  .feedback-header, .feedback-form, .feedback-confirmation {
    padding: var(--size-medium);
  }
}

/* src/client/styles/feedback.css */