/* Loading placeholders shaped like the real Discussions feed cards. */

.discussion-skeleton-block {
    display: block;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.045),
        rgba(242, 90, 0, 0.13),
        rgba(255, 255, 255, 0.045)
    );
    background-size: 220% 100%;
    animation: discussion-skeleton-shimmer 1400ms ease-in-out infinite;
}

.discussion-post-skeleton {
    pointer-events: none;
}

.discussion-skeleton-space {
    width: 76px;
    height: 10px;
    margin-bottom: 12px;
}

.discussion-skeleton-header,
.discussion-skeleton-author {
    display: flex;
    align-items: center;
}

.discussion-skeleton-header {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.discussion-skeleton-author {
    min-width: 0;
    flex: 1;
    gap: 10px;
}

.discussion-skeleton-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
}

.discussion-skeleton-identity {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 7px;
}

.discussion-skeleton-name {
    width: min(118px, 72%);
    height: 11px;
}

.discussion-skeleton-date {
    width: min(68px, 46%);
    height: 8px;
}

.discussion-skeleton-topic {
    width: 52px;
    height: 20px;
}

.discussion-skeleton-title {
    width: min(280px, 72%);
    height: 17px;
    margin-bottom: 12px;
}

.discussion-skeleton-title.is-detail {
    width: min(420px, 82%);
    height: 21px;
}

.discussion-skeleton-line {
    width: 100%;
    height: 10px;
    margin-bottom: 8px;
}

.discussion-skeleton-line.is-short {
    width: 68%;
    margin-bottom: 0;
}

.discussion-skeleton-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.discussion-skeleton-action {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.discussion-skeleton-action:last-child {
    margin-inline-start: auto;
}

.discussion-comments-skeleton {
    pointer-events: none;
}

.discussion-skeleton-comments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.discussion-skeleton-comments-heading > :first-child {
    width: 92px;
    height: 17px;
}

.discussion-skeleton-comments-heading > :last-child {
    width: 22px;
    height: 10px;
}

.discussion-comment-skeleton {
    display: grid;
    gap: 10px;
}

.discussion-skeleton-comment-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
}

.discussion-skeleton-comment-name {
    width: min(108px, 68%);
    height: 10px;
}

.discussion-comment-skeleton .discussion-skeleton-line {
    margin: 2px 0 0;
}

.discussion-skeleton-line.is-comment-short {
    width: 58%;
    margin-bottom: 0;
}

.discussion-skeleton-comment-action {
    width: 74px;
    height: 9px;
    margin-top: 2px;
}

@keyframes discussion-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .discussion-skeleton-block {
        animation: none;
    }
}