@layer layout {
#flash {
  width: 100%;
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  display: flex;
  justify-content: center;
  z-index: var(--z-index-50);
  /* The overlay strip must never swallow clicks meant for the page beneath —
     only the message boxes themselves are interactive. */
  pointer-events: none;
  --start-translate: -100%; /* Start from above */
  animation: slideDownUp 5s cubic-bezier(.17,.67,.24,.99) forwards;

  &:empty {
    display: none;
  }

  .content {
    pointer-events: auto;
  }

  * {
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
  }

  .content {
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-md);
    font-weight: var(--font-weight-semibold);
    border: var(--border-width) solid transparent;
  }

  .notice {
    background-color: var(--status-approved-bg);
    color: var(--status-approved-fg);
    border-color: var(--status-approved-border);
  }

  .alert,
  .error {
    background-color: var(--status-rejected-bg);
    color: var(--status-rejected-fg);
    border-color: var(--status-rejected-border);
  }

  .copied {
    position: absolute;
    bottom: 100%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background-color: var(--status-approved-bg);
    color: var(--status-approved-fg);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: all var(--transition-normal) ease-out;

    .show {
      opacity: 1;
      bottom: calc(100% + 20px);
    }

    .hide {
      opacity: 0;
      bottom: calc(100% + 40px);
    }
  }

  .message {
    margin-inline-end: var(--spacing-4);
    display: flex;
    align-items: center;
  }

  .close {
    position: relative;
    top: 0;
    inset-inline-end: 0;
    max-width: var(--spacing-4);
  }
}

@keyframes slideDownUp {
  0% {
    transform: translateY(var(--start-translate));
  }
  10% {
    transform: translateY(1rem);
  }
  80% {
    transform: translateY(1rem);
    opacity: 1;
  }
  100% {
    transform: translateY(var(--start-translate));
    opacity: 0;
  }
}
}