/* Reset e estilos globais */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #121212;
    color: #fff;
    overflow-x: hidden;
    height: 100vh; /* Garante que o body ocupe 100% da altura da viewport */
    display: flex; /* Permite que o container principal se ajuste */
    flex-direction: column;
}

/* Background com grid de imagens */
.background-grid {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    background-image: url('/assets/images/background-grid.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}



.background-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: -998;
}


/* Container principal */
.container {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-grow: 1; /* Permite que o container cresça e ocupe o espaço disponível */
}

/* Botões */
.btn {
    display: inline-block;
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
    margin: 10px;
}

.btn-primary {
    background: #ff1493;
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 105, 180, 0.3);
}

.btn-secondary {
    background: transparent;
    color: #00bfff;
    border: 2px solid #00bfff;
}

.btn-secondary:hover {
    background: #00bfff;
    color: white;
}

.btn-disabled {
    background: #222 !important;
    color: #555 !important;
}

.btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Formulários */
.form-container {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    width: 100%;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #fff;
}

.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #fff;
}

.form-input {
    width: 100%;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #ff1493;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-toggle {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 10;
}

/* Popups */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 5px; /* ADICIONE ESTA LINHA */
    display: none
}

.popup-buttons {
    text-align: center;
    /* Opcional: Adicione um pouco de margem para espaçamento vertical */
    padding: 10px 0;
}


.popup-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.popup {
    background: #1a1a2e; /* Cor de fundo sólida */
    border-radius: 20px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.popup-overlay.active .popup {
    transform: scale(1);
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.popup-close:hover {
    opacity: 1;
}

/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes chatIconSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------- */
/*                               Página: Home                                 */
/* -------------------------------------------------------------------------- */
.logo {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
}

.logo .clube {
    color: #fff;
}

.logo .das-coroas {
    color: #ff1493;
}

.subtitle {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 2rem;
    padding: 20px;
    max-width: 500px;
    opacity: 0.9;
}

/* ===== Início do Código Corrigido para Popup Exclusivo ===== */

/* ALTERAÇÃO PRINCIPAL: 
   Agora o popup ocupa 90% da largura da tela (em celulares), 
   mas nunca ultrapassará 450px (em telas maiores).
*/
.exclusive-invite {
    width: 90%; /* NOVO: Garante que se ajuste a telas pequenas */
    max-width: 450px; /* MANTIDO: Limite máximo para telas de desktop */
    background: #1a1a2e;
    padding: 2.5rem 1.5rem; /* ALTERAÇÃO: Padding reduzido para telas menores usando 'rem' */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    max-height: 90vh; /* MANTIDO: Ótima prática para evitar que o popup seja maior que a tela */
    overflow-y: auto;  /* MANTIDO: Permite rolagem interna se o conteúdo for longo */
}

.popup-header {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.crown-image {
    width: 60px; /* ALTERAÇÃO: Imagem um pouco menor para economizar espaço vertical */
    height: 60px;
    margin-bottom: 10px;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.popup-header h2 {
    font-size: 1.6rem; /* ALTERAÇÃO: Um pouco menor para caber melhor */
    margin-bottom: 10px;
    text-align: center; /* NOVO: Garante centralização se o texto quebrar a linha */
}

.stars {
    color: #ffd700;
    font-size: 1.2rem;
}

.popup-subtitle {
    margin-bottom: 25px;
    opacity: 0.9;
}

.exclusive-offer {
    background: #2c2c4a;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.exclusive-offer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff1493, #ff1493);
    opacity: 0.2;
    z-index: 0;
}

.exclusive-offer > * {
    position: relative;
    z-index: 1;
}

.exclusive-offer h3 {
    font-size: 1.1rem; /* ALTERAÇÃO: Ajuste fino */
    margin-bottom: 5px;
}

.exclusive-offer p {
    font-size: 0.9rem;
    opacity: 0.8;
}

.progress-bar {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    height: 8px;
    margin: 15px 0;
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, #ff1493, #ff1493);
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.remaining {
    font-size: 0.9rem;
    text-align: right;
}

.highlight {
    color: #ff1493;
    font-weight: bold;
}

.benefits {
    text-align: left;
    margin-bottom: 25px;
}

.benefits h4 {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.benefits ul {
    list-style: none;
    padding: 0;
}

.benefits li {
    margin-bottom: 8px;
    font-size: 0.9rem;
    position: relative;
    padding-left: 20px;
}

.benefits li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: #ff1493;
    font-weight: bold;
}

.popup-cta {
    width: 100%;
    margin-bottom: 15px;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 1.1rem;
}

.popup-footer {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 10px;
}

/* Regras de botão de fechar não foram enviadas, mas mantive o estilo que você tinha */
.close-button-text {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    margin-top: 10px;
}

.close-button-text:hover {
    color: #fff;
}

/* ===== Fim do Código Corrigido ===== */

/* -------------------------------------------------------------------------- */
/*                             Página: Cadastro                             */
/* -------------------------------------------------------------------------- */

/* Popup de Sucesso */
.success-popup {
    background: #1a1a2e !important; /* Fundo escuro com !important para garantir a sobrescrita */
    border: 1px solid #ff1493; /* Borda rosa */
    box-shadow: 0 0 15px rgba(255, 20, 147, 0.5); /* Sombra rosa */
}

.success-popup .success-icon {
    background-image: url("../images/confirm-icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 145px; /* Ajuste conforme o tamanho desejado para o ícone */
    height: 145px; /* Ajuste conforme o tamanho desejado para o ícone */
    margin: 0 auto 4px auto; /* Centraliza e adiciona margem inferior */
}

.success-popup h2,
.success-popup p {
    color: #fff; /* Texto branco */
    margin: 0 auto 10px auto;
    
}

.success-popup .loading-bar {
    background: rgba(255, 255, 255, 0.2); /* Barra de progresso clara */
    border-radius: 10px;
    height: 6px;
    margin: 20px 0;
    overflow: hidden;
}

.success-popup .loading-progress {
    background: linear-gradient(90deg, #ff1493, #ff69b4) !important; /* Barra de progresso rosa com !important */
    height: 100%;
    border-radius: 10px;
    animation: loadingProgress 3s ease-in-out;
}

.success-popup .redirect-text {
    color: #ff1493 !important; /* Texto de redirecionamento rosa com !important */
}

/* -------------------------------------------------------------------------- */
/*                              Página: Perfil                              */
/* -------------------------------------------------------------------------- */
.profile-container {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    padding: 15px;
    max-width: 400px;
    width: 100%;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 auto;
}

.profile-title {
    font-size: 1.8rem;
    margin-bottom: 8px;
    color: #fff;
    text-align: center;
}

.profile-subtitle {
    font-size: 0.9rem;
    color: #ccc;
    font-weight: normal;
    display: block;
    margin-top: 5px;
}

.profile-section {
    margin-bottom: 8px;
}

.profile-section h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: #fff;
}

.required-text {
    font-size: 0.8rem; /* Ajustado para 0.8rem */
    color: #888; /* Ajustado para uma cor mais escura */
    font-weight: normal;
}

/* Upload de Fotos */
.photo-upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.photo-upload-slot {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.photo-upload-slot:hover {
    transform: scale(1.02);
}

.photo-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed #ff1493;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.photo-placeholder:hover {
    background: rgba(232, 126, 255, 0.1);
    border-color: #ff1493;
}

   

.photo-placeholder span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Sobre Você */
.about-textarea {
    min-height: 80px;
    max-height: 80px;
    resize: none;
    background: #1a1a1a;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
}

/* Interesses */
.interests-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.interest-tag {
    background: #222;
    border: 1px solid #444;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.interest-tag:hover {
    background: #333;
    border-color: #555;
}

.interest-tag.selected {
    background: #ff1493;
    border-color: #ff1493;
    color: #fff;
    transform: scale(1.05);
}

/* -------------------------------------------------------------------------- */
/*                           Página: Bem-Vindo                            */
/* -------------------------------------------------------------------------- */
.welcome-container {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 95%;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 95vh; /* Garante que o welcome-container ocupe 100% da altura da viewport */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content:  baseline; /* Distribui o conteúdo verticalmente */
    overflow-y: none; /* Permite rolagem interna se o conteúdo exceder */
}

.user-profile-welcome {
    position: relative;
    width: fit-content; /* Garante que o container se ajuste ao conteúdo */
    margin: 10px auto; /* Centraliza o container */
}

.user-avatar {
    width: 80px; /* Ajustado para 80px */
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    border: 2px solid #ff1493; /* Ajustado para 2px */
    overflow: hidden;
    position: relative;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.1);
}

.verification-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #00ff00;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transform: translate(0%, 0%); /* Ajuste para mover o badge para fora da borda */
    border: 2px solid #121212; /* Adiciona uma borda para separar do avatar */
    z-index: 2; /* Garante que o badge fique acima do avatar */
}



.welcome-title {
    font-size: 1.6rem; /* Ajustado para 1.8rem */
    margin-bottom: 20px; /* Ajustado para diminuir a distância */
    color: #fff;
}

.welcome-subtitle-combined {
font-size: 1.35rem;
display: block;
margin-top: -1px; /* Ajuste para aproximar do título */
}

.brand-highlight {
    color: #fff;
}

.brand-highlight-pink {
    color: #ff1493;
}

.user-status {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px; /* Ajustado para 20px */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 10px; /* Ajustado para 10px */
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px; /* Ajustado para 2px */
}

.status-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  gap: 24px;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 0px;
}


.status-icon {
  font-size: 28px; /* Ajuste conforme necessário */
}

.status-value {
  font-weight: bold;
  font-size: 16px;
  color: white;
}

.status-label {
  font-size: 14px;
  color: #ccc;
}


.status-icon {
    font-size: 1.2rem; /* Ajustado para 1.2rem */
}

.status-value {
    font-weight: bold;
    font-size: 1rem; /* Ajustado para 1rem */
}

.status-label {
    font-size: 0.7rem; /* Ajustado para 0.7rem */
    opacity: 0.8;
}

.tips-carousel {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 13px; /* Ajustado para 15px */
    margin-bottom: 15px; /* Ajustado para 15px */
    margin-top: 25px;
}

.tips-carousel h3 {
    font-size: 1rem; /* Ajustado para 1rem */
    margin-bottom: 10px; /* Ajustado para 10px */
}


.tip-card {
    transition: opacity 0.3s ease;
}

.tip-icon {
    font-size: 1.5rem; /* Ajustado para 1.5rem */
    margin-bottom: 8px; /* Ajustado para 8px */
}

.tip-card p {
    font-size: 0.9rem; /* Ajustado para 0.8rem */
    line-height: 1.4;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px; /* Ajustado para 5px */
    margin-top: 8px; /* Ajustado para 5px */
}

.dot {
    width: 6px; /* Ajustado para 6px */
    height: 6px; /* Ajustado para 6px */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.3s ease;
}

.dot.active {
    background: #ff1493;
}

.online-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px; /* Ajustado para 10px */
    font-size: 0.7rem; /* Ajustado para 0.7rem */
    opacity: 0.8;
}

.welcome-cta {
    width: 100%;
    font-size: 0.9rem; /* Ajustado para 0.9rem */
    padding: 12px; /* Ajustado para 12px */
}

/* -------------------------------------------------------------------------- */
/*                             Página: Descoberta                           */
/* -------------------------------------------------------------------------- */

/* Tela de Loading */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
}

.loading-screen:not(.active) {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 8px solid #FF69B4;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto;
    display: block; /* Sempre visível na tela de loading */
}

/* Animação de rotação para o loading spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading spinner específico para botões de ação */
.action-button .loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    display: none; /* Escondido por padrão nos botões */
    z-index: 10;
}

.action-button.loading .mic-icon,
.action-button.loading .send-icon,
.action-button.loading .crown-icon-btn {
    display: none !important; /* Força a ocultação dos outros ícones */
}

.action-button.loading .loading-spinner {
    display: block !important; /* Força a exibição do spinner */
}


.loading-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.discover-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    width: 100%;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 5px; /* Aumenta o espaçamento entre o avatar e o nome */
    padding: 5px 0; /* Adiciona um pouco de padding vertical para aumentar a altura da área */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    flex-shrink: 0;
    min-width: 100px; /* Aumenta a largura mínima da área do usuário */
    position: relative;
    z-index: 10;
}

#userNameHeader {
    font-family: 'Inter', sans-serif; /* Aplica a fonte Inter */
    font-size: 15px; /* Ajusta o tamanho da fonte para ser um pouco maior */
    font-weight: 500; /* Mantém o peso da fonte conforme o print */
    color: #FFFFFF; /* Garante a cor branca */
    text-shadow: 0 2px 2px rgba(0,0,0,1.2); /* Aplica a sombra do texto conforme o print */
}

.user-avatar-small {
    width: 40px; /* Aumenta a largura do avatar */
    height: 40px; /* Aumenta a altura do avatar */
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.balance-and-counters-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0px;
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 100;
}

.balance {
    background: rgba(0, 102, 0, 0.25);
    border-radius: 20px;
    padding:3.75px 11.25px; /* Aumenta um pouco o padding */
    font-size: 1.15rem; /* Aumenta o tamanho da fonte */
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    color: #4ade80;
}

.like-dislike-counter {
    background: transparent;
    padding: 2px 5px;
    border-radius: 15px;
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0px;
    white-space: nowrap;
    z-index: 10;
}

.like-icon-small {
    display: none;
    width: 25px;
    height: 25px;
    background-image: url("/assets/images/heart-solid-red.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

#likesCounter {
    color: #e91486;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.2);
    font-size: 0.95rem;
    margin-right: 11px;
}

.dislike-icon-small {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url("/assets/images/dislike-x-gray.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.2);
}

.dislike-text-small {
    display: inline-block;
    font-size: 1.0rem; /* Aumenta o tamanho da fonte do 'X' para ser visivelmente maior que o número */
    font-weight: bold;
    color: #817f7f;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.2);
    margin-right: 3px; /* Aumenta o espaçamento entre o 'X' e o número */
    vertical-align: middle;
}

#dislikesCounter {
    color: #817f7f;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.2);
    font-size: 0.95rem; /* Mantém o tamanho da fonte do número */
}

.notification-area {
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: 90%;
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

.mini-notification {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 20px;
    padding: 5px 10px;
    gap: 5px;
    max-width: 250px;
    font-size: 0.8rem;
    pointer-events: auto;
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; /* Garante que os itens internos fiquem em linha */
    align-items: center; /* Centraliza verticalmente os itens internos */
}

.mini-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.notification-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.notification-text {
    flex: 1;
    font-size: 0.8rem;
    white-space: normal; /* Permite quebra de linha */
    overflow: visible; /* Permite que o conteúdo seja visível */
    text-overflow: clip; /* Desativa o ellipsis */
}

.notification-text strong {
    color: #fff;
}

.notification-text small {
    opacity: 1;
    color: #eb1989;
    font-size: 0.9rem;
}

/* Card de Perfil Fullscreen */
.profile-card-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    transition: opacity 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

/* Responsividade para desktop - garantir que a imagem não seja cortada */
@media (min-width: 769px) {
    .profile-card-fullscreen {
        background-size: contain;
        background-position: center;
        background-color: #000; /* Adiciona um fundo preto para preencher o espaço vazio */
    }
}

/* Responsividade para tablet e mobile - manter cover para tela cheia */
@media (max-width: 768px) {
    .profile-card-fullscreen {
        background-size: cover;
        background-position: center;
    }
}

.profile-overlay {
    width: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 20px;
    padding-bottom: 120px;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.profile-header h2 {
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.online-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}

.online-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    background: #00FF00 !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    animation: pulse 2s infinite !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 999 !important;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.profile-location {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
    opacity: 0.8;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.location-icon {
    width: 25px; /* Ajuste o tamanho conforme necessário */
    height: 25px; /* Ajuste o tamanho conforme necessário */
    background-image: url('/assets/images/location-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block; /* Garante que o elemento ocupe espaço */
    vertical-align: middle; /* Alinha verticalmente com o texto */
}


.profile-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.profile-interests .interest-tag {
    /* Modifique as linhas abaixo */
    background: rgba(0, 0, 0, 0.5); /* Fundo escuro translúcido */
    border-radius: 15px;
    padding: 8px 12px;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
    color: #FFFFFF; /* Texto branco */
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-shadow: none; /* Nenhuma sombra no texto */
}

.profile-description {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 30px;
    opacity: 0.9;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.profile-actions {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px;
}

.action-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex; /* Torna o botão um contêiner flex */
    align-items: center; /* Centraliza os itens filhos verticalmente */
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.action-btn:hover {
    transform: scale(1.1);
}

.dislike-btn {
    background: rgba(56, 55, 55, 0.7) !important; /* Fundo cinza claro com transparência */
    color: #fff; /* Cor branca para o emoji */
    font-size: 1.5rem; /* Tamanho do emoji */
    border: none; /* Garante que não haja borda */
    border-radius: 50%; /* Botão redondo como o like */
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn.like-btn {
    background: #f32d97 !important; /* Mantém a cor de fundo rosa */
    color: transparent !important; /* Torna o emoji transparente */
    background-image: url("../images/coracao-icon.png") !important; /* Caminho relativo para a imagem */
    background-size: 67% !important; /* Ajusta o tamanho da imagem */
    background-repeat: no-repeat !important;
    background-position: center !important;
    font-size: 0 !important; /* Remove completamente o espaço do emoji */
    border-radius: 50% !important; /* Garante que o botão seja redondo */
    display: flex !important; /* Para centralizar o ícone */
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    width: 60px !important; /* Garante tamanho fixo */
    height: 60px !important; /* Garante tamanho fixo */
}

.like-btn::before {
    content: none; /* Remove qualquer conteúdo gerado por pseudo-elementos */
}


/* Popups da Descoberta */
.money-popup {
    background: linear-gradient(135deg, #2d5016, #3e7b27);
}

.money-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.match-popup {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid rgba(255, 20, 147, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.match-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.match-profiles {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.match-user, .match-coroa {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border: 3px solid #fff;
}

.vip-popup {
    max-width: 450px;
    background: linear-gradient(135deg, #2c3e50, #3498db);
}

.vip-badge {
    font-size: 3rem;
    margin-bottom: 15px;
}

.price-section {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
}

.old-price {
    text-decoration: line-through;
    opacity: 0.6;
    font-size: 0.9rem;
}

.current-price {
    font-size: 2rem;
    font-weight: bold;
    color: #ffd700;
    margin: 5px 0;
}

.price-period {
    font-size: 1rem;
    font-weight: normal;
}

.installment {
    font-size: 1.1rem;
    margin-top: 5px;
}

.installment-note {
    font-size: 0.9rem;
    opacity: 0.8;
}

.timer-section {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 15px;
    padding: 15px;
    margin: 20px 0;
}

.timer-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.timer-text {
    font-weight: bold;
    margin-bottom: 5px;
}

.urgency-text {
    font-size: 0.9rem;
    color: #ff4757;
    font-weight: bold;
}

.vip-benefits {
    text-align: left;
    margin: 20px 0;
}

.benefit-item {
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.vip-explanation {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px;
    margin: 20px 0;
    text-align: left;
}

.vip-explanation h4 {
    margin-bottom: 10px;
    text-align: center;
}

.vip-btn {
    width: 100%;
    margin-bottom: 15px;
}

.cancel-text {
    font-size: 0.8rem;
    opacity: 0.7;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    margin-left: 15px;
}

.chat-avatar {
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    font-size: 1.5rem;
}

.name-status {
    display: flex;
    flex-direction: row;
}

.chat-name {
    font-size: 1.2rem;
    font-weight: bold;
}

.chat-status {
    color: #00ff00;
    font-size: 0.9rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    word-wrap: break-word;
}

.message.received {
    align-self: flex-start;
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    color: white;
}

.message.sent {
    align-self: flex-end;
    background: linear-gradient(45deg, #00bfff, #007bff);
    color: white;
}

.audio-message {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    margin-bottom: 15px;
}

.audio-message .profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.audio-message .audio-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 10px 15px;
}

.play-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: white;
}

.audio-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.audio-duration {
    font-size: 0.8rem;
    opacity: 0.7;
}

.chat-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
}

.chat-input input:focus {
    outline: none;
    border-color: #ff69b4;
}

.chat-input input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.send-btn, .audio-btn {
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.send-btn:hover, .audio-btn:hover {
    transform: scale(1.1);
}

/* Popups do Chat */
.gift-popup {
    background: linear-gradient(135deg, #8e44ad, #3498db);
}

.gift-header {
    margin-bottom: 20px;
}

.gift-header .crown-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.gift-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto;
    border: 2px solid #fff;
}

.highlight-name {
    color: #ffd700;
}

.gift-amount {
    font-size: 2.5rem;
    font-weight: bold;
    color: #00ff00;
    margin: 20px 0;
}

.gift-footer {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 15px;
}

.pix-popup {
    max-width: 450px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
}

.pix-header {
    margin-bottom: 20px;
}

.pix-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

.security-badge {
    background: rgba(0, 255, 0, 0.2);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 15px;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
}

.security-icon {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.verified-check {
    font-size: 0.9rem;
    margin-top: 5px;
    color: #00ff00;
}

.pix-instruction {
    margin-bottom: 20px;
    opacity: 0.9;
}

.pix-type-section h4 {
    margin-bottom: 15px;
}

.pix-type-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.pix-type-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 12px 16px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 80px;
}

.pix-type-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pix-type-btn.active {
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    border-color: #ff69b4;
}

.pix-type-btn .pix-icon {
    font-size: 1.2rem;
    margin: 0;
}

.pix-type-btn span:last-child {
    font-size: 0.8rem;
}

.pix-btn {
    width: 100%;
    margin-bottom: 15px;
}

.pix-footer {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-bottom: 10px;
}

.pix-premium {
    font-size: 0.8rem;
    color: #ffd700;
    font-weight: bold;
}

.success-popup {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.redirect-info {
    margin-top: 15px;
    font-size: 0.9rem;
    opacity: 0.8;
}

.vip-access-popup {
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

.vip-header {
    margin-bottom: 25px;
}

.vip-benefits-section {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    text-align: left;
}

.benefit-list {
    margin-top: 15px;
}

.exclusive-content {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
}

.content-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.access-text {
    font-size: 0.9rem;
    opacity: 0.9;
}

.withdrawal-section {
    background: rgba(0, 255, 0, 0.2);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
}

.withdrawal-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.withdrawal-note {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 15px;
}

.price-highlight {
    font-size: 0.9rem;
    opacity: 0.8;
}

.timer {
    font-size: 2rem;
    font-weight: bold;
    color: #ff4757;
    margin-bottom: 10px;
}

.timer-text {
    font-size: 0.9rem;
    opacity: 0.9;
}

.vip-upgrade-btn {
    width: 100%;
    font-size: 1.1rem;
    padding: 18px;
    margin-bottom: 15px;
}

.terms-text {
    font-size: 0.7rem;
    opacity: 0.6;
}


/* Popup de PIX Recebido */
.pix-received-popup {
    background-color: #111827 !important; /* Fundo escuro sólido */    border: 0.5px solid #22c55e !important;
    border-radius: 15px !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
    padding: 10px !important; /* Reduz o padding do popup */
    max-width: 330px !important;
    color: #FFFFFF !important; /* Textos brancos padrão */
    text-align: center;
}

.pix-received-icon {
    position: relative;
    margin-bottom: 15px;
}

.pix-icon-circle {
    width: 60px;
    height: 60px;
    background: #22c55e !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto;
    color: white;
}

.pix-received-check {
    font-size: 1.5rem !important;
    color: #22c55e !important;
    margin-bottom: -9px !important;
    margin-right: -5px;
}

.pix-check-img {
    width: 30px; /* ajuste o tamanho se necessário */
    height: 30px;
    display: inline-block;
}

.pix-card-img {
    width: 60px; /* ajuste o tamanho conforme necessário */
    height: 60px;
    color: #111827 !important;
    display: block;
    align-items: center;
    margin: 0 auto;
}



.pix-received-popup h2 {
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza ícone + texto no popup */
    gap: 5px; /* Espaço entre ícone e texto */
    font-size: 1.5rem !important;
    font-weight: bold;
    margin-bottom: 15px;
    color: #FFF !important; /* Título verde */
}


.pix-received-amount {
    background: #181f2e !important;
    border: 1px solid #353942 !important;
    border-radius: 10px;
    padding: 15px;
    font-size: 2.2rem !important;
    font-weight: bold;
    color: #22c55e !important; /* Valor do PIX em verde */
    margin: 20px 0 !important;
    text-align: center;
}

.pix-received-text {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.highlight-amam {
    color: #22c55e !important;
    font-weight: bold;
}

.pix-received-continue {
    font-size: 0.9rem !important;
    color: #22c55e !important; /* Texto de incentivo verde */
    margin-bottom: 20px;
    font-weight: 500;
}


.pix-continue-btn {
    background-color: #22c55e !important; /* Botão verde */
    color: #000000 !important; /* Texto preto no botão */
    font-weight: medium !important;
    font-size: 0.9rem;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    box-shadow: 0 0 10px #22c55e !important;
    transition: all 0.3s ease-in-out;
}

.pix-continue-btn:hover {
    background-color: #34c067 !important; /* Verde mais escuro ao passar o mouse */
    box-shadow: 0 0 15px #22c55e !important;
}





.location-icon-popup {
    width: 38px; /* Ajuste o tamanho conforme necessário */
    height: 38px; /* Ajuste o tamanho conforme necessário */
    font-size: 1.2rem;
    background-color: transparent;
    background-image: url('/assets/images/not-loc-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block; /* Garante que o elemento ocupe espaço */
    vertical-align: middle; /* Alinha verticalmente com o texto */
}





/* Área de Notificação */
.notification-area {
    position: fixed;
    top: 0%; /* Ajustado para ficar no topo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: 90%; /* Ajustado para ser responsivo */
    max-width: 250px; /* Definindo uma largura máxima para telas maiores */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px; /* Adiciona padding para não sobrepor o nome de usuário/saldo */
}

/* Estilos específicos para o Popup de Notificação de Localização */
.mini-notification.location-notification-popup {
    max-width: 250px; /* Largura máxima para o popup de localização */
    padding: 5px 8px; /* Espaçamento interno */
    margin-top: 5px; /* Margem superior para separação do topo */
    gap: 0px !important;
    /* Adicione ou ajuste outras propriedades de estilo aqui, se necessário */
}

.mini-notification .notification-text medium {
    font-size: 0.97rem; /* Aumentado de 0.8rem para 1rem */
}

.mini-notification .notification-text small {
    font-size: 0.85rem; /* Aumentado de 0.9rem para 0.9rem (mantido, mas pode ser ajustado) */
}

.mini-notification .notification-avatar {
    width: 40px; /* Aumentado de 30px para 40px */
    height: 40px; /* Aumentado de 30px para 40px */
}



.mini-notification {
    background: rgba(0, 0, 0, 0.9);
    border-radius: 20px;
    padding: 10px 15px; /* Aumentado de 5px 10px para 10px 15px */
    gap: 5px;
    max-width: 250px;
    font-size: 0.8rem;
    pointer-events: auto;
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
}


.mini-notification.show {
    transform: translateY(0);
    opacity: 1;
}

/* Animação de saída */
.mini-notification.hide {
    transform: translateY(-20px);
    opacity: 0;
}
/* Estilos para o contador de Likes/Dislikes */
.like-dislike-counter {
    background: transparent;
    padding: 2px 5px;
    border-radius: 15px;
    color: #fff;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0px;
    white-space: nowrap;
    z-index: 10;
}


.like-icon-small {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("/assets/images/heart-solid-red.png"); /* Nova imagem de coração sólido vermelho */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1) ;
}

#likesCounter {
    color: #e91486; /* Cor rosa para o contador de likes */
    font-weight: bold; /* Deixa o número em negrito */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1) ;
}

.dislike-icon-small {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-image: url("/assets/images/dislike-x-gray.png"); /* Nova imagem do X cinza */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1) ;
}

#dislikesCounter {
    color: #817f7f; /* Cor cinza claro para o contador de dislikes */
    font-weight: bold; /* Deixa o número em negrito */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1) ;
}

/* Container para agrupar saldo e contadores */
.balance-and-counters-container {
    display: flex;
    flex-direction: column; /* Altera para alinhar os itens em coluna (verticalmente) */
    align-items: flex-end; /* Alinha os itens à direita */
    justify-content: flex-start; /* Alinha o grupo inteiro ao topo */
    gap: 0px; /* Espaçamento entre o saldo e o contador */
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 100;
}

/* ================================================== */
/*      NOVOS ESTILOS PARA O POP-UP (LIMITE ATINGIDO)   */
/* ================================================== */

/* Oculta o layout antigo para evitar conflitos */
.vip-popup-new {
    display: none !important;
}

.vip-popup-final {
    background: rgba(33, 35, 51, 0.85); /* Fundo com 85% de opacidade */
    backdrop-filter: blur(10px); /* Adiciona o efeito de desfoque */
    border: 1px solid #4A4D6D;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    max-width: 360px; /* Pop-up mais compacto */
    width: 95%;
    padding: 20px 18px;
    position: relative;
    overflow: visible;
}

.vip-tag-final {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #F9C536;
    color: #1E202F;
    padding: 5px 9px;
    font-weight: bold;
    font-size: 0.85rem;
    border-radius: 6px;
    transform: rotate(10deg);
}

.vip-icon-container-final {
    width: 65px;
    height: 65px;
    background-color: #F9C536;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -60px auto 15px auto;
    border: 4px solid #212333;
    overflow: hidden; /* Garante que a imagem não transborde o círculo */
}

.crown-icon-img-new {
    width: 80%;
    height: 80%;
    object-fit: contain;
    text-align: center;
}



.lock-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M17 11H7C5.89543 11 5 11.8954 5 13V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V13C19 11.8954 18.1046 11 17 11Z' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 17V15' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 11V7C8 5.93913 8.42143 4.92172 9.17157 4.17157C9.92172 3.42143 10.9391 3 12 3C13.0609 3 14.0783 3.42143 14.8284 4.17157C15.5786 4.92172 16 5.93913 16 7V11' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
    background-repeat: no-repeat;
    background-position: center;
}

.vip-popup-final h2 {
    font-size: 1.7rem;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 5px;
    text-align: center;
}

.title-underline {
    width: 40px;
    height: 3px;
    background-color: #F9C536;
    border-radius: 2px;
    margin: 0 auto 20px auto;
}

.timer-section-final {
    background-color: #E53E3E1A; /* Vermelho com 10% de opacidade */
    border: 1px solid #E53E3E;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.timer-icon-final {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z' stroke='%23E53E3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5V10L13.3333 12.5' stroke='%23E53E3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.timer-text-final {
    color: #FFFFFF;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.timer-text-final #vipTimer {
    color: #E53E3E;
    font-size: 1.5rem;
    font-weight: bold;
}

.info-box-final {
    background-color: #2C2F48;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.info-box-final p {
    color: #D1D3E8;
    font-size: 0.9rem;
    line-height: 1.4;
}

.info-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
}

.warning-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.14453 18.5L10.6445 3.5C11.0195 2.83333 11.9805 2.83333 12.3555 3.5L20.8555 18.5C21.2305 19.1667 20.75 20 20.0005 20H3.00053C2.25053 20 1.77053 19.1667 2.14453 18.5Z' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.5 9V13' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.5 17H11.509' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.shield-icon-final {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22Z' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.price-section-final {
    background-color: #2C2F48;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
}

/* CÓDIGO CORRIGIDO */
.vip-btn-final {
    width: 100%;
    display: flex; /* <--- ESTA É A MUDANÇA PRINCIPAL */
    padding: 14px; /* Adicionado um padding lateral para conforto */
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    background-color: #F9C536;
    color: #1E202F;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}

.vip-btn-final:hover {
    opacity: 0.9;
    transform: none;
    box-shadow: none;
}

.benefits-final ul {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.benefits-final li {
    color: #D1D3E8;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.check-icon-final {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3334 4L6.00008 11.3333L2.66675 8' stroke='%2328A745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.terms-text-final {
    font-size: 0.8rem;
    color: #8A8CA8;
    text-align: center;
    line-height: 1.4;
}

.terms-text-final a {
    color: #A9ADC8;
    text-decoration: underline;
}

/* ================================================== */
/*        NOVOS ESTILOS PARA O POP-UP DE PRESENTE       */
/* ================================================== */

/* Oculta o layout antigo para evitar conflitos */
.gift-popup {
    display: none !important;
}

.gift-popup-new {
    background: rgba(33, 35, 51, 0.85); /* Fundo escuro com 85% de opacidade */
    backdrop-filter: blur(10px); /* Efeito de vidro fosco */
    border: 1px solid #4A4D6D;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    max-width: 340px; /* Pop-up mais compacto */
    width: 90%;
    padding: 20px;
    border-radius: 24px; /* Bordas mais arredondadas */
    text-align: center;
}

.gift-icon-container-new {
    width: 60px;
    height: 60px;
    background-color: #F9C536;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -55px auto 15px auto; /* Puxa o ícone para cima */
    border: 4px solid #212333;
}

.crown-icon-new {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 19L6 7L10 12L12 7L14 12L18 7L19 19H5Z' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
    background-repeat: no-repeat;
    background-position: center;
}

.gift-popup-new h2 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.gift-sender-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #F9C536;
    margin: 0 auto 10px auto;
    overflow: hidden;
}

.gift-sender-avatar img, .gift-sender-avatar span {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

.gift-popup-new h3 {
    font-size: 1.1rem;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.gift-popup-new .highlight-name {
    color: #F9C536;
    font-weight: bold;
}

.gift-amount-new {
    background-color: #2C2F48;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #FFFFFF;
}

.gift-btn-new {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    background-color: #F9C536;
    color: #1E202F;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.gift-btn-new:hover {
    opacity: 0.9;
    transform: none;
    box-shadow: none;
}

.gift-btn-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 12V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V12' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 7H2V12H22V7Z' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 22V7' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7H15C16.3261 7 17.5979 6.20982 18.5355 5.12132C19.4732 4.03282 20 2.65652 20 1.25C20 1.25 17 2.25 15 4.25' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7H9C7.67392 7 6.40215 6.20982 5.46447 5.12132C4.52678 4.03282 4 2.65652 4 1.25C4 1.25 7 2.25 9 4.25' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
    background-repeat: no-repeat;
    background-position: center;
}


.gift-footer-new {
    font-size: 0.8rem;
    color: #8A8CA8;
}

/* ================================================== */
/*         NOVOS ESTILOS PARA O POP-UP DE PIX           */
/* ================================================== */

/* Oculta o layout antigo para evitar conflitos */
.pix-popup {
    display: none !important;
}

.pix-popup-new {
    background: rgba(22, 22, 24, 0.85); /* Fundo #161618 com 85% de opacidade */
    backdrop-filter: blur(15px);
    border: 1px solid #333;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.6);
    max-width: 380px;
    width: 95%;
    padding: 25px 20px;
    border-radius: 24px;
    text-align: center;
    color: #fff;
}

.pix-icon-container-new {
    width: 56px;
    height: 56px;
    background-color: #F9C536;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -60px auto 15px auto;
    border: 4px solid #161618;
}

.card-icon-new {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='14' rx='2' stroke='%23161618' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 10H22' stroke='%23161618' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.pix-popup-new h2 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.security-badge-new {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid #28A745;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.security-shield-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22Z' stroke='%2328A745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.security-text-new {
    display: flex;
    flex-direction: column;
}

.security-text-new strong {
    color: #28A745;
    font-weight: 600;
    font-size: 1rem;
}

.security-text-new span {
    color: #A9ADC8;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.check-icon-green {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3334 4L6.00008 11.3333L2.66675 8' stroke='%2328A745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.pix-instruction-new {
    font-size: 0.9rem;
    color: #A9ADC8;
    margin-bottom: 20px;
}

.pix-type-section-new {
    text-align: left;
    margin-bottom: 20px;
}

.pix-type-section-new h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12px;
}

.pix-type-buttons-new {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.pix-type-btn-new {
    background: #2C2F48;
    border: 1px solid #4A4D6D;
    border-radius: 12px;
    padding: 10px;
    color: #A9ADC8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.pix-type-btn-new.active {
    background: #F9C536;
    border-color: #F9C536;
    color: #1E202F;
}

.pix-type-icon {
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center;
}

.pix-type-btn-new .pix-type-icon {
    filter: grayscale(100%) brightness(2); /* Ícones cinzas por padrão */
}

.pix-type-btn-new.active .pix-type-icon {
    filter: none; /* Cor original quando ativo */
}

.user-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21' translate(1 1.06985 )' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.form-group-new {
    text-align: left;
    margin-bottom: 20px;
}

.form-group-new label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
}

.form-input-new {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #4A4D6D;
    border-radius: 12px;
    background: #2C2F48;
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-input-new:focus {
    outline: none;
    border-color: #F9C536;
}

.pix-btn-new {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    background: linear-gradient(90deg, #E53E3E 0%, #F9C536 100%);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    border: none;
}

.card-icon-small {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='14' rx='2' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 10H22' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}


.arrow-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33325 8H12.6666' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.33331L12.6667 7.99998L8 12.6666' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}


.pix-footer-new {
    font-size: 0.8rem;
    color: #8A8CA8;
    line-height: 1.5;
}

.pix-premium-new {
    display: block;
    color: #F9C536;
    font-weight: 500;
    margin-top: 5px;
}

/* ================================================== */
/*     NOVOS ESTILOS PARA POP-UPS DA PÁGINA DE CHAT    */
/* ================================================== */

/* Oculta o layout antigo para evitar conflitos */
.vip-access-popup {
    display: none !important;
}

/* --- Estilos para o Pop-up "Presente Resgatado" --- */
.gift-redeemed-popup {
    background: rgba(33, 35, 51, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid #4A4D6D;
    border-radius: 16px;
    max-width: 340px;
    width: 90%;
    padding: 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.6);
}

.redeemed-icon-container {
    width: 56px;
    height: 56px;
    background-color: #28A745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
}

.redeemed-check-icon {
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
}

.gift-redeemed-popup h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.gift-redeemed-popup p {
    font-size: 1rem;
    color: #A9ADC8;
    line-height: 1.4;
    margin-bottom: 20px;
}

.redeemed-amount {
    background-color: rgba(40, 167, 69, 0.15);
    border-radius: 8px;
    padding: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #28A745;
}

/* --- Estilos para o Pop-up "Presente Resgatado" --- */
.gift-redeemed-popup {
    background: rgba(33, 35, 51, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid #4A4D6D;
    border-radius: 16px;
    max-width: 340px;
    width: 90%;
    padding: 20px;
    text-align: center;
    color: #fff;
}

.redeemed-icon-container {
    width: 56px;
    height: 56px;
    background-color: #28A745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
}

.redeemed-check-icon {
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'32\' height=\'32\' viewBox=\'0 0 24 24\' fill=\'none\'%3E%3Cpath d=\'M20 6L9 17L4 12\' stroke=\'white\' stroke-width=\'3\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3E%3C/svg%3E"  );
}

.gift-redeemed-popup h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.gift-redeemed-popup p {
    font-size: 1rem;
    color: #A9ADC8;
    line-height: 1.4;
    margin-bottom: 20px;
}

.redeemed-amount {
    background-color: rgba(40, 167, 69, 0.15);
    border-radius: 8px;
    padding: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #28A745;
}


/* --- Estilos para o Pop-up "Acesso VIP Exclusivo" --- */
.vip-access-popup-new {
    background: #161618;
    border: 1px solid #4A4D6D;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.7);
    max-width: 340px;
    width: 90%;
    padding: 15px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
}

.vip-access-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.vip-access-crown-icon {
    width: 40px;
    height: 40px;
    background-color: #F9C536;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 19L6 7L10 12L12 7L14 12L18 7L19 19H5Z' stroke='%23161618' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
    background-repeat: no-repeat;
    background-position: center;
}

.vip-access-popup-new h2 {
    font-size: 1.4rem;
    font-weight: bold;
}

.vip-benefits-section-new {
    margin-bottom: 15px;
    text-align: left;
}

.vip-benefits-section-new h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.benefits-grid {
    display: flex;
    justify-content: space-between;
}

.benefits-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefits-grid li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.feature-box-new {
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
    text-align: center;
}

.feature-box-new.exclusive {
    background: #3A2E4A;
    border: 1px solid #8E44AD;
}

.feature-box-new.withdrawal {
    background: #2A4838;
    border: 1px solid #28A745;
}

.feature-box-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #F9C536;
    margin-bottom: 8px;
}

.feature-icon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.feature-icon.lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ); }
.feature-icon.card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='14' rx='2' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 10H22' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" ); }

.feature-box-new h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.feature-box-new p {
    font-size: 0.8rem;
    color: #A9ADC8;
}

.price-section-access {
    margin: 20px 0;
}

.price-section-access .old-price {
    text-decoration: line-through;
    color: #8A8CA8;
    font-size: 0.9rem;
}

.price-section-access .current-price {
    font-size: 2.2rem;
    font-weight: bold;
    color: #fff;
}

.price-section-access .installments {
    font-size: 1rem;
    color: #A9ADC8;
}

.timer-section-access {
    background-color: #E53E3E1A;
    border: 1px solid #E53E3E;
    border-radius: 12px;
    padding: 10px;
    margin: 20px 0;
}

.timer-section-access #vipTimerAccess {
    font-size: 1.8rem;
    font-weight: bold;
    color: #E53E3E;
}

.timer-section-access p {
    font-size: 0.9rem;
    color: #fff;
    line-height: 1.3;
}

.vip-upgrade-btn-new {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 12px;
    background-color: #F9C536;
    color: #161618;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
}







/* ================================================== */
/*                ESTILOS ESPECÍFICOS DO CHAT         */
/*              (ISOLADOS PARA .chat-page)            */
/* ================================================== */

/* Container principal do chat */
.chat-page .chat-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    z-index: 2 !important;
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Header do chat */
.chat-page .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.profile-pic .audio-message {
    display: flex; /* Para alinhar a imagem e o áudio lado a lado */
    align-items: flex-start; /* Alinha os itens ao topo */
    justify-content: flex-start; /* Alinha ao início da linha */
    margin-bottom: 15px;
}

.profile-pic {
    width: 40px; /* Tamanho pequeno */
     height: 40px; /* Tamanho pequeno */
     border-radius: 50%; /* Transforma em círculo */
     object-fit: cover; /* Garante que a imagem preencha o círculo */
     margin-right: 10px; /* Espaçamento entre a imagem e o áudio */
     flex-shrink: 0; /* Impede que a imagem encolha */
}


.chat-page .back-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.chat-page .back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.chat-page .profile-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    margin-left: 15px;
}

.chat-page .chat-avatar {
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 1.5rem;
}

.chat-page .name-status {
    display: flex;
    flex-direction: column;
}

.chat-page .chat-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
}

.chat-page .chat-status {
    color: #00ff00;
    font-size: 0.9rem;
}

.chat-page .balance {
    background: rgba(0, 102, 0, 0.25);
    border-radius: 20px;
    padding: 3.75px 11.25px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #00ff66;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

/* Área de mensagens */
/* CÓDIGO CORRIGIDO E DEFINITIVO */
.chat-page .chat-messages {
    flex: 1;              /* Permite que ele cresça para ocupar o espaço */
    overflow-y: auto;     /* Adiciona a rolagem vertical QUANDO necessário */
    padding: 10px;        /* Um padding padrão para espaçamento */
    padding-bottom: 110px;/* O espaço de segurança para a barra de input */
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;        /* O 'TRUQUE' MÁGICO PARA CORRIGIR O BUG DO SAFARI */
}

.chat-page .message {
    max-width: 80%;
    padding: 5px 16px;
    border-radius: 18px;
    word-wrap: break-word;
    animation: messageSlideIn 0.3s ease-out;
}

.chat-page .message.received {
    align-self: flex-end;
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    color: white;
    margin-left: auto; /* Adicionado para empurrar para a direita */
    border-radius: 18px 18px 18px 4px; /* Ajustado para canto inferior esquerdo */
}

.chat-page .message.sent {
    align-self: flex-end;
    background: linear-gradient(45deg, #00bfff, #007bff);
    color: white;
}

.chat-page .audio-message {
    padding: 15px;
}

.chat-page .audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 10px 15px;
}

.chat-page .play-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: white;
}

.chat-page .audio-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-page .audio-duration {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Input de mensagem */
.chat-page .chat-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.chat-page .chat-input input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1rem;
}

.chat-page .chat-input input:focus {
    outline: none;
    border-color: #ff69b4;
}

.chat-page .chat-input input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.chat-page .send-btn, 
.chat-page .audio-btn {
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.chat-page .send-btn:hover, 
.chat-page .audio-btn:hover {
    transform: scale(1.1);
}

/* Animações específicas do chat */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos para popups específicos do chat */
.chat-page .gift-popup-new {
    background: rgba(33, 35, 51, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid #4A4D6D;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    max-width: 340px;
    width: 90%;
    padding: 20px;
    border-radius: 24px;
    text-align: center;
}

.chat-page .gift-icon-container-new {
    width: 60px;
    height: 60px;
    background-color: #F9C536;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -55px auto 15px auto;
    border: 4px solid #212333;
}

.chat-page .crown-icon-new {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 19L6 7L10 12L12 7L14 12L18 7L19 19H5Z' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.chat-page .gift-popup-new h2 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.chat-page .gift-sender-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #F9C536;
    margin: 0 auto 10px auto;
    overflow: hidden;
}

.chat-page .gift-sender-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-page .gift-popup-new h3 {
    font-size: 1.1rem;
    color: #FFFFFF;
    margin-bottom: 15px;
}

.chat-page .gift-popup-new .highlight-name {
    color: #F9C536;
    font-weight: bold;
}

.chat-page .gift-amount-new {
    background-color: #2C2F48;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
    font-size: 2rem;
    font-weight: bold;
    color: #FFFFFF;
}

.chat-page .gift-btn-new {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    background-color: #F9C536;
    color: #1E202F;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
    border: none;
    cursor: pointer;
}

.chat-page .gift-btn-new:hover {
    opacity: 0.9;
    transform: none;
    box-shadow: none;
}

.chat-page .gift-btn-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 12V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V12' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 7H2V12H22V7Z' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 22V7' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7H15C16.3261 7 17.5979 6.20982 18.5355 5.12132C19.4732 4.03282 20 2.65652 20 1.25C20 1.25 17 2.25 15 4.25' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7H9C7.67392 7 6.40215 6.20982 5.46447 5.12132C4.52678 4.03282 4 2.65652 4 1.25C4 1.25 7 2.25 9 4.25' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.chat-page .gift-footer-new {
    font-size: 0.8rem;
    color: #8A8CA8;
}

/* Popup PIX específico do chat */
.chat-page .pix-popup-new {
    background: rgba(22, 22, 24, 0.85);
    backdrop-filter: blur(15px);
    border: 1px solid #333;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.6);
    max-width: 380px;
    width: 95%;
    padding: 25px 20px;
    border-radius: 24px;
    text-align: center;
    color: #fff;
}

.chat-page .pix-icon-container-new {
    width: 56px;
    height: 56px;
    background-color: #F9C536;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -60px auto 15px auto;
    border: 4px solid #161618;
}

.chat-page .card-icon-new {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='14' rx='2' stroke='%23161618' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 10H22' stroke='%23161618' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chat-page .pix-popup-new h2 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.chat-page .security-badge-new {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid #28A745;
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.chat-page .security-shield-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22Z' stroke='%2328A745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chat-page .security-text-new {
    display: flex;
    flex-direction: column;
}

.chat-page .security-text-new strong {
    color: #28A745;
    font-weight: 600;
    font-size: 1rem;
}

.chat-page .security-text-new span {
    color: #A9ADC8;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-page .check-icon-green {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13.3334 4L6.00008 11.3333L2.66675 8' stroke='%2328A745' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chat-page .pix-instruction-new {
    font-size: 0.9rem;
    color: #A9ADC8;
    margin-bottom: 20px;
}

.chat-page .pix-type-section-new {
    text-align: left;
    margin-bottom: 20px;
}

.chat-page .pix-type-section-new h4 {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12px;
}

.chat-page .pix-type-buttons-new {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.chat-page .pix-type-btn-new {
    background: #2C2F48;
    border: 1px solid #4A4D6D;
    border-radius: 12px;
    padding: 10px;
    color: #A9ADC8;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex: 1;
}

.chat-page .pix-type-btn-new.active {
    background: #F9C536;
    border-color: #F9C536;
    color: #1E202F;
}

.chat-page .pix-type-icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.chat-page .pix-type-btn-new .pix-type-icon {
    filter: grayscale(100%) brightness(2);
}

.chat-page .pix-type-btn-new.active .pix-type-icon {
    filter: none;
}



.chat-page .form-group-new {
    text-align: left;
    margin-bottom: 20px;
}

.chat-page .form-group-new label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 8px;
}

.chat-page .form-input-new {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #4A4D6D;
    border-radius: 12px;
    background: #2C2F48;
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.chat-page .form-input-new:focus {
    outline: none;
    border-color: #F9C536;
}

.chat-page .pix-btn-new {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    background: linear-gradient(90deg, #E53E3E 0%, #F9C536 100%);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    border: none;
    cursor: pointer;
}

.chat-page .card-icon-small {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='14' rx='2' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 10H22' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chat-page .arrow-icon {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.33325 8H12.6666' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 3.33331L12.6667 7.99998L8 12.6666' stroke='%231E202F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chat-page .pix-footer-new {
    font-size: 0.8rem;
    color: #8A8CA8;
    line-height: 1.5;
}

.chat-page .pix-premium-new {
    display: block;
    color: #F9C536;
    font-weight: 500;
    margin-top: 5px;
}

/* Popup de presente resgatado */
.chat-page .gift-redeemed-popup {
    background: rgba(33, 35, 51, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid #4A4D6D;
    border-radius: 16px;
    max-width: 340px;
    width: 90%;
    padding: 20px;
    text-align: center;
    color: #fff;
}

.chat-page .redeemed-icon-container {
    width: 56px;
    height: 56px;
    background-color: #28A745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
}

.chat-page .redeemed-check-icon {
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.chat-page .gift-redeemed-popup h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 8px;
}

.chat-page .gift-redeemed-popup p {
    font-size: 1rem;
    color: #A9ADC8;
    line-height: 1.4;
    margin-bottom: 20px;
}

.chat-page .redeemed-amount {
    background-color: rgba(40, 167, 69, 0.15);
    border-radius: 8px;
    padding: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #28A745;
}

/* Popup VIP específico do chat */
.chat-page .vip-access-popup-new {
    background: #161618;
    border: 1px solid #4A4D6D;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.7);
    max-width: 340px;
    width: 90%;
    padding: 15px;
    border-radius: 16px;
    text-align: center;
    color: #fff;
}

.chat-page .vip-access-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.chat-page .vip-access-crown-icon {
    width: 40px;
    height: 40px;
    background-color: #F9C536;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 19L6 7L10 12L12 7L14 12L18 7L19 19H5Z' stroke='%23161618' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.chat-page .vip-access-popup-new h2 {
    font-size: 1.4rem;
    font-weight: bold;
}

.chat-page .vip-benefits-section-new {
    margin-bottom: 15px;
    text-align: left;
}

.chat-page .vip-benefits-section-new h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.chat-page .benefits-grid {
    display: flex;
    justify-content: space-between;
}

.chat-page .benefits-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-page .benefits-grid li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.chat-page .feature-box-new {
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 12px;
    text-align: center;
}

.chat-page .feature-box-new.exclusive {
    background: #3A2E4A;
    border: 1px solid #8E44AD;
}

.chat-page .feature-box-new.withdrawal {
    background: #2A4838;
    border: 1px solid #28A745;
}

.chat-page .feature-box-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #F9C536;
    margin-bottom: 8px;
}

.chat-page .feature-icon {
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

.chat-page .feature-icon.lock { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Crect x='5' y='11' width='14' height='10' rx='2' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 
}

.chat-page .feature-icon.card { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='20' height='14' rx='2' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 10H22' stroke='%23F9C536' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 
}

.chat-page .feature-box-new h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.chat-page .feature-box-new p {
    font-size: 0.8rem;
    color: #A9ADC8;
}

.chat-page .price-section-access {
    margin: 20px 0;
}

.chat-page .price-section-access .old-price {
    text-decoration: line-through;
    color: #8A8CA8;
    font-size: 0.9rem;
}

.chat-page .price-section-access .current-price {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
}

.chat-page .price-section-access .installments {
    font-size: 1rem;
    color: #A9ADC8;
}

.chat-page .timer-section-access {
    background-color: #E53E3E1A;
    border: 1px solid #E53E3E;
    border-radius: 12px;
    padding: 10px;
    margin: 20px 0;
}

.chat-page .timer-section-access #vipTimerAccess {
    font-size: 1.8rem;
    font-weight: bold;
    color: #E53E3E;
}

.chat-page .timer-section-access p {
    font-size: 0.9rem;
    color: #fff;
    line-height: 1.3;
}

.chat-page .vip-upgrade-btn-new {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 12px;
    background-color: #F9C536;
    color: #161618;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
}

.chat-page .terms-text-final {
    font-size: 0.8rem;
    color: #8A8CA8;
    text-align: center;
    line-height: 1.4;
}

.chat-page .terms-text-final a {
    color: #A9ADC8;
    text-decoration: underline;
}

/* Responsividade específica do chat */
@media (max-width: 768px) {
    .chat-page .chat-header {
        padding: 10px 15px;
    }
    
    .chat-page .profile-info {
        margin-left: 10px;
    }
    
    .chat-page .chat-avatar {
        width: 40px;
        height: 40px;
    }
    
    .chat-page .chat-name {
        font-size: 1rem;
    }
    
    .chat-page .chat-status {
        font-size: 0.8rem;
    }
    
    .chat-page .balance {
        padding: 3.75px 11.25px;
        font-size: 1rem;
    }
    
    .chat-page .chat-messages {
        padding: 5px;
    }
    
    .chat-page .message {
        max-width: 85%;
        padding: 5px 14px;
    }
    
    .chat-page .chat-input {
        padding: 12px 15px;
    }
    
    .chat-page .send-btn, 
    .chat-page .audio-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}


/* ================================================== */
/*           TELA DE CARREGAMENTO E NOTIFICAÇÕES      */
/*              (ISOLADOS PARA .chat-page)            */
/* ================================================== */

/* Tela de carregamento - SOLUÇÃO DEFINITIVA */
#loading-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
}

#loading-screen .loading-content {
    text-align: center !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

#loading-screen .loading-icon {
    font-size: 4rem !important;
    margin-bottom: 20px !important;
    animation: loadingPulse 1.5s ease-in-out infinite !important;
    display: block !important;
    color: #ffffff !important;
}

#loading-screen .loading-text {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    display: block !important;
    text-align: center !important;
}

.chat-page .loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.chat-page .loading-content {
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    position: relative;
}

.chat-page .loading-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    animation: loadingPulse 1.5s ease-in-out infinite;
    display: block;
    color: #fff;
    z-index: 100001;
}

.chat-page .loading-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    opacity: 1;
    display: block;
    text-align: center;
    z-index: 100001;
}

@keyframes loadingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* Indicador de gravação */
.chat-page .recording-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 105, 180, 0.15);
    border-radius: 15px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #ff69b4;
}

.chat-page .recording-dots {
    display: flex;
    gap: 3px;
}

.chat-page .recording-dot {
    width: 4px;
    height: 4px;
    background: #ff69b4;
    border-radius: 50%;
    animation: recordingBlink 1.4s ease-in-out infinite;
}

.chat-page .recording-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-page .recording-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes recordingBlink {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1);
    }
}

/* VERSÃO FINAL E CORRETA PARA A NOTIFICAÇÃO */
.gift-notification {
    display: none; /* Começa escondida */
    position: relative; /* Comportamento de bloco normal */
    width: 90%;
    max-width: 420px;
    margin: 15px auto 10px; /* Margem: 15px em cima, centralizado, 10px embaixo */
    background: linear-gradient(135deg, #2D1B69 0%, #1A0E3D 100%);
    border: 1px solid #ff69b4;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 4px 20px rgba(255, 105, 180, 0.2);
    animation: giftNotificationSlideIn 0.5s ease-out;
}



/* VERSÃO CORRIGIDA PARA ALINHAMENTO À ESQUERDA */
.chat-page .gift-notification-content {
    display: flex;
    align-items: center; /* Mantém o alinhamento vertical centralizado */
    justify-content: flex-start; /* Alinha todo o conteúdo à esquerda */
    gap: 8px;
    margin-bottom: 5px;
    position: relative;
    width: 100%; /* Garante que o container ocupe todo o espaço */
}


.chat-page .gift-notification-icon {
    font-size: 2rem;
    animation: giftIconBounce 2s ease-in-out infinite;
}

.chat-page .gift-notification-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left; /* <<-- ADICIONE ESTA LINHA */
}


.chat-page .gift-notification-text strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.chat-page .gift-notification-text span {
    color: #ff69b4;
    font-size: 0.9rem;
}

.chat-page .gift-notification-close {
    position: absolute;
    top: -5px;
    right: -5px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-page .gift-notification-btn {
    width: 100%;
    background: linear-gradient(90deg, #ff69b4, #ff1493);
    border: none;
    border-radius: 12px;
    padding: 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.chat-page .gift-notification-btn:hover {
    transform: translateY(-1px);
}

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

@keyframes giftIconBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
    60% {
        transform: translateY(-4px);
    }
}

/* Melhorias no player de áudio */
.chat-page .audio-message {
    padding: 15px;
    position: relative;
}

.chat-page .audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    padding: 10px 15px;
    min-width: 250px;
}

.chat-page .play-btn {
    background: #ff69b4;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.chat-page .play-btn:hover {
    transform: scale(1.1);
}

.chat-page .audio-waveform {
    flex: 1;
    height: 30px;
    background: linear-gradient(90deg, 
        #ff69b4 0%, #ff69b4 20%, 
        rgba(255, 105, 180, 0.3) 20%, rgba(255, 105, 180, 0.3) 100%);
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}

.chat-page .audio-waveform::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        #fff 0px, #fff 2px,
        transparent 2px, transparent 6px
    );
    transform: translateY(-50%);
    opacity: 0.8;
}

.chat-page .audio-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 50px;
}

.chat-page .audio-duration {
    font-size: 0.8rem;
    opacity: 0.7;
    text-align: right;
}

.chat-page .audio-time {
    font-size: 0.75rem;
    opacity: 0.6;
    text-align: right;
}

/* Responsividade para notificação */
@media (max-width: 768px) {
    .chat-page .gift-notification {
        bottom: 80px;
        left: 10px;
        right: 10px;
        padding: 12px;
    }
    
    .chat-page .gift-notification-content {
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .chat-page .gift-notification-icon {
        font-size: 1.8rem;
    }
    
    .chat-page .gift-notification-text strong {
        font-size: 0.9rem;
    }
    
    .chat-page .gift-notification-text span {
        font-size: 0.8rem;
    }
    
    .chat-page .gift-notification-btn {
        padding: 10px;
        font-size: 0.9rem;
    }
    
    .chat-page .audio-player {
        min-width: 200px;
        padding: 8px 12px;
    }
    
    .chat-page .play-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* Estilos para mensagens do usuário */
.user-message {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 15px;
    margin-right: 15px; /* Aproximar da borda direita */
    gap: 0px; /* Espaço menor entre a mensagem e a imagem */
}

.user-message .message-content {
    background: #ff69b4;
    color: white;
    padding: 12px 16px;
    border-radius: 18px 18px 4px 18px;
    max-width: 80%;
    word-wrap: break-word;
    position: relative;
}

.user-message .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: right;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    flex-shrink: 0; /* Impede que a imagem encolha */
    border: none !important; /* Remove qualquer borda com !important */
}

.user-message .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none !important; /* Remove qualquer borda da imagem com !important */
}

/* Sobrescreve especificamente bordas de chat-avatar em mensagens do usuário */
.user-message .chat-avatar,
.user-message .user-avatar {
    border: none !important;
}

.user-message .message-time {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    margin-top: 5px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.user-message .message-time .check-icon {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
}

.audio-message-container .message-time {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    margin-top: 5px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.audio-message-container .message-time .check-icon {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}




/* ===== NOVOS ESTILOS BASEADOS NA IMAGEM ===== */

/* Indicador online no avatar */
.chat-avatar {
    position: relative;
}

.online-indicator {
    position: absolute;
    bottom: 2px;
    right: -1.3px;
    width: 12.5px;
    height: 12.5px;
    background: #22c55e;
    border: 1px solid #000;
    border-radius: 50%;
    z-index: 10;
}

/* Status online verde */
.chat-status.online {
    color: #9ca3af !important;
}

/* Seção Hoje */
.today-section {
    display: flex;
    justify-content: center;
    padding: 5px 0;
    margin: 5px 5px;
}

.today-content {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3.75px 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.clock-icon-img {
    width: 30px;
    height: 30px;
    /* filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); */ /* Removido o filtro, pois a imagem já é cinza */
    opacity: 0.8;
}

.today-text {
    font-weight: 500;
}

/* Layout das mensagens de áudio - MODELO À ESQUERDA */
.audio-message-container {
    margin-bottom: 15px;
}

.audio-message-layout {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-left: 15px; /* Mensagens da modelo ficam à esquerda */
    justify-content: flex-start; /* Força alinhamento à esquerda */
}

.audio-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: none !important;
}

.audio-bubble {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 20px 5px;
    padding: 12px 16px;
    max-width: 280px;
    backdrop-filter: blur(10px);
}

/* Player de áudio novo */
.audio-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

.play-btn-new {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ff69b4;
    border: none;
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.play-btn-new:hover {
    background: #ff1493;
    transform: scale(1.05);
}

.play-btn-new.playing {
    background: #ff1493;
}

/* Estilos para a barra de ondas */
.audio-wave-new {
    display: flex;
    align-items: center;
    height: 20px; /* Altura da barra de ondas */
    flex-grow: 1; /* Permite que a barra ocupe o espaço disponível */
    margin: 0 10px; /* Espaçamento lateral */
    overflow: hidden; /* Garante que as barras não transbordem */
}

.audio-wave-new .wave-bar {
    width: 3px; /* Largura de cada barra individual */
    height: 100%; /* Altura total da barra */
    background-color: #555; /* Cor das barras não preenchidas */
    margin-right: 2px; /* Espaçamento entre as barras */
    border-radius: 1px; /* Bordas arredondadas */
    transition: background-color 0.1s linear; /* Transição suave para o preenchimento */
}

.audio-wave-new .wave-bar.filled {
    background-color: #FF69B4; /* Cor rosa para as barras preenchidas */
}


.audio-wave-new .wave-bar:nth-child(odd) {
    height: 12px;
}

.audio-wave-new .wave-bar:nth-child(3n) {
    height: 16px;
}

.audio-wave-new .wave-bar:nth-child(5n) {
    height: 20px;
}

/* Animação das ondas quando tocando */
.audio-wave-new.playing .wave-bar {
    animation: waveAnimation 1.5s ease-in-out infinite;
}

.audio-wave-new.playing .wave-bar:nth-child(2n) {
    animation-delay: 0.1s;
}

.audio-wave-new.playing .wave-bar:nth-child(3n) {
    animation-delay: 0.2s;
}

.audio-wave-new.playing .wave-bar:nth-child(4n) {
    animation-delay: 0.3s;
}

.audio-wave-new.playing .wave-bar:nth-child(5n) {
    animation-delay: 0.4s;
}

@keyframes waveAnimation {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.8);
    }
}

.audio-duration-new {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 35px;
    text-align: right;
}

/* Mensagem do usuário - USUÁRIO À DIREITA */
.user-message {
    display: flex;
    justify-content: flex-end; /* Força alinhamento à direita */
    align-items: flex-end;
    margin-bottom: 10px;
    margin-left: auto; /* Mensagens do usuário ficam à direita */
    gap: 10px;
}

.user-message .message-content {
    background: #ff69b4;
    color: white;
    padding: 12px 16px;
    border-radius: 20px 20px 5px 20px;
    max-width: 280px;
    word-wrap: break-word;
    position: relative;
    font-size: 0.95rem;
}

.user-message .user-avatar {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 1rem;
    flex-shrink: 0;
    border: none !important;
}

.user-message .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none !important;
}

/* Sobrescreve bordas específicas */
.user-message .chat-avatar,
.user-message .user-avatar,
.audio-avatar {
    border: none !important;
}

/* Animação do ícone de presente */
.animated-gift {
    animation: giftBounce 2s ease-in-out infinite;
}

@keyframes giftBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-10px) scale(1.1);
    }
    60% {
        transform: translateY(-5px) scale(1.05);
    }
}

/* Ajustes na notificação de presente */
.gift-notification {
    background: linear-gradient(135deg, #2D1B69 0%, #1A0E3D 100%);
    border: 1px solid #ff69b4;
    border-radius: 16px;
    padding: 15px;
    position: fixed;
    bottom: 90px;
    left: 20px;
    right: 20px;
    z-index: 1000;
    animation: giftNotificationSlideIn 0.5s ease-out;
}

.gift-notification-icon {
    font-size: 2rem;
}

.gift-notification-btn {
    width: 100%;
    background: linear-gradient(90deg, #ff69b4, #ff1493);
    border: none;
    border-radius: 12px;
    padding: 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gift-notification-btn:hover {
    transform: translateY(-1px);
}

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

/* Ajustes no saldo para cor verde */
.balance span {
    color: #4ade80 !important;
    font-weight: bold;
}


/* ===== NOVA SEÇÃO DE ENTRADA DE CHAT ===== */

.chat-input-new {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.input-container {
    flex: 1;
    position: relative;
}

.input-container input {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    outline: none;
    backdrop-filter: blur(10px);
}

.input-container input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.input-container input:focus {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.3);
}

.audio-btn-new {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    border: none;
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}


.action-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
}

.action-btn:active {
    transform: scale(0.95);
}

/* Ícones do botão */
.btn-icon {
    position: relative;
    z-index: 2;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.send-icon {
    display: none;
}

.mic-icon {
    display: block;
}

/* Quando há texto, mostrar seta de envio */
.action-btn.send-mode .mic-icon {
    display: none;
}

.action-btn.send-mode .send-icon {
    display: block;
}

/* Animação de gravação */
.action-btn.recording {
    animation: recordingPulse 1.5s ease-in-out infinite;
}

.action-btn.recording::before {
    content: '';
    position: relative;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    opacity: 0.3;
    animation: recordingRipple 1.5s ease-out infinite;
}

@keyframes recordingPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes recordingRipple {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.mic-icon {
    position: relative;
    z-index: 2;
    font-size: 1.2rem;
}

/* Indicadores de gravação posicionados */
.recording-indicator {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    backdrop-filter: blur(10px);
    position: fixed;
    font-size: 0.9rem;
}

/* Indicador da modelo (superior esquerdo) */
.recording-indicator.model-recording {
    top: 120px;
    left: 20px;
}

/* Indicador do usuário (inferior direito) */
.recording-indicator.user-recording {
    bottom: 90px;
    right: 20px;
}

.recording-indicator .recording-dot {
    width: 12px;
    height: 12px;
    background: #ff1493;
    border-radius: 50%;
    animation: recordingBlink 1s ease-in-out infinite;
}

@keyframes recordingBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

.recording-indicator .recording-text {
    font-size: 1rem;
    font-weight: 500;
}

.recording-indicator .recording-time {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ff69b4;
}




/* Alinhar balões do chat */
.message.received {
    margin-left: 8px !important;
}

.message.sent {
    margin-right: 8px !important;
    max-width: 70%;
    background-color: #ff69b4;
    color: #000;
    font-weight: 500;
}

/* Imagem do usuário à direita */
.message.sent .profile-pic {
    float: right;
    margin-left: 6px;
}

/* Imagem da modelo à esquerda */
.message.received .profile-pic {
    float: left;
    margin-right: 6px;
}

/* Reduzir altura do balão do usuário */
.message.sent p {
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* Barra superior com status de gravação */
.header-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin-top: 4px;
}

.recording-indicator {
    background-color: #2a2a2a;
    color: #ff1493;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.recording-indicator svg {
    width: 14px;
    height: 14px;
}

/* Estilo do contador de tempo nos áudios */
.audio-time {
    font-size: 0.75rem;
    color: #ccc;
    margin-left: auto;
    padding-right: 6px;
}


.gift-notification-content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: #fff;
    text-align: center;
    flex-direction: row;
    
}

.gift-view-btn {
    background-color: #ff1493;
    color: white;
    padding: 8px 20px;
    border-radius: 24px;
    border: none;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Remover botão de fechar */
.gift-notification-close {
    display: none !important;
}


/* === Correções visuais específicas para notificação de presente === */
.gift-notification-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 2px 2px;
    text-align: left;
}

.gift-icon {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 40px;
    margin-right: 10px;
}

.gift-icon img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

.gift-text {
    flex-grow: 1;
}

.gift-text strong {
    font-size: 1rem;
    color: white;
    display: block;
    text-align: left;
}

.gift-text p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #ccc;
}

/* Botão "Ver presente" com brilho animado */
.gift-view-btn {
    position: relative;
    background-color: #ff1493;
    color: white;
    padding: 10px 24px;
    border-radius: 24px;
    border: none;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 8px #ff1493;
    transition: box-shadow 0.3s ease-in-out;
    animation: glowPulse 1.6s infinite alternate;
}

.gift-view-btn img {
    width: 26px !important;
    height: 26px !important;
    margin-right: 8px;
    flex-shrink: 0 !important;
    object-fit: contain !important;
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 8px #ff1493;
    }
    100% {
        box-shadow: 0 0 18px #ff69b4;
    }
}

/* Remove botão de fechar */
.gift-notification-close {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ===== ESTILOS PARA O NOVO ÍCONE DE MICROFONE E BOTÃO ===== */

/* Ajusta a cor de fundo do botão de áudio/envio */
.action-btn {
    background: linear-gradient(135deg, #ff69b4, #ff1493);
}

/* Garante que o ícone de microfone (imagem) seja exibido corretamente */
.mic-icon {
    display: block;
    width: 57px;  /* Ajuste o tamanho conforme necessário */
    height: 57px; /* Ajuste o tamanho conforme necessário */
    transition: all 0.3s ease;
}

/* Esconde a imagem do microfone quando o modo de envio está ativo */
.action-btn.send-mode .mic-icon {
    display: none;
}

/* Garante que o ícone de envio (seta) apareça corretamente */
.action-btn.send-mode .send-icon {
    display: block;
    font-size: 1.5rem; /* Mantém o tamanho da seta */
    color: white;
}

.chat-input-new .action-btn .mic-icon {
    display: block;
    width: 57px;
    height: 57px;
    transition: all 0.3s ease;
    /* Adicione esta linha para garantir que a imagem não estique */
    object-fit: contain; 
}

/* ===== ESTILOS PARA O NOVO INDICADOR DE GRAVAÇÃO NO CABEÇALHO ===== */

/* Contêiner principal do novo indicador */
.header-recording-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(255, 255, 255, 0.1); /* Fundo cinza, como na seção "Hoje" */
    color: #E5E7EB; /* Cor do texto "Gravando" */
    padding: 4px 10px;
    border-radius: 20px; /* Bordas arredondadas */
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 10px; /* Espaço entre o nome e o indicador */
}

/* Ponto vermelho que pisca */
.header-recording-indicator .recording-dot-red {
    width: 8px;
    height: 8px;
    background-color: #ef4444; /* Cor vermelha */
    border-radius: 50%;
    animation: recordingBlink 1.5s ease-in-out infinite;
}

/* Animação de piscar para o ponto vermelho */
@keyframes recordingBlink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 3px #ef4444;
    }
    50% {
        opacity: 0.5;
        box-shadow: none;
    }
}

/* Esconde o indicador de gravação antigo (o balão de chat) */
.message.model-message.recording-indicator {
    display: none !important;
}

/* Ajuste para o novo contêiner do nome e indicador */
.name-and-recording {
    display: flex;
    align-items: center;
}

/* Estilos para a hora e os V de confirmação nas mensagens de áudio da modelo */
.message-time-model {
    font-size: 0.8em; /* Tamanho da fonte menor */
    color: #888; /* Cor cinza mais escura para o texto */
    text-align: right; /* Alinha o texto à direita dentro do balão */
    margin-top: 5px; /* Espaçamento acima da hora */
    padding-right: 5px; /* Pequeno padding à direita para não colar na borda do balão */
    opacity: 0.9; /* Leve transparência */
}

/* Se os V de confirmação não aparecerem ou estiverem com cor errada */
.message-time-model::after {
    /* Se você já tem os ✓✓ no HTML, remova esta regra ou ajuste o content */
    /* content: " ✓✓"; */ 
    color: #4CAF50; /* Cor verde para os V de confirmação (exemplo) */
    font-weight: bold;
    margin-left: 3px;
}






/* Estilos para o input de mensagem desabilitado */
.chat-input-new.disabled .input-container input {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

.chat-input-new.disabled .input-container .input-placeholder-text {
    color: rgba(255, 255, 255, 0.5);
}

/* Estilos para o botão de ação quando bloqueado/carregando */
.action-btn.loading {
    background: #333 !important; /* Cinza escuro */
    cursor: not-allowed;
}

.action-btn.loading .btn-icon {
    display: none !important;
}

.action-btn.loading::after {
    content: ""; /* Mantenha isso para que o pseudo-elemento seja gerado */
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    width: 24px; /* Tamanho do spinner */
    height: 24px; /* Tamanho do spinner */
    animation: chatIconSpin 1s linear infinite; /* A animação deve estar aqui */
    will-change: transform; /* Otimização para animações de transformação */
    position: absolute; /* Posicionamento absoluto em relação ao pai (.action-btn) */
    top: 29.6%; /* Centraliza verticalmente */
    left: 29.6%; /* Centraliza horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta a posição para centralizar o próprio elemento */
    box-sizing: border-box;
    /* Remova todos os !important destas propriedades */
}



/* Estilos para o botão de ação quando em modo premium */
.action-btn.premium-mode {
    background: #F9C536 !important; /* Amarelo */
    cursor: not-allowed;
    
}

.action-btn.premium-mode .btn-icon {
    display: none !important;
}

.action-btn.premium-mode .crown-icon-btn {
    display: block !important;
    width: 37px; /* Ajuste o tamanho conforme necessário */
    height: 37px; /* Ajuste o tamanho conforme necessário */
    object-fit: contain;
}






/* Estilo geral para o botão quando desabilitado */
.action-btn:disabled {
    cursor: not-allowed; /* Muda o cursor para indicar que não é clicável */
    opacity: 0.7; /* Reduz a opacidade para dar um feedback visual de desabilitado */
}

/* Garante que os ícones internos (mic, send) não apareçam nos modos loading e premium */
.action-btn.loading .btn-icon,
.action-btn.premium-mode .btn-icon {
    display: none !important;
}

/* Garante que o ícone da coroa apareça no modo premium */
.action-btn.premium-mode .crown-icon-btn {
    display: block !important;
    width: 30px; /* Ajuste o tamanho conforme necessário */
    height: 30px; /* Ajuste o tamanho conforme necessário */
    object-fit: contain;
}





/* ================================================== */
/*      ANIMAÇÕES E MELHORIAS VISUAIS DOS POP-UPS     */
/* ================================================== */

/* Animação de entrada do overlay */
@keyframes fadeInOverlay {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.8); }
}

/* Animação de saída do overlay */
@keyframes fadeOutOverlay {
    from { background-color: rgba(0, 0, 0, 0.8); }
    to { background-color: rgba(0, 0, 0, 0); }
}

/* Animação de entrada do pop-up */
@keyframes zoomInPopup {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Animação de saída do pop-up */
@keyframes zoomOutPopup {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.5); opacity: 0; }
}

.popup-overlay {
    /* ... (estilos existentes) ... */
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

.popup-overlay.active {
    animation-name: fadeInOverlay;
}

.popup-overlay.closing {
    animation-name: fadeOutOverlay;
}

.popup-overlay .popup {
    /* ... (estilos existentes) ... */
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

.popup-overlay.active .popup {
    animation-name: zoomInPopup;
}

.popup-overlay.closing .popup {
    animation-name: zoomOutPopup;
}

/* Efeito de brilho sutil nos ícones dos pop-ups */
.gift-icon-container-new, .pix-icon-container-new, .redeemed-icon-container, .vip-access-crown-icon {
    box-shadow: 0 0 25px rgba(249, 197, 54, 0.5);
    transition: box-shadow 0.3s ease-in-out;
}

.gift-icon-container-new:hover, .pix-icon-container-new:hover, .redeemed-icon-container:hover, .vip-access-crown-icon:hover {
    box-shadow: 0 0 35px rgba(249, 197, 54, 0.8);
}

/* Animação de pulsação para o ícone de sucesso */
.redeemed-icon-container {
    animation: pulseSuccess 2s infinite;
}

@keyframes pulseSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Efeito de hover nos botões dos pop-ups */
.gift-btn-new, .pix-btn-new, .vip-upgrade-btn-new {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gift-btn-new:hover, .pix-btn-new:hover, .vip-upgrade-btn-new:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}



.random-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\'%3E%3Cpath d=\'M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z\'%3E%3C/path%3E%3Cpath d=\'M9 10L15 10\'%3E%3C/path%3E%3Cpath d=\'M9 14L15 14\'%3E%3C/path%3E%3Cpath d=\'M12 7V17\'%3E%3C/path%3E%3Cpath d=\'M12 7V17\'%3E%3C/path%3E%3C/svg%3E" ); }






.random-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\'%3E%3Cpath d=\'M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z\'%3E%3C/path%3E%3Cpath d=\'M9 10L15 10\'%3E%3C/path%3E%3Cpath d=\'M9 14L15 14\'%3E%3C/path%3E%3Cpath d=\'M12 7V17\'%3E%3C/path%3E%3Cpath d=\'M12 7V17\'%3E%3C/path%3E%3C/svg%3E" ); }


/* Ajustes ainda menores e mais compactos para o popup VIP */
.vip-access-popup-new {
    max-width: 320px !important;
    width: 90% !important;
    padding: 16px 12px !important;
    font-size: 0.85rem !important;
    gap: 8px !important;
}

.vip-access-popup-new h2 {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
}

.vip-benefits-section-new h4 {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
}

.vip-benefits-section-new ul {
    gap: 6px !important;
}

.vip-benefits-section-new ul li {
    font-size: 0.78rem !important;
    margin-bottom: 4px !important;
}

.feature-box-new {
    padding: 10px !important;
    margin-bottom: 10px !important;
}

.feature-box-header {
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
}

.feature-box-new h3 {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
}

.feature-box-new p {
    font-size: 0.75rem !important;
}

.vip-access-popup-new .btn {
    font-size: 0.9rem !important;
    padding: 10px 16px !important;
    min-width: unset !important;
    margin: 6px auto !important;
}

.vip-access-popup-new .timer {
    font-size: 1.1rem !important;
    margin: 8px 0 !important;
}

.price-section {
    padding: 12px !important;
    font-size: 0.9rem !important;
    margin-bottom: 10px !important;
}



/* Estilos para a mensagem de sistema (notificação de presente resgatado) */
.chat-page .message.system-message {
    background: rgba(0, 0, 0, 0.8); /* Bolha preta */
    color: white; /* Texto branco */
    align-self: center; /* Centraliza a mensagem */
    text-align: center;
    padding: 8px 15px;
    border-radius: 18px;
    font-size: 0.9rem;
    max-width: 90%;
    margin: 10px auto; /* Margem superior e inferior, centralizado */
}

.chat-page .message.system-message p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* --- Estilos Adicionais para o Pop-up VIP --- */

/* Texto chamativo em rosa */
.hurry-text-new {
    color: #ff1493; /* Rosa forte */
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 15px;
    text-shadow: 0 0 5px rgba(255, 20, 147, 0.7);
}

/* Ícone de Estrela */
.benefit-icon-star {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #F9C536; /* Cor amarela/laranja */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E") no-repeat center;
}

/* Ícone de Escudo Azul */
.benefit-icon-shield {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #3498db; /* Cor azul */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E") no-repeat center;
}

/* Ícone de Raio */
.benefit-icon-bolt {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #F9C536; /* Cor amarela/laranja */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8H7z'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8H7z'/%3E%3C/svg%3E") no-repeat center;
}

/* Destaque para o benefício exclusivo */
.benefits-final .exclusive-benefit {
    color: #F9C536; /* Cor amarela/laranja */
    font-weight: 500;
}

/* Ajuste no botão para ficar mais vibrante */
.vip-btn-final {
    background: linear-gradient(45deg, #ff8c00, #f9c536); /* Gradiente laranja/amarelo */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vip-btn-final:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(249, 197, 54, 0.4);
}

.crown-icon-img-new {
    width: 100%;
    height: 100%;
    object-fit: contain;
}







.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.popup-close:hover {
    opacity: 1;
}




.limitReachedPopup .popup-close {
    top: 30px; /* Ajuste conforme necessário para ficar abaixo do -61% */
    right: 20px;
    font-size: 1.5rem;
    color: #fff;
    z-index: 10;
}




.limitReachedPopup .popup-close {
    top: 40px; /* Ajuste para ficar abaixo do -61% */
    right: 20px;
    font-size: 1.5rem;
    color: #fff;
    z-index: 10;
}

.vip-popup-final {
    position: relative; /* Garante que o posicionamento absoluto do botão seja relativo a este elemento */
}




/* Centralizar o botão de conclusão */
#concludeBtn {
    display: block;
    margin: 20px auto;
}

/* Estilos específicos para a tela de loading da página bem-vindo.html */
.loading-screen-bem-vindo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fundo escuro semi-transparente */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    z-index: 9999; /* Garante que fique acima de todo o conteúdo */
    transition: opacity 0.5s ease-in; /* Transição suave para o desaparecimento */
    opacity: 1; /* Visível por padrão */
}

.loading-screen-bem-vindo.hidden {
    opacity: 0;
    pointer-events: none; /* Permite cliques através da tela quando invisível */
}

/* Estes estilos podem ser compartilhados se forem os mesmos para todas as telas de loading */
.spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
}

.spinner {
    border: 6px solid rgba(255, 255, 255, 0.3);
    border-top: 8px solid #FF69B4; /* Cor rosa */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estilo específico para o ícone de localização nas notificações */
.location-icon-avatar {
    padding-left: 0px;
    margin-right: 0px;
    width: 40px !important;
    height: 40px !important;
}

/* =================================================================== */
/* OTIMIZAÇÃO PARA CELULARES - Deixa o Popup Exclusivo Menor e Compacto */
/* =================================================================== */

@media (max-width: 600px) {

    .exclusive-invite {
        /* Reduz drasticamente o espaçamento interno */
        padding: 1.5rem 1.25rem; 

        /* IMPORTANTE: Removemos a altura máxima e a rolagem no celular 
           para forçar o conteúdo a se ajustar ao espaço menor. */
        max-height: none;
        overflow-y: visible;
    }

    .crown-image {
        /* Imagem menor para economizar espaço vertical */
        width: 50px;
        height: 50px;
        margin-bottom: 5px;
    }

    .popup-header {
        margin-bottom: 15px;
    }

    .popup-header h2 {
        /* Fonte do título significativamente menor */
        font-size: 1.3rem;
    }

    .popup-subtitle {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }

    .exclusive-offer {
        padding: 15px;
        margin-bottom: 15px;
    }

    .exclusive-offer h3 {
        font-size: 1rem;
    }

    .exclusive-offer p,
    .remaining {
        font-size: 0.8rem;
    }

    .progress-bar {
        margin: 10px 0;
    }

    .benefits {
        margin-bottom: 20px;
    }

    .benefits h4 {
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .benefits li {
        font-size: 0.85rem;
        margin-bottom: 6px;
        padding-left: 15px; /* Menor recuo para a lista */
    }

    .popup-cta {
        /* Botão principal menor e mais compacto */
        padding: 12px 20px;
        font-size: 1rem;
        margin-bottom: 10px;
    }

    .popup-footer {
        font-size: 0.75rem;
    }
}

/* ===================================================================== */
/* NOVO CÓDIGO: Otimização dos Pop-ups VIP e Limite para Celulares   */
/* ===================================================================== */

@media (max-width: 600px) {

    /* Alvo principal: o contêiner dos dois pop-ups */
    .vip-popup-final {
        padding: 15px;      /* Reduz o padding geral para economizar espaço */
        max-height: 95vh;   /* Garante que o pop-up nunca seja maior que a tela */
        overflow-y: visible;   /* Adiciona rolagem interna APENAS se necessário */
        gap: 8px;           /* Reduz o espaço entre os elementos internos */
    }

    /* Reduz o ícone superior e sua margem */
    .vip-icon-container-final {
        width: 50px;
        height: 50px;
        margin: -45px auto 10px auto; /* Menos margem superior e inferior */
    }
    
    .crown-icon-img-new {
      width: 70%; /* Reduz a imagem dentro do container */
      height: 70%;
    }

    /* Título principal menor */
    .vip-popup-final h2 {
        font-size: 1.4rem; /* Reduz o tamanho da fonte do título */
        margin-bottom: 0;
    }

    /* Linha abaixo do título mais fina */
    .title-underline {
        margin: 5px auto 12px auto;
    }

    /* Otimização da seção de preço */
    .price-section-final {
        padding: 10px;
        margin: 8px 0;
    }
    .price-section-final .current-price {
        font-size: 1.6rem;
    }
    .price-section-final .old-price,
    .price-section-final .installments {
        font-size: 0.8rem;
    }

    /* Seção do timer mais compacta */
    .timer-section-final {
        padding: 8px;
        gap: 8px;
        margin-bottom: 8px;
    }
    .timer-text-final {
        font-size: 0.8rem;
        flex-direction: column; /* Coloca o texto em coluna para economizar largura */
        gap: 2px;
    }
    #limitReachedTimer, #vipTimer { /* Alvo para os dois timers */
        font-size: 1.3rem !important;
    }

    /* Texto de urgência menor */
    .hurry-text-new {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    /* Lista de benefícios mais compacta */
    .benefits-final ul {
        gap: 5px; /* Menor espaço entre os itens */
        margin-bottom: 10px;
    }
    .benefits-final li {
        font-size: 0.8rem;
        gap: 6px;
    }
    .benefits-final li .check-icon-final,
    .benefits-final li [class^="benefit-icon-"] { /* Alvo para todos os ícones de benefício */
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    /* Caixas de informação (segurança) */
    .info-box-final {
        padding: 8px 10px;
        gap: 10px;
        margin-bottom: 8px;
    }
    .info-box-final p {
        font-size: 0.75rem;
    }

    /* Botão principal menos "gordo" */
    .vip-btn-final {
        padding: 12px;
        font-size: 1rem;
        margin-bottom: 8px;
    }

    /* Texto final dos termos menor */
    .terms-text-final {
        font-size: 0.7rem;
    }
}

/* ================================================================ */
/* NOVO CÓDIGO: Corrige a Posição e Compacta o Texto do Perfil no Celular */
/* ================================================================ */

@media (max-width: 768px) { /* Aplica em celulares e tablets na vertical */

    /* --- Comportamento e Posição (Já existente, mas mantido) --- */
    .profile-card-fullscreen {
        display: block; 
    }
    
    .profile-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px; /* Reduz o espaçamento nas laterais */
        padding-bottom: 120px; /* IMPORTANTE: Mantém o espaço para os botões */
    }

    /* --- Redução de Tamanhos e Espaços (NOVAS REGRAS) --- */
    
    .profile-header {
        margin-bottom: 8px; /* Menos espaço abaixo do nome */
    }

    .profile-header h2 {
        font-size: 1.6rem; /* Título (Nome e idade) menor */
    }

    .profile-location {
        margin-bottom: 12px; /* Menos espaço abaixo da localização */
        font-size: 0.85rem;  /* Texto da localização menor */
        gap: 4px;          /* Espaço menor entre ícone e texto */
    }

    .location-icon {
        width: 20px;       /* Ícone de localização menor */
        height: 20px;
    }

    .profile-interests {
        gap: 6px;           /* Espaço menor entre as tags */
        margin-bottom: 12px;
    }

    .profile-interests .interest-tag {
        padding: 6px 10px; /* Tags de interesse mais compactas */
        font-size: 0.8rem; /* Texto das tags menor */
    }
    
    .profile-description {
        font-size: 0.9rem;  /* Descrição um pouco menor */
        line-height: 1.3; /* Linhas mais próximas umas das outras */
        margin-bottom: 0; /* Remove a margem para não criar espaço extra embaixo */
    }
}

/* ================================================================ */
/* NOVAS ANIMAÇÕES PARA ARRASTAR O CARD                 */
/* ================================================================ */

.profile-card-fullscreen {
    /* Adiciona uma transição suave para a propriedade transform */
    transition: transform 0.6s ease-in-out;
}

.profile-card-fullscreen.slide-out-left {
    /* Move o card para fora da tela à esquerda e o rotaciona um pouco */
    transform: translateX(-150%) rotate(-15deg);
}

.profile-card-fullscreen.slide-out-right {
    /* Move o card para fora da tela à direita e o rotaciona um pouco */
    transform: translateX(150%) rotate(15deg);
}

/* Adicione este código ao final do style.css */
.vip-popup-final {
    text-align: center;
}

/* ===================================================================== */
/* SOLUÇÃO DEFINITIVA E SEGURA PARA ROLAGEM DO CHAT NO SAFARI    */
/* ===================================================================== */

/* 1. Define o container principal do chat para ocupar 100% da altura da tela
   e ser a referência para os elementos internos. */
.chat-page .chat-container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2; /* Garante que o chat fique na frente do fundo */
}

/* 2. Garante que o cabeçalho não encolha. */
.chat-page .chat-header {
    flex-shrink: 0;
}

/* 3. A CORREÇÃO MAIS IMPORTANTE: A área de mensagens. */
.chat-page .chat-messages {
    /* Faz com que a área de mensagens cresça e ocupe todo o espaço vertical disponível. */
    flex: 1;

    /* A CHAVE PARA A ROLAGEM:
       Ativa a barra de rolagem vertical APENAS quando o conteúdo (os áudios)
       for maior que a altura disponível da área de mensagens. */
    overflow-y: auto;

    /* Um truque ESSENCIAL para corrigir um bug de cálculo de altura do flexbox no Safari,
       garantindo que o overflow funcione corretamente. */
    min-height: 0;
}

/* 4. Garante que a barra de digitação não cubra a última mensagem,
   adicionando um espaço no final da lista. */
.chat-page .chat-input-new {
    /* Garante que a barra de digitação não seja "esmagada". */
    flex-shrink: 0;
}

/* ===================================================================== */
/* PASSO FINAL: Centralização do Botão PIX e Responsividade do Pop-up VIP */
/* ===================================================================== */

/* 1. Centraliza o botão de saque PIX dentro do seu pop-up */
.chat-page .pix-btn-new {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: fit-content; /* Faz o botão ter a largura do seu conteúdo */
    padding-left: 30px;  /* Adiciona um espaçamento interno para conforto */
    padding-right: 30px; /* Adiciona um espaçamento interno para conforto */
}

/* 2. Ajusta o pop-up de Acesso VIP */
.chat-page .vip-access-popup-new {
    max-width: 50%; /* Define a largura máxima como 50% da tela */
    width: auto;      /* Permite que o pop-up encolha se necessário */
    max-height: 95vh; /* Garante que a altura não ultrapasse a tela */
    overflow-y: auto; /* Adiciona rolagem APENAS se o conteúdo for muito grande */
}

/* ===================================================================== */
/* VERSÃO FINAL: POP-UP VIP PEQUENO, CENTRALIZADO E SEM ROLAGEM     */
/* ===================================================================== */

/* 1. Regra principal que FORÇA o pop-up a ser menor e centralizado. */
.chat-page .vip-access-popup-new {
    width: auto;
    max-width: 90%;
    
    /* A CHAVE: Força a altura máxima a 85% da tela, criando as margens. */
    max-height: 85vh; 
    
    /* Ativa a rolagem interna como ÚLTIMO RECURSO, caso o conteúdo
       ainda seja muito grande para uma tela extremamente pequena. */
    overflow-y: auto;
    
    /* Garante a centralização vertical perfeita. */
    margin: auto;
}

/* 2. Versão MAIS AGRESSIVA para compactar o conteúdo e caber na altura. */
@media (max-width: 768px) {
    .chat-page .vip-access-popup-new {
        padding: 10px;
    }
    .chat-page .vip-access-popup-new .vip-access-header {
        margin-bottom: 5px;
    }
    .chat-page .vip-access-popup-new h2 {
        font-size: 1rem;
    }
    .chat-page .vip-access-popup-new .vip-benefits-section-new {
        margin-bottom: 6px;
    }
    .chat-page .vip-access-popup-new .vip-benefits-section-new h4 {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
    .chat-page .vip-access-popup-new .benefits-grid {
        gap: 0 10px; /* Remove o espaçamento vertical entre as linhas */
    }
    .chat-page .vip-access-popup-new .benefits-grid li {
        font-size: 0.75rem;
        margin-bottom: 2px; /* Espaço mínimo entre os benefícios */
    }
    .chat-page .vip-access-popup-new .feature-box-new {
        padding: 6px;
        margin-bottom: 6px;
    }
    .chat-page .vip-access-popup-new .feature-box-new h3 {
        font-size: 0.8rem;
    }
    .chat-page .vip-access-popup-new .feature-box-new p {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    .chat-page .vip-access-popup-new .price-section-access {
        margin: 6px 0;
    }
    .chat-page .vip-access-popup-new .price-section-access .current-price {
        font-size: 1.2rem;
    }
    .chat-page .vip-access-popup-new .price-section-access .old-price,
    .chat-page .vip-access-popup-new .price-section-access .installments {
        font-size: 0.7rem;
    }
    .chat-page .vip-access-popup-new .timer-section-access {
        padding: 5px;
        margin: 6px 0;
    }
     .chat-page .vip-access-popup-new .timer-section-access p {
        font-size: 0.7rem;
    }
    .chat-page .vip-access-popup-new .vip-upgrade-btn-new {
        padding: 8px;
        font-size: 0.9rem;
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

/* ===================================================================== */
/* AJUSTE FINAL: Notificações Atrás do Pop-up e Mais Compactas   */
/* ===================================================================== */



/* 2. Deixa as notificações um pouco menores e mais compactas. */
.mini-notification {
    padding: 6px 12px; /* Reduz o espaçamento interno */
    gap: 8px;          /* Reduz o espaço entre o avatar e o texto */
    max-width: 280px;  /* Largura máxima um pouco menor */
}

.notification-avatar {
    width: 28px;       /* Avatar um pouco menor */
    height: 28px;
}

.notification-text {
    font-size: 0.75rem; /* Fonte do texto principal menor */
}

.notification-text strong {
    font-weight: 500;  /* Fonte do nome um pouco mais fina */
}

.notification-text small {
    font-size: 0.8rem; /* Fonte do "Agora mesmo" menor */
}

/* ===================================================================== */
/* AJUSTE FINAL: Camada do Pop-up e Compactação da Notificação      */
/* ===================================================================== */

/* 1. Esta nova classe eleva a camada do card principal APENAS
      quando um pop-up está ativo, colocando-o acima das notificações. */
.profile-card-fullscreen.popup-active {
    z-index: 500; /* Maior que o z-index de 200 das notificações */
}

/* 2. Deixa as notificações um pouco menores e mais compactas. */
.mini-notification {
    padding: 6px 12px;
    gap: 8px;
}
.notification-avatar {
    width: 28px;
    height: 28px;
}
.notification-text {
    font-size: 0.75rem;
}
.notification-text small {
    font-size: 0.7rem; /* Reduzido de 0.8rem */
}

/* ===================================================================== */
/* AJUSTE FINAL: Responsividade da Página de Cadastro (Sem Rolagem) */
/* ===================================================================== */

/* Aplica estas regras apenas em telas com largura máxima de 768px (celulares e tablets) */
@media (max-width: 768px) {
    
    /* Garante que o container se ajuste bem em telas menores */
    .container {
        padding: 15px;
    }

    /* Compacta o formulário de cadastro */
    .form-container {
        padding: 25px 20px; /* Reduz o espaçamento interno do formulário */
    }

    .form-title {
        font-size: 1.8rem;   /* Diminui o título "Criar conta" */
        margin-bottom: 20px; /* Menos espaço abaixo do título */
    }

    .form-group {
        margin-bottom: 15px; /* Reduz o espaço entre cada campo (Nome, Email, etc.) */
    }

    .form-input {
        padding: 12px;       /* Campos de texto um pouco menos "altos" */
    }

    /* Alvo específico para o botão dentro do formulário de cadastro */
    #cadastroForm .btn-primary {
        display: block;         /* Permite que a margem automática funcione */
        width: fit-content;     /* Faz a largura do botão se ajustar ao texto */
        margin-left: auto;      /* Centraliza o BOTÃO */
        margin-right: auto;     /* Centraliza o BOTÃO */
        margin-top: 15px;       /* Mantém o ajuste de espaçamento superior */
        padding: 12px 35px;     /* Espaçamento interno para o botão não ficar muito pequeno */
    }
}