/* =========================================================
   VLOGNERD — COMENTÁRIOS V5
   Visual editorial, limpo e compacto.
   Mantém toda a funcionalidade atual.
   ========================================================= */

.vn-comments-shell{
    width:100% !important;
    overflow:visible !important;
    margin-top:28px !important;
    padding:26px 28px 28px !important;
    border:1px solid #e6e8ee !important;
    border-radius:20px !important;
    background:#fff !important;
    box-shadow:0 12px 32px rgba(15,23,42,.045) !important;
}
.vn-comments-head{
    position:relative !important;
    display:block !important;
    margin:0 0 18px !important;
    padding:0 0 0 20px !important;
    border:0 !important;
    background:transparent !important;
}
.vn-comments-head::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:2px !important;
    bottom:2px !important;
    width:4px !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,#7c3aed,#8b5cf6) !important;
}
.vn-comments-kicker{
    display:block !important;
    margin:0 0 5px !important;
    color:#7c3aed !important;
    font-size:11px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    letter-spacing:.10em !important;
    text-transform:uppercase !important;
}
.vn-comments-title-row{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:0 !important;
}
.vn-comments-title-row h2,
.vn-comments-head h2{
    margin:0 !important;
    color:#101828 !important;
    font-size:28px !important;
    line-height:1.1 !important;
    letter-spacing:-.035em !important;
    font-weight:900 !important;
}
.vn-comments-count-pill{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:34px !important;
    height:30px !important;
    padding:0 10px !important;
    border:1px solid #e5defc !important;
    border-radius:999px !important;
    background:#faf8ff !important;
    color:#7c3aed !important;
    font-size:12px !important;
    font-weight:900 !important;
}
.vn-comments-subtitle{
    max-width:620px !important;
    margin:8px 0 0 !important;
    color:#667085 !important;
    font-size:13.5px !important;
    line-height:1.55 !important;
}
.vn-comment-form,
.vn-comment-composer{
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    column-gap:13px !important;
    row-gap:0 !important;
    margin:0 !important;
    padding:20px 0 22px !important;
    border:0 !important;
    border-top:1px solid #eef0f4 !important;
    border-bottom:1px solid #eef0f4 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}
.vn-composer-avatar-wrap{
    position:relative !important;
    width:46px !important;
    height:46px !important;
}
.vn-composer-avatar,
.vn-comment-avatar{
    width:46px !important;
    height:46px !important;
    flex:0 0 46px !important;
    border:1px solid #e9e4f8 !important;
    border-radius:50% !important;
    background:#f5f2ff !important;
    color:#6d28d9 !important;
    box-shadow:0 4px 12px rgba(15,23,42,.07) !important;
}
.vn-composer-avatar img,
.vn-comment-avatar img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:50% !important;
}
.vn-avatar-pick{
    position:absolute !important;
    right:-4px !important;
    bottom:-4px !important;
    z-index:4 !important;
    width:23px !important;
    height:23px !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
    border:2px solid #fff !important;
    border-radius:50% !important;
    background:#7c3aed !important;
    color:#fff !important;
    box-shadow:0 3px 9px rgba(91,33,182,.23) !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
}
.vn-avatar-pick svg{width:12px !important;height:12px !important}
.vn-composer-main{min-width:0 !important}
.vn-composer-name-row{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:5px 10px !important;
    margin:0 0 7px !important;
}
.vn-composer-name{
    width:auto !important;
    min-width:110px !important;
    max-width:230px !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#202939 !important;
    font-size:14px !important;
    line-height:1.45 !important;
    font-weight:850 !important;
}
.vn-composer-name[readonly]{cursor:default !important}
.vn-composer-name:not([readonly]){
    width:min(220px,100%) !important;
    min-height:38px !important;
    padding:0 11px !important;
    border:1px solid #d9dde5 !important;
    border-radius:9px !important;
    background:#fff !important;
}
.vn-nick-status{
    display:inline-flex !important;
    align-items:center !important;
    min-height:24px !important;
    padding:0 9px !important;
    border-radius:999px !important;
    background:#f1fbf4 !important;
    color:#16803b !important;
    font-size:10.5px !important;
    font-weight:850 !important;
}
.vn-nick-status.is-error{background:#fff1f2 !important;color:#c24151 !important}
.vn-nick-edit,
.vn-nick-save,
.vn-nick-cancel,
.vn-avatar-remove{
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#6d28d9 !important;
    font-size:11px !important;
    line-height:1.4 !important;
    font-weight:800 !important;
    cursor:pointer !important;
}
.vn-avatar-caption{color:#98a2b3 !important;font-size:10.5px !important;font-weight:600 !important}
.vn-avatar-remove::before{content:"·" !important;margin-right:7px !important;color:#c0c5cf !important}
.vn-composer-text{
    display:block !important;
    width:100% !important;
    min-height:44px !important;
    max-height:180px !important;
    margin:0 !important;
    padding:10px 2px 8px !important;
    border:0 !important;
    border-bottom:1px solid #d8dde5 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#344054 !important;
    box-shadow:none !important;
    font-size:14px !important;
    line-height:1.55 !important;
    resize:none !important;
    transition:min-height .18s ease,border-color .18s ease !important;
}
.vn-composer-text::placeholder{color:#98a2b3 !important}
.vn-comment-form.is-active .vn-composer-text{min-height:92px !important;border-bottom-color:#a78bfa !important}
.vn-composer-text:focus{outline:none !important;border-bottom-color:#7c3aed !important;box-shadow:none !important}
.vn-comment-form:not(.is-active) .vn-composer-footer{display:none !important}
.vn-comment-form.is-active .vn-composer-footer{
    grid-column:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:10px 0 0 !important;
    padding:0 !important;
}
.vn-comment-counter{margin-right:auto !important;color:#98a2b3 !important;font-size:9.5px !important;font-weight:650 !important}
.vn-composer-note{display:none !important}
.vn-composer-actions{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:8px !important;margin:0 !important}
.vn-comment-cancel{
    min-height:34px !important;
    padding:0 11px !important;
    border:0 !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#667085 !important;
    font-size:11px !important;
    font-weight:800 !important;
}
.vn-comment-submit{
    width:auto !important;
    min-width:88px !important;
    min-height:36px !important;
    padding:0 15px !important;
    border:0 !important;
    border-radius:999px !important;
    background:#7c3aed !important;
    color:#fff !important;
    font-size:11.5px !important;
    font-weight:850 !important;
    box-shadow:0 6px 15px rgba(124,58,237,.18) !important;
}
.vn-comment-submit:disabled{opacity:.45 !important;box-shadow:none !important}
.vn-comment-message{grid-column:2 !important;margin:7px 0 0 !important;font-size:10.5px !important}
.vn-comments-stream-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    margin:0 !important;
    padding:20px 0 10px !important;
    border:0 !important;
    background:transparent !important;
}
.vn-comments-stream-head strong{color:#202939 !important;font-size:13px !important;font-weight:850 !important}
.vn-comments-sort{display:inline-flex !important;align-items:center !important;gap:6px !important}
.vn-comments-sort span{display:none !important}
.vn-comments-sort select{
    min-height:36px !important;
    padding:0 34px 0 12px !important;
    border:1px solid #e1e5eb !important;
    border-radius:10px !important;
    background-color:#fff !important;
    color:#475467 !important;
    font-size:11px !important;
    font-weight:750 !important;
}
.vn-comments-list{padding:0 !important}
.vn-comment{
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;
    padding:18px 0 !important;
    border:0 !important;
    border-top:1px solid #f0f1f4 !important;
    background:transparent !important;
    box-shadow:none !important;
}
.vn-comment:first-child{border-top:0 !important}
.vn-comment-body{flex:1 1 0 !important;min-width:0 !important}
.vn-comment-top{margin-bottom:5px !important}
.vn-comment-author{color:#202939 !important;font-size:13px !important;font-weight:850 !important}
.vn-comment-date{color:#98a2b3 !important;font-size:10px !important}
.vn-comment-text{margin:0 !important;color:#475467 !important;font-size:13.5px !important;line-height:1.62 !important}
.vn-comments-empty{
    min-height:155px !important;
    margin:4px 0 0 !important;
    padding:28px 16px 30px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
}
.vn-comments-empty-icon{
    width:42px !important;
    height:42px !important;
    margin:0 0 10px !important;
    border:1px solid #ebe5fb !important;
    border-radius:50% !important;
    background:#faf8ff !important;
    color:#7c3aed !important;
}
.vn-comments-empty strong{margin:0 0 5px !important;color:#344054 !important;font-size:14px !important;line-height:1.3 !important;font-weight:850 !important}
.vn-comments-empty span:last-child{max-width:360px !important;color:#7b8493 !important;font-size:11.5px !important;line-height:1.5 !important}

@media(max-width:620px){
    .vn-comments-shell{padding:22px 18px 22px !important;border-radius:16px !important}
    .vn-comments-head{margin-bottom:14px !important;padding-left:15px !important}
    .vn-comments-head::before{width:3px !important}
    .vn-comments-title-row h2,.vn-comments-head h2{font-size:24px !important}
    .vn-comments-count-pill{min-width:31px !important;height:27px !important;padding:0 9px !important;font-size:11px !important}
    .vn-comments-subtitle{margin-top:7px !important;font-size:12.5px !important;line-height:1.5 !important}
    .vn-comment-form,.vn-comment-composer{grid-template-columns:38px minmax(0,1fr) !important;column-gap:10px !important;padding:17px 0 19px !important}
    .vn-composer-avatar-wrap,.vn-composer-avatar,.vn-comment-avatar{width:38px !important;height:38px !important;flex-basis:38px !important}
    .vn-avatar-pick{right:-5px !important;bottom:-5px !important;width:21px !important;height:21px !important}
    .vn-composer-name-row{gap:5px 8px !important;margin-bottom:4px !important}
    .vn-composer-name{min-width:95px !important;max-width:170px !important;font-size:13px !important}
    .vn-nick-status{min-height:22px !important;padding:0 8px !important;font-size:9.5px !important}
    .vn-nick-edit,.vn-nick-save,.vn-nick-cancel,.vn-avatar-remove{font-size:10.5px !important}
    .vn-avatar-caption{font-size:9.5px !important}
    .vn-composer-text{min-height:42px !important;padding-top:9px !important;font-size:13.5px !important}
    .vn-comment-form.is-active .vn-composer-text{min-height:84px !important}
    .vn-comment-form.is-active .vn-composer-footer{gap:7px !important;margin-top:8px !important}
    .vn-comment-counter{width:100% !important;margin:0 0 2px !important}
    .vn-comment-cancel{min-height:32px !important}
    .vn-comment-submit{min-width:82px !important;min-height:34px !important;padding:0 13px !important}
    .vn-comments-stream-head{padding:17px 0 7px !important}
    .vn-comments-sort select{min-height:34px !important;padding-left:10px !important;font-size:10.5px !important}
    .vn-comment{gap:10px !important;padding:16px 0 !important}
    .vn-comment-text{font-size:13px !important}
    .vn-comments-empty{min-height:135px !important;padding:22px 10px 25px !important}
    .vn-comments-empty-icon{width:38px !important;height:38px !important;margin-bottom:8px !important}
    .vn-comments-empty strong{font-size:13.5px !important}
    .vn-comments-empty span:last-child{max-width:290px !important;font-size:11px !important}
}


/* =========================================================
   VLOGNERD — AJUSTE FINO V5.1
   Corrige duplicidade visual e compacta o mobile.
   ========================================================= */

/* Mantém somente UMA assinatura roxa no cabeçalho */
.vn-comments-heading,
.vn-comments-title-row{
    border-left:0 !important;
    border-right:0 !important;
}
.vn-comments-heading::before,
.vn-comments-heading::after,
.vn-comments-title-row::before,
.vn-comments-title-row::after{
    content:none !important;
    display:none !important;
}
.vn-comments-head::before{
    content:"" !important;
    display:block !important;
}

/* Nick salvo precisa parecer texto, não campo */
.vn-composer-name[readonly]{
    width:min(170px,42vw) !important;
    min-width:0 !important;
    max-width:170px !important;
    height:24px !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    background-color:#fff !important;
    box-shadow:none !important;
    -webkit-box-shadow:none !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    overflow:hidden !important;
}

.vn-composer-name[readonly]:-webkit-autofill,
.vn-composer-name[readonly]:-webkit-autofill:hover,
.vn-composer-name[readonly]:-webkit-autofill:focus{
    -webkit-text-fill-color:#202939 !important;
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    box-shadow:0 0 0 1000px #fff inset !important;
}

/* Campo compacto quando fechado; expande quando o usuário toca */
.vn-comment-form:not(.is-active) .vn-composer-text{
    height:44px !important;
    min-height:44px !important;
    max-height:44px !important;
    overflow:hidden !important;
}

.vn-comment-form.is-active .vn-composer-text{
    height:96px !important;
    min-height:96px !important;
    max-height:160px !important;
    overflow-y:auto !important;
}

.vn-composer-text{
    scrollbar-width:none !important;
}
.vn-composer-text::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
}

/* Ordenação sem cortar "Mais recentes" */
.vn-comments-sort select{
    width:148px !important;
    max-width:none !important;
    min-width:148px !important;
    padding-right:30px !important;
    text-overflow:clip !important;
}

/* Estado vazio menor */
.vn-comments-empty{
    min-height:118px !important;
    padding:18px 10px 20px !important;
}

@media(max-width:620px){
    .vn-comments-shell{
        padding:20px 16px 20px !important;
    }

    .vn-comments-head{
        margin-bottom:12px !important;
    }

    .vn-comments-title-row h2,
    .vn-comments-head h2{
        font-size:23px !important;
    }

    .vn-comments-subtitle{
        max-width:100% !important;
        font-size:12px !important;
    }

    .vn-comment-form,
    .vn-comment-composer{
        padding-top:15px !important;
        padding-bottom:16px !important;
    }

    .vn-composer-name[readonly]{
        width:min(150px,41vw) !important;
        max-width:150px !important;
        font-size:12.8px !important;
    }

    .vn-composer-name-row{
        row-gap:4px !important;
    }

    .vn-comment-form:not(.is-active) .vn-composer-text{
        height:42px !important;
        min-height:42px !important;
        max-height:42px !important;
    }

    .vn-comment-form.is-active .vn-composer-text{
        height:90px !important;
        min-height:90px !important;
        max-height:150px !important;
    }

    .vn-comments-stream-head{
        padding-top:14px !important;
    }

    .vn-comments-sort select{
        width:140px !important;
        min-width:140px !important;
        font-size:10.5px !important;
    }

    .vn-comments-empty{
        min-height:108px !important;
        padding:14px 8px 17px !important;
    }

    .vn-comments-empty-icon{
        width:36px !important;
        height:36px !important;
        margin-bottom:7px !important;
    }
}


/* VLOGNERD — V5.2
   Oculta o status "Foto salva" quando o perfil está em repouso.
   Se o usuário estiver alterando a foto, o status volta a aparecer
   para informar que ainda precisa salvar o perfil. */
.vn-comment-form:not(.is-active) .vn-avatar-caption{
    display:none !important;
}


/* VLOGNERD — V5.3
   Remove definitivamente o texto auxiliar da foto.
   A informação de alteração continua sendo mostrada pelo status do perfil. */
.vn-avatar-caption{
    display:none !important;
}