@layer components {
  .hd-toast {
    position: fixed;
    bottom: calc(60px + var(--hd-space-3));
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--hd-z-toast);
    display: inline-flex;
    align-items: center;
    gap: var(--hd-space-2);
    max-width: min(90vw, 28rem);
    padding: var(--hd-space-2) var(--hd-space-4);
    color: var(--hd-text-primary);
    background: var(--hd-surface-3);
    border: 1px solid var(--hd-accent-primary);
    border-radius: var(--hd-radius-md);
    box-shadow: var(--hd-shadow-md);
    font-size: var(--hd-text-ui-small);
    line-height: var(--hd-leading-normal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--hd-motion-fast) ease;
  }

  .hd-toast--visible {
    opacity: 1;
  }

  .hd-toast--anchored {
    top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--hd-space-2));
    bottom: auto;
    padding: var(--hd-space-2) var(--hd-space-3);
    background: var(--hd-surface-2, var(--hd-surface-1));
    border-color: var(--hd-border-subtle);
    font-size: var(--hd-text-small);
    opacity: 1;
    pointer-events: auto;
    animation: hd-toast-in var(--hd-motion-normal) var(--hd-ease-ui, ease-out);
    transition: none;
  }

  .hd-toast--above {
    position: absolute;
    top: auto;
    right: auto;
    bottom: calc(100% + var(--hd-space-2));
    left: 50%;
    transform: translateX(-50%);
  }

  .hd-toast--corner {
    position: fixed;
    top: calc(var(--hd-visual-viewport-offset-top, 0px) + var(--hd-space-3));
    right: var(--hd-space-3);
    bottom: auto;
    left: auto;
    transform: none;
    max-width: min(90vw, 22rem);
    padding: var(--hd-space-2) var(--hd-space-4);
    background: var(--hd-surface-2, var(--hd-surface-1));
    border-color: var(--hd-border-subtle);
    opacity: 1;
    animation: hd-toast-corner-in var(--hd-motion-normal) var(--hd-ease-ui, ease-out);
    transition: none;
  }

  .hd-toast--corner.hd-toast--out {
    animation: hd-toast-corner-out var(--hd-motion-normal) var(--hd-ease-ui, ease-out) forwards;
  }

  .hd-toast--html .hd-toast__text {
    white-space: normal;
  }

  .hd-toast--out {
    animation: hd-toast-out var(--hd-motion-normal) var(--hd-ease-ui, ease-out) forwards;
  }

  .hd-toast__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hd-accent-primary);
  }

  .hd-toast__text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .hd-toast-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  @keyframes hd-toast-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }

  @keyframes hd-toast-out {
    from { opacity: 1; transform: translate(-50%, 0); }
    to { opacity: 0; transform: translate(-50%, -6px); }
  }

  @keyframes hd-toast-corner-in {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @keyframes hd-toast-corner-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(0, -6px, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hd-toast {
      transition: none;
    }
    .hd-toast--anchored,
    .hd-toast--corner,
    .hd-toast--corner.hd-toast--out,
    .hd-toast--out {
      animation: none;
    }
  }
}