.mf-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mf-border);
    border-top-color: var(--mf-primary);
    border-radius: var(--mf-radius-full);
    animation: mf-spin 0.7s linear infinite;
}
.mf-spinner--lg { width: 32px; height: 32px; border-width: 3px; }

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

.mf-skeleton {
    background: linear-gradient(90deg,
        var(--mf-surface-2) 0%,
        var(--mf-border) 50%,
        var(--mf-surface-2) 100%);
    background-size: 200% 100%;
    animation: mf-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--mf-radius);
}

@keyframes mf-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.mf-skeleton-row {
    display: grid;
    grid-template-columns: 24px 40px 1fr auto;
    gap: 4px var(--mf-space-3);
    align-items: center;
    padding: var(--mf-space-3) var(--mf-space-4);
    border-bottom: 1px solid var(--mf-border);
}

.mf-skeleton-row__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--mf-radius-full);
    background: var(--mf-border);
    justify-self: center;
}

.mf-skeleton-row__avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--mf-radius-full);
}

.mf-skeleton-row__lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: 3 / -1;
}

.mf-skeleton-row__lines > div {
    height: 12px;
}
.mf-skeleton-row__lines > div:first-child { width: 30%; }
.mf-skeleton-row__lines > div:last-child  { width: 80%; }