#toastContainer {
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
    transform: translateX(-50%);
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
    z-index: 100000;
    pointer-events: none;
}

html.has-banner #toastContainer {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 130px);
}

.toast {
    padding: 12px 20px;
    border-radius: 24px;
    background: #323232;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: 0 3px 8px rgb(0 0 0 / 18%);
    animation: toastAppear 160ms ease-out;
}

@keyframes toastAppear {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

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