.report-toast {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  z-index: 10000;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 12px;
  width: min(390px, calc(100vw - 32px));
  min-height: 82px;
  padding: 16px 14px 18px 16px;
  overflow: hidden;
  border: 1px solid #b9d9c8;
  border-radius: 16px;
  color: #153d32;
  background: #fffefa;
  box-shadow: 0 18px 48px rgba(18, 54, 41, .19), 0 2px 8px rgba(18, 54, 41, .08);
  animation: report-toast-in .3s ease-out both;
}

.report-toast-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  background: #23805c;
  box-shadow: 0 5px 12px rgba(35, 128, 92, .22);
}

.report-toast-icon svg { width: 22px; height: 22px; }
.report-toast-copy { display: grid; gap: 3px; min-width: 0; }
.report-toast-copy strong { font-size: .9rem; line-height: 1.3; }
.report-toast-copy small { color: #66766f; font-size: .72rem; line-height: 1.35; }

.report-toast-close {
  display: grid;
  place-items: center;
  align-self: start;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #66766f;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.report-toast-close:hover,
.report-toast-close:focus-visible { color: #153d32; background: #e8f2eb; }
.report-toast-close:focus-visible { outline: 2px solid #23805c; outline-offset: 2px; }

.report-toast-timer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: #23805c;
  transform-origin: left;
  animation: report-toast-timer 10s linear both;
}

@keyframes report-toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes report-toast-timer { to { transform: scaleX(0); } }

@media (max-width: 640px) {
  .report-toast { top: max(12px, env(safe-area-inset-top)); right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .report-toast, .report-toast-timer { animation: none; }
}

dialog.report-toast-dialog {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  bottom: auto;
  left: auto;
  width: min(390px, calc(100vw - 32px));
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

dialog.report-toast-dialog::backdrop { background: rgba(12, 27, 23, .22); }
dialog.report-toast-dialog > form[hidden] { display: none; }
dialog.report-toast-dialog > .report-toast {
  position: relative;
  top: auto;
  right: auto;
  width: 100%;
}

@media (max-width: 640px) {
  dialog.report-toast-dialog {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
  }
}