/* style.css - VERSÃO LIMPA, CORRIGIDA E DEFINITIVA 🚀 */



/* =========================================

   0. IMPORTAÇÃO DE FONTES

   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');



/* =========================================

   1. VARIÁVEIS E RESET GERAL

   ========================================= */

:root {

    --cor-principal: #ff0066;

    --cor-destaque: #2ecc71;

    --cor-gold: #f1c40f;

    --cor-fundo: #f0f2f5; 

    --cor-card: #ffffff;

    --cor-texto: #1c1e21;

    --cor-texto-suave: #65676b;

    --cor-borda: #efefef;

    --radius: 12px;

    --sombra-card: 0 2px 10px rgba(0,0,0,0.03);

}



* { box-sizing: border-box; }



body {

    background-color: var(--cor-fundo);

    margin: 0;

    padding: 60px 0 70px 0;

    color: var(--cor-texto);

    -webkit-tap-highlight-color: transparent;

}



img, video { max-width: 100%; height: auto; }



body, button, input, select, textarea, h1, h2, h3, p, div:not(.material-icons-round), span:not(.material-icons-round) {

    font-family: Arial, Helvetica, sans-serif !important;

}



.material-icons-round {

    font-family: 'Material Icons Round' !important;

    display: inline-block !important;

    vertical-align: middle !important;

}



body.full-screen .main-header,

body.full-screen .bottom-nav {

    display: none !important;

}



/* =========================================

   2. HEADER E NAVEGAÇÃO

   ========================================= */

.main-header {

    position: fixed; 

    top: 0; left: 0; width: 100%; height: 60px;

    background: linear-gradient(-45deg, #4b0082, #2c3e50, #8e44ad, #2980b9);

    background-size: 400% 400%;

    animation: gradientAnimation 15s ease infinite;

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

    padding: 0 15px; z-index: 2000; box-shadow: 0 2px 5px rgba(0,0,0,0.3);

    color: white; 

}



@keyframes gradientAnimation {

    0% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

    100% { background-position: 0% 50%; }

}



#header-app-name {

    font-family: 'Great Vibes', cursive !important;

    font-size: 28px !important;

    color: white !important;

    text-shadow: 0 2px 4px rgba(0,0,0,0.8);

    margin: 0; line-height: 60px; white-space: nowrap; 

    overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: center; padding: 0 10px; 

}



@media (max-width: 480px) {

    #header-app-name { font-size: 22px !important; letter-spacing: 0.5px; }

}



.header-icon-img {

    height: 85px !important; width: auto; margin-right: 15px;

    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)); 

    vertical-align: middle; margin-top: -22px; position: relative; z-index: 2500;

    transition: transform 0.2s ease;

}

.header-icon-img:hover { transform: scale(1.1); }



.sidebar-menu {

    position: fixed; top: 0; left: -280px; width: 280px; height: 100%;

    background: white; z-index: 10001; transition: left 0.3s ease;

    box-shadow: 5px 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column;

    border-top-right-radius: 20px !important; border-bottom-right-radius: 20px !important; overflow: hidden !important;

}

.sidebar-menu.aberto { left: 0; }



.overlay-menu {

    position: fixed; top: 0; left: 0; width: 100%; height: 100%;

    background: rgba(0,0,0,0.5); z-index: 10000; display: none;

}

.overlay-menu.visivel { display: block; }



.modern-header { background: linear-gradient(135deg, #d35400 0%, #ff8a00 100%) !important; padding: 30px 20px 20px !important; border-bottom-right-radius: 25px !important; box-shadow: 0 4px 10px rgba(211, 84, 0, 0.2) !important; z-index: 2 !important; }

.modern-avatar { width: 70px !important; height: 70px !important; background: #eee !important; border-radius: 50% !important; margin: 0 auto 10px auto !important; background-size: cover !important; border: 3px solid #fff !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; }

.modern-email { display: block !important; color: white !important; font-size: 16px !important; font-weight: 700 !important; }

.modern-scroll { padding: 15px 10px !important; background: #fdfdfd !important; flex: 1; overflow-y: auto;}

.menu-item { padding: 15px 20px; border-bottom: 1px solid #f0f2f5; color: #050505; cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; transition: all 0.2s ease !important; }

.menu-item .material-icons-round { font-size: 22px !important; margin-right: 12px !important; color: #888 !important; }

.menu-item:hover, .menu-item:active { background-color: #fff0e6 !important; color: #d35400 !important; transform: translateX(5px) !important; }

.menu-item:hover .material-icons-round { color: #d35400 !important; }



/* =========================================

   3. RODAPÉ (BOTÕES REDONDOS NEON) 🚀

   ========================================= */

.bottom-nav, #menu-rodape {

    position: fixed !important;

    bottom: 15px !important;

    left: 0 !important;

    width: 100% !important;

    height: 60px !important; 

    background: transparent !important;

    display: flex !important;

    justify-content: space-around !important;

    align-items: center !important;

    z-index: 9999 !important;

    pointer-events: none !important;

    transition: transform 0.3s ease-in-out, opacity 0.3s !important;

}



.nav-item {

    pointer-events: auto !important;

    background: #ffffff !important;

    border: 2px solid #ff0066 !important;

    color: #65676b;

    width: 50px !important;

    height: 50px !important;

    border-radius: 50% !important;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 0 15px rgba(255, 0, 102, 0.4) !important;

    transition: all 0.2s ease;

}



.nav-item.active {

    background: #ff0066 !important;

    color: #ffffff !important;

    transform: scale(1.1);

}



.nav-item.create-btn {

    background: linear-gradient(135deg, #ff0066, #ff5e00) !important;

    width: 60px !important;

    height: 60px !important;

    color: white !important;

    border: 3px solid white !important;

    box-shadow: 0 0 20px rgba(255, 0, 102, 0.6) !important;

}



.menu-hidden {

    transform: translateY(120px) !important;

    opacity: 0 !important;

}



/* =========================================

   4. STORIES (FIX DEFINITIVO DE IMAGEM E TRAVAS) 📸

   ========================================= */

#barra-online {

    display: flex !important;

    gap: 12px !important;

    padding: 10px !important;

    overflow-x: auto !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    min-height: 110px !important;

    scrollbar-width: none !important;

}

#barra-online::-webkit-scrollbar { display: none; }



.story-item, .story-create-card, #barra-online > div {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    min-width: 75px !important;

    max-width: 75px !important;

    flex-shrink: 0 !important;

    cursor: pointer !important;

}



.story-circle, .story-create-img {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    border-radius: 50% !important;

    border: 3px solid #ff0066 !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    background-color: #333 !important;

    display: block !important;

    padding: 2px !important;

    background-clip: content-box !important;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

    flex-shrink: 0 !important;

    box-sizing: border-box !important;

}



/* Botão Ao Vivo (Trava para não ser esmagado) */

#btn-live-start {

    min-width: 65px !important; 

    max-width: 65px !important;

    min-height: 65px !important; 

    max-height: 65px !important;

    border-radius: 50% !important;

    flex-shrink: 0 !important;

}



/* Nome do usuário abaixo do Story */

#barra-online span, .story-name-fb {

    display: block !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    color: var(--cor-texto) !important;

    text-align: center !important;

    width: 100% !important;

    margin-top: 5px !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

}



/* =========================================

   5. TELA DE VÍDEOS

   ========================================= */

#videos-screen.active {

    display: block !important; background: #000 !important; padding: 0 !important; overflow: hidden !important; z-index: 50 !important; position: fixed !important; top: 60px !important; left: 0 !important; width: 100% !important; height: calc(100vh - 110px) !important;

}

.reels-container { width: 100%; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }

.reels-container::-webkit-scrollbar { display: none; }

.reels-item { width: 100%; height: 100%; scroll-snap-align: start; position: relative; background: #000; }

.reels-video { width: 100%; height: 100%; object-fit: cover; }

.reels-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); pointer-events: none; z-index: 10; }



/* =========================================

   6. PC (DESKTOP) AJUSTES GERAIS

   ========================================= */

@media (min-width: 992px) {

    body { padding-top: 0 !important; }

    .main-header { width: calc(100% - 280px) !important; left: 280px !important; top: 0 !important; }

    #top-promo-banner { position: absolute !important; top: 60px !important; left: 280px !important; width: calc(100% - 280px) !important; z-index: 1400 !important; box-sizing: border-box !important; }

    

    /* 1. SIDEBAR CORRIGIDA E ALINHADA ATE O CHÃO */

    .sidebar-menu { left: 0 !important; top: 0 !important; width: 280px !important; height: 100vh !important; max-height: 100vh !important; display: flex !important; flex-direction: column !important; border-radius: 0 !important; border-right: 1px solid var(--cor-borda) !important; box-shadow: none !important; z-index: 1500 !important; background: var(--cor-card) !important; }

    

    /* 2. CABEÇALHO DA SIDEBAR: Fica reto e alinha a foto ao lado do nome */

    .sidebar-menu .modern-header { padding: 25px 20px !important; border-radius: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; text-align: left !important; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; }

    .sidebar-menu .modern-avatar { width: 50px !important; height: 50px !important; margin: 0 !important; flex-shrink: 0 !important; border-width: 2px !important; }

    .sidebar-menu .modern-email { font-size: 15px !important; margin: 0 !important; word-break: break-word !important; }

    

    /* 3. ESPAÇAMENTO DOS ITENS DO MENU */

    .sidebar-menu .menu-scroll-area { padding: 15px 10px 90px 10px !important; background: transparent !important; }

    .sidebar-menu .menu-item { padding: 12px 15px !important; margin-bottom: 4px !important; font-size: 13px !important; border-radius: 8px !important; }

    .sidebar-menu .menu-item .material-icons-round { font-size: 20px !important; margin-right: 12px !important; }

    

    main.container, .container { margin-left: 280px !important; width: calc(100% - 280px) !important; max-width: 100% !important; padding-top: 110px !important; padding-bottom: 100px !important; }

    .screen { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; }

    .novo-flog-card, .fb-create-post, .fb-create-post-card { max-width: 100% !important; border-radius: 8px !important; border: 1px solid #ced0d4; margin-left: auto !important; margin-right: auto !important; max-width: 680px !important; }

    .bottom-nav, #menu-rodape { display: flex !important; justify-content: center !important; gap: 60px !important; padding-left: 280px !important; height: 70px !important; }

    .main-header button[onclick="window.toggleMenu()"] { display: none !important; }

    .overlay-menu { display: none !important; }

   /* Centraliza a tela de vídeos e limita o conteúdo no meio do PC */
    #videos-screen.active { 
        left: 280px !important; 
        width: calc(100% - 280px) !important; 
        display: block !important; /* Voltamos para block para permitir o scroll natural */
        height: calc(100vh - 60px) !important; 
        top: 60px !important; 
        background: var(--cor-fundo) !important;
        overflow-y: auto !important;
    }

    /* Trava o feed de vídeos no centro do monitor */
    #feed-somente-videos {
        max-width: 500px !important; /* Tamanho de tela de celular no PC */
        margin: 0 auto !important; /* O segredo para centralizar */
        padding: 20px 10px !important;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Garante que o vídeo não exploda a altura */
    #feed-somente-videos video {
        max-height: 80vh !important;
        width: 100% !important;
        object-fit: contain !important;
        border-radius: 12px;
        background: #000;
    }



/* =========================================

   7. FEED E POSTS

   ========================================= */

.fb-create-post { background: white; padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--sombra-card); margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; }

.fb-input-row { display: flex; gap: 10px; align-items: center; }

.fb-input-fake { background: #f0f2f5; border-radius: 20px; padding: 10px 15px; flex: 1; color: #65676b; font-size: 15px; border: none; outline: none; }

.fb-actions-row { display: flex; justify-content: space-between; border-top: 1px solid #e4e6eb; padding-top: 8px; }



.fb-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 10px !important; border-radius: 5px !important; color: #65676b; font-weight: 600; font-size: 13px !important; background: transparent; border: none; transition: background 0.2s; cursor: pointer; }

.fb-action-btn:hover { background: #f2f2f2 !important; }

.fb-action-btn .material-icons-round { font-size: 20px !important; }



.feed-avatar-small { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; background-color: #ccc; margin-right: 10px; border: 1px solid #eee; cursor: pointer; }



.novo-flog-card { background-color: var(--cor-card); margin-bottom: 16px !important; border-radius: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border: none; padding-bottom: 10px; }

.novo-flog-header { padding: 12px 16px; display: flex; align-items: center; justify-content: flex-start; }

.novo-flog-meta { display: flex; flex-direction: column; justify-content: center; margin-bottom: 0 !important; }

.novo-flog-name { font-weight: 600; font-size: 15px; color: var(--cor-texto); line-height: 1.2; }

.novo-flog-date { font-size: 13px; color: #65676b; margin-top: 2px; }

.novo-flog-media-wrapper { width: 100%; display: flex; align-items: center; justify-content: center; background: transparent; max-height: 600px; aspect-ratio: auto !important; }

.novo-flog-img, .novo-flog-video { width: 100%; object-fit: cover !important; max-height: 600px; }

.novo-flog-caption { padding: 8px 16px 12px 16px; font-size: 15px; line-height: 1.5; color: var(--cor-texto); }

.novo-flog-actions-bar { display: flex; justify-content: space-between; padding: 4px 16px; margin: 0 16px; border-top: 1px solid #ced0d4; border-bottom: 1px solid transparent; }

.novo-flog-action-btn { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 0; color: #65676b; font-weight: 600; font-size: 14px; border-radius: 4px; transition: background 0.2s; background: none; border: none; cursor: pointer; }

.novo-flog-action-btn.liked { color: #e74c3c; font-weight: bold; }

.novo-flog-mimo-btn { background: linear-gradient(45deg, #ffd700, #f39c12); color: white; border: none; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: bold; box-shadow: 0 2px 5px rgba(243, 156, 18, 0.3); cursor: pointer; }

.novo-flog-input-area { padding: 10px 16px 15px 16px; background: transparent !important; display: flex; gap: 10px; align-items: center; }

.novo-flog-input { flex: 1; border-radius: 20px !important; background: #f0f2f5 !important; padding: 10px 15px !important; color: #050505; border: none; font-size: 13px; outline: none; }



.novo-flog-card .mimos-grid-container > div:nth-child(n+2),

.novo-flog-card .mimo-card-shiny:nth-child(n+2),

.novo-flog-card div[style*="display: flex"][style*="gap: 5px"] > div:nth-child(n+2) { display: none !important; }



/* =========================================

   8. PERFIL DO USUÁRIO

   ========================================= */

.profile-header-container { text-align: center; background: var(--cor-card); padding-bottom: 15px; }

.profile-cover { width: 100%; height: 200px; background-color: #777; background-size: cover; background-position: center; border-radius: 0 0 12px 12px; position: relative; }

.profile-avatar { width: 140px; height: 140px; border-radius: 50%; border: 4px solid white; background-color: #ddd; display: inline-block; position: relative; margin-top: -70px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.profile-info-section { padding: 10px 15px; text-align: center; }

.profile-name-main { font-size: 22px; font-weight: 800; margin: 5px 0; color: var(--cor-texto); }

.profile-actions-row { display: flex; gap: 10px; padding: 0 15px; margin: 15px 0; justify-content: center; flex-wrap: wrap; }

.btn-profile-primary { background: #1877f2; color: white; border: none; border-radius: 8px; padding: 0 20px; height: 40px; font-weight: bold; flex: 1; max-width: 200px; }

.btn-profile-secondary { background: #e4e6eb; color: #050505; border: none; border-radius: 8px; padding: 0 20px; height: 40px; font-weight: bold; flex: 1; max-width: 200px; }

.pro-tabs { display: flex; flex-wrap: wrap; width: 100%; background: white; border-top: 1px solid #eee; border-bottom: 1px solid #ddd; margin-top: 10px; }

.pro-tab { flex: 1; min-width: 25%; text-align: center; padding: 14px 5px; font-size: 13px; font-weight: 600; color: #65676b; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.3s; }

.pro-tab.active { color: var(--cor-principal); border-bottom: 3px solid var(--cor-principal); }

.tab-content { display: none; background: var(--cor-fundo); padding: 15px 0; }

.tab-content.active { display: block; }



/* =========================================

   9. SELOS E BADGES

   ========================================= */

.selo-verificado { display: inline-flex !important; align-items: center; justify-content: center; width: 15px; height: 15px; background: linear-gradient(135deg, #00a2ff, #0066ff) !important; color: white !important; border-radius: 50%; margin-left: 5px; font-size: 9px !important; vertical-align: middle; border: 1px solid rgba(255,255,255,0.3); flex-shrink: 0; }

.selo-verificado::after { content: '✓'; font-weight: bold; }

.selo-novo { display: inline-flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, #2ecc71, #27ae60) !important; color: white !important; border-radius: 10px; padding: 2px 6px; margin-left: 5px; font-size: 9px !important; font-weight: 900; vertical-align: middle; box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3); border: 1px solid rgba(255,255,255,0.5); letter-spacing: 0.5px; }

.badge-role { display: inline-flex !important; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 8px; color: white !important; font-size: 9px !important; font-weight: bold; margin-left: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.badge-fundador { background: linear-gradient(135deg, #d4af37, #b8860b); }

.badge-admin { background: linear-gradient(135deg, #e74c3c, #c0392b); }

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



.avatar-vip-border { position: relative; border: 3px solid #ffd700 !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important; transition: all 0.3s ease; border-radius: 50% !important; padding: 3px !important; background-clip: content-box; }

.avatar-vip-border::before { content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border: 2px solid #ffd700; border-radius: 50%; opacity: 0; animation: pulseDourado 2s infinite; pointer-events: none; }

@keyframes pulseDourado { 0% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); } 100% { transform: scale(1.15); opacity: 0; box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); } }

.badge-vip-gold { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FFD700 0%, #F39C12 100%); padding: 2px 6px; border-radius: 10px; box-shadow: 0 2px 5px rgba(243, 156, 18, 0.4); border: 1px solid #FFF; line-height: 1; }

.badge-vip-gold:hover { transform: scale(1.1); transition: 0.2s ease; }

.vip-ribbon { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #FFD700, #F39C12); color: #fff; font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: 10px; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); z-index: 10; }



/* =========================================

   FIX GERAL: RESPEITO AO MENU E SIDEBAR

   ========================================= */



/* Força todas as telas a começarem ABAIXO do cabeçalho roxo */

.screen {
    padding: 80px 8px 0 8px !important; /* Reduzi as laterais de 15px/30px para 8px no geral */
    min-height: 100vh;
    box-sizing: border-box;
}



/* No PC, todas as telas respeitam a barra lateral laranja */

@media (min-width: 992px) {

    .screen {

        margin-left: 280px !important;

        width: calc(100% - 280px) !important;

        padding-left: 30px !important;

        padding-right: 30px !important;

    }

}



/* ESTILO DOS CARDS DA LOJA */

.store-packages-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;

    max-width: 1000px;

    margin: 20px auto;

}



.coin-package-card {

    background: #fff; border-radius: 15px; padding: 25px;

    text-align: center; border: 1px solid #eee;

    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

    display: flex; flex-direction: column; align-items: center;

    position: relative;

}



/* ESTILO DOS INPUTS NO ADMIN (IMPEDE O ESTICAMENTO) */

#admin-screen input {

    width: 100% !important;

    max-width: 400px !important; /* Trava o tamanho para não virar uma tripa */

    padding: 10px !important;

    margin: 5px 0 15px 0 !important;

    border: 1px solid #ddd !important;

    border-radius: 8px !important;

    display: block !important;

}



#admin-screen h4 { margin-bottom: 20px; color: #333; }

#admin-screen label { font-size: 12px; font-weight: bold; color: #666; display: block; }

.coin-amount-text { font-size: 24px; font-weight: 900; color: #2f3542; margin: 10px 0 2px 0; }

.coin-bonus-text { font-size: 11px; color: #2ecc71; font-weight: bold; margin-bottom: 15px; min-height: 15px; }

.btn-buy-package { background: #f1f2f6; color: #2f3542; border: none; padding: 10px 0; border-radius: 20px; font-weight: bold; font-size: 15px; width: 90%; cursor: pointer; }

.coin-package-card.popular .btn-buy-package { background: #ff4757; color: white; }

.coin-package-card.best-value .btn-buy-package { background: linear-gradient(45deg, #f1c40f, #e67e22); color: white; }



/* =========================================

   11. MODAIS GENÉRICOS E CHAT TELA INTEIRA

   ========================================= */

.modal-padrao { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); align-items: center; justify-content: center; }

.modal-card { background: white; width: 90%; max-width: 400px; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }



#chat-conversa-screen { 

    z-index: 50 !important; 

    position: relative; 

    background-color: #efe7dd !important; 

    background-image: none !important; 

    min-height: 100vh; 

    padding-top: 0 !important; 

}

#chat-box { overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }

.msg-bubble { width: fit-content; max-width: 80%; padding: 8px 12px; margin-bottom: 8px; border-radius: 8px; font-size: 14px; line-height: 1.4; display: flex; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,0.1); clear: both; position: relative; }

.msg-me { background: #d9fdd3; color: #111; margin-left: auto; border-bottom-right-radius: 0; }

.msg-other { background: white; color: #111; margin-right: auto; border-bottom-left-radius: 0; }



/* =========================================

   12. BARRA DE CHAT (REVISADA E ÚNICA) 🚀

   ========================================= */

/* =========================================

   CLONE DO RODAPÉ DO WHATSAPP (CORRIGIDO)

   ========================================= */

#chat-footer-bar {

    display: flex !important;

    align-items: center !important;

    background-color: #f0f2f5 !important; /* Fundo cinza do Zap */

    padding: 8px 10px !important;

    gap: 8px !important;

    

    /* AS 4 LINHAS MÁGICAS QUE COLAM A BARRA NO CHÃO */

    position: fixed !important;

    bottom: 0 !important; 

    left: 0 !important;

    width: 100% !important;

    z-index: 999999 !important;

    box-sizing: border-box !important;

}



/* Regra para o Computador: desvia do menu lateral preto */

@media (min-width: 992px) {

    #chat-footer-bar {

        left: 280px !important; 

        width: calc(100% - 280px) !important; 

    }

}



.chat-input-field, #msg-input {

    flex: 1 !important;

    height: 40px !important;

    background: white !important;

    border-radius: 20px !important;

    border: 1px solid #ccc !important;

    padding: 0 15px !important;

    margin: 0 10px !important;

    color: #000 !important;

}



/* =========================================

   13. MODO ESCURO (BOTÕES E BARRA) 🌙

   ========================================= */

body.dark-mode {

    --cor-fundo: #18191a !important; 

    --cor-card: #242526 !important;  

    --cor-texto: #ffffff !important; 

    --cor-borda: #3e4042 !important; 

    background-color: var(--cor-fundo) !important;

}



/* BOTÕES PRETOS COM BORDA ROSA */

body.dark-mode .nav-item {

    background: #18191a !important;

    border: 2px solid #ff0066 !important;

    color: #ffffff !important;

    box-shadow: 0 4px 15px rgba(255, 0, 102, 0.3) !important;

}



body.dark-mode .nav-item.active {

    background: #ff0066 !important;

    border-color: #ffffff !important;

}



/* BARRA DE CHAT NO MODO ESCURO */

body.dark-mode #chat-footer-bar { 

    background-color: #242526 !important; 

    border-color: #3e4042 !important; 

}



body.dark-mode .chat-input-field, 

body.dark-mode #msg-input { 

    background-color: #3a3b3c !important; 

    color: #ffffff !important; 

}



body.dark-mode #chat-footer-bar button { color: #e4e6eb !important; }



/* STORIES E LOJA NO MODO ESCURO */

body.dark-mode #barra-online span { color: #fff !important; }

body.dark-mode .coin-package-card { background-color: #242526 !important; border: 1px solid #3e4042 !important; }

body.dark-mode .coin-amount-text { color: #fff !important; }



/* =========================================

   TRAVA DO FEED E CRIADOR DE POST 🚀

   ========================================= */

/* 1. Impede a barra de stories de ficar gigante e empurrar o resto */

#barra-online {

    min-height: 90px !important; 

    align-items: center !important;

    padding: 5px 0 !important;

}



/* 2. Força o card de "Criar Post" a ficar visível, 100% largo e protegido */

.fb-create-post-card {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    background: #ffffff !important;

    padding: 12px 16px !important;

    border-radius: 12px !important;

    margin-bottom: 15px !important;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;

    width: 100% !important;

    box-sizing: border-box !important;

    visibility: visible !important;

    opacity: 1 !important;

    clear: both !important; /* Impede que flutue para trás de outros itens */

}



/* 3. Garante que a barra cinza onde fica o texto "Compartilhe algo..." não seja esmagada */

.fb-create-post-card > div:nth-child(2) {

    flex: 1 !important;

    background: #f0f2f5 !important;

    border-radius: 20px !important;

    height: 40px !important;

    display: flex !important;

    align-items: center !important;

    padding: 0 15px !important;

    min-width: 0 !important; /* Trava de segurança no flexbox para não vazar a tela */

}



/* 4. Ajuste no topo do feed para não esconder atrás do cabeçalho */

#feed-screen > div:first-child {

    padding-top: 15px !important;

}



/* =========================================

   PLAYER DE STORIES (TELA CHEIA)

   ========================================= */

#story-player-modal {

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100%;

    background-color: #111;

    z-index: 999999;

    display: none;

    flex-direction: column;

}



.story-player-header {

    position: absolute;

    top: 0; left: 0; width: 100%;

    padding: 15px 10px 10px 10px;

    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);

    z-index: 10;

}



.story-progress-container {

    display: flex;

    gap: 4px;

    margin-bottom: 12px;

}



.story-progress-bar {

    flex: 1;

    height: 3px;

    background-color: rgba(255,255,255,0.3);

    border-radius: 3px;

    overflow: hidden;

}



.story-progress-fill {

    height: 100%;

    background-color: #fff;

    width: 0%;

}



.story-user-info {

    display: flex;

    align-items: center;

    gap: 10px;

}



#story-player-avatar {

    width: 35px; height: 35px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #ff0066;

}



#story-player-nick {

    color: #fff;

    font-weight: 600;

    font-size: 14px;

    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);

}



.story-close-btn {

    position: absolute;

    top: 25px; right: 15px;

    background: none; border: none;

    color: white; font-size: 30px;

    cursor: pointer;

    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);

}



.story-media-container {

    flex: 1;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100vh;

}



#story-img, #story-vid {

    max-width: 100%;

    max-height: 100vh;

    object-fit: contain;

}



/* Áreas invisíveis para clicar e passar o story */

.story-click-left {

    position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: 5; cursor: pointer;

}

.story-click-right {

    position: absolute; top: 0; right: 0; width: 70%; height: 100%; z-index: 5; cursor: pointer;

}



/* =========================================

   CORREÇÃO DEFINITIVA DO MENU LATERAL (MOBILE E PC)

   ========================================= */



/* Celular: Escondido por padrão na lateral esquerda */

.sidebar-menu {

    left: -285px !important;

    transition: left 0.3s ease-in-out !important;

    z-index: 10001 !important;

}



/* Celular: Quando clica no botão, ele desliza pra tela */

.sidebar-menu.aberto {

    left: 0 !important;

}



/* PC (Desktop): Sempre visível e fixo na esquerda */

@media (min-width: 992px) {

    .sidebar-menu {

        left: 0 !important;

        height: 100vh !important;

        position: fixed !important;

        display: flex !important;

    }

    .sidebar-menu .modern-header {

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        padding: 20px 15px !important;

    }

    .sidebar-menu .modern-avatar {

        width: 50px !important;

        height: 50px !important;

        margin: 0 !important;

    }

    main.container, .container {

        margin-left: 280px !important;

    }

}



/* =========================================

   TARJA DE PROMOÇÃO VIP (PC E MOBILE)

   ========================================= */

#top-promo-banner {

    background: linear-gradient(90deg, #111111 0%, #2c2c2c 100%) !important;

    color: #f1c40f !important;

    border-bottom: 2px solid #f1c40f !important;

    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;

    padding: 10px 20px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

}



#top-promo-banner .promo-text {

    font-size: 15px !important;

    font-weight: bold !important;

    letter-spacing: 0.5px !important;

    text-shadow: 1px 1px 3px #000000 !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

}



#top-promo-banner .promo-btn {

    background: linear-gradient(45deg, #FFD700, #F39C12) !important;

    color: #111 !important;

    border: none !important;

    padding: 8px 20px !important;

    border-radius: 25px !important;

    font-weight: 900 !important;

    font-size: 12px !important;

    cursor: pointer !important;

    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.4) !important;

    text-transform: uppercase !important;

    transition: transform 0.2s !important;

    margin-right: 10px !important;

}



#top-promo-banner .promo-btn:hover {

    transform: scale(1.05) !important;

}



#top-promo-banner .promo-close {

    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.15) !important;

    border: none !important;

    border-radius: 50% !important;

    width: 28px !important;

    height: 28px !important;

    font-size: 18px !important;

    line-height: 1 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

}



#top-promo-banner .promo-close:hover {

    background: rgba(255, 0, 0, 0.6) !important;

}



/* =========================================

   TRAVA DE TELAS (MATA O BUG DOS VÍDEOS EMBOLANDO)

   ========================================= */

.screen[style*="display: none"], 

.screen[style*="display:none"] {

    display: none !important;

    opacity: 0 !important;

    z-index: -1 !important;

}



#videos-screen {

    background-color: var(--cor-fundo) !important;

}



/* =========================================

   PERFIL: ESTILO BASE E BOTÕES

   ========================================= */

.profile-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; margin-bottom: 10px; width: 100%; justify-content: flex-start; }

.btn-profile-primary { background: linear-gradient(45deg, #1877f2, #00c6ff) !important; color: white !important; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 13px; flex: 1; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }

.btn-profile-secondary { background: #e4e6eb !important; color: #1c1e21 !important; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 13px; flex: 1; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }

.pro-tabs { display: flex; gap: 10px; overflow-x: auto; border-bottom: 1px solid #ddd; margin-top: 20px; padding-bottom: 10px; scrollbar-width: none; }

.pro-tab { white-space: nowrap; padding: 8px 16px; font-size: 14px; font-weight: bold; color: #65676b; cursor: pointer; border-radius: 20px; background: transparent; transition: all 0.2s; }

.pro-tab.active { color: #1877f2; border-bottom: 3px solid #1877f2; border-radius: 0; background: transparent; }



/* =========================================

   PERFIL: EXCLUSIVO PARA COMPUTADOR (PC)

   ========================================= */

@media (min-width: 992px) {

    /* Centraliza o perfil igual ao feed */

    #perfil-screen, #ver-perfil-screen {

        max-width: 800px !important; margin: 0 auto !important; background: #ffffff;

        box-shadow: 0 0 15px rgba(0,0,0,0.05); border-left: 1px solid #ddd; border-right: 1px solid #ddd; min-height: 100vh;

    }

    

    /* Capa grande e Foto na Esquerda */

    .profile-cover { width: 100%; height: 250px !important; background-color: #333; background-size: cover; background-position: center; position: relative; border-radius: 0 !important; }

    

    /* Foto de perfil alinhada na esquerda */

    #perfil-screen > div:nth-child(2), #ver-perfil-screen > div:nth-child(2) { position: relative; padding-top: 70px !important; }

    

    .profile-avatar { width: 150px !important; height: 150px !important; border-radius: 50%; border: 5px solid #fff; background-color: #ddd; background-size: cover; background-position: center; position: absolute; top: -75px !important; left: 30px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin: 0 !important; }

    

    /* Alinhamento dos textos na esquerda */

    #ver-nickname-container, #display-nickname-container, #ver-identidade, #display-identidade { text-align: left !important; margin-left: 190px !important; }

    #ver-nickname-container span, #display-nickname-container span { font-size: 24px; font-weight: 900; }

    

    /* Alinhamento dos contadores (Seguidores, Seguindo, etc) */

    #ver-perfil-screen > div > div[style*="display:flex; gap:15px;"], #perfil-screen > div > div[style*="display:flex; gap:15px;"] { justify-content: flex-start !important; margin-left: 190px !important; margin-top: 10px !important; }

    

    /* Botões (Adicionar, Chat) */

    .profile-actions-row { margin-left: 190px !important; width: calc(100% - 190px) !important; }

}



/* =========================================

   ESTILO SEXLOG PARA PC (DESKTOP)

   ========================================= */

@media (min-width: 992px) {

    /* 1. Deixa o card do perfil largo e alinhado */

    #perfil-screen, #ver-perfil-screen {

        max-width: 850px !important; /* Tela mais larga pra caber tudo */

        margin: 20px auto !important; 

        background: #fff;

        border-radius: 8px;

        box-shadow: 0 1px 3px rgba(0,0,0,0.2);

        padding-bottom: 20px !important;

    }



    /* 2. Capa cobrindo tudo no topo */

    .profile-cover {

        height: 250px !important;

        border-radius: 8px 8px 0 0 !important;

    }



    /* 3. Avatar grande na esquerda encavalado na capa */

    #perfil-screen > div:nth-child(2), #ver-perfil-screen > div:nth-child(2) {

        position: relative;

    }

    
/* =========================================
   SELO VIP AMARELO - PAINEL DO MEMBRO 👑
   ========================================= */
.selo-vip-painel {
    background: #f1c40f !important; /* Amarelo Sólido Vibrante */
    color: #000 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-left: 8px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    border: 1px solid #000 !important;
    box-shadow: 2px 2px 0px #000 !important; /* Estilo Sticker */
}

/* Garante que o container do nome não corte o selo */
#display-nickname, #ver-nickname {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}


    /* 4. Empurra os Textos (Nome, Local, Status) pra direita do Avatar */

    #display-nickname-container, #ver-nickname-container,

    #display-identidade, #ver-identidade,

    #perfil-screen > div > div[style*="display:flex; gap:15px;"],

    #ver-perfil-screen > div > div[style*="display:flex; gap:15px;"] {

        text-align: left !important;

        justify-content: flex-start !important;

        margin-left: 210px !important; /* Espaço pro avatar + margem */

    }



    /* Ajuste fino no tamanho do nome */

    #display-nickname-container, #ver-nickname-container {

        padding-top: 10px !important;

        font-size: 26px !important;

    }



    /* 5. Alinha os Botões na direita do Avatar */

    .profile-actions-row {

        margin-left: 210px !important;

        justify-content: flex-start !important;

        padding: 0 !important;

    }



    .btn-profile-primary, .btn-profile-secondary {

        max-width: 150px !important; /* Botões mais compactos tipo Sexlog */

    }



    /* 6. Abas estilo Sexlog (alinhadas na esquerda, sem esticar) */

    .pro-tabs {

        justify-content: flex-start !important;

        padding-left: 30px !important;

        border-top: none !important; /* Remove linha de cima pra ficar clean */

    }

    

    .pro-tab {

        min-width: auto !important; /* Tira a largura fixa de 25% */

        padding: 15px 25px !important;

        font-size: 14px !important;

    }

}



/* =========================================

   PLANOS VIP PREMIUM

   ========================================= */

.vip-plans-grid {

    display: flex;

    flex-direction: column;

    gap: 15px;

    padding: 0 15px 30px 15px;

    max-width: 600px;

    margin: 0 auto;

}



@media (min-width: 768px) {

    .vip-plans-grid { flex-direction: row; align-items: center; justify-content: center; }

}



.vip-plan-modern {

    background: #fff;

    border-radius: 16px;

    padding: 25px 20px;

    text-align: center;

    border: 1px solid #eee;

    box-shadow: 0 4px 15px rgba(0,0,0,0.05);

    position: relative;

    transition: transform 0.2s;

    cursor: pointer;

    flex: 1;

}



.vip-plan-modern:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }



.vip-plan-modern.destaque {

    border: 2px solid #f1c40f;

    background: linear-gradient(to bottom, #fffdf0, #ffffff);

    transform: scale(1.03);

    box-shadow: 0 8px 30px rgba(241, 196, 15, 0.2);

    z-index: 2;

}



.vip-plan-modern.destaque:hover { transform: scale(1.05); }



.vip-ribbon-popular {

    position: absolute;

    top: -12px; left: 50%;

    transform: translateX(-50%);

    background: linear-gradient(45deg, #f1c40f, #e67e22);

    color: white; font-size: 10px; font-weight: 900;

    padding: 4px 15px; border-radius: 12px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

}



.vip-plan-title { font-size: 14px; font-weight: 800; color: #888; letter-spacing: 1px; margin-bottom: 10px; }

.vip-plan-modern.destaque .vip-plan-title { color: #d35400; }



.vip-plan-price { font-size: 32px; font-weight: 900; color: #1c1e21; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 5px; }

.vip-coin-icon { font-size: 20px; }



.vip-plan-desc { font-size: 13px; color: #666; margin-bottom: 20px; }



.vip-plan-btn { width: 100%; background: #f0f2f5; color: #333; border: none; padding: 12px; border-radius: 25px; font-weight: bold; font-size: 13px; cursor: pointer; transition: background 0.2s; }

.vip-plan-btn.destaque-btn { background: linear-gradient(45deg, #f1c40f, #f39c12); color: white; box-shadow: 0 4px 10px rgba(241, 196, 15, 0.4); }



/* --- AJUSTES DE TAMANHO DO RODAPÉ --- */



/* 1. Diminui a altura total da barra do rodapé */

#menu-rodape {

    height: 45px !important; 

    padding-bottom: 2px !important;

}



/* 2. Diminui o tamanho dos ícones normais (Home, Radar, Chat, Perfil) */

#menu-rodape .nav-item .material-icons-round {

    font-size: 20px !important; /* O padrão costuma ser 24px */

}



/* 3. Diminui o tamanho do botão central em destaque (Criar Post) */

#menu-rodape .nav-item.create-btn {

    width: 35px !important; 

    height: 35px !important;

    margin-top: -15px !important; /* Puxa ele um pouco mais para cima para manter o efeito flutuante */

}



/* 4. Diminui o ícone de "+" dentro do botão central */

#menu-rodape .nav-item.create-btn .material-icons-round {

    font-size: 20px !important; 

}



/* --- AJUSTE BOTÕES PERFIL VISITANTE --- */

.visitor-controls {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: wrap !important;

    gap: 10px !important;

    padding: 10px 15px !important;

    justify-content: center !important;

}



/* Força ADD e Mensagem lado a lado (50% cada) */

.visitor-controls .btn-profile-primary, 

.visitor-controls .btn-profile-secondary {

    flex: 1 !important;

    min-width: 120px !important;

    height: 45px !important;

    border-radius: 10px !important;

    font-weight: 800 !important;

    font-size: 13px !important;

    text-transform: uppercase !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 5px !important;

    border: none !important;

}



/* Botão DAR MATCH ocupando 100% na linha de baixo */

.btn-match-full {

    flex: 0 0 100% !important;

    background: linear-gradient(45deg, #ff4b2b, #ff416c) !important;

    color: white !important;

    height: 50px !important;

    border-radius: 12px !important;

    font-weight: 900 !important;

    font-size: 16px !important;

    margin-top: 5px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3) !important;

    border: none !important;

    cursor: pointer !important;

}



/* --- AJUSTE DOS 3 BOTOES LADO A LADO --- */

.visitor-controls-final {

    padding: 10px 15px;

    width: 100%;

    box-sizing: border-box;

}



.main-actions-row {

    display: flex !important;

    gap: 6px !important;

    margin-bottom: 8px;

}



.btn-mini-action {

    flex: 1 !important;

    height: 42px !important;

    border-radius: 8px !important;

    border: none !important;

    font-weight: 800 !important;

    font-size: 11px !important;

    display: flex !important;

    flex-direction: column !important; /* Ícone em cima, texto embaixo para caber */

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    color: white !important;

    text-transform: uppercase;

}



.btn-mini-action .material-icons-round { font-size: 18px !important; margin-bottom: 2px; }



/* Cores dos botões */

.btn-blue { background: #1877f2 !important; }

.btn-gray { background: #e4e6eb !important; color: #1c1e21 !important; }

.btn-red { background: linear-gradient(45deg, #ff4b2b, #ff416c) !important; }



/* Botão de recomendar */

.btn-recommend-flat {

    width: 100%;

    height: 35px;

    background: transparent !important;

    color: #65676b !important;

    border: 1px solid #ddd !important;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

}



/* --- FIX DEFINITIVO: BOTÕES PROPORCIONAIS --- */

.botoes-perfil-novo {

    display: flex !important;

    flex-direction: row !important;

    justify-content: center !important;

    gap: 8px !important;

    padding: 10px 15px !important;

    width: 100% !important;

    box-sizing: border-box !important;

    flex-wrap: wrap !important; /* Joga pra baixo só se a tela for um celular minúsculo */

}



/* Trava todos os botões para crescerem igual, mas com limite de tamanho */

.botoes-perfil-novo button {
    flex: 1 1 20% !important; /* Permite que o botão diminua mais antes de quebrar */
    min-width: 60px !important; 
    max-width: 110px !important;
    font-size: 10px !important; /* Texto levemente menor para caber em telas como iPhone SE */

    height: 40px !important;

    padding: 0 5px !important;

    border-radius: 8px !important;

    border: none !important;

    font-weight: 800 !important;

    font-size: 12px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    cursor: pointer !important;

    color: white !important;

    margin: 0 !important; /* Remove qualquer margem zoada do JS */

}



.botoes-perfil-novo .material-icons-round {

    font-size: 16px !important;

}



/* Cores organizadas */

.btn-azul { background: #1877f2 !important; }

.btn-cinza { background: #e4e6eb !important; color: #1c1e21 !important; }

.btn-vermelho { background: linear-gradient(45deg, #e74c3c, #c0392b) !important; }

.btn-rosa { background: #ff4d94 !important; }



/* Botão Validado (Discreto embaixo) */

.btn-recomendar-limpo {

    background: transparent !important;

    color: #888 !important;

    border: 1px solid #ddd !important;

    border-radius: 20px !important;

    padding: 8px 20px !important;

    font-size: 12px !important;

    font-weight: bold !important;

    cursor: pointer !important;

}



/* =========================================

   12. BARRA DE CHAT (REVISADA E ÚNICA) 🚀

   ========================================= */

#chat-footer-bar, .chat-footer-container {

    display: flex !important;

    position: fixed !important;

    bottom: 0 !important; /* Gruda a barra no chão de verdade */

    left: 0 !important;

    width: 100% !important;

    height: 60px !important;

    z-index: 999999 !important; 

    background: #f0f2f5 !important;

    border-top: 1px solid #ddd !important;

    align-items: center !important;

    padding: 0 10px !important;

    box-sizing: border-box !important;

}



/* O balanço da tela de mensagens para matar o buraco (as "3 divisões") */

#chat-box {

    height: calc(100vh - 120px) !important; /* Encaixa perfeito entre o topo e o rodapé */

    padding-bottom: 20px !important;

}



/* Regra exclusiva para Computador (Empurra a barra pra não ficar sob o menu) */

@media (min-width: 992px) {

    #chat-footer-bar, .chat-footer-container {

        left: 280px !important; /* Desvia exatamente da largura do menu */

        width: calc(100% - 280px) !important; /* Corta o excesso na direita */

        bottom: 0 !important;

    }

}



/* =========================================

   CLONE DO RODAPÉ DO WHATSAPP

   ========================================= */

#chat-footer-bar {

    display: flex !important;

    align-items: center !important;

    background-color: #f0f2f5 !important; /* Cor de fundo cinza clara */

    padding: 8px 10px !important;

    gap: 8px !important;

}



/* A pílula branca gigante que engole os botões e o texto */

.chat-input-wrapper {

    display: flex !important;

    flex: 1 !important;

    background-color: #ffffff !important;

    border-radius: 24px !important;

    align-items: center !important;

    padding: 5px 8px !important;

    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;

}



/* Os ícones que ficam dentro da pílula (Emoji, Clipe, Câmera) */

.chat-icon-btn {

    background: transparent !important;

    border: none !important;

    color: #54656f !important; /* Cinza escuro do zap */

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 6px !important;

    cursor: pointer !important;

}

.chat-icon-btn .material-icons-round {

    font-size: 22px !important;

}



/* O campo de texto limpo dentro da pílula */

.chat-input-field, #msg-input {

    flex: 1 !important;

    border: none !important;

    background: transparent !important;

    outline: none !important;

    font-size: 15px !important;

    padding: 5px 10px !important;

    color: #111 !important;

    height: auto !important;

    margin: 0 !important;

}



/* O Botão Verde Redondo de Mic/Enviar na extrema direita */

.chat-mic-btn, .chat-send-btn {
    width: 40px !important;
    height: 40px !important;

    border-radius: 50% !important;

    background-color: #00a884 !important; /* Verde ciano do Zap */

    color: white !important;

    border: none !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;

    flex-shrink: 0 !important;

    margin: 0 !important;

}

.chat-mic-btn .material-icons-round, 

.chat-send-btn .material-icons-round {

    font-size: 22px !important;

}



/* Faz o selo de anúncio pulsar levemente */

div[style*="background:#f1c40f"] {

    animation: pulseAnuncio 2s infinite;

}



@keyframes pulseAnuncio {

    0% { opacity: 1; }

    50% { opacity: 0.8; }

    100% { opacity: 1; }

}


/* ========================================================
   LOGIN DEFINITIVO: FUNDO TOTAL E COMPONENTES MODERNOS 🚀
   ======================================================== */
#login-screen.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important; 
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #1a1a1a !important; /* COR SÓLIDA PARA ESCONDER A MEIA TELA */
    background-image: none !important;
    overflow: hidden !important;
}

/* Centralização da moldura estilo celular */
#login-screen.active .login-card-modern {
    background: #262626 !important;
    padding: 40px 30px !important;
    border-radius: 25px !important;
    border: 1px solid #333 !important;
    width: 90% !important;
    max-width: 350px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
    text-align: center;
}

/* Ajuste dos Campos de Texto */
#login-screen.active input[type="email"],
#login-screen.active input[type="password"],
#login-screen.active .input-glow-rosa {
    width: 100% !important;
    background: #333 !important;
    border: 1px solid #444 !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    color: white !important;
    margin-bottom: 15px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* Botão ENTRAR (Dourado Premium) */
#login-screen.active .btn-neon-rosa {
    width: 100% !important;
    background: linear-gradient(45deg, #f1c40f, #d35400) !important;
    color: #000 !important;
    font-weight: 900 !important;
    border-radius: 30px !important;
    padding: 15px !important;
    border: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3) !important;
    margin-top: 10px !important;
}

/* Botão Solicitar Acesso (Ajuste de visibilidade) */
#login-screen.active button:not(.btn-neon-rosa) {
    background: #34495e !important;
    color: white !important;
    border: none !important;
    padding: 12px !important;
    border-radius: 10px !important;
    width: 100% !important;
    margin-top: 15px !important;
    cursor: pointer;
    font-weight: bold;
}

/* Esconde o menu e lixo que fica atrás no PC */
@media (min-width: 992px) {
    .main-header, .sidebar-menu, .bottom-nav, #top-promo-banner, .container {
        display: none !important;
    }
}

/* =========================================
   SELO VIP BONITÃO PARA O NOME 👑
   ========================================= */
.selo-vip-nome {
    background: linear-gradient(45deg, #FFD700, #F39C12);
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.5px;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.5);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.selo-vip-nome::before {
    content: '👑';
    margin-right: 3px;
    font-size: 11px;
}

<style>
    /* 1. DESTRAVAMENTO DE TELA E VÍDEOS */
    html, body { overflow-x: hidden !important; }
    #videos-screen.active {
        display: block !important;
        position: relative !important;
        top: 0 !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 150px !important;
    }

    /* 2. LIMPEZA TOTAL E OBRIGATÓRIA DO PERFIL (FOTO GRANDE) */
    /* Remove borda amarela e sombra de qualquer foto grande de perfil */
    #display-avatar.anel-vip, 
    #ver-avatar-container.anel-vip, 
    .profile-avatar.anel-vip {
        border: 4px solid #fff !important; 
        box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    }

 
/* SELO VIP AMARELO PARA NOME - FORÇADO PARA MOBILE */
span.selo-vip-painel {
    background-color: #f1c40f !important;
    color: #000 !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    margin-left: 10px !important;
    border: 1px solid #000 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 2px 2px 0px #000 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    height: 18px !important;
}
    /* Ajuste para o Radar */
    .radar-avatar.anel-vip::after { top: 2px !important; right: 2px !important; }
</style>

/* style.css - VERSÃO LIMPA, CORRIGIDA E DEFINITIVA 🚀 */

/* =========================================
   0. IMPORTAÇÃO DE FONTES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* =========================================
   1. VARIÁVEIS E RESET GERAL
   ========================================= */
:root {
    --cor-principal: #ff0066;
    --cor-destaque: #2ecc71;
    --cor-gold: #f1c40f;
    --cor-fundo: #f0f2f5; 
    --cor-card: #ffffff;
    --cor-texto: #1c1e21;
    --cor-texto-suave: #65676b;
    --cor-borda: #efefef;
    --radius: 12px;
    --sombra-card: 0 2px 10px rgba(0,0,0,0.03);
}

* { box-sizing: border-box; }

body {
    background-color: var(--cor-fundo);
    margin: 0;
    padding: 60px 0 70px 0;
    color: var(--cor-texto);
    -webkit-tap-highlight-color: transparent;
}

img, video { max-width: 100%; height: auto; }

body, button, input, select, textarea, h1, h2, h3, p, div:not(.material-icons-round), span:not(.material-icons-round) {
    font-family: Arial, Helvetica, sans-serif !important;
}

.material-icons-round {
    font-family: 'Material Icons Round' !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

body.full-screen .main-header,
body.full-screen .bottom-nav {
    display: none !important;
}

/* =========================================
   2. HEADER E NAVEGAÇÃO
   ========================================= */
.main-header {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 60px;
    background: linear-gradient(-45deg, #4b0082, #2c3e50, #8e44ad, #2980b9);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 15px; z-index: 2000; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    color: white; 
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

#header-app-name {
    font-family: 'Great Vibes', cursive !important;
    font-size: 28px !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    margin: 0; line-height: 60px; white-space: nowrap; 
    overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: center; padding: 0 10px; 
}

@media (max-width: 480px) {
    #header-app-name { font-size: 22px !important; letter-spacing: 0.5px; }
}

.header-icon-img {
    height: 85px !important; width: auto; margin-right: 15px;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)); 
    vertical-align: middle; margin-top: -22px; position: relative; z-index: 2500;
    transition: transform 0.2s ease;
}
.header-icon-img:hover { transform: scale(1.1); }

.sidebar-menu {
    position: fixed; top: 0; left: -280px; width: 280px; height: 100%;
    background: white; z-index: 10001; transition: left 0.3s ease;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column;
    border-top-right-radius: 20px !important; border-bottom-right-radius: 20px !important; overflow: hidden !important;
}
.sidebar-menu.aberto { left: 0; }

.overlay-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 10000; display: none;
}
.overlay-menu.visivel { display: block; }

.modern-header { background: linear-gradient(135deg, #d35400 0%, #ff8a00 100%) !important; padding: 30px 20px 20px !important; border-bottom-right-radius: 25px !important; box-shadow: 0 4px 10px rgba(211, 84, 0, 0.2) !important; z-index: 2 !important; }
.modern-avatar { width: 70px !important; height: 70px !important; background: #eee !important; border-radius: 50% !important; margin: 0 auto 10px auto !important; background-size: cover !important; border: 3px solid #fff !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; }
.modern-email { display: block !important; color: white !important; font-size: 16px !important; font-weight: 700 !important; }
.modern-scroll { padding: 15px 10px !important; background: #fdfdfd !important; flex: 1; overflow-y: auto;}
.menu-item { padding: 15px 20px; border-bottom: 1px solid #f0f2f5; color: #050505; cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: 12px !important; font-size: 14px !important; font-weight: 600 !important; transition: all 0.2s ease !important; }
.menu-item .material-icons-round { font-size: 22px !important; margin-right: 12px !important; color: #888 !important; }
.menu-item:hover, .menu-item:active { background-color: #fff0e6 !important; color: #d35400 !important; transform: translateX(5px) !important; }
.menu-item:hover .material-icons-round { color: #d35400 !important; }

/* =========================================
   3. RODAPÉ (BOTÕES REDONDOS NEON) 🚀
   ========================================= */
.bottom-nav, #menu-rodape {
    position: fixed !important;
    bottom: 15px !important;
    left: 0 !important;
    width: 100% !important;
    height: 60px !important; 
    background: transparent !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    transition: transform 0.3s ease-in-out, opacity 0.3s !important;
}

.nav-item {
    pointer-events: auto !important;
    background: #ffffff !important;
    border: 2px solid #ff0066 !important;
    color: #65676b;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 0, 102, 0.4) !important;
    transition: all 0.2s ease;
}

.nav-item.active {
    background: #ff0066 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

.nav-item.create-btn {
    background: linear-gradient(135deg, #ff0066, #ff5e00) !important;
    width: 60px !important;
    height: 60px !important;
    color: white !important;
    border: 3px solid white !important;
    box-shadow: 0 0 20px rgba(255, 0, 102, 0.6) !important;
}

.menu-hidden {
    transform: translateY(120px) !important;
    opacity: 0 !important;
}

/* =========================================
   4. STORIES (FIX DEFINITIVO DE IMAGEM E TRAVAS) 📸
   ========================================= */
#barra-online {
    display: flex !important;
    gap: 12px !important;
    padding: 10px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-height: 110px !important;
    scrollbar-width: none !important;
}
#barra-online::-webkit-scrollbar { display: none; }

.story-item, .story-create-card, #barra-online > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 75px !important;
    max-width: 75px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

.story-circle, .story-create-img {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    border-radius: 50% !important;
    border: 3px solid #ff0066 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #333 !important;
    display: block !important;
    padding: 2px !important;
    background-clip: content-box !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Botão Ao Vivo (Trava para não ser esmagado) */
#btn-live-start {
    min-width: 65px !important; 
    max-width: 65px !important;
    min-height: 65px !important; 
    max-height: 65px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Nome do usuário abaixo do Story */
#barra-online span, .story-name-fb {
    display: block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--cor-texto) !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* =========================================
   5. TELA DE VÍDEOS
   ========================================= */
#videos-screen.active {
    display: block !important; background: #000 !important; padding: 0 !important; overflow: hidden !important; z-index: 50 !important; position: fixed !important; top: 60px !important; left: 0 !important; width: 100% !important; height: calc(100vh - 110px) !important;
}
.reels-container { width: 100%; height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; }
.reels-container::-webkit-scrollbar { display: none; }
.reels-item { width: 100%; height: 100%; scroll-snap-align: start; position: relative; background: #000; }
.reels-video { width: 100%; height: 100%; object-fit: cover; }
.reels-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); pointer-events: none; z-index: 10; }

/* =========================================
   6. PC (DESKTOP) AJUSTES GERAIS
   ========================================= */
@media (min-width: 992px) {
    body { padding-top: 0 !important; }
    .main-header { width: calc(100% - 280px) !important; left: 280px !important; top: 0 !important; }
    #top-promo-banner { position: absolute !important; top: 60px !important; left: 280px !important; width: calc(100% - 280px) !important; z-index: 1400 !important; box-sizing: border-box !important; }
    
    /* 1. SIDEBAR CORRIGIDA E ALINHADA ATE O CHÃO */
    .sidebar-menu { left: 0 !important; top: 0 !important; width: 280px !important; height: 100vh !important; max-height: 100vh !important; display: flex !important; flex-direction: column !important; border-radius: 0 !important; border-right: 1px solid var(--cor-borda) !important; box-shadow: none !important; z-index: 1500 !important; background: var(--cor-card) !important; }
    
    /* 2. CABEÇALHO DA SIDEBAR: Fica reto e alinha a foto ao lado do nome */
    .sidebar-menu .modern-header { padding: 25px 20px !important; border-radius: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 15px !important; text-align: left !important; box-shadow: none !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; }
    .sidebar-menu .modern-avatar { width: 50px !important; height: 50px !important; margin: 0 !important; flex-shrink: 0 !important; border-width: 2px !important; }
    .sidebar-menu .modern-email { font-size: 15px !important; margin: 0 !important; word-break: break-word !important; }
    
    /* 3. ESPAÇAMENTO DOS ITENS DO MENU */
    .sidebar-menu .menu-scroll-area { padding: 15px 10px 90px 10px !important; background: transparent !important; }
    .sidebar-menu .menu-item { padding: 12px 15px !important; margin-bottom: 4px !important; font-size: 13px !important; border-radius: 8px !important; }
    .sidebar-menu .menu-item .material-icons-round { font-size: 20px !important; margin-right: 12px !important; }
    
    main.container, .container { margin-left: 280px !important; width: calc(100% - 280px) !important; max-width: 100% !important; padding-top: 110px !important; padding-bottom: 100px !important; }
    .screen { max-width: 900px !important; margin-left: auto !important; margin-right: auto !important; }
    .novo-flog-card, .fb-create-post, .fb-create-post-card { max-width: 100% !important; border-radius: 8px !important; border: 1px solid #ced0d4; margin-left: auto !important; margin-right: auto !important; max-width: 680px !important; }
    .bottom-nav, #menu-rodape { display: flex !important; justify-content: center !important; gap: 60px !important; padding-left: 280px !important; height: 70px !important; }
    .main-header button[onclick="window.toggleMenu()"] { display: none !important; }
    .overlay-menu { display: none !important; }
   /* Centraliza a tela de vídeos e limita o conteúdo no meio do PC */
    #videos-screen.active { 
        left: 280px !important; 
        width: calc(100% - 280px) !important; 
        display: block !important; /* Voltamos para block para permitir o scroll natural */
        height: calc(100vh - 60px) !important; 
        top: 60px !important; 
        background: var(--cor-fundo) !important;
        overflow-y: auto !important;
    }

    /* Trava o feed de vídeos no centro do monitor */
    #feed-somente-videos {
        max-width: 500px !important; /* Tamanho de tela de celular no PC */
        margin: 0 auto !important; /* O segredo para centralizar */
        padding: 20px 10px !important;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Garante que o vídeo não exploda a altura */
    #feed-somente-videos video {
        max-height: 80vh !important;
        width: 100% !important;
        object-fit: contain !important;
        border-radius: 12px;
        background: #000;
    }
}


/* =========================================
   7. FEED E POSTS
   ========================================= */
.fb-create-post { background: white; padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--sombra-card); margin-bottom: 15px; display: flex; flex-direction: column; gap: 10px; }
.fb-input-row { display: flex; gap: 10px; align-items: center; }
.fb-input-fake { background: #f0f2f5; border-radius: 20px; padding: 10px 15px; flex: 1; color: #65676b; font-size: 15px; border: none; outline: none; }
.fb-actions-row { display: flex; justify-content: space-between; border-top: 1px solid #e4e6eb; padding-top: 8px; }

.fb-action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 10px !important; border-radius: 5px !important; color: #65676b; font-weight: 600; font-size: 13px !important; background: transparent; border: none; transition: background 0.2s; cursor: pointer; }
.fb-action-btn:hover { background: #f2f2f2 !important; }
.fb-action-btn .material-icons-round { font-size: 20px !important; }

.feed-avatar-small { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center; background-color: #ccc; margin-right: 10px; border: 1px solid #eee; cursor: pointer; }

.novo-flog-card { background-color: var(--cor-card); margin-bottom: 16px !important; border-radius: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border: none; padding-bottom: 10px; }
.novo-flog-header { padding: 12px 16px; display: flex; align-items: center; justify-content: flex-start; }
.novo-flog-meta { display: flex; flex-direction: column; justify-content: center; margin-bottom: 0 !important; }
.novo-flog-name { font-weight: 600; font-size: 15px; color: var(--cor-texto); line-height: 1.2; }
.novo-flog-date { font-size: 13px; color: #65676b; margin-top: 2px; }
.novo-flog-media-wrapper { width: 100%; display: flex; align-items: center; justify-content: center; background: #000; max-height: 600px; aspect-ratio: auto !important; }
.novo-flog-img, .novo-flog-video { width: 100%; object-fit: contain !important; max-height: 600px; }
.novo-flog-caption { padding: 8px 16px 12px 16px; font-size: 15px; line-height: 1.5; color: var(--cor-texto); }
.novo-flog-actions-bar { display: flex; justify-content: space-between; padding: 4px 16px; margin: 0 16px; border-top: 1px solid #ced0d4; border-bottom: 1px solid transparent; }
.novo-flog-action-btn { flex: 1; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 0; color: #65676b; font-weight: 600; font-size: 14px; border-radius: 4px; transition: background 0.2s; background: none; border: none; cursor: pointer; }
.novo-flog-action-btn.liked { color: #e74c3c; font-weight: bold; }
.novo-flog-mimo-btn { background: linear-gradient(45deg, #ffd700, #f39c12); color: white; border: none; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: bold; box-shadow: 0 2px 5px rgba(243, 156, 18, 0.3); cursor: pointer; }
.novo-flog-input-area { padding: 10px 16px 15px 16px; background: transparent !important; display: flex; gap: 10px; align-items: center; }
.novo-flog-input { flex: 1; border-radius: 20px !important; background: #f0f2f5 !important; padding: 10px 15px !important; color: #050505; border: none; font-size: 13px; outline: none; }

.novo-flog-card .mimos-grid-container > div:nth-child(n+2),
.novo-flog-card .mimo-card-shiny:nth-child(n+2),
.novo-flog-card div[style*="display: flex"][style*="gap: 5px"] > div:nth-child(n+2) { display: none !important; }

/* =========================================
   8. PERFIL DO USUÁRIO
   ========================================= */
.profile-header-container { text-align: center; background: var(--cor-card); padding-bottom: 15px; }
.profile-cover { width: 100%; height: 200px; background-color: #777; background-size: cover; background-position: center; border-radius: 0 0 12px 12px; position: relative; }
.profile-avatar { width: 140px; height: 140px; border-radius: 50%; border: 4px solid white; background-color: #ddd; display: inline-block; position: relative; margin-top: -70px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.profile-info-section { padding: 10px 15px; text-align: center; }
.profile-name-main { font-size: 22px; font-weight: 800; margin: 5px 0; color: var(--cor-texto); }
.profile-actions-row { display: flex; gap: 10px; padding: 0 15px; margin: 15px 0; justify-content: center; flex-wrap: wrap; }
.btn-profile-primary { background: #1877f2; color: white; border: none; border-radius: 8px; padding: 0 20px; height: 40px; font-weight: bold; flex: 1; max-width: 200px; }
.btn-profile-secondary { background: #e4e6eb; color: #050505; border: none; border-radius: 8px; padding: 0 20px; height: 40px; font-weight: bold; flex: 1; max-width: 200px; }
.pro-tabs { display: flex; flex-wrap: wrap; width: 100%; background: white; border-top: 1px solid #eee; border-bottom: 1px solid #ddd; margin-top: 10px; }
.pro-tab { flex: 1; min-width: 25%; text-align: center; padding: 14px 5px; font-size: 13px; font-weight: 600; color: #65676b; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.3s; }
.pro-tab.active { color: var(--cor-principal); border-bottom: 3px solid var(--cor-principal); }
.tab-content { display: none; background: var(--cor-fundo); padding: 15px 0; }
.tab-content.active { display: block; }

/* =========================================
   9. SELOS E BADGES
   ========================================= */
.selo-verificado { display: inline-flex !important; align-items: center; justify-content: center; width: 15px; height: 15px; background: linear-gradient(135deg, #00a2ff, #0066ff) !important; color: white !important; border-radius: 50%; margin-left: 5px; font-size: 9px !important; vertical-align: middle; border: 1px solid rgba(255,255,255,0.3); flex-shrink: 0; }
.selo-verificado::after { content: '✓'; font-weight: bold; }
.selo-novo { display: inline-flex !important; align-items: center; justify-content: center; background: linear-gradient(135deg, #2ecc71, #27ae60) !important; color: white !important; border-radius: 10px; padding: 2px 6px; margin-left: 5px; font-size: 9px !important; font-weight: 900; vertical-align: middle; box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3); border: 1px solid rgba(255,255,255,0.5); letter-spacing: 0.5px; }
.badge-role { display: inline-flex !important; align-items: center; justify-content: center; padding: 2px 6px; border-radius: 8px; color: white !important; font-size: 9px !important; font-weight: bold; margin-left: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.badge-fundador { background: linear-gradient(135deg, #d4af37, #b8860b); }
.badge-admin { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.badge-mod { background: linear-gradient(135deg, #2ecc71, #27ae60); }

.avatar-vip-border { position: relative; border: 3px solid #ffd700 !important; box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important; transition: all 0.3s ease; border-radius: 50% !important; padding: 3px !important; background-clip: content-box; }
.avatar-vip-border::before { content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border: 2px solid #ffd700; border-radius: 50%; opacity: 0; animation: pulseDourado 2s infinite; pointer-events: none; }
@keyframes pulseDourado { 0% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); } 100% { transform: scale(1.15); opacity: 0; box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); } }
.badge-vip-gold { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #FFD700 0%, #F39C12 100%); padding: 2px 6px; border-radius: 10px; box-shadow: 0 2px 5px rgba(243, 156, 18, 0.4); border: 1px solid #FFF; line-height: 1; }
.badge-vip-gold:hover { transform: scale(1.1); transition: 0.2s ease; }
.vip-ribbon { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #FFD700, #F39C12); color: #fff; font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: 10px; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.3); z-index: 10; }

/* =========================================
   FIX GERAL: RESPEITO AO MENU E SIDEBAR
   ========================================= */

/* Força todas as telas a começarem ABAIXO do cabeçalho roxo */
.screen {
    padding: 80px 8px 0 8px !important; /* Reduzi as laterais de 15px/30px para 8px no geral */
    min-height: 100vh;
    box-sizing: border-box;
}

/* No PC, todas as telas respeitam a barra lateral laranja */
@media (min-width: 992px) {
    .screen {
        margin-left: 280px !important;
        width: calc(100% - 280px) !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

/* ESTILO DOS CARDS DA LOJA */
.store-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 20px auto;
}

.coin-package-card {
    background: #fff; border-radius: 15px; padding: 25px;
    text-align: center; border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; align-items: center;
    position: relative;
}

/* ESTILO DOS INPUTS NO ADMIN (IMPEDE O ESTICAMENTO) */
#admin-screen input {
    width: 100% !important;
    max-width: 400px !important; /* Trava o tamanho para não virar uma tripa */
    padding: 10px !important;
    margin: 5px 0 15px 0 !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    display: block !important;
}

#admin-screen h4 { margin-bottom: 20px; color: #333; }
#admin-screen label { font-size: 12px; font-weight: bold; color: #666; display: block; }
.coin-amount-text { font-size: 24px; font-weight: 900; color: #2f3542; margin: 10px 0 2px 0; }
.coin-bonus-text { font-size: 11px; color: #2ecc71; font-weight: bold; margin-bottom: 15px; min-height: 15px; }
.btn-buy-package { background: #f1f2f6; color: #2f3542; border: none; padding: 10px 0; border-radius: 20px; font-weight: bold; font-size: 15px; width: 90%; cursor: pointer; }
.coin-package-card.popular .btn-buy-package { background: #ff4757; color: white; }
.coin-package-card.best-value .btn-buy-package { background: linear-gradient(45deg, #f1c40f, #e67e22); color: white; }

/* =========================================
   11. MODAIS GENÉRICOS E CHAT TELA INTEIRA
   ========================================= */
.modal-padrao { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); align-items: center; justify-content: center; }
.modal-card { background: white; width: 90%; max-width: 400px; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }

#chat-conversa-screen { 
    z-index: 50 !important; 
    position: relative; 
    background-color: #efe7dd !important; 
    background-image: none !important; 
    min-height: 100vh; 
    padding-top: 0 !important; 
}
#chat-box { overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.msg-bubble { width: fit-content; max-width: 80%; padding: 8px 12px; margin-bottom: 8px; border-radius: 8px; font-size: 14px; line-height: 1.4; display: flex; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,0.1); clear: both; position: relative; }
.msg-me { background: #d9fdd3; color: #111; margin-left: auto; border-bottom-right-radius: 0; }
.msg-other { background: white; color: #111; margin-right: auto; border-bottom-left-radius: 0; }

/* =========================================
   12. BARRA DE CHAT (REVISADA E ÚNICA) 🚀
   ========================================= */
/* =========================================
   CLONE DO RODAPÉ DO WHATSAPP (CORRIGIDO)
   ========================================= */
#chat-footer-bar {
    display: flex !important;
    align-items: center !important;
    background-color: #f0f2f5 !important; /* Fundo cinza do Zap */
    padding: 8px 10px !important;
    gap: 8px !important;
    
    /* AS 4 LINHAS MÁGICAS QUE COLAM A BARRA NO CHÃO */
    position: fixed !important;
    bottom: 0 !important; 
    left: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
}

/* Regra para o Computador: desvia do menu lateral preto */
@media (min-width: 992px) {
    #chat-footer-bar {
        left: 280px !important; 
        width: calc(100% - 280px) !important; 
    }
}

.chat-input-field, #msg-input {
    flex: 1 !important;
    height: 40px !important;
    background: white !important;
    border-radius: 20px !important;
    border: 1px solid #ccc !important;
    padding: 0 15px !important;
    margin: 0 10px !important;
    color: #000 !important;
}

/* =========================================
   13. MODO ESCURO (BOTÕES E BARRA) 🌙
   ========================================= */
body.dark-mode {
    --cor-fundo: #18191a !important; 
    --cor-card: #242526 !important;  
    --cor-texto: #ffffff !important; 
    --cor-borda: #3e4042 !important; 
    background-color: var(--cor-fundo) !important;
}

/* BOTÕES PRETOS COM BORDA ROSA */
body.dark-mode .nav-item {
    background: #18191a !important;
    border: 2px solid #ff0066 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 0, 102, 0.3) !important;
}

body.dark-mode .nav-item.active {
    background: #ff0066 !important;
    border-color: #ffffff !important;
}

/* BARRA DE CHAT NO MODO ESCURO */
body.dark-mode #chat-footer-bar { 
    background-color: #242526 !important; 
    border-color: #3e4042 !important; 
}

body.dark-mode .chat-input-field, 
body.dark-mode #msg-input { 
    background-color: #3a3b3c !important; 
    color: #ffffff !important; 
}

body.dark-mode #chat-footer-bar button { color: #e4e6eb !important; }

/* STORIES E LOJA NO MODO ESCURO */
body.dark-mode #barra-online span { color: #fff !important; }
body.dark-mode .coin-package-card { background-color: #242526 !important; border: 1px solid #3e4042 !important; }
body.dark-mode .coin-amount-text { color: #fff !important; }

/* =========================================
   TRAVA DO FEED E CRIADOR DE POST 🚀
   ========================================= */
/* 1. Impede a barra de stories de ficar gigante e empurrar o resto */
#barra-online {
    min-height: 90px !important; 
    align-items: center !important;
    padding: 5px 0 !important;
}

/* 2. Força o card de "Criar Post" a ficar visível, 100% largo e protegido */
.fb-create-post-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    clear: both !important; /* Impede que flutue para trás de outros itens */
}

/* 3. Garante que a barra cinza onde fica o texto "Compartilhe algo..." não seja esmagada */
.fb-create-post-card > div:nth-child(2) {
    flex: 1 !important;
    background: #f0f2f5 !important;
    border-radius: 20px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 15px !important;
    min-width: 0 !important; /* Trava de segurança no flexbox para não vazar a tela */
}

/* 4. Ajuste no topo do feed para não esconder atrás do cabeçalho */
#feed-screen > div:first-child {
    padding-top: 15px !important;
}

/* =========================================
   PLAYER DE STORIES (TELA CHEIA)
   ========================================= */
#story-player-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #111;
    z-index: 999999;
    display: none;
    flex-direction: column;
}

.story-player-header {
    position: absolute;
    top: 0; left: 0; width: 100%;
    padding: 15px 10px 10px 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    z-index: 10;
}

.story-progress-container {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.story-progress-bar {
    flex: 1;
    height: 3px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 3px;
    overflow: hidden;
}

.story-progress-fill {
    height: 100%;
    background-color: #fff;
    width: 0%;
}

.story-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

#story-player-avatar {
    width: 35px; height: 35px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ff0066;
}

#story-player-nick {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.story-close-btn {
    position: absolute;
    top: 25px; right: 15px;
    background: none; border: none;
    color: white; font-size: 30px;
    cursor: pointer;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.story-media-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#story-img, #story-vid {
    max-width: 100%;
    max-height: 100vh;
    object-fit: contain;
}

/* Áreas invisíveis para clicar e passar o story */
.story-click-left {
    position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: 5; cursor: pointer;
}
.story-click-right {
    position: absolute; top: 0; right: 0; width: 70%; height: 100%; z-index: 5; cursor: pointer;
}

/* =========================================
   CORREÇÃO DEFINITIVA DO MENU LATERAL (MOBILE E PC)
   ========================================= */

/* Celular: Escondido por padrão na lateral esquerda */
.sidebar-menu {
    left: -285px !important;
    transition: left 0.3s ease-in-out !important;
    z-index: 10001 !important;
}

/* Celular: Quando clica no botão, ele desliza pra tela */
.sidebar-menu.aberto {
    left: 0 !important;
}

/* PC (Desktop): Sempre visível e fixo na esquerda */
@media (min-width: 992px) {
    .sidebar-menu {
        left: 0 !important;
        height: 100vh !important;
        position: fixed !important;
        display: flex !important;
    }
    .sidebar-menu .modern-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 20px 15px !important;
    }
    .sidebar-menu .modern-avatar {
        width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
    }
    main.container, .container {
        margin-left: 280px !important;
    }
}

/* =========================================
   TARJA DE PROMOÇÃO VIP (PC E MOBILE)
   ========================================= */
#top-promo-banner {
    background: linear-gradient(90deg, #111111 0%, #2c2c2c 100%) !important;
    color: #f1c40f !important;
    border-bottom: 2px solid #f1c40f !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
    padding: 10px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#top-promo-banner .promo-text {
    font-size: 15px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    text-shadow: 1px 1px 3px #000000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#top-promo-banner .promo-btn {
    background: linear-gradient(45deg, #FFD700, #F39C12) !important;
    color: #111 !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(241, 196, 15, 0.4) !important;
    text-transform: uppercase !important;
    transition: transform 0.2s !important;
    margin-right: 10px !important;
}

#top-promo-banner .promo-btn:hover {
    transform: scale(1.05) !important;
}

#top-promo-banner .promo-close {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

#top-promo-banner .promo-close:hover {
    background: rgba(255, 0, 0, 0.6) !important;
}

/* =========================================
   TRAVA DE TELAS (MATA O BUG DOS VÍDEOS EMBOLANDO)
   ========================================= */
.screen[style*="display: none"], 
.screen[style*="display:none"] {
    display: none !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

#videos-screen {
    background-color: var(--cor-fundo) !important;
}

/* =========================================
   PERFIL: ESTILO BASE E BOTÕES
   ========================================= */
.profile-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; margin-bottom: 10px; width: 100%; justify-content: flex-start; }
.btn-profile-primary { background: linear-gradient(45deg, #1877f2, #00c6ff) !important; color: white !important; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 13px; flex: 1; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.btn-profile-secondary { background: #e4e6eb !important; color: #1c1e21 !important; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; font-size: 13px; flex: 1; max-width: 200px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.pro-tabs { display: flex; gap: 10px; overflow-x: auto; border-bottom: 1px solid #ddd; margin-top: 20px; padding-bottom: 10px; scrollbar-width: none; }
.pro-tab { white-space: nowrap; padding: 8px 16px; font-size: 14px; font-weight: bold; color: #65676b; cursor: pointer; border-radius: 20px; background: transparent; transition: all 0.2s; }
.pro-tab.active { color: #1877f2; border-bottom: 3px solid #1877f2; border-radius: 0; background: transparent; }

/* =========================================
   PERFIL: EXCLUSIVO PARA COMPUTADOR (PC)
   ========================================= */
@media (min-width: 992px) {
    /* Centraliza o perfil igual ao feed */
    #perfil-screen, #ver-perfil-screen {
        max-width: 800px !important; margin: 0 auto !important; background: #ffffff;
        box-shadow: 0 0 15px rgba(0,0,0,0.05); border-left: 1px solid #ddd; border-right: 1px solid #ddd; min-height: 100vh;
    }
    
    /* Capa grande e Foto na Esquerda */
    .profile-cover { width: 100%; height: 250px !important; background-color: #333; background-size: cover; background-position: center; position: relative; border-radius: 0 !important; }
    
    /* Foto de perfil alinhada na esquerda */
    #perfil-screen > div:nth-child(2), #ver-perfil-screen > div:nth-child(2) { position: relative; padding-top: 70px !important; }
    
    .profile-avatar { width: 150px !important; height: 150px !important; border-radius: 50%; border: 5px solid #fff; background-color: #ddd; background-size: cover; background-position: center; position: absolute; top: -75px !important; left: 30px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin: 0 !important; }
    
    /* Alinhamento dos textos na esquerda */
    #ver-nickname-container, #display-nickname-container, #ver-identidade, #display-identidade { text-align: left !important; margin-left: 190px !important; }
    #ver-nickname-container span, #display-nickname-container span { font-size: 24px; font-weight: 900; }
    
    /* Alinhamento dos contadores (Seguidores, Seguindo, etc) */
    #ver-perfil-screen > div > div[style*="display:flex; gap:15px;"], #perfil-screen > div > div[style*="display:flex; gap:15px;"] { justify-content: flex-start !important; margin-left: 190px !important; margin-top: 10px !important; }
    
    /* Botões (Adicionar, Chat) */
    .profile-actions-row { margin-left: 190px !important; width: calc(100% - 190px) !important; }
}

/* =========================================
   ESTILO SEXLOG PARA PC (DESKTOP)
   ========================================= */
@media (min-width: 992px) {
    /* 1. Deixa o card do perfil largo e alinhado */
    #perfil-screen, #ver-perfil-screen {
        max-width: 850px !important; /* Tela mais larga pra caber tudo */
        margin: 20px auto !important; 
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        padding-bottom: 20px !important;
    }

    /* 2. Capa cobrindo tudo no topo */
    .profile-cover {
        height: 250px !important;
        border-radius: 8px 8px 0 0 !important;
    }

    /* 3. Avatar grande na esquerda encavalado na capa */
    #perfil-screen > div:nth-child(2), #ver-perfil-screen > div:nth-child(2) {
        position: relative;
    }
    
    .profile-avatar {
        position: absolute !important;
        top: -90px !important; /* Puxa metade pra cima da capa */
        left: 30px !important;
        width: 160px !important;
        height: 160px !important;
        border: 4px solid #fff !important;
        margin: 0 !important;
    }

    /* 4. Empurra os Textos (Nome, Local, Status) pra direita do Avatar */
    #display-nickname-container, #ver-nickname-container,
    #display-identidade, #ver-identidade,
    #perfil-screen > div > div[style*="display:flex; gap:15px;"],
    #ver-perfil-screen > div > div[style*="display:flex; gap:15px;"] {
        text-align: left !important;
        justify-content: flex-start !important;
        margin-left: 210px !important; /* Espaço pro avatar + margem */
    }

    /* Ajuste fino no tamanho do nome */
    #display-nickname-container, #ver-nickname-container {
        padding-top: 10px !important;
        font-size: 26px !important;
    }

    /* 5. Alinha os Botões na direita do Avatar */
    .profile-actions-row {
        margin-left: 210px !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }

    .btn-profile-primary, .btn-profile-secondary {
        max-width: 150px !important; /* Botões mais compactos tipo Sexlog */
    }

    /* 6. Abas estilo Sexlog (alinhadas na esquerda, sem esticar) */
    .pro-tabs {
        justify-content: flex-start !important;
        padding-left: 30px !important;
        border-top: none !important; /* Remove linha de cima pra ficar clean */
    }
    
    .pro-tab {
        min-width: auto !important; /* Tira a largura fixa de 25% */
        padding: 15px 25px !important;
        font-size: 14px !important;
    }
}

/* =========================================
   PLANOS VIP PREMIUM
   ========================================= */
.vip-plans-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 15px 30px 15px;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .vip-plans-grid { flex-direction: row; align-items: center; justify-content: center; }
}

.vip-plan-modern {
    background: #fff;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    position: relative;
    transition: transform 0.2s;
    cursor: pointer;
    flex: 1;
}

.vip-plan-modern:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

.vip-plan-modern.destaque {
    border: 2px solid #f1c40f;
    background: linear-gradient(to bottom, #fffdf0, #ffffff);
    transform: scale(1.03);
    box-shadow: 0 8px 30px rgba(241, 196, 15, 0.2);
    z-index: 2;
}

.vip-plan-modern.destaque:hover { transform: scale(1.05); }

.vip-ribbon-popular {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, #f1c40f, #e67e22);
    color: white; font-size: 10px; font-weight: 900;
    padding: 4px 15px; border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.vip-plan-title { font-size: 14px; font-weight: 800; color: #888; letter-spacing: 1px; margin-bottom: 10px; }
.vip-plan-modern.destaque .vip-plan-title { color: #d35400; }

.vip-plan-price { font-size: 32px; font-weight: 900; color: #1c1e21; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.vip-coin-icon { font-size: 20px; }

.vip-plan-desc { font-size: 13px; color: #666; margin-bottom: 20px; }

.vip-plan-btn { width: 100%; background: #f0f2f5; color: #333; border: none; padding: 12px; border-radius: 25px; font-weight: bold; font-size: 13px; cursor: pointer; transition: background 0.2s; }
.vip-plan-btn.destaque-btn { background: linear-gradient(45deg, #f1c40f, #f39c12); color: white; box-shadow: 0 4px 10px rgba(241, 196, 15, 0.4); }

/* --- AJUSTES DE TAMANHO DO RODAPÉ --- */

/* 1. Diminui a altura total da barra do rodapé */
#menu-rodape {
    height: 45px !important; 
    padding-bottom: 2px !important;
}

/* 2. Diminui o tamanho dos ícones normais (Home, Radar, Chat, Perfil) */
#menu-rodape .nav-item .material-icons-round {
    font-size: 20px !important; /* O padrão costuma ser 24px */
}

/* 3. Diminui o tamanho do botão central em destaque (Criar Post) */
#menu-rodape .nav-item.create-btn {
    width: 35px !important; 
    height: 35px !important;
    margin-top: -15px !important; /* Puxa ele um pouco mais para cima para manter o efeito flutuante */
}

/* 4. Diminui o ícone de "+" dentro do botão central */
#menu-rodape .nav-item.create-btn .material-icons-round {
    font-size: 20px !important; 
}

/* --- AJUSTE BOTÕES PERFIL VISITANTE --- */
.visitor-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 10px 15px !important;
    justify-content: center !important;
}

/* Força ADD e Mensagem lado a lado (50% cada) */
.visitor-controls .btn-profile-primary, 
.visitor-controls .btn-profile-secondary {
    flex: 1 !important;
    min-width: 120px !important;
    height: 45px !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: none !important;
}

/* Botão DAR MATCH ocupando 100% na linha de baixo */
.btn-match-full {
    flex: 0 0 100% !important;
    background: linear-gradient(45deg, #ff4b2b, #ff416c) !important;
    color: white !important;
    height: 50px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    margin-top: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
}

/* --- AJUSTE DOS 3 BOTOES LADO A LADO --- */
.visitor-controls-final {
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;
}

.main-actions-row {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 8px;
}

.btn-mini-action {
    flex: 1 !important;
    height: 42px !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    display: flex !important;
    flex-direction: column !important; /* Ícone em cima, texto embaixo para caber */
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: white !important;
    text-transform: uppercase;
}

.btn-mini-action .material-icons-round { font-size: 18px !important; margin-bottom: 2px; }

/* Cores dos botões */
.btn-blue { background: #1877f2 !important; }
.btn-gray { background: #e4e6eb !important; color: #1c1e21 !important; }
.btn-red { background: linear-gradient(45deg, #ff4b2b, #ff416c) !important; }

/* Botão de recomendar */
.btn-recommend-flat {
    width: 100%;
    height: 35px;
    background: transparent !important;
    color: #65676b !important;
    border: 1px solid #ddd !important;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

/* --- FIX DEFINITIVO: BOTÕES PROPORCIONAIS --- */
.botoes-perfil-novo {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important; /* Joga pra baixo só se a tela for um celular minúsculo */
}

/* Trava todos os botões para crescerem igual, mas com limite de tamanho */
.botoes-perfil-novo button {
    flex: 1 1 20% !important; /* Permite que o botão diminua mais antes de quebrar */
    min-width: 60px !important; 
    max-width: 110px !important;
    font-size: 10px !important; /* Texto levemente menor para caber em telas como iPhone SE */
    height: 40px !important;
    padding: 0 5px !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    color: white !important;
    margin: 0 !important; /* Remove qualquer margem zoada do JS */
}

.botoes-perfil-novo .material-icons-round {
    font-size: 16px !important;
}

/* Cores organizadas */
.btn-azul { background: #1877f2 !important; }
.btn-cinza { background: #e4e6eb !important; color: #1c1e21 !important; }
.btn-vermelho { background: linear-gradient(45deg, #e74c3c, #c0392b) !important; }
.btn-rosa { background: #ff4d94 !important; }

/* Botão Validado (Discreto embaixo) */
.btn-recomendar-limpo {
    background: transparent !important;
    color: #888 !important;
    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    padding: 8px 20px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

/* =========================================
   12. BARRA DE CHAT (REVISADA E ÚNICA) 🚀
   ========================================= */
#chat-footer-bar, .chat-footer-container {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important; /* Gruda a barra no chão de verdade */
    left: 0 !important;
    width: 100% !important;
    height: 60px !important;
    z-index: 999999 !important; 
    background: #f0f2f5 !important;
    border-top: 1px solid #ddd !important;
    align-items: center !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* O balanço da tela de mensagens para matar o buraco (as "3 divisões") */
#chat-box {
    height: calc(100vh - 120px) !important; /* Encaixa perfeito entre o topo e o rodapé */
    padding-bottom: 20px !important;
}

/* Regra exclusiva para Computador (Empurra a barra pra não ficar sob o menu) */
@media (min-width: 992px) {
    #chat-footer-bar, .chat-footer-container {
        left: 280px !important; /* Desvia exatamente da largura do menu */
        width: calc(100% - 280px) !important; /* Corta o excesso na direita */
        bottom: 0 !important;
    }
}

/* =========================================
   CLONE DO RODAPÉ DO WHATSAPP
   ========================================= */
#chat-footer-bar {
    display: flex !important;
    align-items: center !important;
    background-color: #f0f2f5 !important; /* Cor de fundo cinza clara */
    padding: 8px 10px !important;
    gap: 8px !important;
}

/* A pílula branca gigante que engole os botões e o texto */
.chat-input-wrapper {
    display: flex !important;
    flex: 1 !important;
    background-color: #ffffff !important;
    border-radius: 24px !important;
    align-items: center !important;
    padding: 5px 8px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
}

/* Os ícones que ficam dentro da pílula (Emoji, Clipe, Câmera) */
.chat-icon-btn {
    background: transparent !important;
    border: none !important;
    color: #54656f !important; /* Cinza escuro do zap */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    cursor: pointer !important;
}
.chat-icon-btn .material-icons-round {
    font-size: 22px !important;
}

/* O campo de texto limpo dentro da pílula */
.chat-input-field, #msg-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 15px !important;
    padding: 5px 10px !important;
    color: #111 !important;
    height: auto !important;
    margin: 0 !important;
}

/* O Botão Verde Redondo de Mic/Enviar na extrema direita */
.chat-mic-btn, .chat-send-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: #00a884 !important; /* Verde ciano do Zap */
    color: white !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}
.chat-mic-btn .material-icons-round, 
.chat-send-btn .material-icons-round {
    font-size: 22px !important;
}

/* Faz o selo de anúncio pulsar levemente */
div[style*="background:#f1c40f"] {
    animation: pulseAnuncio 2s infinite;
}

@keyframes pulseAnuncio {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

/* ========================================================
   LOGIN DEFINITIVO: FUNDO TOTAL E COMPONENTES MODERNOS 🚀
   ======================================================== */
#login-screen.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important; 
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #1a1a1a !important; /* COR SÓLIDA PARA ESCONDER A MEIA TELA */
    background-image: none !important;
    overflow: hidden !important;
}

/* Centralização da moldura estilo celular */
#login-screen.active .login-card-modern {
    background: #262626 !important;
    padding: 40px 30px !important;
    border-radius: 25px !important;
    border: 1px solid #333 !important;
    width: 90% !important;
    max-width: 350px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6) !important;
    text-align: center;
}

/* Ajuste dos Campos de Texto */
#login-screen.active input[type="email"],
#login-screen.active input[type="password"],
#login-screen.active .input-glow-rosa {
    width: 100% !important;
    background: #333 !important;
    border: 1px solid #444 !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    color: white !important;
    margin-bottom: 15px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* Botão ENTRAR (Dourado Premium) - CORRIGIDO */
#btn-login, #login-screen.active .btn-neon-rosa {
    width: 100% !important;
    background: linear-gradient(45deg, #f1c40f, #d35400) !important;
    color: #000 !important;
    font-weight: 900 !important;
    border-radius: 12px !important; /* Deixei menos arredondado pra ficar mais firme */
    padding: 14px !important;
    font-size: 15px !important;
    border: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3) !important;
    margin-top: 15px !important;
    display: block !important;
}

/* Botão Solicitar Acesso (Ajuste de visibilidade) - CORRIGIDO */
#login-screen.active button[onclick*="mostrarFormularioSolicitacao"] {
    background: transparent !important;
    color: #f1c40f !important;
    border: 1px solid #f1c40f !important;
    padding: 12px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    width: 100% !important;
    margin-top: 15px !important;
    cursor: pointer;
    font-weight: bold;
    display: block !important;
}

/* Esconde o menu e lixo que fica atrás no PC */
@media (min-width: 992px) {
    .main-header, .sidebar-menu, .bottom-nav, #top-promo-banner, .container {
        display: none !important;
    }
}

/* =========================================
   SELO VIP BONITÃO PARA O NOME 👑
   ========================================= */
.selo-vip-nome {
    background: linear-gradient(45deg, #FFD700, #F39C12);
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.5px;
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0.5);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.selo-vip-nome::before {
    content: '👑';
    margin-right: 3px;
    font-size: 11px;
}

<style>
    /* 1. LIMPEZA TOTAL E OBRIGATÓRIA DO PERFIL (FOTO GRANDE) */
    #display-avatar, 
    #ver-avatar-container, 
    .profile-avatar {
        border: 4px solid #fff !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
        position: relative !important;
        overflow: visible !important; /* MÁGICA: Permite que o selo VIP saia da borda da foto no celular sem quebrar */
    }

    /* FIX DO SELO VIP NO PERFIL (AMARELO E CENTRALIZADO) */
    .vip-ribbon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        content: 'VIP' !important;
        position: absolute !important;
        bottom: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: #FFD700 !important; /* Amarelo limpo e sólido */
        color: #000 !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        padding: 3px 12px !important;
        border-radius: 12px !important;
        border: 2px solid #fff !important;
        z-index: 100 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    /* 2. SELO VIP APENAS PARA MINIATURAS (FEED, STORIES, RADAR) - INTACTO */
    .feed-avatar-small.anel-vip, 
    .story-circle.anel-vip, 
    .radar-avatar.anel-vip {
        border: 2px solid #FFD700 !important;
        position: relative !important;
        overflow: visible !important;
    }

    .feed-avatar-small.anel-vip::after, 
    .story-circle.anel-vip::after, 
    .radar-avatar.anel-vip::after {
        content: '👑' !important; 
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        background: #FFD700 !important;
        width: 18px !important;
        height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        font-size: 10px !important;
        border: 1px solid #fff !important;
        z-index: 100 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
    }
</style>
/* =========================================
   BOTÃO DE PUBLICAR CONFISSÃO CORRIGIDO
   ========================================= */
#btn-publicar-confissao {
    width: 100% !important;
    background: linear-gradient(45deg, #d35400, #e67e22) !important;
    color: white !important;
    border: none !important;
    padding: 15px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(211, 84, 0, 0.3) !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-top: 20px !important;
}

/* ========================================================
   FIX ESTÉTICA: CAMPOS DE LOGIN, SENHA E BOTÕES PRINCIPAIS
   ======================================================== */

/* Campos de E-mail e Senha */
#email, #senha {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 20px !important;
    border-radius: 25px !important; /* Arredondado e elegante */
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid transparent !important;
    color: #333 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    text-align: center !important; /* Centraliza o texto no celular */
}

#email:focus, #senha:focus {
    border: 2px solid #ff0066 !important;
    background: #ffffff !important;
}

/* Botão ENTRAR (Login) */
#btn-login {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 30px !important; /* Formato pílula */
    background: linear-gradient(45deg, #ff0066, #ff5e00) !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(255, 0, 102, 0.4) !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    margin-top: 10px !important;
    letter-spacing: 1px !important;
}

/* Botão SOLICITAR ACESSO */
#login-screen button[onclick*="mostrarFormularioSolicitacao"] {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 14px !important;
    font-size: 14px !important;
    border-radius: 30px !important;
    margin-top: 15px !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
}

/* Botão PUBLICAR CONFISSÃO */
#btn-publicar-confissao {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 30px !important; /* Formato pílula igual o login */
    background: linear-gradient(45deg, #d35400, #e67e22) !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(211, 84, 0, 0.4) !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    margin-top: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 1px !important;
}

/* Ajuste na área do formulário de confissão para alinhar tudo perfeito */
#confessar-screen textarea {
    border-radius: 15px !important;
    border: 1px solid #ccc !important;
    padding: 15px !important;
    font-size: 15px !important;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* =========================================
   BARRA DE MATCHES (TOPO DO CHAT) 🔥
   ========================================= */
.matches-container {
    display: flex;
    gap: 15px;
    padding: 15px 15px 10px 15px;
    overflow-x: auto;
    scrollbar-width: none; /* Esconde a barra no Firefox */
    background: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
}
/* Esconde a barra no Chrome/Safari */
.matches-container::-webkit-scrollbar { display: none; }

.match-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;
    max-width: 65px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.match-item:hover { transform: scale(1.05); }

/* O círculo colorido em volta da foto (estilo Tinder) */
.match-avatar-wrapper {
    position: relative;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff4b2b, #ff416c); /* Gradiente de fogo */
    margin-bottom: 6px;
    box-shadow: 0 4px 10px rgba(255, 65, 108, 0.3);
}

.match-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--cor-card); /* Bordinha para separar a foto do gradiente */
    background-size: cover;
    background-position: center;
    background-color: #ddd;
}

.match-name {
    font-size: 11px;
    font-weight: 800;
    color: var(--cor-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

/* Título da seção "Novos Matches" */
.matches-title-row {
    padding: 15px 15px 0 15px;
    background: var(--cor-fundo);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.matches-title-row h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--cor-texto);
    display: flex;
    align-items: center;
    gap: 6px;
}
.matches-badge {
    background: linear-gradient(45deg, #ff0066, #ff5e00);
    color: white;
    font-size: 10px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 12px;
}

/* COBERTURA DA TRAVA VIP PARA VÍDEOS */
.video-vip-lock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: none; /* Escondido por padrão */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
}
.video-vip-lock span { color: #f1c40f; font-size: 30px; margin-bottom: 5px; }
.video-vip-lock p { color: white; font-size: 11px; font-weight: bold; margin-bottom: 10px; }
.btn-lock-vip { 
    background: linear-gradient(45deg, #f1c40f, #f39c12); 
    color: #111; border: none; padding: 8px 15px; 
    border-radius: 20px; font-weight: 900; font-size: 10px; cursor: pointer;
}