/* =============================================================================
   Toasts (js/app-toasts.js).

   A white card with a faint state tint fading in from the left, a 1px neutral
   border, a small round status icon, a bold title and muted description, and
   a quiet close button top-right. The dark theme keeps the same layout on the
   elevated surface from app/themes/themes.css.
   ============================================================================= */
.synexus-toast-viewport {
    --toast-surface: #ffffff;
    --toast-border: #e5e7eb;
    --toast-title: #111827;
    --toast-text: #4b5563;
    --toast-close: #6b7280;
    --toast-close-hover-bg: #f3f4f6;
    --toast-action: #2563eb;
    --toast-action-muted: #6b7280;
    --toast-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .08);

    /* 24px from the corner. The padding keeps the shadows and the slide-in
       inside the scroll box, so neither draws a scrollbar or gets clipped. */
    position: fixed;
    top: 12px;
    right: 8px;
    z-index: 11000;
    width: min(432px, calc(100vw - 16px));
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: none;
}

.synexus-toast {
    --toast-tint: #edf3ff;
    --toast-icon: #3b5bdb;

    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 28px;
    column-gap: 12px;
    align-items: start;
    padding: 16px 14px 16px 18px;
    border: 1px solid var(--toast-border);
    border-radius: 14px;
    background: linear-gradient(110deg, var(--toast-tint) 0%, var(--toast-surface) 65%);
    color: var(--toast-title);
    box-shadow: var(--toast-shadow);
    font-family: var(--font-family-base, inherit);
    font-size: 14px;
    line-height: 1.5;
    pointer-events: auto;
    animation: synexus-toast-enter .24s cubic-bezier(.2, .8, .2, 1);
}

.synexus-toast[data-type=success] { --toast-tint: #e8f7f1; --toast-icon: #2f8a5f; }
.synexus-toast[data-type=info] { --toast-tint: #edf3ff; --toast-icon: #3b5bdb; }
.synexus-toast[data-type=loading] { --toast-tint: #edf3ff; --toast-icon: #3b5bdb; }
.synexus-toast[data-type=error] { --toast-tint: #fdecec; --toast-icon: #c93b3b; }
.synexus-toast[data-type=warning] { --toast-tint: #fff6e5; --toast-icon: #b45309; }

.synexus-toast.is-leaving {
    animation: synexus-toast-leave .2s ease-in forwards;
}

/* Icon: a filled circle with a white glyph, centred on the title's line. */
.synexus-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--toast-icon);
    color: #ffffff;
}

.synexus-toast[data-type=loading] .synexus-toast-icon {
    background: transparent;
}

.synexus-toast-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--toast-icon) 25%, transparent);
    border-top-color: var(--toast-icon);
    border-radius: 50%;
    animation: synexus-toast-spin .8s linear infinite;
}

.synexus-toast-body {
    min-width: 0;
}

.synexus-toast-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: var(--toast-title);
    overflow-wrap: anywhere;
}

.synexus-toast-text {
    margin: 6px 0 0;
    color: var(--toast-text);
    overflow-wrap: anywhere;
}

.synexus-toast-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 12px;
}

.synexus-toast-action {
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--toast-action-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.synexus-toast-action.is-primary {
    color: var(--toast-action);
}

.synexus-toast-action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.synexus-toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: -3px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--toast-close);
    cursor: pointer;
}

.synexus-toast-close:hover {
    background: var(--toast-close-hover-bg);
    color: var(--toast-title);
}

.synexus-toast-close:focus-visible,
.synexus-toast-action:focus-visible {
    outline: 2px solid var(--app-focus, #2563eb);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------- Dark theme ---------- */
[data-bs-theme="dark"] .synexus-toast-viewport {
    --toast-surface: var(--app-elevated);
    --toast-border: var(--app-border);
    --toast-title: var(--app-text);
    --toast-text: var(--app-text-secondary);
    --toast-close: var(--app-muted);
    --toast-close-hover-bg: var(--app-hover);
    --toast-action: var(--app-primary-text);
    --toast-action-muted: var(--app-muted);
    --toast-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .4);
}

[data-bs-theme="dark"] .synexus-toast[data-type=success] { --toast-tint: #173a33; --toast-icon: #22a06b; }
[data-bs-theme="dark"] .synexus-toast[data-type=info],
[data-bs-theme="dark"] .synexus-toast[data-type=loading] { --toast-tint: #1e3157; --toast-icon: #4c7dff; }
[data-bs-theme="dark"] .synexus-toast[data-type=error] { --toast-tint: #47252f; --toast-icon: #e5484d; }
[data-bs-theme="dark"] .synexus-toast[data-type=warning] { --toast-tint: #463621; --toast-icon: #d97706; }

/* ---------- Small screens: full width, below the mobile top bar ---------- */
@media (max-width: 991.98px) {
    .synexus-toast-viewport {
        top: var(--synx-topbar-height, 56px);
        max-height: calc(100dvh - var(--synx-topbar-height, 56px));
    }
}

@media (max-width: 575.98px) {
    .synexus-toast-viewport {
        right: 0;
        left: 0;
        width: auto;
        padding-inline: 12px;
    }
}

@keyframes synexus-toast-enter {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes synexus-toast-leave {
    to { opacity: 0; transform: translateX(16px); }
}

@keyframes synexus-toast-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .synexus-toast,
    .synexus-toast.is-leaving { animation: none; }
    .synexus-toast-spinner { animation-duration: 2.4s; }
}