.cs-comment-options label[for="cs-imagens"],
.cs-comment-options label[for^="cs-imagens-reply"],
.cs-sticker-btn{
    display: none !important;
}

/* Cabeçalho dos comentários */
.cs-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
    color: #ddd;
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
}

/* Total de comentários */
.cs-comment-count {
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Container dos botões de ordenação */
.cs-sort-options {
    display: flex;
    padding: 0px 20px;
    background: rgba(25, 0, 35, 1);
    border: 1px solid #8a2be2;
    border-radius: 20px;
    gap: 14px;
}

/* Botões de ordenação */
.cs-sort-btn {
    background: rgba(25, 0, 35, 1);
    color: #ddd;
    border-radius: 20px;
    border: none;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none !important;
    user-select: none;
}

.cs-sort-btn:hover {
    color: #9c27b0;
    border: 1px solid #8a2be2;
    background: transparent;
}

.cs-sort-btn.active {
    background: #8a2be2; /* Roxo, consistente com o tema */
    color: #fff;
    border-radius: 20px;
    border: none;
    box-shadow: none !important;
}

.cs-sort-btn:disabled {
    background: #555;
    color: #999;
    /*border-color: #666;*/
    cursor: not-allowed;
    opacity: 0.6;
}

/* Responsivo */
@media (max-width: 600px) {
    .cs-comment-header {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .cs-sort-options {
        justify-content: center;
    }
}

div#cs-comentarios {
    margin-bottom: 150px;
}


/* Estilo específico para comentários fixados com animação de reflexo */
#cs-comentarios-fixados .cs-comentario-item.cs-comentario-fixado {
    background-color: rgba(28, 0, 43, 0.8) !important; /* Fundo azul escuro */
    border-left: 4px solid #8a2be2 !important; /* Borda azul à esquerda */
    border-radius: 6px;
    padding-top: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; /* Sombra para profundidade */
    position: relative; /* Necessário para o pseudo-elemento da animação */
    overflow: hidden; /* Garante que o reflexo não vaze para fora */
}

#cs-comentarios .cs-pinned-label{
    display: none !important;
}

#cs-comentarios-fixados .cs-nivel-1,
#cs-comentarios-fixados .cs-nivel-2,
#cs-comentarios-fixados .cs-nivel-3,
#cs-comentarios-fixados .cs-nivel-4,
#cs-comentarios-fixados .cs-nivel-5
{
    margin-left: 0;
}


/* Estilo para o rótulo "Fixado" e ícone */
#cs-comentarios-fixados .cs-comentario-fixado .cs-pinned-label {
    position: absolute;
    top: 8px;
    right: 35px; /* Posiciona à esquerda do cs-comment-menu-btn */
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #ffffff; /* Cor branca para contraste com o fundo #0a4272 */
    font-weight: bold;
}

#cs-comentarios-fixados .cs-comentario-fixado .cs-pinned-label i.fa-thumbtack {
    transform: rotate(-45deg); /* Rotaciona o ícone para parecer diagonal */
    color: #ffffff; /* Mesma cor do texto para consistência */
    font-size: 14px;
}

/* Efeito de reflexo horizontal com linha inclinada de baixo-esquerda para cima-direita */
#cs-comentarios-fixados .cs-comentario-item.cs-comentario-fixado::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        -45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 60%
    );
    animation: shine 4s infinite linear; /* Animação contínua de 4 segundos */
    pointer-events: none; /* Impede interação com o pseudo-elemento */
}

/* Animação do reflexo */
@keyframes shine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

/* Garante que elementos internos do comentário fixado não sejam afetados por estilos gerais */
#cs-comentarios-fixados .cs-comentario-fixado .cs-comentario-inner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

#cs-comentarios-fixados .cs-comentario-fixado .cs-comment-footer-menu {
    background-color: rgba(28, 0, 43, 0.8) !important;
}


/* Container geral dos comentários - já tem background escuro e borda */
.cs-comment-container {
    border: none;
    border-radius: 8px;
    padding: 10px;
    background: #000000; /* fundo escuro */
    display: flex;       /* pra alinhar avatar + área comentário */
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
    max-width: 100%; /* Garante contenção total */
    width: 100%; /* Força o contêiner a respeitar a largura do pai */
    box-sizing: border-box;
    overflow: visible !important;
}

.cs-comentario-conteudo p {
    margin: 0 0 1em 0; /* espaçamento típico de parágrafo */
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    /* qualquer outro estilo que desejar */
}

.cs-comentario-conteudo img {
    /*max-width: 200px;*/
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}


/* Avatar (imagem) */
.cs-avatar img {
    display: block;            /* elimina espaçamento inline */
    flex: 0 0 50px;             /* fixa tamanho no flexbox */
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

/* Área do comentário */
.cs-comment-area {
    flex-grow: 1;
    max-width: 100% !important; /* Impede expansão do contêiner */
    width: 100% !important;
    box-sizing: border-box;
    overflow: hidden !important; /* Corta overflow horizontal */
}


/* Estilo para o placeholder no editor */
.cs-editor-logged-in:empty::before {
    content: attr(data-placeholder);
    color: rgba(161, 161, 170, 1);
    font-style: italic;
    pointer-events: none; /* Impede interação com o texto do placeholder */
}

/* Editor do comentário - logged out */
#cs-editor.cs-editor-logged-out {
    width: 100%;
    min-height: 120px;
    border: 1px solid rgba(39, 39, 42, .5);
    padding: 6px 10px 10px 10px; /* Reduzido o padding-top */
    font-size: 14px;
    border-radius: 10px;
    color: white;
    background: rgba(24, 24, 27, .5);;
    user-select: none;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
}

/* Editor do comentário - logged in (input contenteditable) */
/* Baseado no estilo que estava inline no HTML, trazendo aqui para o CSS */
#cs-editor.cs-editor-logged-in {
    max-width: 100%;
    width: 100%;
    min-height: 120px;
    border: 1px solid rgba(39, 39, 42, .5);
    padding: 10px;
    font-size: 14px;
    border-radius: 10px;
    font-family: inherit;
    box-sizing: border-box;
    background: rgba(24, 24, 27, .5);;
    color: rgb(255, 255, 255);
    cursor: text;
    /* Se quiser, adiciona transition para suavizar */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    overflow-wrap: break-word !important; /* Força quebra de palavras longas */
    white-space: pre-wrap !important;    /* Preserva quebras de linha e ajusta texto */
    display: block !important;
}

/* Impedir que elementos filhos causem expansão */
#cs-editor.cs-editor-logged-in * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    white-space: normal !important; /* Sobrescreve white-space de filhos */
}



/* Para manter o textarea escondido do campo de envio */
textarea[name="conteudo"] {
    display: none; /* já estava assim */
    transition: all 0.3s ease;
}


/* Estilos de formatação no editor */

button[data-cmd-format] {
  cursor: pointer; 
  background-color: transparent;
  border: 1px solid #aaa;
  color: #333;
  padding: 6px 12px;
  margin-right: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

button[data-cmd-format]:hover {
  background-color: #eee;
}

button[data-cmd-format].active {
  background-color: #4a90e2 !important;
  color: white !important;
  border-color: #357ABD !important;
  box-shadow: 0 0 5px rgba(53, 122, 189, 0.7) !important;
}

/*.cs-sticker-btn {
    display: none !important;
}*/

/* Modal de Stickers como extensão do formulário */
.cs-sticker-modal {
    position: fixed;
    background: #ffffff;
    border: 2px solid #6a1b9a;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: none;
    width: 300px;
    z-index: 2000 !important; /* Igual ao .cs-comment-menu-list para consistência */
}


.cs-sticker-modal.cs-sticker-modal-open {
    display: block !important;
    position: absolute !important;
    transform: none !important; /* Evita centralização */
}

.cs-sticker-modal-content {
    border-radius: 6px;
    overflow: hidden;
}

.cs-sticker-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #6a1b9a;
    color: #ffffff;
    border-bottom: 1px solid #4a148c;
}

.cs-sticker-modal-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.cs-sticker-modal-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cs-sticker-modal-close:hover {
    color: #e0e0e0;
}

.cs-sticker-modal-body {
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
}

.cs-sticker-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    justify-items: center;
}

.cs-sticker-option {
    width: 80px;
    height: 80px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cs-sticker-option:hover {
    transform: scale(1.08);
    border-color: #6a1b9a;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.cs-sticker-img {
    border: 2px solid #6a1b9a;
    border-radius: 8px;
    margin: 8px 0;
}

/*.cs-comment-img, .cs-sticker-img {
    max-width: 150px;
    margin: 8px 0;
    border-radius: 4px;
}*/


/* Imagem na prévia */
.cs-editor-logged-in.cs-preview-mode .cs-img-wrapper,
div[id^="cs-editor-reply-"].cs-preview-mode .cs-img-wrapper {
    margin: 0 1px; /* Margem mínima ou 0 para "colar" */
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}
.cs-editor-logged-in.cs-preview-mode img.cs-preview-img,
div[id^="cs-editor-reply-"].cs-preview-mode img.cs-preview-img {
    max-width: 150px;
    margin: 0 1px; /* Margem mínima ou 0 */
    padding: 0;
    vertical-align: middle;
    display: inline-block;
}
/* Garantir que o editor não adicione espaço */
.cs-editor-logged-in.cs-preview-mode,
div[id^="cs-editor-reply-"].cs-preview-mode {
    padding: 0;
    margin: 0;
}

/* Spoiler na prévia */
.cs-editor-logged-in .cs-spoiler.cs-spoiler-editor,
div[id^="cs-editor-reply-"] .cs-spoiler.cs-spoiler-editor {
    background: #000;
    color: transparent;
    border-radius: 4px;
    padding: 0 2px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    user-select: none; /* Impede seleção de texto antes de revelar */
}
.cs-editor-logged-in .cs-spoiler.cs-spoiler-editor.cs-spoiler-revealed,
div[id^="cs-editor-reply-"] .cs-spoiler.cs-spoiler-editor.cs-spoiler-revealed {
    background: rgba(0, 0, 0, 0.4); /* Fundo opaco após revelar */
    color: inherit;
}

/* Spoiler no front-end (comentário enviado) */
.cs-comentario-conteudo .cs-spoiler {
    background: #292929;
    color: transparent;
    border-radius: 4px;
    padding: 3px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    user-select: none;
}
.cs-comentario-conteudo .cs-spoiler.cs-spoiler-revealed {
    background: rgba(0, 0, 0, 0.4);
    color: inherit;
}


.cs-btn-active {
    background: #0073aa !important;
    color: #fff !important;
    border-color: #005177 !important;
}




/* Container da mensagem de login no editor */
.cs-editor-logged-out-message {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Botão "Fazer login" dentro do editor logged-out */
.cs-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: #140321;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cs-login-btn:hover {
    background-color: #4c00ff;
}

/* Ícone SVG dentro do botão */
.cs-login-btn svg {
    width: 16px;
    height: 16px;
}


/* Barra de opções - botões, ícones (para logged-in) */
.cs-comment-options {
    margin-top: 5px;
    padding-top: 6px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(39, 39, 42, .5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* Opções de formatação (alinhadas à esquerda) */
.cs-format-options {
    display: flex;
    align-items: center;
    gap: 12px; /* Espaçamento entre botões de formatação */
}


/* Classe base para todos os botões de formatação */
.cs-format-options button,
.cs-comment-options label[for="cs-imagens"],
.cs-comment-options label[for^="cs-imagens-reply"]{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px !important; /* Área fixa */
    height: 36px !important; /* Área fixa */
    background: rgba(24, 24, 27, .5); /* Fundo escuro */
    border: none;
    border-radius: 10px; /* Bordas suaves */
    color: #ddd; /* Cor do texto/ícone */
    cursor: pointer;
    padding: 0 !important; /* Remover padding */
    margin: 0 !important; /* Remover margens */
    transition: all 0.2s ease;
    user-select: none;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Sombra sutil */
}

.cs-format-options button:hover,
.cs-comment-options label[for="cs-imagens"]:hover,
.cs-comment-options label[for^="cs-imagens-reply"]:hover{
    background: rgba(86, 86, 97, 0.5); /* Hover mais evidente */
    border-color: #999;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.cs-format-options button .ative,
.cs-comment-options label[for="cs-imagens"].ative,
.cs-comment-options label[for^="cs-imagens-reply"].ative {
    background: #6a1b9a; /* Roxo para estado ativo */
    border-color: #6a1b9a;
    color: #fff;
    box-shadow: 0 0 5px rgba(106, 27, 154, 0.7);
}


/* Ações (alinhadas à direita) */
.cs-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaçamento entre Prévia e Comentar */
}

.cs-char-counter {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    color: rgba(161, 161, 170, 1);
    vertical-align: middle;
}


@media (max-width: 600px) {
    .cs-comment-options {
        flex-direction: column;
        align-items: flex-start;
    }
    .cs-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .cs-format-options {
        flex-wrap: wrap;
    }
}


/* Botões dentro da barra de opções */

/* Ajuste específico para ícones Font Awesome */
.cs-icon-btn i,
.cs-spoiler-btn i {
    font-size: 14px; /* Garante tamanho consistente */
    line-height: 1;
}

/* Botões de formatação de texto (B, I, U, S) */
.cs-style-btn {
    /* Herda tudo de .cs-format-btn */
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    font-size: 14px; /* Texto um pouco menor para caber bem */
}

/* Ajustes específicos para cada botão de formatação */
.cs-style-btn[data-cmd-format="**"] {
    font-weight: bold;
}
.cs-style-btn[data-cmd-format="*"] {
    font-style: italic;
}
.cs-style-btn[data-cmd-format="__"] {
    text-decoration: underline;
}
.cs-style-btn[data-cmd-format="~~"] {
    text-decoration: line-through;
}



/* Botão de Prévia */
.cs-preview-btn {
    padding: 6px 12px;
    background-color: #400b68;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
    height: 32px;
    line-height: 20px;
}

.cs-preview-btn:hover {
    background-color: #351057;
}

/* Botão de Enviar Comentário */
.cs-btn-comentar {
    padding: 6px 12px;
    background-color: #8a2be2; 
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
    height: 32px;
    line-height: 20px;
}

.cs-btn-comentar:hover {
    background-color: #351057;
}


/* Preview de imagens - container */
#preview-imagens {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Textarea para inputs, se aparecer (não é visível, mas caso apareça) */
.cs-comment-area textarea {
    font-family: inherit;
    font-size: 14px;
    padding-bottom: 70px !important; /* espaço para menu + preview */
}

/* Foco no textarea: para usuários logados */
textarea[name="conteudo"]:focus {
    border-color: rgba(39, 39, 42, .5) !important;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5) !important;
    outline: none;
    min-height: 100px !important;
}

#cs-editor:focus {
    border: none !important;
    outline: none !important;
}


/* Mostrar Comentários */

.cs-comentario-item {
    position: relative;
    border-left: 1px solid #27272a85;
    padding: 0px;
    background: #000000;
    color: #ddd;
    margin-bottom: 20px;
    margin-left: 0;
}

/* Novo container só para avatar + conteúdo */
.cs-comentario-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cs-comentario-inner > img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}


/* Garantir que o conteúdo não transborde */
.cs-comentario-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}


.cs-comment-menu-btn {
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    color: #888;
    user-select: none;
    position: absolute;
    right: 8px;
    padding: 2px 6px;
    border-radius: 4px;
}

.cs-comment-menu-btn:hover,
.cs-comment-menu-btn:focus {
    color: #fff;
    background-color: rgba(86, 86, 97, 0.5);
    outline: none;
}

/* Menu de opções */
.cs-comment-menu-list {
    display: none;
    position: absolute;
    top: 30px; /* Ajustado para ficar abaixo do botão (8px do topo + altura do botão ~20px + margem) */
    right: 8px; /* Alinha com o right do botão */
    background: #000000;
    border: 1px solid #8a2be2;
    border-radius: 4px;
    padding: 5px 0;
    z-index: 2000; /* Garante que fique acima do container */
    min-width: 120px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.cs-comment-menu-list[aria-hidden="false"] {
    display: block !important;
}

.cs-comment-menu-list button.cs-comment-menu-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #eee;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
}

.cs-comment-menu-list button.cs-comment-menu-item:hover,
.cs-comment-menu-list button.cs-comment-menu-item:focus {
    background-color: #8a2be2;
    outline: none;
}

/* Respostas */

.cs-respostas {
    display: block;
    margin-top: 20px;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.cs-respostas:not(:empty) {
    display: block;
}

.cs-respostas .cs-comentario-item {
    margin-bottom: 5px; /* ou até 5px, se quiser bem junto */
}


.cs-nivel-1 {
    margin-left: 0;
}
.cs-nivel-2 {
    margin-left: 20px;
}
.cs-nivel-3 {
    margin-left: 40px;
}
.cs-nivel-4 {
    margin-left: 60px;
}
.cs-nivel-5 {
    margin-left: -1px;
}



/* Linha com nickname, tag, (se resposta) ícone forward + nick pai, e tempo */
.cs-comentario-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.85rem;
    color: #aaa;
    align-items: baseline;
}

@media (max-width: 600px) {
    .cs-comentario-meta {
        display: flex;
        flex-wrap: wrap;
        max-width: 250px;
        gap: 4px;
    }
}


/* Tag do usuário */
.cs-comentario-tag {
    /*background: #6a1b9a;*/
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

/* Ícone "in reply to" */
.fa-solid.fa-reply {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    vertical-align: -0.125em;
    margin-right: 1px;
    color: inherit; /* Herda a cor do .cs-comentario-meta */
    transform: scaleX(-1); /* Inverte a direção para apontar à direita */
}

/* Nickname do comentário pai */
.cs-comentario-parent-nick {
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    font-size: 14px;
    color: #ccc;
    font-weight: 500;
}

.cs-comentario-nick {
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #eee;
}

.cs-comentario-tempo {
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    font-style: italic;
    font-size: 12px;
}

/* Wrapper para o tempo (nova linha) */
.cs-comentario-tempo-wrapper {
    display: block;
    font-size: 0.85rem;
    color: #aaa;
    margin-top: -6px;
}

/* Comentário (texto) */
.cs-comentario-conteudo {
    font-size: 1rem;
    line-height: 1.4;
    color: #ccc;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    margin-right: 10px;
}

/* Footer do comentário */
.wrap .body-wrap footer.cs-comment-footer {
    margin-top: 6px;
    background: #000000;
}

.cs-comment-footer-menu {
    display: flex;
    align-items: center; /* Centraliza verticalmente .cs-voting e .cs-reply */
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estiliza os itens da lista */
.cs-voting,
.cs-reply {
    display: inline-flex;
    align-items: center; /* Garante alinhamento interno */
}

.cs-comment-footer-menu .cs-voting .cs-post-votes {
    display: flex;
    align-items: center; /* Centraliza botões e contagens verticalmente */
    gap: 5px;
}

/* Estiliza os botões de votação */
.cs-vote-up,
.cs-vote-down {
    display: inline-flex;
    align-items: center; /* Centraliza ícone e texto */
    padding: 0; /* Remove padding padrão */
    border: none; /* Remove borda padrão */
    background: none; /* Remove fundo padrão */
    color: #666;
    line-height: 1; /* Evita deslocamento vertical */
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
}

/* Sobrescreve estilos inline das imagens */
.cs-vote-up img,
.cs-vote-down img {
    width: 14px; /* Consistente com o inline style */
    height: 14px;
    vertical-align: middle;
}

/* Estiliza as contagens */
.cs-post-votes .cs-count {
    font-size: 14px;
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    line-height: 1; /* Alinha com os botões */
    vertical-align: middle;
    min-width: 20px; /* Evita deslocamento ao atualizar números */
    text-align: center;
}

.cs-vote-up:hover, .cs-vote-down:hover {
    color: #fff;
}

.cs-vote-up.cs-vote-active, .cs-vote-down.cs-vote-active {
    color: #63087a;
    font-weight: bold;
}

.cs-vote-up.cs-vote-active img, .cs-vote-down.cs-vote-active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.cs-vote-animate {
    animation: votePulse 0.3s ease-in-out;
}

@keyframes votePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cs-post-votes .cs-count {
    font-size: 14px;
    vertical-align: middle;
}

.cs-reply-btn .cs-reply-content {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* ajuste o valor conforme desejar */
}

.cs-reply-btn {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.cs-reply-btn:hover {
    color: #7b1fa2;
}

form.cs-reply-form {
  margin-top: 15px; /* ou o valor que preferir */
}

div[id^="cs-editor-reply-"] {
  width: 100%;
  min-height: 120px;      /* aumenta a altura */
  border: 1px solid #fff; /* borda branca */
  background: transparent;
  color: #ddd;
  padding: 8px;
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 14px;
  font-family: inherit;
  outline: none;          /* remove contorno padrão */
  overflow-y: auto;       /* scroll vertical se precisar */
  resize: vertical;       /* permite redimensionar verticalmente */
  overflow-wrap: break-word; /* Força quebra de palavras longas */
  white-space: pre-wrap;    /* Preserva quebras de linha e ajusta texto */
  overflow-x: hidden;       /* Impede expansão horizontal */
  display: block;           /* Garante comportamento de bloco */
}

/* Estilize as imagens preview para ficarem boas dentro da barra */
#preview-imagens > div {
    position: relative;
    display: inline-block;
}

#preview-imagens img {
    border: 1px solid #ccc;
    cursor: pointer;
    width: 80px;
    height: auto;
}

#preview-imagens span {
    position: absolute;
    top: -8px;
    right: -8px;
    color: red;
    font-weight: bold;
    cursor: pointer;
    background: white;
    border-radius: 50%;
    padding: 0 4px;
    font-size: 18px;
    line-height: 1;
}

#menu-comentario {
  display: none;
}


.cs-img-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    vertical-align: middle;
    cursor: text;
}

.cs-delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    background-color: rgba(0,0,0,0.6);
    padding: 0 5px;
    border-radius: 12px;
    user-select: none;
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
}

/* User Info */

.cs-user-info {
    border-bottom: solid white 1px;
    padding: 0px 0px 5px 5px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 16px;
    margin-bottom: 15px;
}

.cs-user-nickname {
    font-weight: bold;
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    color: #ffffff; /* Ajuste conforme seu tema */
}

.cs-notification-bell-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.cs-notification-bell{
    position: relative;
    cursor: pointer;
    display: inline-flex;
    color: white;
    align-items: center;
    margin-left: 10px;
    font-size: 18px;
}

.cs-profile-notification-bell{
    position: relative;
    cursor: pointer;
    align-items: center;
    align-content: center;
    font-size: 18px;
}


.cs-notification-bell.ative,
.cs-profile-notification-bell.active{
    color: red;
}

.cs-notification-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 1;
    z-index: 10;
}

div#cs-notification-menu {
    position: absolute;
    top: 0;
    left: 0;
    background: #000000;
    border: 1px solid #8224e3;;
    box-shadow: 0 4px 12px rgba(22, 0, 22, 0.15);
    padding: 15px;
    max-width: 320px;
    width: 100%;
    z-index: 99999 !important;
    border-radius: 8px;
    display: none;
}

div#cs-notification-menu.active {
    display: block !important;
    visibility: visible !important;
}

.cs-notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}

.cs-notification-item {
    padding: 12px 0;
    border-bottom: 1px solid #8224e3;
    color: white;
    font-size: 14px;
    line-height: 1.5;
}

.cs-notification-item:last-child {
    border-bottom: none;
}

.cs-notification-header {
    margin-bottom: 6px;
}

.cs-notification-header strong {
    font-weight: 600;
    color: #8224e3;
}

.cs-notification-link {
    color: #8224e3;
    text-decoration: none;
    font-weight: 500;
}

.cs-notification-link:hover {
    text-decoration: underline;
    color: #2d0357;
}

.cs-notification-body {
    color: white;
}

.cs-notification-body strong {
    font-weight: 600;
    color: #8224e3;
}

.cs-notification-footer {
    text-align: center;
    padding-top: 12px;
    border-top: 1px solid #8224e3;
}

.cs-notification-more {
    color: #8224e3;
    border: solid 1px #8224e3;
    box-shadow: 0 0 8px 2px rgba(106, 27, 154, 0.3);
    border-radius: 10px;
    padding: 7px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.cs-notification-more:hover {
    text-decoration: underline;
    background-color: #2d0357;
}

/* Responsividade */
@media (max-width: 600px) {
    div#cs-notification-menu {
        max-width: 90%;
    }
}

.cs-bell-icon {
    font-size: 20px;
    color: #ffffff; /* Ajuste conforme seu tema */
}



/* Reações */

.cs-page-reactions {
  display: flex;
  flex-direction: column; /* coluna */
  align-items: center;    /* centraliza horizontal */
  gap: 10px;
  margin-bottom: 30px;
  padding-bottom: 40px;
  border-bottom: rgba(39, 39, 42, 1) solid 2px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.cs-page-reactions h2{
    color: white;
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    font-size: 18px;
}

.cs-total-reactions {
  color: white;
  margin-top: -14px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 14px;
  user-select: none;
  margin-bottom: 20px;
}

.cs-reactions-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centraliza linhas */
    gap: 12px;
}

.cs-reactions-list .reaction-item {
    flex: 0 0 calc(33.333% - 12px); /* largura fixa de 3 por linha */
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* centraliza o conteúdo dentro */
}

/* Ajuste só para telas menores */
@media (max-width: 600px) {
    .cs-reactions-list .reaction-item {
        flex: 0 0 calc(33.333% - 12px);
    }

    .cs-reactions-list .reaction-btn {
        padding: 8px 30px;
    }
}


.reaction-btn {
  background: none;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 8px 20px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

.reaction-btn:hover {
  transform: scale(1.1); /* aumenta 10% */
}

.reaction-btn.active {
    transform: scale(1.1);
    background-color: rgba(28, 0, 43, 0.8);
    border-radius: 10px;
    font-weight: bold;
}

.reaction-btn .count {
  padding: 2px 7px;
  font-weight: 600;
  font-size: 14px;
  min-width: 20px;
  text-align: center;
}

.reaction-btn img.emoji {
  width: 30px !important;
  height: 30px !important;
}




/* PROFILE PAGE - PERFIL */

/* Esconde os widgets */
body.cs-profile-page .c-sidebar.c-top-sidebar,
body.cs-profile-page .c-sidebar.c-top-second-sidebar {
    display: none !important;
}

/* Faixa roxa no topo da tela */
body.cs-profile-page .cs-full-purple-strip {
    width: 100vw;
    height: 190px;
    background-color: #6a1b9a;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    transform: none;
    transform-origin: center;
    transition: all 0.3s ease;
}

/* Área principal */
body.cs-profile-page .cs-profile-main {
    position: relative;
    z-index: 1;
    background-color: black;
    color: white;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* Container central */
body.cs-profile-page .cs-profile-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Painel do usuário fixo à esquerda */
body.cs-profile-page .cs-profile-user-panel {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 480px;
    justify-content: flex-start;
    padding-top: 40px;
}

/* Avatar circular com borda (perfil) */
body.cs-profile-page .cs-avatar-wrapper {
    position: relative;
    width: 160px;
    height: 160px;
    z-index: 1;
    margin-bottom: 20px;
}

body.cs-profile-page .cs-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

body.cs-profile-page .cs-avatar-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    z-index: 3;
    box-sizing: border-box;
    background: none;
}

/* Novo container só para avatar + conteúdo (comentários) */
.cs-comentario-inner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cs-comentario-avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    z-index: 1;
}

.cs-comentario-inner > .cs-comentario-avatar-wrapper > img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.cs-comentario-avatar-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 3;
    box-sizing: border-box;
    background: none;
}

/* Animações */
@keyframes rotate360 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes glow_pulse {
    0%, 100% { box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
    50% { box-shadow: 0 0 15px currentColor, 0 0 30px currentColor, 0 0 45px currentColor; }
}

@keyframes radius_ani {
    0% { border-radius: 50%; }
    10% { border-radius: 50% 40% 50%; }
    20% { border-radius: 45% 42% 38% 35%; }
    30% { border-radius: 50% 50% 42%; }
    40% { border-radius: 44% 50% 35%; }
    50% { border-radius: 38% 50% 50%; }
    60% { border-radius: 43% 39% 28% 42%; }
    70% { border-radius: 40% 45% 40% 36%; }
    80% { border-radius: 38% 46% 45% 39%; }
    90% { border-radius: 42% 39% 50% 44%; }
    100% { border-radius: 50%; }
}


/* Nível 10 - Azul Oceânico */
/*body.cs-profile-page .cs-avatar-border.cs-nivel-10,
.cs-comentario-avatar-border.cs-nivel-10 {
    background: linear-gradient(45deg, #0080ff, #00bfff);
    color: #00bfff;
    box-shadow: 0 0 11px #00bfff, 0 0 22px #00bfff, 0 0 33px #00bfff;
    animation: rotate360 4s linear infinite, glow_pulse 2.8s ease-in-out infinite;
    opacity: 0.82;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-10::before,
.cs-comentario-avatar-border.cs-nivel-10::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #001f3f, #0080ff);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-10::after,
.cs-comentario-avatar-border.cs-nivel-10::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #00bfff, #87ceeb);
    animation: radius_ani 6s 1s linear infinite;
}*/

/* Nível 20 - Verde Natureza */
/*body.cs-profile-page .cs-avatar-border.cs-nivel-20,
.cs-comentario-avatar-border.cs-nivel-20 {
    background: linear-gradient(45deg, #00ff7f, #32cd32);
    color: #00ff7f;
    box-shadow: 0 0 12px #00ff7f, 0 0 24px #00ff7f, 0 0 36px #00ff7f;
    animation: rotate360 4s linear infinite, glow_pulse 2.6s ease-in-out infinite;
    opacity: 0.84;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-20::before,
.cs-comentario-avatar-border.cs-nivel-20::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #003300, #228b22);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-20::after,
.cs-comentario-avatar-border.cs-nivel-20::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #32cd32, #90ee90);
    animation: radius_ani 6s 1s linear infinite;
}*/

/* Nível 30 - Laranja Flamejante */
/*body.cs-profile-page .cs-avatar-border.cs-nivel-30,
.cs-comentario-avatar-border.cs-nivel-30 {
    background: linear-gradient(45deg, #ff4500, #ff8c00);
    color: #ff4500;
    box-shadow: 0 0 13px #ff4500, 0 0 26px #ff4500, 0 0 39px #ff4500;
    animation: rotate360 4s linear infinite, glow_pulse 2.4s ease-in-out infinite;
    opacity: 0.86;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-30::before,
.cs-comentario-avatar-border.cs-nivel-30::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #330000, #dc143c);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-30::after,
.cs-comentario-avatar-border.cs-nivel-30::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff8c00, #ffa500);
    animation: radius_ani 6s 1s linear infinite;
}*/

/* Nível 40 - Ciano Glacial */
body.cs-profile-page .cs-avatar-border.cs-nivel-40,
.cs-comentario-avatar-border.cs-nivel-40 {
    background: linear-gradient(45deg, #00ffff, #40e0d0);
    color: #00ffff;
    box-shadow: 0 0 14px #00ffff, 0 0 28px #00ffff, 0 0 42px #00ffff;
    animation: rotate360 4s linear infinite, glow_pulse 2.2s ease-in-out infinite;
    opacity: 0.88;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-40::before,
.cs-comentario-avatar-border.cs-nivel-40::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #002a2a, #008b8b);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-40::after,
.cs-comentario-avatar-border.cs-nivel-40::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #40e0d0, #afeeee);
    animation: radius_ani 6s 1s linear infinite;
}

/* Nível 50 - Rosa Místico */
body.cs-profile-page .cs-avatar-border.cs-nivel-50,
.cs-comentario-avatar-border.cs-nivel-50 {
    background: linear-gradient(45deg, #ff1493, #ff20a0);
    color: #ff1493;
    box-shadow: 0 0 15px #ff1493, 0 0 30px #ff1493, 0 0 45px #ff1493;
    animation: rotate360 4s linear infinite, glow_pulse 2s ease-in-out infinite;
    opacity: 0.9;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-50::before,
.cs-comentario-avatar-border.cs-nivel-50::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #330033, #c71585);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-50::after,
.cs-comentario-avatar-border.cs-nivel-50::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff20a0, #ff69b4);
    animation: radius_ani 6s 1s linear infinite;
}

/* Nível 60 - Amarelo Solar */
body.cs-profile-page .cs-avatar-border.cs-nivel-60,
.cs-comentario-avatar-border.cs-nivel-60 {
    background: linear-gradient(45deg, #ffd700, #fff700);
    color: #ffd700;
    box-shadow: 0 0 16px #ffd700, 0 0 32px #ffd700, 0 0 48px #ffd700;
    animation: rotate360 4s linear infinite, glow_pulse 1.8s ease-in-out infinite;
    opacity: 0.92;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-60::before,
.cs-comentario-avatar-border.cs-nivel-60::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #332200, #daa520);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-60::after,
.cs-comentario-avatar-border.cs-nivel-60::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #fff700, #ffff00);
    animation: radius_ani 6s 1s linear infinite;
}

/* Nível 70 - Vermelho Infernal */
body.cs-profile-page .cs-avatar-border.cs-nivel-70,
.cs-comentario-avatar-border.cs-nivel-70 {
    background: linear-gradient(45deg, #dc143c, #b22222);
    color: #dc143c;
    box-shadow: 0 0 17px #dc143c, 0 0 34px #dc143c, 0 0 51px #dc143c;
    animation: rotate360 4s linear infinite, glow_pulse 1.6s ease-in-out infinite;
    opacity: 0.94;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-70::before,
.cs-comentario-avatar-border.cs-nivel-70::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #1a0000, #8b0000);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-70::after,
.cs-comentario-avatar-border.cs-nivel-70::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #b22222, #ff0000);
    animation: radius_ani 6s 1s linear infinite;
}

/* Nível 80 - Roxo Real */
body.cs-profile-page .cs-avatar-border.cs-nivel-80,
.cs-comentario-avatar-border.cs-nivel-80 {
    background: linear-gradient(45deg, #9932cc, #8a2be2);
    color: #9932cc;
    box-shadow: 0 0 18px #9932cc, 0 0 36px #9932cc, 0 0 54px #9932cc;
    animation: rotate360 4s linear infinite, glow_pulse 1.4s ease-in-out infinite;
    opacity: 0.96;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-80::before,
.cs-comentario-avatar-border.cs-nivel-80::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #1a001a, #663399);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-80::after,
.cs-comentario-avatar-border.cs-nivel-80::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #8a2be2, #ba55d3);
    animation: radius_ani 6s 1s linear infinite;
}

/* Nível 90 - Índigo Cósmico */
body.cs-profile-page .cs-avatar-border.cs-nivel-90,
.cs-comentario-avatar-border.cs-nivel-90 {
    background: linear-gradient(45deg, #4b0082, #483d8b);
    color: #4b0082;
    box-shadow: 0 0 19px #4b0082, 0 0 38px #4b0082, 0 0 57px #4b0082;
    animation: rotate360 4s linear infinite, glow_pulse 1.2s ease-in-out infinite;
    opacity: 0.98;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-90::before,
.cs-comentario-avatar-border.cs-nivel-90::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #0d0014, #2f1b69);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-90::after,
.cs-comentario-avatar-border.cs-nivel-90::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #483d8b, #6a5acd);
    animation: radius_ani 6s 1s linear infinite;
}

/* Nível 100 - Dourado Divino */
body.cs-profile-page .cs-avatar-border.cs-nivel-100,
.cs-comentario-avatar-border.cs-nivel-100 {
    background: linear-gradient(45deg, #ffd700, #ffb347, #daa520);
    color: #ffd700;
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ffd700, 0 0 60px #ffd700;
    animation: rotate360 4s linear infinite, glow_pulse 1s ease-in-out infinite;
    opacity: 1;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-100::before,
.cs-comentario-avatar-border.cs-nivel-100::before {
    content: '';
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border-radius: 50%;
    background: linear-gradient(45deg, #1a1400, #b8860b, #ffd700);
    animation: radius_ani 6s linear infinite;
}
body.cs-profile-page .cs-avatar-border.cs-nivel-100::after,
.cs-comentario-avatar-border.cs-nivel-100::after {
    content: '';
    position: absolute;
    top: 3%;
    left: 3%;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background: linear-gradient(45deg, #ffd700, #fff8dc, #ffffe0);
    animation: radius_ani 6s 1s linear infinite;
}

/* Responsivo */
@media (max-width: 768px) {
    body.cs-profile-page .cs-avatar-wrapper {
        width: 140px;
        height: 140px;
    }
    body.cs-profile-page .cs-avatar {
        width: 120px;
        height: 120px;
    }
    body.cs-profile-page .cs-avatar-border {
        width: 140px;
        height: 140px;
    }
    .cs-comentario-avatar-wrapper {
        width: 50px;
        height: 50px;
    }
    .cs-comentario-inner > .cs-comentario-avatar-wrapper > img {
        width: 40px;
        height: 40px;
    }
    .cs-comentario-avatar-border {
        width: 50px;
        height: 50px;
    }
}


/* Tag de nível */
body.cs-profile-page .cs-nivel-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    /*background-color: #6a1b9a;*/
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    /*box-shadow: 0 0 6px rgba(106, 27, 154, 0.5);*/
}

/* Infos de usuário */
body.cs-profile-page .cs-user-info {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.cs-profile-page .cs-nick-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

body.cs-profile-page .cs-nick {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
}

body.cs-profile-page .cs-user-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.cs-profile-page .cs-comentario-tag {
    font-size: 0.9rem;
    padding: 2px 8px;
    border-radius: 4px;
}

body.cs-profile-page .cs-arroba {
    font-size: 1rem;
    opacity: 0.7;
    display: block;
}

/* Estatísticas em linha */
body.cs-profile-page .cs-user-stats {
    display: flex;
    gap: 40px;
    justify-content: center;
}

body.cs-profile-page .cs-stat {
    text-align: center;
}

body.cs-profile-page .cs-number {
    font-size: 1.4rem;
    color: #6a1b9a;
    font-weight: bold;
    margin-bottom: 4px;
}

body.cs-profile-page .cs-label {
    font-size: 0.9rem;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Últimos comentários */
body.cs-profile-page .cs-profile-comments {
    max-width: 820px; /* 1100px - 280px do user-panel - 40px de gap */
    margin: 160px auto 0;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 0 8px 2px rgba(106, 27, 154, 0.3);
    flex: 1;
}

body.cs-profile-page .cs-profile-comments h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: #ffffff;
}

body.cs-profile-page .cs-comentarios-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.cs-profile-page .cs-comentario-item {
    background: #000000;
    padding: 14px 20px;
    border-radius: 16px;
    border: none;
    margin-bottom: 14px;
    font-size: 1rem;
    line-height: 1.4;
    color: #ddd;
    box-shadow: 0 0 8px 2px rgba(106, 27, 154, 0.3);
}

body.cs-profile-page .cs-comentario-inner {
    display: flex;
    flex-direction: column;
}

body.cs-profile-page .cs-comentario-link-wrapper {
    margin-bottom: 10px;
}

body.cs-profile-page .cs-comentario-link {
    color: #6a1b9a;
    text-decoration: none;
    font-weight: bold;
}

body.cs-profile-page .cs-comentario-link:hover {
    color: #a322f3;
    text-decoration: underline;
}

body.cs-profile-page .cs-comentario-content {
    display: flex;
    gap: 15px;
}

body.cs-profile-page .cs-comentario-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 10px;
}

body.cs-profile-page .cs-comentario-content-wrapper {
    flex: 1;
}

body.cs-profile-page .cs-comentario-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 5px;
}

body.cs-profile-page .cs-comentario-nick {
    font-weight: bold;
    color: white;
}

body.cs-profile-page .cs-comentario-tempo {
    color: #666;
    font-size: 0.9rem;
}

body.cs-profile-page .cs-comentario-conteudo {
    margin: 10px 0;
    color: #ddd;
    overflow-wrap: break-word;
    font-family: '__Fira_Sans_5d1e58', '__Fira_Sans_Fallback_5d1e58', sans-serif;
    word-break: break-word;
    white-space: normal;
}

body.cs-profile-page .cs-comentario-conteudo img {
    max-width: 150px;
    margin: 8px 0;
    border-radius: 4px;
}

body.cs-profile-page .cs-comment-footer {
    background: #000000 !important;
    margin-top: 10px;
}

body.cs-profile-page .cs-post-votes {
    display: flex;
    gap: 15px;
}

body.cs-profile-page .cs-post-votes span {
    color: #6a1b9a; 
}

body.cs-profile-page .cs-vote-count {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ccc;
}

body.cs-profile-page .cs-vote-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

body.cs-profile-page #cs-carregar-mais {
    display: block;
    margin: 20px auto;
    padding: 10px 50px;
    background-color: #8224e3;
    box-shadow: 0 0 8px 2px rgba(106, 27, 154, 0.3);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

body.cs-profile-page #cs-carregar-mais:hover {
    background-color: #2d0357;
}

/* Aumenta a largura da tela e diminui o rotate */
@media (min-width: 400px) {
    body.cs-profile-page .cs-full-purple-strip {
        transform: rotate(-10deg);
    }
}

@media (min-width: 500px) {
    body.cs-profile-page .cs-full-purple-strip {
        transform: rotate(-5deg);
    }
}

@media (min-width: 600px) {
    body.cs-profile-page .cs-full-purple-strip {
        transform: rotate(-0deg);
    }
}

/* Responsivo */
@media (max-width: 768px) {
    body.cs-profile-page header {
        position: relative;
        z-index: 10;
    }
    
    body.cs-profile-page .cs-full-purple-strip {
        width: 150vw;
        height: 250px;
        top: -60px;
        left: -25vw;
        transform: rotate(-15deg);
    }

    body.cs-profile-page .cs-profile-container {
        flex-direction: column;
        align-items: center;
        padding: 0 10px;
    }

    body.cs-profile-page .cs-profile-user-panel {
        min-height: auto;
        margin-bottom: 40px;
    }

    body.cs-profile-page .cs-user-stats {
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }

    body.cs-profile-page .cs-profile-comments {
        margin-top: 20px;
        max-width: 100%;
    }

    body.cs-profile-page .cs-comentario-avatar {
        margin-left: 5px;
    }

    body.cs-profile-page .cs-nick-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    body.cs-profile-page .cs-user-tags {
        justify-content: center;
    }

    body.cs-profile-page .cs-arroba {
        margin-top: 5px;
    }
}