/* ============================================================================
   🌙 Ghostune — Sistema de Comentários Fullscreen ao estilo TikTok/Instagram
   Resultado: Modal 100% tela, com animações profissionais de abertura/fechamento
============================================================================ */


body.modal-aberto {
    overflow: hidden !important;
    height: 100vh !important;
    touch-action: none; /* 🔥 evita scroll no mobile e WebView */
}




:root {
    --bg-overlay: rgba(0, 0, 0, 0.65);
    --bg-modal: #0d0d0d;
    --border-color: #222;
    --text-color: #eaeaea;
    --text-muted: #8e8e8e;
    --accent: #00f5ff;
}


/* ============================================================================
    🟪 OVERLAY (FULLSCREEN + ANIMAÇÃO DE FADE)
============================================================================ */
/* ============================================================================
   🟦 COMMENTS MODAL — OVERLAY (FULLSCREEN + FADE / SLIDE GPU)
   ✔ Android WebView friendly
   ✔ Sem reflow
   ✔ Sem travadinhas
============================================================================ */
/* =========================================================
   MODAL DE COMENTÁRIOS — ENTRADA/SAÍDA ULTRA RÁPIDA
   - WebView safe
   - Sensação nativa
   - Igual ao modal de post
========================================================= */
/* =========================================================
   OVERLAY DO MODAL — ESTÁTICO (NÃO ANIMA)
   - Evita jank na WebView
   - Só controla visibilidade e clique
========================================================= */
/* =========================================================
   OVERLAY DO MODAL — ESTÁTICO (NÃO ANIMA)
   - Evita jank na WebView
   - Só controla visibilidade e clique
========================================================= */
.comentarios-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    background: rgba(0, 0, 0, 0); /* overlay neutro */

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.12s ease-out;
}

/* OVERLAY ATIVO */
.comentarios-modal-overlay.mostrar {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================================
   CAIXA PRINCIPAL — ÚNICO ELEMENTO ANIMADO
   - GPU only
   - Movimento simples
   - Fluido na WebView
========================================================= */
.comentarios-modal-box {
    width: 100vw;
    height: 100vh;

    background: var(--bg-modal);

    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* ESTADO FECHADO */
    transform: translate3d(0, 100%, 0);

    transition:
        transform 0.18s cubic-bezier(0.33, 1, 0.68, 1);

    will-change: transform;
}

/* =========================
   MODAL ABERTO
========================= */
.comentarios-modal-overlay.mostrar .comentarios-modal-box {
    transform: translate3d(0, 0, 0);
}

/* =========================
   MODAL FECHANDO
========================= */
.comentarios-modal-overlay.removendo .comentarios-modal-box {
    transform: translate3d(0, 100%, 0);
}



/* ============================================================================
    🟧 HEADER (CENTRALIZADO + BACK ARROW + FECHAR)
============================================================================ */
.comentarios-modal-header {
  height: 56px;
  padding-inline: 12px;

  display: flex;
  align-items: center;

  background: var(--cor-fundo);
  border-bottom: 0px solid rgba(255,255,255,0.08);
  z-index: 100;
}

/* Título central real */
.comentarios-titulo {
  flex: 1;
  text-align: center;

  margin: 0;
  font-size: 1rem;
  font-weight: 600;
      color: var(--cor-title-header);

  white-space: nowrap;
  pointer-events: none;
}

/* Spacer direito */
.comentarios-header-spacer {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

/* Quantidade */
.comentarios-count {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55); /* 🔥 opacidade elegante */
}

/* Botão esquerda */
.comentarios-fechar {
  width: 44px;
  height: 44px;

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

  background: none;
  border: none;
  padding: 0;

  color: #fff;
  cursor: pointer;
  flex: 0 0 44px;
}

.comentarios-fechar:hover {
    color: var(--cor-texto-icons-comment);
}



/* ============================================================================
    🟦 ÁREA DE SCROLL — comentários
============================================================================ */

.comentarios-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}



/* 🔥 A área que scrolla PRECISA ocupar todo o espaço restante */
#comentariosScrollArea {
    flex: 1;
    overflow-y: auto !important;
    padding-bottom: 20px;
}


/* ============================================================================
    🟩 COMENTÁRIO PRINCIPAL (full width)
============================================================================ */

.comentario-item {
    width: 100%;
    padding: 12px 16px;
    /* border-bottom: 1px solid var(--border-color); */
    display: flex;
    gap: 12px;
}

.comentario-avatar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.comentario-conteudo { flex: 1; }

/* =====================================================
   COMENTÁRIO — ALINHAR NOME + ÍCONE
===================================================== */
.comentario-nome a {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* espaço entre nome e ícone */
  color: var(--cor-texto-icons-comment);
  text-decoration:none;
}

/* =====================================================
   COMENTÁRIO — SUPER USUÁRIO (SOBRESCREVE COR PADRÃO)
===================================================== */
.comentario-nome a.superuser-name {
  color: #ffcc33;
  font-weight: 600;
}

.comentario-texto {
    margin-top: 0.2rem;
    color: var(--cor-texto-icons-comment);
    line-height: 1.35;
    font-size: var(--fonte-sm);
}

.comentario-sub {
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--fonte-sm);
    color: rgb(123 123 123 / 87%);
    font-weight: 600;
}

.comentario-sub button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fonte-sm);
    color: rgb(123 123 123 / 87%);
    font-weight: 600;
}

.resposta-tempo {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fonte-sm);
    color: rgb(123 123 123 / 87%);
    font-weight: 600;
}

.resposta-sub button{
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fonte-sm);
    color: rgb(123 123 123 / 87%);
    font-weight: 600;
}

.btn-like-comentario.ativo {
    color: rgb(123 123 123 / 87%);
}


/* ============================================================================
    🟨 RESPOSTA VISÍVEL
============================================================================ */

.comentario-respostas-visivel {
    margin-left: 55px;
    margin-top: 10px;
}



/* ============================================================
   RESPOSTAS — LÓGICA CORRETA
   (Nada aparece automaticamente — só via JS)
============================================================ */

/* lista sempre começa oculta */
.comentario-respostas-lista {
    display: none;
    margin-left: 0px;
    margin-top: 6px;
}

/* lista aberta pelo JS */
.comentario-respostas-lista.aberto {
    display: block;
}



/* botão "ocultar" começa oculto */
.comentario-ocultar-respostas {
    margin-left: 55px;
    margin-top: 10px;
    font-size: var(--fonte-sm);
    color: rgb(123 123 123 / 87%);
    cursor: pointer;
    display: none;
}


/* resposta enviada aparece mesmo com lista fechada */
.comentario-respostas-lista.visivel {
    display: block;
}





/* ============================================================================
    🟣 ITEM DE RESPOSTA
============================================================================ */

.resposta-item {
    width: 100%;
    padding: 10px 0px;
    display: flex;
    gap: 10px;
}

.resposta-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.resposta-nome a {
    text-decoration: none;
    color: var(--cor-texto-icons-comment);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* =====================================================
   RESPOSTA — SUPER USUÁRIO (COR AMARELA)
===================================================== */
.resposta-nome a.superuser-name {
  color: #ffcc33; /* mesmo amarelo do app */
}

.resposta-texto {
    margin-top: 0.2rem;
    color: var(--text-color);
    font-size: var(--fonte-sm);
}

.resposta-sub {
    margin-top: 0.2rem;
    display: flex;
    gap: 14px;
    /* font-size: 3.86rem; */
}

.btn-like-resposta.ativo {
   color: rgb(211 54 134);
}


/* ============================================================================
    🟢 VER MAIS / OCULTAR
============================================================================ */
/* botão "ver respostas" visível por padrão */
.comentario-ver-mais-respostas,
.comentario-ocultar-respostas {
    margin-left: 0px;
    margin-top: 10px;
    font-size: var(--fonte-sm);
    color: rgb(123 123 123 / 87%);
    cursor: pointer;
    display: block;
    font-weight: 600;
}


/* ============================================================================
    🟫 FORM FIXO (rodapé)
============================================================================ */

.comentarios-form-area {
    width: 100%;
    background: var(--cor-fundo);
    border-top: 1px solid #121823;
    padding: 16px 16px 16px 16px;
}

.comentario-form-wrapper {
    display: flex;
    gap: 10px;
}




/* ===============================
   MODAL DE RESPOSTA — OVERLAY
=============================== */
.modal-resposta-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    /*backdrop-filter: blur(4px);*/
    display: none;
    justify-content: center;
    align-items: flex-end;
    z-index: 9995;
    transition: opacity .25s ease;
}

.modal-resposta-overlay.mostrar {
    display: flex;
    opacity: 1;
}

/* ===============================
   CAIXA DO MODAL
=============================== */
/* Modal resposta invisível por padrão */
#modalResposta {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    justify-content: flex-end; /* estilo TikTok */
    z-index: 9999;
}

/* Quando aberto */
#modalResposta.mostrar {
    display: flex;
}

/* Caixa */
.modal-resposta-box {
    background: var(--cor-fundo);
    width: 100%;
    padding: 16px;
    /* border-radius: 16px 16px 0 0; */
    animation: slideUp 0.2s ease;
}

/* Botão enviar desabilitado */
.modal-resposta-enviar:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ===============================
   HEADER
=============================== */
.modal-resposta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.modal-resposta-title {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
}

.modal-resposta-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
}

/* ===============================
   INFO DO COMENTÁRIO
=============================== */
.modal-resposta-info {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    align-items: center;
}

.modal-resposta-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.modal-resposta-username {
    color: #00e0ff;
    font-weight: 600;
}

.modal-resposta-preview {
    margin: 2px 0 0;
    color: #ccc;
    font-size: 13px;
}

/* ===============================
   TEXTAREA
=============================== */
.modal-resposta-textarea-wrapper {
    margin-top: 10px;
}

.modal-resposta-textarea {
    width: 100%;
    min-height: 90px;
    background: #181818;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 12px;
    resize: none;
    color: #fff;
    font-size: 15px;
}

/* ===============================
   FOOTER / ENVIAR
=============================== */
.modal-resposta-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.modal-resposta-enviar {
    background: #00e0ff;
    border: none;
    padding: 10px 22px;
    border-radius: 14px;
    font-weight: bold;
    cursor: pointer;
}





/* MODAL PARA EXCLUIR COMENTARIOS E REPOSTAS */
.modal-excluir-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20000 !important;   
}

.modal-excluir-box {
    background: #111;
    padding: 20px;
    width: 80%;
    max-width: 320px;
    border-radius: 12px;
    text-align: center;
    color: white;
    animation: scaleIn .14s ease;
}

@keyframes scaleIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-excluir-botoes button {
    margin: 10px 5px 0;
    padding: 8px 14px;
    border-radius: 6px;
}

.btn-excluir-confirmar {
    background: #e63946;
    color: #fff;
    border: none;
}

.btn-excluir-cancelar {
    background: #333;
    color: #fff;
    border: none;
}





/* wrapper interno para garantir que avatar e texto fiquem lado a lado */
.resposta-touch-area {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    gap: 10px; /* espaço entre avatar e conteúdo */
}

/* garante que o avatar mantenha tamanho e alinhamento */
.resposta-avatar {
    flex-shrink: 0;
}

/* texto da resposta deve ocupar o espaço restante */
.resposta-conteudo {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
}












/* ========================================================================= */
/* 🟣 SKELETON “AVATAR + LINHA LONGA” — Estilo WhatsApp / Threads (2025)     */
/* ========================================================================= */

.skeleton-bubble-list {
    padding: 0;
}

.skeleton-bubble-item {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    opacity: 0.85;
}

.skeleton-bubble-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.05) 100%
    );
    background-size: 200% 100%;
    animation: bubblePulse 1.4s infinite ease-in-out;
    flex-shrink: 0;
}

.skeleton-bubble-line {
    height: 16px;
    width: 75%;
    border-radius: 12px;
    margin-left: 14px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.05) 100%
    );
    background-size: 200% 100%;
    animation: bubblePulse 1.4s infinite ease-in-out;
}

/* Animação */
@keyframes bubblePulse {
    0% { background-position: -150% 0; }
    50% { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}

/* Ajuste no mobile */
@media (max-width: 450px) {
    .skeleton-bubble-line {
        width: 60%;
    }
}







/* ===================================================== */
/* ⭐ LOADER DO SCROLL INFINITO — Ghostune 2025          */
/* ===================================================== */






/* ================================================
   SISTEMA DE DUAS COLUNAS
   Alinhamento perfeito entre comentários e respostas
   ================================================ */

/* Comentário principal */
.comentario-sub {
    display: flex;
    justify-content: space-between; /* duas colunas */
    align-items: center;
    width: 100%;
}

/* Resposta */
.resposta-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Coluna ESQUERDA: tempo + responder */
.comentario-sub-left,
.resposta-sub-left {
    display: flex;
    align-items: center;
    gap: 16px; /* distância natural */
}

/* Coluna DIREITA: like */
.comentario-sub-right,
.resposta-sub-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 45px; /* garante mesma coluna */
}



/* ===========================
   Ícones do coração
=========================== */
.icon-heart-solid {
    width: 20px;
    height: 20px;
    color: var(--cor-coracao-like-solid, #7B7B7B);
    fill: currentColor;
    transition: transform .25s ease, color .25s ease;
}

#icon-heart-regular {
    color: rgb(123 123 123 / 87%);
}

/* cor quando curtido */
.btn-like-comentario.ativo .icon-heart-solid use,
.btn-like-resposta.ativo .icon-heart-solid use {
    color: var(--cor-coracao-like-solid);
    fill: var(--cor-coracao-like-solid);
}

/* ====================================================================================
   EFEITO PROFISSIONAL DO LIKE - SOMENTE O CORAÇÃO (NÃO AFETA O NÚMERO)
   Pop + pulse estilo Instagram
==================================================================================== */

.btn-like-comentario svg,
.btn-like-resposta svg {
    transition: transform 0.25s cubic-bezier(.3,1.8,.6,1),
    color 0.25s ease;
    display: inline-flex;
    align-items: center;   /* ALINHA VERTICALMENTE */
    gap: 4px;              /* espaço entre ícone e número */
    color: #EA646C;
}


/* animação principal */
.animar-like svg {
    transform: scale(1.45);
}

/* retorno suave ao tamanho normal */
.animar-like-voltar svg {
    transform: scale(1);
    transition: transform 0.22s cubic-bezier(.4,.0,.3,1);
}


/* Botão de like: ícone + número alinhados no centro */
.btn-like-comentario,
.btn-like-resposta {
    display: inline-flex;      /* deixa ícone e número lado a lado */
    align-items: center;       /* CENTRALIZA verticalmente */
    gap: 4px;                  /* espacinho entre coração e número */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}



.btn-like-comentario svg,
.btn-like-resposta svg {
    width: 17px;
    height: 17px;
    transition: transform 0.25s cubic-bezier(.3,1.8,.6,1),
                color 0.25s ease;
    /* nada de flex aqui, o flex é no botão */
}


.like-count {
    line-height: 1;
    display: inline-block;
}







/* =============================
   SKELETON DE RESPOSTA
============================= */
.skeleton-resposta {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    align-items: center;
    animation: fadeIn 0.2s ease-in;
}

.sk-avatar-resposta {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1e1e1e;
    animation: pulse 1.4s infinite ease-in-out;
}

.sk-lines-resposta {
    flex: 1;
}

.sk-line-resposta {
    height: 15px;
    width: 40%;
    background: #1e1e1e;
    border-radius: 4px;
    margin-bottom: 6px;
    animation: pulse 1.4s infinite ease-in-out;
}

.sk-line-resposta.small {
    width: 80%;
    height: 20px;
}


/* Loader skeleton (scroll infinito) */
.skeleton-loader {
    opacity: 0;            /* invisível por padrão */
    pointer-events: none;  /* não interfere no clique */
    transition: opacity .25s ease;
}

.skeleton-loader.show {
    opacity: 1;            /* exibido pelo JS */
}




/* =============================
   SKELETON DE COMENTÁRIO
============================= */
.skeleton-comentario {
    display: flex;
    gap: 10px;
    padding: 8px 16px;
    align-items: center;
    animation: fadeIn 0.2s ease-in;
}

.sk-avatar-comentario {
    width: 38px; /* um pouco maior que o da resposta, opcional */
    height: 38px;
    border-radius: 50%;
    background-color: var(--skeleton-line-avatar);
    animation: pulse 1.4s infinite ease-in-out;
}

.sk-lines-comentario {
    flex: 1;
}

.sk-line-comentario {
    height: 15px;
    width: 40%;
    background-color: var(--skeleton-line-avatar);
    border-radius: 4px;
    margin-bottom: 6px;
    
}

.sk-line-comentario.small {
    width: 100%;
    height: 20px;
}




/* ===================================================== */
/* 🦴 SKELETON — UMA COR + SHIMMER PROFISSIONAL          */
/* ===================================================== */

.sk-avatar-comentario,
.sk-line-comentario {
  background-color: var(--skeleton-line-avatar);

  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 255, 255, 0.00) 100%
  );

  background-size: 200% 100%;
  background-position: 200% 0;

  animation: skeleton-shimmer-reverse 2.5s linear infinite;
  will-change: background-position;
}

@keyframes skeleton-shimmer-reverse {
  from {
    background-position: 200% 0;  /* entra pela direita */
  }
  to {
    background-position: -200% 0; /* sai pela esquerda */
  }
}




/* ================================
   "SEJA O PRIMEIRO" — Centralizado
================================ */
.comentarios-scroll-area {
    position: relative;   /* 🔥 ESSENCIAL */
    background: var(--cor-fundo);
}

/* ================================
   "SEJA O PRIMEIRO" — Centralizado
================================ */
.comentarios-primeiro {
    position: absolute;
    inset: 0;
    display: none;     /* padrão */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}



.cp-texto {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.63);
    font-weight: 500;
}


/* ================================
   FIM DOS COMENTÁRIOS — Bottom fixo
================================ */
.comentarios-fim {
    text-align: center;
    padding: 20px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.63);
    opacity: .7;

    display: none;
}

/* ============================================================================
   GHOSTUNE — SISTEMA DE COMENTÁRIO PRINCIPAL
   Avatar fixo no topo, editor contenteditable, emojis e botão SEND
============================================================================ */


/* ===============================
   GRID DO INPUT (avatar | editor)
=============================== */
.gt-input-wrapper {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 10px;
    align-items: flex-start;       /* 🔥 garante avatar no topo */
    width: 100%;
    margin-top: 0px;
}



/* ===============================
   AVATAR — Coluna 1
=============================== */
.gt-avatar-col {
    display: flex;
    align-items: flex-start;       /* 🔥 evita que avatar desça */
}

.gt-avatar-outside {
    width: 38px;
    height: 38px;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(180deg, #EA646C 5.2%, #2226DF 100%);
    display: flex;
    align-items: center;
    margin-top: 5px;
    justify-content: center;
}

.gt-avatar-outside img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}



/* ===============================
   EDITOR — Coluna 2
=============================== */
.gt-editor-col {
    width: 100%;
}



/* ===============================
   CÁPSULA PRETA DO INPUT
=============================== */
.gt-input-bar {
    background: var(--bg-input);
    border-radius: 17px;
    padding: 8px 10px;
    min-height: 42px;
    display: flex;
    align-items: flex-start;     /* 🔥 mantém editor no topo */
    justify-content: flex-start;
    box-sizing: border-box;
    
}



/* ===============================
   EDITOR (contenteditable)
=============================== */
.comentario-pr-editor {
    flex: 1;
    width: 100%;
    min-height: 20px;
    max-height: 100px;
    height: auto;
    padding: 4px 6px;
    font-size: 15px;
        color: #f1f1f1;
    background: transparent;
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
    caret-color: #EA646C; /* Cor da barrinha digitando */
    transition:
        height .18s cubic-bezier(0.25, 0.8, 0.4, 1),
        padding .18s ease,
        max-height .18s ease;
}


/* Remover barra de scroll feia */
.comentario-pr-editor::-webkit-scrollbar {
    width: 0;
    height: 0;
}



/* ===============================
   PLACEHOLDER
=============================== */

.comentario-pr-editor.placeholder-visivel::before {
    content: attr(data-placeholder);
    color: #888;
    opacity: 0.7;
    pointer-events: none;
}



/* ===============================
   EMOJIS CAROUSEL
=============================== */
.gt-emoji-carousel {
    display: flex;
    align-items: center;
    gap: 10px;

    overflow-x: auto;
    white-space: nowrap;

    padding: 0px 0px 0 6px;
    margin-top: 3px;

    scrollbar-width: none; /* Firefox */
}

.gt-emoji-carousel::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.gt-emoji {
    font-size: 22px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;

    transition: transform .15s ease;
}

.gt-emoji:active {
    transform: scale(1.25);
}



/* ===============================
   LINHA INFERIOR (emoji + send)
=============================== */
.gt-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0 0;
    gap: 24px;
}



/* ===============================
   BOTÃO SEND
=============================== */
.comentario-enviar-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    padding: 16px;
        background: linear-gradient(180deg, #EA646C 5.2%, #2226DF 100%);
    opacity: .35;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    /* margin-right: 0px; */
    transition:
        opacity .25s ease,
        transform .25s cubic-bezier(.25,1.25,.5,1);
}

.comentario-enviar-btn.gt-enabled {
    opacity: 1;
    cursor: pointer;
    transform: scale(1.12);
}

.comentario-enviar-btn.gt-enabled:active {
    transform: scale(0.85);
}



/* ===============================
   ÍCONE SEND
=============================== */
.gt-send-icon {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none;
    color: #fff;
    margin-top: 2px;
    margin-left: 2px;
    transform: rotate(45deg) translate(-3px, 1px);
}



/* ===============================
   FIXES GERAIS
=============================== */
.gt-input-bar * {
    user-select: none;
}

.gt-comment-container {
    -webkit-overflow-scrolling: touch;
}

.comentario-pr-editor {
    position: relative;   /* 🔥 obrigatório */
}

/* ===================================================================
   🌈 GHOSTUNE — MODAL DE RESPOSTA (VERSÃO FINAL IG/TIKTOK)
   Layout: textarea grande em cima + emojis e botão SEND embaixo
=================================================================== */


/* ============================================================
   HEADER — Avatar + Respondendo
============================================================ */

.mr-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    /* padding: 0px 0px; */
    position: relative;
}

.mr-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    padding: 2px;
    background: linear-gradient(135deg, #00f2ff, #c200ff);
}

.mr-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mr-respondendo {
    color: #fff;
    font-size: 14px;
    font-family: var(--fonte-principal);
}

.mr-user {
    color: #EA646C;
    font-weight: 600;
    font-family: var(--fonte-principal);
}

.mr-preview {
    color: #ccc;
    font-size: 13px;
    font-family: var(--fonte-principal);
    margin-top: 2px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 230px;
}

.mr-close-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: #aaa;
    cursor: pointer;
    transition: opacity .2s ease;
}
.mr-close-btn:hover {
    opacity: .7;
}


/* ============================================================
   TEXTAREA (CAIXA E CONTEÚDO)
============================================================ */

.mr-editor-wrapper {
    background: #121622;
    border: 1px solid #111;
    border-radius: 12px;
    padding: 8px 10px;
    margin: 12px 4px;
    border: 1px solid #4d4d4d2b
}


/* ===============================
   EDITOR DE RESPOSTA
=============================== */




.mr-editor {
    width: 100%;
    min-height: 60px;
    max-height: 100px;
    padding: 4px 6px;
    background: transparent;
    color: #f1f1f1;
    font-size: 15px;
    line-height: 20px;
    outline: none;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    caret-color: #EA646C;
    transition:
        height .18s cubic-bezier(0.25, 0.8, 0.4, 1),
        max-height .18s ease;
}




/* Placeholder real */
.mr-editor.placeholder-visivel::before {
    content: attr(data-placeholder);
    color: #888;
    position: absolute;
    pointer-events: none;
    font-family: var(--fonte-principal);
}

/* Remover scroll visual */
.mr-editor::-webkit-scrollbar {
    width: 0;
    height: 0;
}



/* ============================================================
   EMOJIS + BOTÃO SEND (LINHA INFERIOR)
============================================================ */

.mr-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0 0;
    gap: 24px;
}


/* EMOJIS */

.mr-emoji-carousel {
    display: flex;
    align-items: center;
    gap: 10px;

    overflow-x: auto;
    white-space: nowrap;

    padding: 0px 0px 0 6px;
    margin-top: 3px;

    scrollbar-width: none; /* Firefox */
}

.mr-emoji-carousel::-webkit-scrollbar {
    display: none;
}

.mr-emoji {
    font-size: 22px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;

    transition: transform .15s ease;
}

.mr-emoji:active {
    transform: scale(1.25);
}


/* BOTÃO SEND (Premium) */

.resposta-enviar-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: none;
    padding: 16px;
    background: linear-gradient(180deg, #EA646C 5.2%, #2226DF 100%);
    opacity: 0.35;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    /* margin-right: 0px; */
    transition:
        opacity .25s ease,
        transform .25s cubic-bezier(.25,1.25,.5,1);
}

.resposta-enviar-btn.mr-enabled {
    opacity: 1;
    cursor: pointer;
    transform: scale(1.12);
}

.resposta-enviar-btn.mr-enabled:active {
    transform: scale(.88);
}


/* Ícone SEND (rotacionado estilo Instagram DM) */

.mr-send-icon {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none;
    color: #fff;
    margin-top: 2px;
    margin-left: 2px;
    transform: rotate(45deg) translate(-3px, 1px);
}






.mr-send-btn.enabled {
    opacity: 1;
    cursor: pointer;
}

.mr-send-btn.enabled:active {
    transform: scale(.88);
}

.mr-send-icon {
    width: 20px;
    height: 20px;
    color: white;
    transform: rotate(45deg) translate(-2px, 1px);
}





.highlight-comentario {
    animation: flashComment 1.2s ease-out;
}


@keyframes flashComment {
    0%   { background: rgb(56 68 91); }
    100% { background: transparent; }
}