/* Vuexy-native transient feedback. Runtime JavaScript only creates semantic
   markup; every visual decision remains inside the controlled CSS cascade. */
@layer vuexy-modal-system {
  body.v2-body .v2-interaction-announcer {
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.v2-body .portal-toast-region.toast-container {
    position: fixed;
    z-index: var(--v2-z-toast, 1080);
    inset-block-start: max(5rem, calc(env(safe-area-inset-top) + 4rem));
    inset-inline-end: max(1rem, env(safe-area-inset-right));
    display: grid;
    width: min(22.5rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 6rem - env(safe-area-inset-bottom));
    gap: 0.75rem;
    overflow: hidden auto;
    overscroll-behavior: contain;
    pointer-events: none;
  }

  body.v2-body .portal-toast.toast {
    --v2-toast-accent: var(--vuexy-info);
    position: relative;
    display: grid;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0.85rem;
    overflow: hidden;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--v2-toast-accent) 30%, var(--vuexy-border));
    border-radius: var(--vuexy-radius);
    color: var(--vuexy-text);
    background: var(--vuexy-card);
    box-shadow: var(--vuexy-shadow);
    opacity: 1;
    pointer-events: auto;
  }

  body.v2-body .portal-toast::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.2rem;
    background: var(--v2-toast-accent);
    content: "";
  }

  body.v2-body .portal-toast--departure { --v2-toast-accent: var(--vuexy-warning); }
  body.v2-body .portal-toast--arrival,
  body.v2-body .portal-toast--completion { --v2-toast-accent: var(--vuexy-success); }
  body.v2-body .portal-toast--exception { --v2-toast-accent: var(--vuexy-danger); }

  body.v2-body .portal-toast__icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--v2-toast-accent);
    background: color-mix(in srgb, var(--v2-toast-accent) 12%, transparent);
  }

  body.v2-body .portal-toast__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.v2-body .portal-toast__icon svg circle[r="2"] {
    fill: currentColor;
    stroke: none;
  }

  body.v2-body .portal-toast__copy {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
  }

  body.v2-body .portal-toast__eyebrow {
    color: var(--v2-toast-accent);
    font-size: 0.72rem;
    font-weight: 500;
  }

  body.v2-body .portal-toast__copy strong,
  body.v2-body .portal-toast__copy > span:last-child:not(.portal-toast__eyebrow) {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.v2-body .portal-toast__copy strong {
    color: var(--vuexy-heading);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
  }

  body.v2-body .portal-toast__copy > span:last-child:not(.portal-toast__eyebrow) {
    color: var(--vuexy-muted);
    font-size: 0.8rem;
    line-height: 1.4;
  }

  body.v2-body .portal-toast__action.btn,
  body.v2-body .portal-toast__close.close {
    display: inline-grid;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    border-radius: var(--vuexy-radius);
  }

  body.v2-body .portal-toast__action.btn {
    padding: 0.45rem 0.65rem;
    border-color: color-mix(in srgb, var(--v2-toast-accent) 35%, transparent);
    color: var(--v2-toast-accent);
    background: color-mix(in srgb, var(--v2-toast-accent) 10%, transparent);
    font-size: 0.8rem;
    font-weight: 500;
  }

  body.v2-body .portal-toast__close.close {
    border: 0;
    color: var(--vuexy-muted);
    background: transparent;
    font-size: 1.25rem;
  }

  body.v2-body .notification-badge-pulse,
  body.v2-body .interaction-pulse,
  body.v2-body .is-state-change {
    animation: v2-vuexy-interaction-pulse 700ms ease-out both;
  }

  body.v2-body .notification-bell-ring {
    animation: v2-vuexy-bell-ring 680ms ease-out both;
    transform-origin: 50% 10%;
  }

  body.v2-body .is-ui-flipping { will-change: transform; }

  @media (prefers-reduced-motion: no-preference) {
    body.v2-body .portal-toast { animation: v2-vuexy-toast-enter 180ms ease-out both; }
    body.v2-body .portal-toast.is-leaving { animation: v2-vuexy-toast-exit 150ms ease-in both; }
  }

  @media (max-width: 600px) {
    body.v2-body .portal-toast-region.toast-container {
      inset: auto 0.75rem max(0.75rem, env(safe-area-inset-bottom)) 0.75rem;
      width: auto;
      max-height: min(68dvh, 35rem);
    }

    body.v2-body .portal-toast.toast {
      grid-template-columns: 2.375rem minmax(0, 1fr) auto;
    }

    body.v2-body .portal-toast__action.btn {
      grid-column: 2;
      justify-self: start;
    }

    body.v2-body .portal-toast__close.close {
      grid-row: 1 / span 2;
      grid-column: 3;
    }
  }

  @keyframes v2-vuexy-toast-enter {
    from { opacity: 0; transform: translate3d(0.75rem, -0.25rem, 0); }
    to { opacity: 1; transform: none; }
  }

  @keyframes v2-vuexy-toast-exit {
    to { opacity: 0; transform: translate3d(0.75rem, 0, 0); }
  }

  @keyframes v2-vuexy-interaction-pulse {
    0%, 100% { transform: none; }
    42% { transform: scale(1.08); }
  }

  @keyframes v2-vuexy-bell-ring {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(14deg); }
    55% { transform: rotate(-11deg); }
    78% { transform: rotate(6deg); }
  }
}