/* Toast notifications (ToastHost.razor).
   A fixed stack in the top-inline-end corner, below the 52px top bar.
   Colours come straight from the design tokens so the stack re-themes with
   the rest of the chrome (dark / light / hicontrast) automatically. */

.ms-toast-container {
    position: fixed;
    top: 60px;                 /* clears the 52px top bar + a little gap */
    inset-inline-end: 16px;
    z-index: 1200;             /* above modals (z 100) and the map HUD */
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;      /* let clicks fall through the gaps */
}

.ms-toast {
    pointer-events: auto;      /* but the cards themselves are interactive */
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--ms-panel);
    color: var(--ms-text);
    border: 1px solid var(--ms-panel-border);
    border-inline-start: 3px solid var(--ms-accent);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    font-size: 12px;
    line-height: 1.4;
    animation: ms-toast-in 180ms ease-out;
}

/* Level accent on the leading edge + the close glyph. */
.ms-toast-info    { border-inline-start-color: var(--ms-accent); }
.ms-toast-success { border-inline-start-color: var(--ms-ok); }
.ms-toast-warning { border-inline-start-color: var(--ms-warn); }
.ms-toast-error   { border-inline-start-color: var(--ms-alert); }

.ms-toast-msg {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.ms-toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--ms-text-dim);
    cursor: var(--ms-cursor-pointer);
    font-size: 12px;
    line-height: 1;
    padding: 2px 4px;
}
.ms-toast-close:hover { color: var(--ms-text); }

/* Slide + fade in from the inline-end edge. RTL flips the offset sign so the
   card always enters from the side the stack is anchored to. */
@keyframes ms-toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
html[dir="rtl"] .ms-toast { animation-name: ms-toast-in-rtl; }
@keyframes ms-toast-in-rtl {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

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