/* siteMessage.css — AxieMeta global toast/notification strip
 *
 * Stacks in the upper-right area of the viewport, just under the topbar.
 * Colors for error/success are defined as local custom properties here
 * (--axm-sitemessage-error / --axm-sitemessage-success) so this module
 * doesn't depend on theme tokens that may not exist yet; card chrome
 * (background, text, font) reuses the site's existing
 * --bg-dark-* and --text-* theme variables.
 *
 * Every selector and custom property here is prefixed with
 * "axm-sitemessage-" (never a bare .toast/.message/.action/.close/.row)
 * so this stylesheet can't be shadowed by, or accidentally shadow,
 * unrelated rules elsewhere on the site. Keep the prefix intact — and
 * update siteMessage.js to match — if you rename anything here.
 */

.axm-sitemessage-stack {
    position: fixed;
    top: 84px;              /* below the fixed topbar */
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 340px;
    max-width: calc(100vw - 32px);
    pointer-events: none;   /* only individual toasts (and their buttons) are interactive */
}

.axm-sitemessage-toast {
    --axm-sitemessage-error: #ef4444;
    --axm-sitemessage-error-dark: #b91c1c;
    --axm-sitemessage-success: #22c55e;
    --axm-sitemessage-success-dark: #15803d;
    --axm-sitemessage-info: #38bdf8;
    --axm-sitemessage-info-dark: #0284c7;
    --axm-sitemessage-accent: var(--axm-sitemessage-info);
    --axm-sitemessage-accent-dark: var(--axm-sitemessage-info-dark);

    pointer-events: auto;
    position: relative;
    overflow: hidden;
    background: var(--bg-dark-5, #1c1c22);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    border-left: 3px solid var(--axm-sitemessage-accent);
    font-family: var(--prm-font, inherit);

    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.axm-sitemessage-toast.axm-sitemessage-toast-in {
    opacity: 1;
    transform: translateX(0);
}

.axm-sitemessage-toast.axm-sitemessage-toast-out {
    opacity: 0;
    transform: translateX(24px);
}

.axm-sitemessage-toast-error {
    --axm-sitemessage-accent: var(--axm-sitemessage-error);
    --axm-sitemessage-accent-dark: var(--axm-sitemessage-error-dark);
}

.axm-sitemessage-toast-success {
    --axm-sitemessage-accent: var(--axm-sitemessage-success);
    --axm-sitemessage-accent-dark: var(--axm-sitemessage-success-dark);
}

.axm-sitemessage-toast-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px 12px 14px;
}

.axm-sitemessage-toast-icon {
    flex: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--axm-sitemessage-accent);
    margin-top: 1px;
}

.axm-sitemessage-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.axm-sitemessage-toast-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-white, #fff);
    word-break: break-word;
}

.axm-sitemessage-toast-action {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    font-family: var(--prm-font, inherit);
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--axm-sitemessage-accent), var(--axm-sitemessage-accent-dark));
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.axm-sitemessage-toast-action:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.axm-sitemessage-toast-close {
    flex: none;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-dark, #9a9aa5);
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.axm-sitemessage-toast-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-white, #fff);
}

.axm-sitemessage-toast-progress {
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
}

.axm-sitemessage-toast-progress-fill {
    height: 100%;
    width: 100%;
    background: var(--axm-sitemessage-accent);
    transition-property: width;
    transition-timing-function: linear;
    /* transition-duration is set inline per-toast to match its `duration` */
}

@media (max-width: 560px) {
    .axm-sitemessage-stack {
        left: 16px;
        right: 16px;
        top: 72px;
        width: auto;
    }
}