#video-section-comments .comment-motion-stage {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 206px;
    overflow: hidden;
    border: 1px solid #2b3039;
    border-radius: 16px;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 47, 109, .08), transparent 32%),
        rgba(0, 0, 0, .28);
}

#video-section-comments .comment-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

#video-section-comments .comment-section-header .comment-heading {
    margin-bottom: 0;
    white-space: nowrap;
}

#video-section-comments .comment-motion-stage.is-empty {
    height: 206px;
}

#video-section-comments .comment-motion-stage[hidden],
#video-section-comments [data-comment-list][hidden] {
    display: none !important;
}

#video-section-comments .comment-motion-track {
    --motion-row-height: 38px;
    position: absolute;
    top: calc(8px + var(--motion-lane) * var(--motion-row-height));
    left: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    min-height: 34px;
    white-space: nowrap;
    animation: video-comment-motion var(--motion-speed, 31s) linear var(--motion-delay, 0s) infinite;
    will-change: transform;
}

#video-section-comments .comment-motion-track[hidden] {
    display: none;
}

#video-section-comments .comment-motion-track:hover,
#video-section-comments .comment-motion-track:focus-within {
    animation-play-state: paused;
}

#video-section-comments .comment-motion-card {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
    max-width: min(calc(100vw - 56px), 760px);
    min-height: 34px;
    padding: 5px 7px 5px 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    outline: none;
    background: rgba(255, 255, 255, .075);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
}

#video-section-comments .comment-motion-card:hover,
#video-section-comments .comment-motion-card:focus-within,
#video-section-comments .comment-motion-card:focus {
    z-index: 3;
    border-color: rgba(255, 47, 109, .72);
    background: rgba(255, 47, 109, .14);
    box-shadow: 0 8px 24px rgba(255, 47, 109, .12);
}

#video-section-comments .comment-motion-card__name {
    flex: 0 0 auto;
    overflow: hidden;
    max-width: 140px;
    margin-right: 7px;
    color: #ffb03a;
    font-weight: 650;
    text-overflow: ellipsis;
}

#video-section-comments .comment-motion-card__content {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    max-width: min(46vw, 520px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

#video-section-comments .comment-motion-card__actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

#video-section-comments .comment-motion-card__like {
    min-height: 24px;
    padding: 2px 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #aaaeb8;
    font: inherit;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
}

#video-section-comments .comment-motion-card__like:hover,
#video-section-comments .comment-motion-card__like:focus-visible,
#video-section-comments .comment-motion-card__like.is-liked {
    outline: none;
    background: rgba(255, 47, 109, .13);
    color: #ff7aa2;
}

#video-section-comments .comment-motion-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    color: #969ba5;
    line-height: 1.6;
    text-align: center;
}

#video-section-comments .comment-motion-empty[hidden] {
    display: none;
}

@keyframes video-comment-motion {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - 100vw)); }
}

@media (max-width: 719px) {
    #video-section-comments .comment-motion-stage,
    #video-section-comments .comment-motion-stage.is-empty {
        height: 166px;
        border-radius: 13px;
    }

    #video-section-comments .comment-section-header {
        align-items: flex-start;
    }

    #video-section-comments .comment-toolbar {
        gap: 5px;
    }

    #video-section-comments .comment-motion-track {
        --motion-row-height: 30px;
        top: calc(7px + var(--motion-lane) * var(--motion-row-height));
        gap: 12px;
        min-height: 29px;
    }

    #video-section-comments .comment-motion-card {
        max-width: calc(100vw - 44px);
        min-height: 29px;
        padding: 3px 5px 3px 10px;
        font-size: 12px;
    }

    #video-section-comments .comment-motion-card__content {
        max-width: min(38vw, 220px);
    }

    #video-section-comments .comment-motion-card__name {
        max-width: 82px;
    }

    #video-section-comments .comment-motion-card__actions {
        margin-left: 4px;
    }

    #video-section-comments .comment-motion-card__like {
        padding-right: 5px;
        padding-left: 5px;
        font-size: 11px;
    }
}

@media (max-width: 359px) {
    #video-section-comments .comment-motion-card__content {
        max-width: 31vw;
    }
}

@media (max-width: 479px) {
    #video-section-comments .comment-section-header {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    #video-section-comments .comment-motion-stage {
        display: flex;
        height: auto;
        max-height: 250px;
        padding: 10px;
        flex-direction: column;
        gap: 8px;
        overflow: auto;
    }

    #video-section-comments .comment-motion-track {
        position: static;
        display: flex;
        width: 100%;
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        white-space: normal;
        animation: none;
    }

    #video-section-comments .comment-motion-card {
        width: 100%;
        max-width: 100%;
        white-space: normal;
        animation: none;
    }

    #video-section-comments .comment-motion-card__content {
        min-width: 0;
        max-width: none;
        white-space: normal;
    }

    #video-section-comments .comment-motion-empty {
        position: static;
        min-height: 110px;
    }
}
