/* ===================================================== */
/* 💬 COMMENTS PAGE BASE                                */
/* ===================================================== */

.comments-page {
    /* padding: 16px; */
    padding-bottom: 45px;
}

.comments-list {
    overflow-anchor: none;
}

/* ===================================================== */
/* 🧱 COMMENT ITEM                                      */
/* ===================================================== */

.comment-item {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
}


/* ===================================================== */
/* 🔝 COMMENTS HEADER (PRO VERSION FINAL)                */
/* ===================================================== */

.comments-page__header {
    position: sticky;
    top: 0;
    z-index: 100;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 56px;
    padding: 0 16px;

    /* Fundo base */
    background-color: var(--color-bg-main);

    /* Linha inferior sutil */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    /* Glass effect (premium) */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Melhor contraste em overlay */
    background: rgba(15, 15, 15, 0.75);
}


/* ===================================================== */
/* 🔙 BOTÃO VOLTAR                                       */
/* ===================================================== */

.comments-page__back {
    position: absolute;
    left: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: none;
    border: none;
    cursor: pointer;

    border-radius: 50%;

    transition: background 0.2s ease;
}

/* Hover (desktop) */
.comments-page__back:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Active (mobile feedback) */
.comments-page__back:active {
    background: rgba(255, 255, 255, 0.1);
}


/* ===================================================== */
/* 🎯 ÍCONE                                              */
/* ===================================================== */

.comments-page__back img {
    width: 20px;
    height: 20px;

    opacity: 0.85;
    filter: invert(100%) sepia(0%) saturate(7479%) hue-rotate(8deg) brightness(98%) contrast(106%);
    pointer-events: none;
}


/* ===================================================== */
/* 📝 TÍTULO CENTRAL                                     */
/* ===================================================== */

.comments-page__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);

    text-align: center;
    white-space: nowrap;
}


/* ===================================================== */
/* ✨ SOMBRA AO SCROLL (UX PREMIUM)                      */
/* ===================================================== */

.comments-page__header.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}




/* HEADER: avatar + conteúdo + like */
.comment-item__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* AVATAR */
.comment-item__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

/* MAIN CONTENT */
.comment-item__main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* USERNAME */
.comment-item__username {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

/* TEXT */
.comment-item__content {
    font-size: 14px;
    color: #e5e5e5;
    line-height: 1.4;
}

/* LEIA MAIS */
.comment-item__expand {
    background: none;
    border: none;
    color: #aaa;
    font-size: 13px;
    cursor: pointer;
}

/* META */
.comment-item__meta {
    display: flex;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
    color: #888;
}

.comment-item__reply {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
}


/* ===================================================== */
/* ❤️ LIKE LATERAL (UNIFICADO COMMENT + REPLY)           */
/* ===================================================== */

.comment-item__like,
.comment-reply__like {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Evita quebrar o layout lateral do comentário/reply */
    flex-shrink: 0;
}

/* ===================================================== */
/* 🖱️ BOTÃO                                             */
/* ===================================================== */

.comment-item__like-btn,
.comment-reply__like-btn {
    background: none;
    border: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Melhora a área de toque no mobile/WebView */
    padding: 4px;

    /* Remove destaque azul/cinza em alguns navegadores mobile */
    -webkit-tap-highlight-color: transparent;
}

/* ===================================================== */
/* ❤️ ÍCONE                                              */
/* ===================================================== */

.comment-item__like-icon,
.comment-reply__like-icon {
    width: 20px;
    height: 20px;

    /*
     * Não animamos filter.
     * Animar filter causa flash visual quando o coração
     * muda de regular para solid/curtido.
     */
    transition:
        transform 0.15s ease,
        opacity 0.15s ease;

    /* 🤍 NÃO CURTIDO */
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    opacity: 0.3;
}

/* ===================================================== */
/* ❤️ CURTIDO                                            */
/* ===================================================== */

.comment-item__like-btn.liked .comment-item__like-icon,
.comment-reply__like-btn.liked .comment-reply__like-icon {
    /*
     * Cor aplicada instantaneamente.
     * Isso evita passar por cor intermediária durante o clique.
     */
    filter: invert(51%) sepia(41%) saturate(7499%) hue-rotate(358deg) brightness(95%) contrast(94%);
    opacity: 1;
}

/* ===================================================== */
/* 👇 CLICK FEEDBACK                                     */
/* ===================================================== */

.comment-item__like-btn:active .comment-item__like-icon,
.comment-reply__like-btn:active .comment-reply__like-icon {
    transform: scale(1.2);
}

/* ===================================================== */
/* 🔢 CONTADOR                                           */
/* ===================================================== */

.comment-item__like-count,
.comment-reply__like-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    line-height: 1;
    text-align: center;
}

/* ===================================================== */
/* 🔥 ESCONDE QUANDO ZERO                                */
/* ===================================================== */

.comment-item__like-count:empty,
.comment-reply__like-count:empty {
    display: none;
}




/* ===================================================== */
/* 👁 BOTÃO VER RESPOSTAS                                */
/* ===================================================== */
.comment-item__show-replies {
    min-height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 2px;

    background: transparent;
    border: none;

    color: #aaa;
    font-size: 12px;
    line-height: 1;

    cursor: pointer;
}


/* ===================================================== */
/* 🔁 REPLIES                                           */
/* ===================================================== */

.comment-item__replies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 52px; /* indentação leve */
}



/* ===================================================== */
/* 🔽 DIVIDER                                           */
/* ===================================================== */

.comment-divider {
     height: 1px;
     background: #1f1f1f00;
     margin: 6px 0;
}


/* ===================================================== */
/* 🔁 COMMENT REPLY                                     */
/* ===================================================== */

.comment-reply {
    display: flex;
    flex-direction: column;
}

.comment-reply__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
}

/* AVATAR MENOR */
.comment-reply__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

/* MAIN */
.comment-reply__main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* USERNAME */
.comment-reply__username {
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}

/* CONTENT */
.comment-reply__content {
    font-size: 13px;
    color: #e5e5e5;
    line-height: 1.4;
}

/* MENTION */
.comment-reply__mention {
    color: #F86418;
    text-decoration: none;
    margin-right: 4px;
}

/* META */
.comment-reply__meta {
    display: flex;
    gap: 10px;
    margin-top: 3px;
    font-size: 11px;
    color: #888;
}

.comment-reply__reply {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
}

/* LIKE REPLY */
.comment-reply__like {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 2px; */
    /* min-width: 28px; */
}

.comment-reply__like-icon {
    width: 18px;
    height: 18px;
}

.comment-reply__like-count {
    font-size: 10px;
    color: #aaa;
}




/* ===================================================== */
/* 🔄 LOAD MORE (PRO LOADER FINAL)                       */
/* ===================================================== */

.comment-item__load-more {
    display: flex;
    justify-content: center;
    margin-top: 6px;
}

/* BOTÃO */
.comment-item__load-more-btn {
    background: none;
    border: none;
    font-size: 12px;
    color: #aaa;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


/* ===================================================== */
/* 💬 COMMENT DIVIDER — VER RESPOSTAS / MOSTRAR MAIS     */
/* Linha real dos dois lados, sem passar atrás do texto   */
/* ===================================================== */

.comment-divider-hr {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
    margin: 6px 0;

    width: 100%;
}

/* Linha esquerda e direita */
.comment-divider-hr::before,
.comment-divider-hr::after {
    content: "";

    height: 1px;
    flex: 1;

    background: #2a2a2a;
}

/* Conteúdo central: botão/texto/spinner */
.comment-divider-hr > * {
    flex-shrink: 0;
}



/* ===================================================== */
/* 💀 COMMENTS SKELETON (PRO VERSION)                    */
/* ===================================================== */

.comments-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 16px;
}

/* ITEM */
.comment-skeleton {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* AVATAR */
.comment-skeleton__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2a2a2a;
    flex-shrink: 0;
}

/* CONTEÚDO */
.comment-skeleton__content {
    flex: 1;
    height: 14px;
    border-radius: 6px;
    background: #2a2a2a;
    position: relative;
    overflow: hidden;
}

/* LINHAS FAKE */
.comment-skeleton__content::after {
    content: "";
    display: block;
    margin-top: 6px;
    width: 70%;
    height: 10px;
    border-radius: 6px;
    background: #2a2a2a;
}

/* ===================================================== */
/* ✨ ANIMAÇÃO SHIMMER (EFEITO REAL)                     */
/* ===================================================== */

.comment-skeleton__avatar,
.comment-skeleton__content,
.comment-skeleton__content::after {
    position: relative;
    overflow: hidden;
}

.comment-skeleton__avatar::before,
.comment-skeleton__content::before,
.comment-skeleton__content::after::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150px;
    height: 100%;
    width: 150px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08),
        transparent
    );
    animation: skeleton-loading 1.2s infinite;
}

@keyframes skeleton-loading {
    0% {
        left: -150px;
    }
    100% {
        left: 100%;
    }
}



/* ===================================================== */
/* 💬 COMMENTS INPUT CONTAINER                           */
/* ===================================================== */

.comments-input {
    position: fixed;
    bottom: 0;

    width: 100%;
    max-width: 600px;

    margin: 0 auto;
    left: 0;
    right: 0;

    background: var(--color-bg-main);
    border-top: 1px solid rgba(255,255,255,0.05);

    padding: 10px 12px;

    z-index: 999;
}

/* ===================================================== */
/* 🔁 REPLY BAR                                          */
/* ===================================================== */

.comments-input__reply {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 12px;
    color: var(--color-text-secondary);

    margin-bottom: 6px;
}

.comments-input__reply strong {
    color: var(--color-primary);
}

.comments-input__reply.hidden {
    display: none;
}

.comments-input__reply-cancel {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 14px;
}


/* ===================================================== */
/* 🔥 MAIN INPUT ROW                                     */
/* ===================================================== */

.comments-input__main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}


/* AVATAR */

.comments-input__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}


/* ===================================================== */
/* 💬 INPUT BOX                                          */
/* ===================================================== */

.comments-input__box {
    flex: 1;

    background: var(--color-bg-card);
    border-radius: 20px;

    padding: 8px 12px;
}


/* ===================================================== */
/* ✍️ INPUT FIELD (AUTO EXPAND)                          */
/* ===================================================== */

.comments-input__field {
    min-height: 20px;
    max-height: 120px;

    outline: none;
    border: none;

    color: var(--color-text-primary);
    font-size: 14px;

    line-height: 1.4;

    width: 100%;

    overflow: hidden; /* 🔥 remove scroll interno */
    word-break: break-word;
}


/* PLACEHOLDER */

.comments-input__field:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-secondary);
    pointer-events: none;
}


/* ===================================================== */
/* 😀 FOOTER (EMOJIS + BOTÃO)                            */
/* ===================================================== */

.comments-input__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 10px;
}



/* ===================================================== */
/* 😀 EMOJIS                                             */
/* ===================================================== */

.comments-input__extras {
    display: flex;
    gap: 8px;

    overflow-x: auto;
    max-width: 100%;

    flex: 1; /* 🔥 ocupa espaço disponível */
}

.comments-input__extras::-webkit-scrollbar {
    display: none;
}

.comments-input__emoji {
    background: none;
    border: none;
    cursor: pointer;

    font-size: 18px;

    transition: transform 0.15s ease;
}

.comments-input__emoji:active {
    transform: scale(1.2);
}


/* ===================================================== */
/* 🚀 BOTÃO ENVIAR                                       */
/* ===================================================== */

.comments-input__submit {
    width: 42px;
    height: 42px;

    min-width: 42px;   /* 🔥 IMPORTANTE */
    min-height: 42px; /* 🔥 IMPORTANTE */

    flex-shrink: 0;   /* 🔥 ESSENCIAL */

    border-radius: 50%;
    border: none;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.08);

    cursor: not-allowed;

    transition: all 0.2s ease;
}

/* ÍCONE */

.comments-input__submit img {
    width: 18px;
    height: 18px;

    filter: invert(70%);
}


/* ===================================================== */
/* 🔥 BOTÃO ATIVO                                        */
/* ===================================================== */

.comments-input__submit.active {
    background: var(--color-primary);
    cursor: pointer;
}

.comments-input__submit.active img {
    filter: invert(100%);
}


/* ===================================================== */
/* 📱 MOBILE AJUSTES                                     */
/* ===================================================== */

@media (max-width: 480px) {

    .comments-input__field {
        font-size: 13px;
    }

    .comments-input__emoji {
        font-size: 20px;
    }

}




/* =====================================================
   🎯 COMMENT TARGET HIGHLIGHT
   Destaque temporário quando o usuário vem de uma notificação
===================================================== */

.comment-target-highlight {
    animation: commentTargetPulse 2.5s ease;
}

@keyframes commentTargetPulse {
    0% {
        background: rgba(255, 255, 255, 0.08);
        
    }

    50% {
        background: rgba(255, 255, 255, 0.12);
        
    }

    100% {
        background: transparent;
        
    }
}




/* =====================================================
   🔽 READ MORE — COMMENTS / REPLIES
===================================================== */

.comment-item__content.is-collapsed,
.comment-reply__content.is-collapsed {
    display: -webkit-box;

    line-clamp: 15;
    -webkit-line-clamp: 15;

    -webkit-box-orient: vertical;

    overflow: hidden;
}

.comment-item__expand,
.comment-reply__expand {
    display: inline-flex;
    align-items: center;

    border: 0;
    padding: 0;
    margin-top: 4px;

    background: transparent;
    color: rgba(255, 255, 255, 0.55);

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.comment-item__expand:active,
.comment-reply__expand:active {
    opacity: 0.75;
}




/* =====================================================
   💬 COMMENTS — SPINNER GLOBAL UAICINE
===================================================== */

.uaic-comment-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

.uaic-comment-spinner__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;

    opacity: 0.35;
    transform: scale(0.85);

    animation: uaic-comment-spinner-pulse 0.9s ease-in-out infinite;
}

.uaic-comment-spinner__dot--orange {
    background: var(--color-primary, #ff5a00);
}

.uaic-comment-spinner__dot--white {
    background: #ffffff;
}

.uaic-comment-spinner__dot:nth-child(1) {
    animation-delay: 0s;
}

.uaic-comment-spinner__dot:nth-child(2) {
    animation-delay: 0.14s;
}

.uaic-comment-spinner__dot:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes uaic-comment-spinner-pulse {
    0%,
    80%,
    100% {
        opacity: 0.35;
        transform: scale(0.85);
    }

    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}


/* =====================================================
   💬 COMMENTS — LOADER CENTRAL DAS RESPOSTAS
   Usado quando ainda NÃO existe resposta visível
===================================================== */

.comment-item__replies-loader {
    width: 100%;
    min-height: 24px;
    padding: 8px 0 6px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-item__replies-loader.hidden {
    display: none;
}


/* =====================================================
   💬 COMMENTS — BOTÃO MOSTRAR MAIS
===================================================== */

.comment-item__loader {
    display: none;
    align-items: center;
    justify-content: center;
}

.comment-item__load-more-btn.loading {
    pointer-events: none;
    opacity: 0.85;
}

.comment-item__load-more-btn.loading .comment-item__load-more-text {
    display: none;
}

.comment-item__load-more-btn.loading .comment-item__loader {
    display: inline-flex;
}




/* =====================================================
   💬 COMMENTS — BOTÃO VER RESPOSTAS
   Usado quando JÁ existe resposta visível
===================================================== */

.comment-item__show-replies {
    min-height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: var(--color-bg-main);
    line-height: 1;
}

.comment-item__show-replies-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.comment-item__show-replies-loader {
    display: none;
    align-items: center;
    justify-content: center;
}

.comment-item__show-replies.loading {
    pointer-events: none;
    opacity: 1;
}

.comment-item__show-replies.loading .comment-item__show-replies-text {
    display: none;
}

.comment-item__show-replies.loading .comment-item__show-replies-loader {
    display: inline-flex;
}


/* =====================================================
   💬 COMMENTS — AJUSTE DO DIVISOR COM LOADER
===================================================== */

.comment-divider-hr {
    min-height: 22px;
}

.comment-divider-hr > * {
    background: var(--color-bg-main);
}




/* =====================================================
   💬 COMMENTS — LOADER DO SCROLL INFINITO
===================================================== */

.comments-scroll-loader {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 14px 0 22px;
}

.comments-scroll-loader.hidden {
    display: none;
}

.comments-sentinel {
    width: 100%;
    height: 1px;
}