#toast-container {
    position: fixed;
    bottom: calc(var(--spacing-xl, 24px) + var(--feedback-keyboard-offset, 0px));
    right: var(--spacing-xl, 24px);
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 8px);
    max-height: calc(var(--feedback-viewport-height, 100dvh) - 32px);
    overflow-y: auto;
    pointer-events: none;
}

#toast-container .toast {
    flex-shrink: 0;
    box-sizing: border-box;
    color: #f8fafc;
    background: #172033;
    line-height: 1.5;
    white-space: normal;
    pointer-events: auto;
}

#toast-container[popover] {
    top: auto;
    left: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    width: max-content;
    max-width: calc(100vw - 32px);
    height: auto;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 16px);
    padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
    background: var(--bg-card, #172033);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-xl, 0 12px 40px #0006);
    border-left: 4px solid var(--color-primary, #38bdf8);
    animation: lobbyToastSlideIn 0.3s ease;
    min-width: min(300px, calc(100vw - 32px));
    max-width: min(460px, calc(100vw - 32px));
    backdrop-filter: blur(10px);
}

#toast-container .toast-message {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

#toast-container .toast-message a {
    color: #93c5fd;
    text-decoration: underline;
}

#toast-container .toast-close {
    flex: none;
    align-self: flex-start;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
}

#toast-container .toast-close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.toast-success {
    border-left-color: var(--color-success, #4ade80);
}

.toast-error {
    border-left-color: var(--color-danger, #fb7185);
}

.toast-warning {
    border-left-color: var(--color-warning, #fbbf24);
}

.toast.is-dismissing { animation: lobbyToastSlideIn 0.3s ease reverse; }
@keyframes lobbyToastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}


@media (max-width: 768px) {
    #toast-container {
        left: var(--spacing-md, 16px);
        right: var(--spacing-md, 16px);
        bottom: calc(max(var(--spacing-md, 16px), env(safe-area-inset-bottom)) + var(--feedback-keyboard-offset, 0px));
    }
    #toast-container[popover] { left: 16px; right: 16px; width: auto; }

    body:has([data-mobile-bottom-nav]) #toast-container {
        bottom: calc(96px + env(safe-area-inset-bottom) + var(--feedback-keyboard-offset, 0px));
        max-height: calc(var(--feedback-viewport-height, 100dvh) - 112px - env(safe-area-inset-bottom));
    }
    body.mobile-bottom-nav-keyboard-open #toast-container {
        bottom: calc(16px + var(--feedback-keyboard-offset, 0px));
    }
    
    .toast {
        min-width: auto;
        width: 100%;
    }
    
}