/**
 * Ficheiro de Estilos Globais.
 *
 * A maior parte do estilo deste projeto  feita com TailwindCSS,
 * que é carregado via CDN no ficheiro.
 *
 * Este ficheiro pode ser usado para adicionar estilos personalizados ou
 * para sobrescrever classes do Tailwind, se necessário.
 */

body {
    /* Exemplo: Pode definir uma fonte global aqui se não gostar da padrão do navegador */
    /* font-family: 'Inter', sans-serif; */
}

/* --- ESTILO DE GRADIENTE PARA A PÁGINA INICIAL --- */
.home-gradient-background {
    background: linear-gradient(to bottom, #4c1d95, #1e1b4b); /* Roxo para Índigo Escuro */
    padding: 2rem;
    border-radius: 0.5rem;
}

/* Ajustes de cor de texto para legibilidade no fundo gradiente */
.home-gradient-background h1,
.home-gradient-background h2 {
    color: white;
}

.home-gradient-background p,
.home-gradient-background .text-gray-600,
.home-gradient-background .text-gray-500 {
    color: #d8b4fe; /* Um tom de roxo claro */
}
.home-gradient-background .text-gray-700 {
    color: #e9d5ff; /* Um tom de roxo ainda mais claro para destaque */
}


/* --- ESTILOS DE MENSAGEM ATUALIZADOS --- */

/* Estilo base para todos os itens de mensagem */
.message-item {
    padding: 0.75rem;
    border-left: 4px solid transparent; /* Borda padrão, transparente */
    border-bottom: 1px solid #e5e7eb; /* Linha cinzenta clara divisória */
}

/* Remove a linha da última mensagem para um acabamento mais limpo */
.message-item:last-child {
    border-bottom: none;
}

.message-item:not(.private-message):not(.public-reply-message) {
    border-left-color: var(--user-color, #e5e7eb); /* Usa a cor do utilizador ou um cinzento padrão */
}

.message-item .username {
    color: var(--user-color, #1f2937); /* Usa a cor do utilizador ou um cinzento escuro padrão */
    font-weight: 600; /* Torna o nome um pouco mais destacado */
}

.private-message {
    background-color: #fffbeb; /* Amarelo muito claro */
    border-left-color: #facc15; /* Borda amarela mais forte */
    border-radius: 0.25rem; /* Adiciona um leve arredondamento para destacar */
}

.private-message .username {
    color: #b45309; /* Um tom de laranja/castanho para combinar com o amarelo */
}

.public-reply-message {
    background-color: #eff6ff; /* Azul muito claro */
    border-left-color: #60a5fa; /* Borda azul mais forte */
    border-radius: 0.25rem;
}

.public-reply-message .username {
    color: #1d4ed8; /* Um tom de azul escuro para combinar */
}

/* --- NOVOS ESTILOS PARA IMAGEM SEGURA --- */

/* Contentor que posiciona o boto sobre a imagem */
.image-container-blurred {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 0.5rem; /* Corresponde ao rounded-lg do Tailwind */
}

/* Aplica o efeito de desfoque na imagem */
.image-blurred {
    filter: blur(10px);
    transition: filter 0.3s ease-in-out;
}

/* Estilo do botão "Permitir Visualizar" */
.unblur-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 9999px; /* rounded-full */
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
    white-space: nowrap; /* Impede que o texto do botão quebre a linha */
    transition: background-color 0.2s;
}

.unblur-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* --- ESTILOS PARA BANNER DE VOTAÇÃO --- */
@keyframes blink-animation {
    0%, 100% { background-color: #FEF3C7; } /* bg-yellow-100 */
    50% { background-color: #FBBF24; } /* bg-amber-400 */
}

.banner-blink {
    animation: blink-animation 1s infinite;
}

/* NOVO: Classe para limitar a largura do conteúdo principal */
.container-80 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
/* --- INÍCIO DA MODIFICAÇÃO: Tooltip no Avatar --- */
/* Estilos básicos para o tooltip do avatar */
#avatar-tooltip {
    /* Posicionamento e aparência são definidos via JS e Tailwind, mas podemos adicionar defaults */
    min-width: 150px; /* Largura mínima */
    pointer-events: none; /* Garante que o tooltip não interfere com o mouse */
    z-index: 9999; /* Garante que o tooltip fique acima de tudo */
}
/* --- FIM DA MODIFICAÇÃO --- */

/* --- NOVOS ESTILOS PARA A PGINA DE PLANOS --- */

/* Container externo que cria a borda gradiente e prepara para o efeito de brilho */
.plan-card-gradient {
    position: relative; /* Necessário para o posicionamento do pseudo-elemento de brilho */
    overflow: hidden;   /* Esconde o brilho quando está fora do cartão */
    padding: 3px;       /* A 'espessura' da borda */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.plan-card-gradient:hover {
    transform: translateY(-5px);
}

/* Pseudo-elemento que cria o efeito de brilho/flash */
.plan-card-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Largura do feixe de luz */
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg) translateX(-250%); /* Posição inicial fora da tela à esquerda */
    transition: transform 0.8s ease;
}

/* Aciona a animação do brilho ao passar o mouse */
.plan-card-gradient:hover::before {
    transform: skewX(-25deg) translateX(350%); /* Move o brilho para fora da tela à direita */
}

/* Gradiente Roxo para Laranja */
.gradient-border-purple-orange {
    background: linear-gradient(to bottom right, #8B5CF6, #F97316);
}

/* Gradiente Dourado para o plano em destaque */
.gradient-border-gold {
     background: linear-gradient(to bottom right, #FBBF24, #F59E0B, #D97706);
}

/* Container interno que tem a cor de fundo e o conteúdo */
.plan-card-inner {
    position: relative; /* Garante que o conteúdo fique acima do efeito de brilho */
    z-index: 2;
    background-color: white;
    height: 100%;
    border-radius: 0.375rem; /* 6px, um pouco menos que o container externo para a borda aparecer */
}

/* --- ESTILOS PARA BARRA DE RESPOSTA --- */
#public-reply-indicator,
#private-chat-indicator {
    padding: 8px 12px;
    border-radius: 8px;
    color: white;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Gradiente para resposta pública */
#public-reply-indicator {
    background: linear-gradient(to right, #6366f1, #8b5cf6); /* Indigo to Purple */
}

/* Gradiente para conversa reservada */
#private-chat-indicator {
    background: linear-gradient(to right, #ef4444, #f97316); /* Red to Orange */
}

/* Estilo para o botão de fechar (×) e o de alternar */
#public-reply-indicator button,
#private-chat-indicator button {
    color: white;
    opacity: 0.9;
    transition: opacity 0.2s;
}

#public-reply-indicator button:hover,
#private-chat-indicator button:hover {
    opacity: 1;
}

/* --- MELHORIAS NA BARRA DE NAVEGAÇÃO --- */
.main-nav .nav-item {
    display: flex;
    align-items: center;    /* Alinha o ícone e o texto verticalmente */
    gap: 0.25rem;           /* Espaço entre o ícone e o texto (reduzido) */
    padding: 0.5rem 0.8rem; /* Padding reduzido para ajustar o menu */
    border-radius: 9999px;  /* Bordas totalmente arredondadas (formato de pílula) */
    font-size: 0.85rem;      /* Tamanho da fonte ligeiramente reduzido */
    font-weight: 500;
    color: #4B5563;         /* text-gray-600 */
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease-in-out, transform 0.2s ease;
    z-index: 1;
}

.main-nav .nav-item:hover {
    transform: translateY(-2px);
    color: white;
}

.main-nav .nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #8B5CF6, #F97316);
    transition: left 0.4s ease-in-out;
    z-index: -1;
}

.main-nav .nav-item:hover::before {
    left: 0;
}

.main-nav .nav-item.active {
    color: white;
    background: linear-gradient(90deg, #8B5CF6, #F97316);
    box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.39);
}

.main-nav .nav-item.active:hover {
    transform: none;
}
.main-nav .nav-item.active::before {
    display: none;
}

.main-nav .nav-item-vip {
    color: #D97706;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
    transition: all 0.3s ease;
}

.main-nav .nav-item-vip:hover {
    color: #a15c00;
    background: #FFFBEB;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    text-shadow: 0 0 12px rgba(251, 191, 36, 1);
}

.main-nav .nav-item-vip::before,
.main-nav .nav-item-vip:hover::before {
    background: none;
    display: none;
}

.main-nav .nav-item-vip.active {
    color: #a15c00;
    background: #FFFBEB;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.8);
    border: 1px solid #FBBF24;
}

/* --- NOVO: EFEITO DE BORDA BRILHANTE PARA CARDS DE SALA --- */
@keyframes glowing-border-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.room-card-glowing-border {
    position: relative;
    padding: 3px; /* Controla a espessura da borda brilhante */
    border-radius: 0.75rem; /* Alinha com rounded-xl do Tailwind */
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.room-card-glowing-border:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(139, 92, 246, 0.3); /* Sombra mais destacada e roxa */
}

.room-card-glowing-border::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /* Gradiente com as cores do seu site e as dos exemplos */
    background: conic-gradient(
        #8B5CF6, /* Roxo */
        #34D399, /* Verde Esmeralda */
        #3B82F6, /* Azul */
        #ec4899, /* Rosa */
        #8B5CF6  /* Roxo para fechar o ciclo */
    );
    animation: glowing-border-spin 4s linear infinite;
    z-index: -1;
    opacity: 1; /* MODIFICADO: Efeito sempre visível */
    transition: opacity 0.4s ease-in-out;
}

/* O card interno precisa ter uma cor de fundo para cobrir o gradiente */
.room-card-inner-content {
    background-color: white;
    border-radius: 0.5rem; /* Alinha com rounded-lg do Tailwind, ficando 3px menor que o wrapper */
    position: relative;
    z-index: 2;
}

/* --- EFEITO DE TEXTO BRILHANTE ANIMADO (MODIFICADO) --- */
.animated-glowing-text {
    /* 1. Criar um fundo de gradiente com as cores roxa e laranja */
    background: linear-gradient(
        90deg,
        #8B5CF6, /* Roxo */
        #F97316, /* Laranja */
        #8B5CF6  /* Roxo para fechar o ciclo */
    );

    /* 2. Fazer o fundo maior que o texto para que a animação seja visível */
    background-size: 200% auto;

    /* 3. Prender o fundo à forma do texto, tornando o texto 'transparente' para revelar o gradiente */
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text; /* Para compatibilidade com browsers WebKit */

    /* 4. Aplicar a animação que move o gradiente */
    animation: animated-glowing-text-animation 4s linear infinite;

    /* 5. Adicionar uma sombra para um efeito de brilho mais forte */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 15px rgba(139, 92, 246, 0.5), 0 0 25px rgba(249, 115, 22, 0.4);
}

@keyframes animated-glowing-text-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- NOVO: EFEITO DE BRILHO PULSANTE PARA O CARD DE PERFIL --- */
@keyframes profile-glow {
    0% {
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.4), 0 0 12px rgba(139, 92, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 16px rgba(249, 115, 22, 0.5), 0 0 24px rgba(249, 115, 22, 0.4);
    }
    100% {
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.4), 0 0 12px rgba(139, 92, 246, 0.3);
    }
}

.animated-profile-card {
    animation: profile-glow 4s linear infinite;
    transition: transform 0.3s ease-in-out;
}

.animated-profile-card:hover {
    transform: scale(1.02);
}

/* --- FIX DE SOBREPOSIÇÃO DE GIFS E MODAIS --- */
/* Força a grelha de GIFs a comportar-se corretamente */
#gif-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas fixas */
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    position: relative;
    z-index: 60; /* Garante que o conteúdo fique legível */
}

/* Garante que os itens de GIF (divs dentro de #gif-results) tenham stacking context */
#gif-results > div {
    position: relative;
    z-index: 10;
    transition: transform 0.2s, z-index 0.2s; /* Suaviza a transição */
}

/* Quando passa o mouse, o GIF sobe na pilha (z-index) para não ficar atrás dos vizinhos */
#gif-results > div:hover {
    z-index: 50; 
    transform: scale(1.05);
}

/* Garante que o modal de GIFs fique acima de tudo, mas abaixo de tooltips críticos */
#gif-modal {
    z-index: 100;
}

/* Evita que imagens no chat vazem ou se sobreponham a textos vizinhos */
.message-item img {
    max-width: 100%;
    height: auto;
    position: relative; /* Contexto de empilhamento local */
    z-index: 1;
    display: block; /* Evita comportamentos estranhos de inline */
}