/* =========================
   FLUENT TOP SCROLL
========================= */

.fluent-top-scroll {
    position: fixed;

    right: var(--ms-space-lg);
    bottom: var(--ms-space-lg);

    width: 48px;
    height: 48px;

    border: none;
    border-radius: var(--ms-radius-pill);

    background: var(--ms-color-primary);
    color: var(--ms-color-text-inverse);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow: var(--ms-shadow-8);

    z-index: var(--ms-z-toast);

    /* hidden state */
    opacity: 0;
    transform: translateY(12px);
    visibility: hidden;

    transition:
        opacity var(--ms-motion-base) var(--ms-ease),
        transform var(--ms-motion-base) var(--ms-ease),
        visibility var(--ms-motion-base) var(--ms-ease);
}

/* ICON */
.fluent-top-scroll__icon {
    font-size: var(--ms-font-size-h3);
    font-weight: var(--ms-font-weight-semi-bold);
}

/* VISIBLE */
.fluent-top-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* HOVER */
.fluent-top-scroll:hover {
    background: var(--ms-color-primary-hover);
}

/* ACTIVE */
.fluent-top-scroll:active {
    transform: scale(0.95);
}

/* FOCUS */
.fluent-top-scroll:focus-visible {
    outline: var(--ms-focus-ring-width) solid var(--ms-focus-ring-color);
    outline-offset: var(--ms-focus-ring-offset);
}

/* FOOTER AVOID (optional simple version) */
.fluent-top-scroll.is-over-footer {
    bottom: calc(var(--ms-space-lg) + 80px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .fluent-top-scroll {
        width: 44px;
        height: 44px;
        right: var(--ms-space-md);
        bottom: var(--ms-space-md);
    }
}