.floating {
  position: fixed !important;
  top: 5px;
  right: 5px;
  width: 200px !important;
  height: auto !important;
  min-height: 100px !important;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  border-radius: 10px;
}


 .swiper {
            width: 100%;
            height: 100vh;
        }

        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
        }


  .perfilstory {
    margin: 5px;
    padding: 2px;
  width: 80px;
  cursor: pointer;
  height: 80px;
  border-radius: 100%;
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet) border-box;
  display: inline-block;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: black;
  transition: transform 0.3s ease; /* animação suave */
}

.legenda {
    text-decoration: underline;
  font-style: italic;   /* corrigido */
    font-size: 13px;
    margin-top: -8px;
  max-width: 80px;   /* largura máxima */
  white-space: nowrap; /* impede quebrar linha */
  overflow: hidden;   /* esconde o texto que passar */
  text-overflow: ellipsis; /* coloca "..." */
  display: inline-block; /* necessário em alguns casos */
}

.lepisnose{
    display: -webkit-box !important;
    -webkit-line-clamp: 17;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
}


.perfilstory2 {
 padding: 2px;
    margin: 5px;
  width: 60px;
  cursor: pointer;
  height: 60px;
  border-radius: 100%;
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet) border-box;
  display: inline-block;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: black;
  transition: transform 0.3s ease; /* animação suave */
}

.perfilstory:hover {
  transform: scale(1.1); /* aumenta 10% ao passar o mouse */
}


.perfilstory img {
    border: 2px solid white;
    border-radius: 50%;

  width: 100%;
  height: 100%;
  object-fit: cover;        /* mantém proporção e preenche o círculo */
  display: block;
}

.perfilstory2 img {
    border: 2px solid white;
    border-radius: 50%;

  width: 100%;
  height: 100%;
  object-fit: cover;        /* mantém proporção e preenche o círculo */
  display: block;
}


/* Telas menores que 600px (smartphones) */
@media (max-width: 600px) {

      
       



  .floating {
    width: 140px !important; /* menor largura */
    min-height: 80px !important;
    top: 5px;
    right: 5px;
  }
}

/* Telas muito pequenas (ex: celulares bem compactos < 400px) */
@media (max-width: 400px) {
  .floating {
    width: 110px !important;
    min-height: 60px !important;
  }
}


#textoanuncio {
     text-align: left;
      word-wrap: break-word;   /* Quebra a palavra se ultrapassar o limite */
  overflow-wrap: break-word; /* Mais moderno, mesma função */
  word-break: break-all;
  
    cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 3;  /* Limita a 4 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 17px;
  margin-left: 15px;


}


  .btn2 {
      background: none;
      border: none;
      color: #007bff;
      font-size: 14px;
      cursor: pointer;
      padding: 5px;
    }


.post-footer {
   
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 5px;
    }

.post-date {
      font-size: 12px;
      color: #888;
    }


  .post-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin:5px;
    }

    .post-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }

    .post-author {
      display: flex;
      flex-direction: row;
      font-weight: bold;
      font-size: 14px;
    }


.preview {
    margin: auto;
      flex: 1;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 8px;
      background: #f9f9f9;
    }




    #botaolink {
          max-width: 350px;        /* largura máxima do botão */
    white-space: nowrap;     /* não deixa quebrar linha */
    overflow: hidden;        /* esconde o excesso */
    text-overflow: ellipsis; /* coloca "..." no final */
    
    min-width: 200px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 10px;
    display: none;
    background-color: green;
    color: white;
    padding: 4px 10px;
    border: 1px solid black;
    cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  }

   /* Cor mais clara ao passar o mouse */
  #botaolink:hover {
    background-color: lightgreen;
    color: black;
     transform: scale(1.1);   
  }

#maisBtn {
  color: blue;
  cursor: pointer;
  display: none; /* só aparece se tiver mais de 4 linhas */
}

 
 
 
 div {
            user-select: none;
            /* Navegadores modernos */
            -webkit-user-select: none;
            /* Chrome, Safari */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* IE/Edge */
        }

        /* Botão de fechar */
        #closeBtn {
            position: absolute;
            top: 15px;
            display: none;
            right: 20px;
            font-size: 24px;
            color: white;
            cursor: pointer;
            font-weight: bold;
            background: transparent;
            border: none;
        }


        .sticky-container {
            /*position: sticky;*/
            top: 0;
            background: white;
            /* Opcional: para não sobrepor elementos */
            z-index: 10;
            /* Mantém acima dos posts */
        }


        /* Estiliza o fundo escuro do overlay */
        #overlay {
            
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            /* Fundo preto semi-transparente */
            display: none;
            /* Inicialmente oculto */
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

              #overlay iframe {
            pointer-events: auto;
            width: 100%;
            height: 100%;
            border: none;
            background: white;
            border-radius: 0px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            z-index: 10;
        }


        
        #modelabrirsleems {
             pointer-events: auto;
            width: 100%;
            height: 100%;
            /* Ocupa toda a altura da tela */
            background-color: rgba(0, 0, 0, 0.5);
            /* Fundo escurecido */
            z-index: 12;
            /* Garante que fique acima dos outros elementos */
    
            display: none;

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

        



              .tela {
                 pointer-events: none; /* permite clicar nos elementos abaixo */
                 position: fixed;
                 z-index: 12;
      bottom: 0;
      left: 0;
  display: flex;
  justify-content: flex-end;
    align-items: flex-end;
  flex-direction: column;
  height: 100%; /* altura total da tela */
  width: 100%; /* largura total da tela */
}

   

         /*iframe {
           
            z-index: 1;

             position: fixed; 
  top: 0;
  left: 0;
  width: 100vw; 
  height: 100vh;
  border: none;
           
        }*/

        /* Estiliza o iframe para parecer um modal */
       

        #loadingSpinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  border-top: 5px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}


@keyframes spin {
  to { transform: rotate(360deg); }
}




      

        .navbar-nav .nav-item.active .nav-link {
            background-color: #28a745;
            /* Cor verde */
            color: white !important;
            /* Garantir que o texto fique branco */
        }

        /* Adicionar um efeito de hover para o item ativo */
        .navbar-nav .nav-item.active .nav-link:hover {
            background-color: #218838;
            /* Tom de verde mais escuro */
        }

        

        @keyframes slideInMenu {
            from {
                transform: translateX(-100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        
        @keyframes slideInMenuSair {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(-100%);
                opacity: 0;
            }
        }



         #sidebar.hide {
          animation: slideInMenuSair 0.5s ease-in-out forwards;
            /* Exibe o menu */
        }



        #sidebar.show {
          animation: slideInMenu 0.5s ease-in-out;
            /* Exibe o menu */
        }

        #sidebar a {
            color: white;
            padding: 10px;
            display: block;

            text-decoration: none;
        }

        #parasidebar {
            flex: 1;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            /* Fundo semi-transparente */
            display: none;
            /* Inicialmente oculto */
            z-index: 12;
        }

    
        

        #sidebar {
           
              position: fixed;
    top: 0;
    left: 0;
    width: 250px;


 

           
            max-height: 100vh;
            /* Define a altura máxima como a altura da tela */
            overflow-y: auto;
            /* Adiciona barra de rolagem vertical quando necessário */

            z-index: 10;
        
         
       
            /* Inicialmente escondido */
          
            height: 100%;
            background: #cccccc;
            /* Cor do menu */
            padding-top: 20px;
            transition: 0.3s;
            /* Animação suave */
        }

       /* ===== Estilo base moderno ===== */
.hover-box,
.hover-box4,
.hover-boxcandidato,
.hover-competicao {
    border: none;
    border-radius: 12px;
    margin: 6px;
    font-weight: 600;
    color: #fff;
    padding: 10px 18px;
     display: flex;
     align-items: center;      /* Alinha verticalmente */
  justify-content: space-between; /* Texto à esquerda, ícone à direita */
    transition: all 0.25s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    user-select: none;
}

/* ===== Cores específicas ===== */
.hover-box {
    background: linear-gradient(135deg, #00aaff, #0077cc);
}

.hover-box4 {
    background: linear-gradient(135deg, #ff4b4b, #cc0000);
}

.hover-boxcandidato {
    background: linear-gradient(135deg, #a4eb34, #7cc918);
    color: #1b1b1b; /* texto escuro por contraste */
}

.hover-competicao {
    background: linear-gradient(135deg, #ffd700, #e5b400);
    color: #1b1b1b; /* texto escuro por contraste */
}

/* ===== Efeitos ao passar o mouse ===== */
.hover-box:hover,
.hover-box4:hover,
.hover-boxcandidato:hover,
.hover-competicao:hover {
    transform: translateY(-3px);
    filter: brightness(1.15);
    cursor: pointer;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* ===== Efeito ao clicar ===== */
.hover-box:active,
.hover-box4:active,
.hover-boxcandidato:active,
.hover-competicao:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.hover-box4 span {
  flex: 1;
  text-align: center;        /* Texto centralizado horizontalmente */
}

.hover-boxcandidato span {
  flex: 1;
  text-align: center;        /* Texto centralizado horizontalmente */
}

.hover-competicao span {
  flex: 1;
  text-align: center;        /* Texto centralizado horizontalmente */
}

.hover-box span {
  flex: 1;
  text-align: center;        /* Texto centralizado horizontalmente */
}





        .hover-conversas {
    border: none;
    border-radius: 12px;
    margin: 6px;
    font-weight: 600;
    background: linear-gradient(135deg, #7b7fff, #5d5be0);
    color: #fff;
    padding: 10px 18px;
    display: flex;
     align-items: center;      /* Alinha verticalmente */
  justify-content: space-between; /* Texto à esquerda, ícone à direita */
    transition: all 0.25s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    user-select: none;
}

.hover-conversas:hover {
    cursor: pointer;
    transform: translateY(-2px);
    background: linear-gradient(135deg, #9ea1ff, #6f6cf5);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.hover-conversas:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


.hover-conversas span {
  flex: 1;
  text-align: center;        /* Texto centralizado horizontalmente */
}





.hover-verificarperfil span {
  flex: 1;
  text-align: center;        /* Texto centralizado horizontalmente */
}


        .hover-verificarperfil {
            border: 1px solid black;
            border-radius: 10px;
            margin: 5px;
            font-weight: bold;
            background-color: red;
            /* Cor padrão */
            padding: 5px;
            color: #FFF;
            /* Espaçamento interno */
              display: flex;
     align-items: center;      /* Alinha verticalmente */
  justify-content: space-between; /* Texto à esquerda, ícone à direita */
            /* Para envolver apenas o conteúdo */
            transition: background-color 0.3s ease;
            /* Efeito suave */
            display: none;
        }

        .hover-verificarperfil:hover {
            cursor: pointer;
            background-color: lightgreen;
            
            /* Muda para verde claro ao passar o mouse */
        }


        
       /* Botão moderno hover-box2 */
.hover-box2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 12px; /* borda mais arredondada */
    background-color: #ccff33;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* sombra suave */
}

.hover-box2:hover {
    background-color: #b2ff00; /* verde mais intenso */
    transform: translateY(-2px); /* leve elevação */
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

.hover-box2:active {
    transform: translateY(0); /* efeito “pressionado” */
    box-shadow: 0 3px 4px rgba(0,0,0,0.1);
}

/* Botão moderno hover-box3 */
.hover-box3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    margin: 3px;
    border: none;
    border-radius: 12px;
    background-color: #ccff33;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

.hover-box3:hover {
    background-color: #b2ff00;
    transform: translateY(-2px);
    box-shadow: 0 5px 6px rgba(0,0,0,0.15);
}

.hover-box3:active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}


         .hover-box3:hover {
            cursor: pointer;
            background-color: lightgreen;
            /* Muda para verde claro ao passar o mouse */
        }

        #hoverpatrocinio:hover {
            cursor: pointer;
            background-color: lightgreen;
            /* Muda para verde claro ao passar o mouse */
        }

        

       

        .foto-container {
            margin-bottom: 10px;
            position: relative;
            width: 100%;
            height: 300px;
            /* Define altura fixa */
            overflow: hidden;
            /* Evita que a imagem ultrapasse o container */
        }

         .conteudomediaaudio {
    padding: 10px 60px 10px 60px;
    cursor: pointer;
    margin-bottom: 3px;
    position: relative;
    width: 100%;
    overflow: hidden; /* corta conteúdo que ultrapassa */
    border-radius: 0px; /* bordas arredondadas */
}

        .botaofechar2 {
           width: 35px; 
           height: 35px; 
           overflow: hidden; 
           display: none; 
           justify-content: center; 
           align-items: center; 
           cursor: pointer;  
           border: 3px solid black;  
           border-radius: 50px; 
           background-color: red; 
           z-index: 10; 
           position: absolute;
           bottom: 130px;
           right: 15px;
            
            
        }

        
        .botaofechar {
           width: 40px; 
           height: 40px; 
           overflow: hidden; 
           display: flex; 
           justify-content: center; 
           align-items: center; 
           cursor: pointer;  
           border: 3px solid black;  
           border-radius: 50px; 
           background-color: red; 
           z-index: 10; 
           position: absolute;
           bottom: -15px;
           right: -20px;
            
            
        }
        .botaofechar:hover {
            background-color: darkred;
        }
        
           


        #fundoEditar {
            position: absolute;
            width: 100%;
            top: 0;
            overflow: hidden;
            height: 100%;
            top: 0;
            left: 0;
            object-fit: cover;
            /* Faz a imagem cobrir toda a área */
            object-position: center;
            /* Centraliza a imagem */
            z-index: 0;
            /* Garante que a imagem de fundo fique atrás */
            border-radius: 0px;
            /* Adapte conforme necessário */
        }

        .videocapa {
            position: absolute;
            top: 50%;
            left: 50%;
            cursor: pointer;
            transform: translate(-50%, -50%);
            border-radius: 10px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Faz o vídeo cobrir todo o container */

        }

        .imagemcapa {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 10px;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Faz o vídeo cobrir todo o container */

        }

        .foto-bottom {
            position: absolute;
            bottom: 5px;
            /* Ajuste conforme necessário */
            left: 5%;
            transform: translateX(-5%);
            /* Centraliza horizontalmente */
            text-align: center;
            z-index: 1;
        }


        #fotoEditar {
            position: relative;
            z-index: 1;
            bottom: 0px;
        }

        

        .botao-editar {
            z-index: 2;
            position: absolute;
            top: 0px;
            right: 0px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            /* Deixa o botão redondo */
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: green;
            border: 2px solid white;
            cursor: pointer;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        .botao-editar3 {
            z-index: 2;
            position: absolute;
            top: -10px;
            right: -10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            /* Deixa o botão redondo */
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: green;
            border: 2px solid white;
            cursor: pointer;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        .botao-editar:hover {
            background-color: #f0f0f0;
        }

        .botao-editar2 {
            z-index: 2;
            position: absolute;
            top: 0px;
            margin: 10px;
            right: 0px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            /* Deixa o botão redondo */
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: blue;
            border: 2px solid white;
            cursor: pointer;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        }

        .botao-editar2:hover {
            background-color: #f0f0f0;
        }

        .no-select {
            user-select: none;
            /* Impede a seleção de texto */
            -webkit-user-select: none;
            /* Para navegadores WebKit (Chrome, Safari) */
            -moz-user-select: none;
            /* Para Firefox */
            -ms-user-select: none;
            /* Para Internet Explorer */
        }

        ::-webkit-scrollbar {
            width: 0px;
            height: 5px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 2px;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 2px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Estilos Firefox */

        /*  * { scrollbar-color: #888 #f1f1f1; scrollbar-width: thin; } */
        * {
            scrollbar-color: #888 #f1f1f1;
            scrollbar-width: none;
        }


        ::-webkit-scrollbar {
    display: none;
}


        @media (max-width: 500px) {
            * {
                scrollbar-color: #888 #f1f1f1;
                scrollbar-width: none;
            }

  
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .social-icons a {
            display: inline-block;
            width: 60px;
            height: 60px;
        }

        .social-icons a img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            /* Faz as imagens ficarem circulares */
            transition: transform 0.3s ease;
        }

        .social-icons a img:hover {
            transform: scale(1.1);
            /* Aumenta o ícone ao passar o mouse */
        }


        div {
            -webkit-tap-highlight-color: transparent;
            /* Remove o efeito azul */
        }


        
/*##################POPUPMENU#############*/

.popup-menu {
  position: absolute;
  display: none;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  padding: 6px;
  z-index: 99999;
  animation: fadeIn 0.15s ease;
  min-width: 120px;
}

.popup-menu .item {
  background: #f6f6f6;
  color: #333;
  padding: 10px 14px;
  margin: 4px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  user-select: none;
}

.popup-menu .item:hover {
  background: #007bff;
  color: white;
  transform: scale(1.03);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.popup-menu .item:active {
  transform: scale(0.96);
  background: #0063d1;
}

/* Animação de fade */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Verde (Copiar) */
.popup-menu .item.copiar {
  background: #e6f7e6;
  color: #2e7d32;
}

.popup-menu .item.copiar:hover {
  background: #2e7d32;
  color: white;
  transform: scale(1.03);
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3);
}

/* Vermelho (Excluir) */
.popup-menu .item.excluir {
  background: #fdeaea;
  color: #c62828;
}

.popup-menu .item.excluir:hover {
  background: #c62828;
  color: white;
  transform: scale(1.03);
  box-shadow: 0 2px 6px rgba(198, 40, 40, 0.3);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 99999;
}


/* Mostrar toast */
.toast.show {
  opacity: 1;
}

/*##################POPUPMENU#############*/




        footer {
            position: relative;
            bottom: 10px;
            font-size: 0.9rem;
            color: #888;
            margin-top: 30px;
        }

        .jconfirm {
            z-index: 2147483648 !important;
        }

        .pin {
            border: 1px solid black;
            border-radius: 5px;
            padding: 10px;
            width: 40px;
            text-align: center;
            height: 50px;
            font-weight: bold;
            font-size: 30px;
            background-color: gold;
            margin: 5px;
        }

        .pin2 {
            border: 1px solid black;
            border-radius: 5px;
            padding: 2px 8px 2px 8px;
            width: 20px;
            text-align: center;
            height: 20px;
            font-weight: bold;
            font-size: 18px;
            background-color: gold;
            margin: 2px;
        }


        .btn-like {
            background: none;
            border: none;
            cursor: pointer;
            outline: none;
            padding: 5px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 18px;
            color: #555;
        }

        .btn-like2 {
            background: none;
            border: none;
            cursor: pointer;
            outline: none;
            padding: 0px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 18px;
            color: #555;

        }




        /* coração vazio */
        .heart {
            width: 28px;
            height: 28px;
            display: inline-block;
            background: url('https://otacoins.com/icones/coracaovazio.png') no-repeat center;
            background-size: contain;
            transition: transform 0.2s ease;
        }

        .heart2 {
            width: 18px;
            height: 18px;
            display: inline-block;
            background: url('https://otacoins.com/icones/coracaovazio.png') no-repeat center;
            background-size: contain;
            transition: transform 0.2s ease;
        }

         .heart3 {
            width: 28px;
            height: 28px;
            display: inline-block;
            background: url('https://otacoins.com/icones/coracaovazio.png') no-repeat center;
            background-size: contain;
            transition: transform 0.2s ease;
        }



        /* coração preenchido */
        .heart.liked {
            background: url('https://otacoins.com/icones/coracaocheio.png') no-repeat center;
            background-size: contain;
            transform: scale(1.2);
        }

        /* coração preenchido */
        .heart2.liked2 {
            background: url('https://otacoins.com/icones/coracaocheio.png') no-repeat center;
            background-size: contain;
            transform: scale(1.2);
        }

         .heart3.liked3 {
            background: url('https://otacoins.com/icones/coracaocheio.png') no-repeat center;
            background-size: contain;
            transform: scale(1.2);
        }

        .wrapper2 {
            margin: 5px;
            margin-bottom: 10px;
            position: relative;
            display: flex;
        }


        .placeholder2 {
            position: absolute;
            left: 15px;
            top: 8px;
            /*top: 50%;
            transform: translateY(-50%);*/
            color: gray;
            pointer-events: none;
            font-size: 16px;
        }


        


        .img-modal {
            cursor: pointer;
            display: none;
            position: fixed;
            
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            /* centraliza horizontal */
            align-items: center;
        }

        /* botão fechar */
        .img-modal .fechar {
            position: absolute;
            top: 15px;
            display: none;
            right: 35px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        /* imagem centralizada */
        .img-modal-content {
            max-width: 90%;
            max-height: 90%;
            margin-top: 5%;
            border-radius: 10px;
            box-shadow: 0 0 15px #000;
            transition: transform 0.3s ease; /* animação suave */

        }




        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(-100%);
                opacity: 0;
                height: 0;
                margin: 0;
                padding: 0;
            }
        }



        .remover-animado {
            animation: slideOut 0.5s ease-in-out forwards;
        }

        .mensagem-animada {
            animation: slideIn 0.5s ease-in-out;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }



        img,
        a {
            -webkit-tap-highlight-color: transparent;
            /* Chrome, Safari, Android */
            -webkit-user-drag: none;
            /* já impede arraste da imagem */
            user-select: none;
            -webkit-user-drag: none;
            /* necessário para Chrome, Safari */
            pointer-events: auto;
        }

              .loader {
                        display: inline-block;
                        width: 50px;
                        height: 50px;
                        border: 3px solid #ccc;
                        border-top-color: #333;
                        border-radius: 50%;
                        animation: spin 0.8s linear infinite;
                        vertical-align: middle;
                        margin-right: 8px;
                    }

                    @keyframes spin {
                        to {
                            transform: rotate(360deg);
                        }
                    }



                     .emoji {
                        display: inline-block;
                        /* permite transformações */
                        font-size: 24px;
                        cursor: pointer;
                        margin: 2px;
                        transition: transform 0.1s;
                    }

                    .emoji:hover {
                        transform: scale(1.2);
                    }


                    .emoji2{
                     display: inline-block;
                        /* permite transformações */
                        
                     
                        transition: transform 0.1s;

                    }

                    .emoji2:hover {
                        transform: scale(1.2);
                    }




                    #emoji-picker {
                        margin-left: 3px;
                        display: flex;
                        /* coloca os emojis em linha */
                        gap: 5px;
                        /* espaço entre os emojis */
                        overflow-x: auto;
                        /* permite rolagem horizontal */
                        white-space: nowrap;
                        /* impede quebra de linha */
                        padding: 5px;
                        border: 1px solid #ccc;
                        /* opcional: borda para ver o container */
                        max-width: 100%;
                        min-height: 50px;
                        height: 50px;
                        border-radius: 10px;
                        /* ajusta ao tamanho do layout */
                        box-sizing: border-box;
                    }

                    #emoji-picker::-webkit-scrollbar {
                        height: 6px;
                        /* altura da barra de rolagem */
                    }

                    #emoji-picker::-webkit-scrollbar-thumb {
                        background-color: #888;
                        /* cor da barra */
                        border-radius: 3px;
                    }


                      /* Fundo do modal */
        .modal2 {
            position: fixed;
            inset: 0;
            /* ocupa toda a tela */
            background: rgb(255, 255, 255, 0.6);
            /* fundo escuro semi-transparente */
            display: none;
            justify-content: center;
            /* centraliza horizontalmente */
            align-items: center;
            /* centraliza verticalmente */
        }

.gifs {
  max-height: 150px;


}





.jconfirm .gifs {
  max-width: 40% !important;
  display: inline-block !important;
  vertical-align: bottom !important;
  margin: 3px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}


.letrasdecorada {
  font-weight: bold;           /* negrito e itálico */
  color: black;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  background-color: #f0f0f0;
  border-radius: 5px;
  border: 1px solid black;
  padding: 3px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  width: max-content;
}

.letrasdecorada2 {
  font-weight: bold;           /* negrito e itálico */
  color: black;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  background-color: #f0f0f0;
  border-radius: 5px;
  border: 1px solid black;
  padding: 3px;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  /*width: max-content;*/
}


.linknome {
  font-weight: bold;
  color: blue;
  text-decoration: underline;
  cursor: pointer; /* opcional */
}



        .modal2-content {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            width: 90%;
            /* ocupa 90% da largura da tela */
            max-width: 800px;
            /* mas não passa de 800px */
            max-height: 85vh;
            /* limita altura para caber na tela */
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .modal2-close {
            position: absolute;
            top: 8px;
            display:none;
            right: 12px;
            font-size: 24px;
            cursor: pointer;
            color: #333;
        }

        #gifFrame {
              display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px;
            width: 99%;
            height: 80vh;
            /* ocupa 80% da altura da tela */
            border: 0;
            border-radius: 8px;
        }


        .bottom-nav {
            pointer-events: auto; 
    
      width: 100%;
      background: #444;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px 0;
      z-index: 11;
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
    }

    .bottom-nav div {
    
      color: #fff;
      text-decoration: none;
      text-align: center;
      font-size: 14px;
      flex: 1;
       transition: transform 0.1s;
    }

    .bottom-nav div i {
      display: block;
      font-size: 22px;
      margin-bottom: 5px;
    }
    
     .bottom-nav div span {
      display: none;
      font-size: 10px;
  
    }

    .bottom-nav div.active {
      color: #4CAF50;
    }
    
     .bottom-nav .ser:hover span {
       display: none;
    }