@charset "utf-8";

/* ────────────────────────────────────────────────────
   Toast container — bottom-right stack
──────────────────────────────────────────────────── */
.fluent-toast-container,
#cpToastContainer {
    position: fixed;
    right: 24px;
    bottom: 88px;
    z-index: 2500;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.fluent-toast,
.cp-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px 14px;
    border-radius: 8px;
    background: var(--nb1);
    border: 1px solid var(--ns2);
    box-shadow: 0 4px 12px var(--scrim-light);
    color: var(--nf1);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 160ms cubic-bezier(.33,0,.67,1), transform 160ms cubic-bezier(.33,0,.67,1);
    overflow: hidden;
}

.fluent-toast.is-visible,
.cp-toast.is-visible { opacity: 1; transform: translateY(0); }
.fluent-toast.is-leaving,
.cp-toast.is-leaving { opacity: 0; transform: translateY(-6px); }

.fluent-toast-icon,
.cp-toast-icon {
    width: 22px; min-width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; line-height: 1;
    flex-shrink: 0;
    background: var(--sel-bg);
    color: var(--brand-fg);
}

.fluent-toast-content,
.cp-toast-content {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}

.fluent-toast-title,
.cp-toast-title {
    font-size: 14px; font-weight: 600; line-height: 20px; color: var(--nf1);
}
.fluent-toast-message,
.cp-toast-message {
    font-size: 13px; line-height: 18px; color: var(--nf2); word-wrap: break-word;
}

.cp-toast-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cp-toast-action {
    height: 28px; padding: 0 10px;
    border-radius: 4px; border: 1px solid var(--ns1);
    background: var(--nb1); color: var(--nf1);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cp-toast-action:hover { background: var(--nb1-hover); border-color: var(--brand-fg); color: var(--brand-fg); }
.cp-toast-action.is-primary {
    background: var(--brand-80); border-color: var(--brand-fg); color: var(--nf-on-brand);
}
.cp-toast-action.is-primary:hover { background: var(--brand-90); border-color: var(--brand-90); }

.cp-toast-close {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px;
    border: none; background: transparent; border-radius: 4px;
    color: var(--nf3); font-size: 14px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.cp-toast-close:hover { background: var(--nb1-hover); color: var(--nf1); }

/* Independent CSS-driven progress bar */
.cp-toast-progress {
    position: absolute; left: 0; bottom: 0;
    height: 3px; width: 100%;
    background: var(--sel-bg);
    overflow: hidden;
}
.cp-toast-progress-fill {
    height: 100%; width: 100%;
    background: var(--brand-80);
    transform-origin: left center;
    transform: scaleX(0);
    animation: cpToastTick var(--cp-toast-duration, 4000ms) linear forwards;
}
.cp-toast.is-paused .cp-toast-progress-fill { animation-play-state: paused; }
@keyframes cpToastTick { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.fluent-toast[data-kind="success"] .fluent-toast-icon,
.cp-toast[data-variant="success"] .cp-toast-icon {
    background: color-mix(in srgb, var(--success, #107c10) 18%, transparent);
    color: var(--success, #107c10);
}
.cp-toast[data-variant="success"] .cp-toast-progress-fill { background: var(--success, #107c10); }
.cp-toast[data-variant="success"] { border-left: 3px solid var(--success, #107c10); }

.fluent-toast[data-kind="error"] .fluent-toast-icon,
.cp-toast[data-variant="error"] .cp-toast-icon {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    color: var(--danger);
}
.cp-toast[data-variant="error"] .cp-toast-progress-fill { background: var(--danger); }
.cp-toast[data-variant="error"] { border-left: 3px solid var(--danger); }

.fluent-toast[data-kind="warning"] .fluent-toast-icon,
.cp-toast[data-variant="warning"] .cp-toast-icon,
.cp-toast[data-variant="session"] .cp-toast-icon {
    background: color-mix(in srgb, var(--warning, #bc4b09) 18%, transparent);
    color: var(--warning, #bc4b09);
}
.cp-toast[data-variant="warning"] .cp-toast-progress-fill,
.cp-toast[data-variant="session"] .cp-toast-progress-fill { background: var(--warning, #bc4b09); }
.cp-toast[data-variant="warning"],
.cp-toast[data-variant="session"] { border-left: 3px solid var(--warning, #bc4b09); }

.cp-toast[data-variant="info"] { border-left: 3px solid var(--brand-80); }

@media (max-width: 768px) {
    .fluent-toast-container,
    #cpToastContainer { right: 16px; left: 16px; bottom: 84px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-toast, .fluent-toast { transition: none; }
}

/* Inline message sources (server status labels / validation summaries) that the
   capture layer has surfaced as a toast are kept in the DOM — so their server
   controls still post back and read their values — but removed from view so the
   toast is the single feedback surface. */
.cp-toast-source-hidden {
    position: absolute !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;
}