.app-feedback-stack {
  position: fixed; z-index: 100; top: calc(4rem + env(safe-area-inset-top, 0px));
  right: 1rem; left: 1rem; display: grid; gap: 1rem; pointer-events: none;
  max-height: calc(100dvh - 6rem); overflow-y: auto; padding: .25rem;
}
.app-feedback {
  --feedback-success: #285337; --feedback-error: #8b3030; --feedback-card: #f1f8f1;
  display: flex; align-items: flex-start; gap: 1rem; width: 100%; margin-left: auto;
  padding: 1.5rem; border: 2px solid currentColor; border-left-width: 7px; border-radius: .8rem;
  background: var(--feedback-card); box-shadow: 0 12px 32px #15151530;
  color: var(--feedback-success); font: 1rem/1.6 system-ui, sans-serif;
  pointer-events: auto; overflow-wrap: anywhere;
}
.app-feedback-error { --feedback-card: #fff2ef; color: var(--feedback-error); }
.app-feedback-icon { display: flex; flex: 0 0 36px; padding-top: .15rem; }
.app-feedback-icon svg { width: 36px; height: 36px; }
.app-feedback-copy { flex: 1; min-width: 0; }
.app-feedback-copy strong { display: block; font-size: 1.125rem; margin-bottom: .25rem; }
.app-feedback p { margin: 0; }
.app-feedback button { flex-shrink: 0; min-width: 44px; min-height: 44px; cursor: pointer; font-size: 1.8rem; background: transparent; border: 0; color: inherit; }
.app-feedback button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
@media (min-width: 700px) {
  .app-feedback-stack { left: auto; right: 2rem; width: min(42rem, calc(100vw - 4rem)); }
}
@media (max-width: 450px) {
  .app-feedback { padding: 1rem; gap: .65rem; }
  .app-feedback-icon { flex-basis: 28px; }.app-feedback-icon svg { width: 28px; height: 28px; }
}