/* La caja del comentario es fija; la abertura de la foto pertenece al diseño. */
.rs-avatar {
    --rs-avatar-size: 56px;
    position: relative;
    display: inline-block;
    flex: 0 0 var(--rs-avatar-size);
    width: var(--rs-avatar-size);
    height: var(--rs-avatar-size);
    min-width: var(--rs-avatar-size);
    max-width: var(--rs-avatar-size);
    aspect-ratio: 1;
    overflow: hidden;
    overflow: clip;
    contain: layout paint;
    isolation: isolate;
    vertical-align: middle;
}
.rs-avatar__portrait { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.rs-avatar__art { position: absolute; left: var(--rs-art-x, 0%); top: var(--rs-art-y, 0%); width: var(--rs-art-size, 100%); height: var(--rs-art-size, 100%); }
.rs-avatar__face {
    position: absolute;
    left: var(--rs-photo-x, 11%);
    top: var(--rs-photo-y, 11%);
    width: var(--rs-photo-width, 78%);
    height: var(--rs-photo-height, 78%);
    border-radius: 50%;
    overflow: hidden;
    background: #27272a;
    color: #e4e4e7;
    display: grid;
    place-items: center;
    font: 700 18px/1 system-ui, sans-serif;
}
.rs-avatar--masked .rs-avatar__face { border-radius: 0; }
.rs-avatar:not(.rs-avatar--framed) .rs-avatar__face { left: 7%; top: 7%; width: 86%; height: 86%; }
.rs-avatar .rs-avatar__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rs-avatar .rs-avatar__frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.rs-comment-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.rs-comment-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rs-comment-content img { max-width: 100% !important; height: auto; }
.rs-comment-content pre { max-width: 100%; overflow-x: auto; }
.rs-comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
/* El árbol ya anida los nodos: no volver a sumar la profundidad en cada hijo. */
.rs-comment-thread.comment-item-wrapper.level-indent { margin-left: 20px; padding-left: 12px; }
.rs-comment-thread.level-indent .rs-comment-thread.level-indent .rs-comment-thread.level-indent { margin-left: 0; padding-left: 0; border-left: 0; }
.rs-frame-button {
    border: 1px solid #52525b; border-radius: 8px; padding: 9px 12px;
    background: #18181b; color: #e4e4e7; cursor: pointer; font: 500 13px/1.4 system-ui, sans-serif;
}
.rs-frame-button:focus-visible { outline: 2px solid #e7ba68; outline-offset: 4px; }
@media (max-width: 639px) {
    .rs-comment-row { gap: 10px; }
    .rs-comment-thread.comment-item-wrapper.level-indent { margin-left: 12px; padding-left: 8px; }
    .rs-comment-thread.level-indent .rs-comment-thread.level-indent { margin-left: 0; padding-left: 0; border-left: 0; }
}