/* --- VARIÁVEIS & TEMA --- */
:root {
    --teti-primary: #00bcd4;
    --teti-primary-dark: #00acc1;
    --teti-accent: #e91e63;
    
    --bg-body: #f0f2f5; /* Fundo cinza claro estilo FB */
    --bg-card: #ffffff;
    --bg-hover: #f0f2f5;
    --text-main: #050505;
    --text-muted: #65676b;
    --border-color: #ced0d4;
    
    --header-height: 60px;
    --nav-height: 60px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-body: #18191a;
        --bg-card: #242526;
        --bg-hover: #3a3b3c;
        --text-main: #e4e6eb;
        --text-muted: #b0b3b8;
        --border-color: #3e4042;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    padding-top: var(--header-height);
    padding-bottom: calc(var(--nav-height) + 20px);
    overflow-y: scroll;
}

/* HEADER */
.app-header {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
    background-color: var(--bg-card); border-bottom: 1px solid var(--border-color);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
}
.header-content { width: 100%; max-width: 600px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center; }
.app-logo { font-family: 'Labrada', serif; font-weight: 900; font-size: 28px; color: var(--teti-primary); letter-spacing: -1px; }
.header-actions { display: flex; gap: 8px; }
.icon-btn { background: none; border: none; color: var(--text-main); padding: 8px; border-radius: 50%; cursor: pointer; display: flex; background-color: var(--bg-hover); transition: background 0.2s; }
/* EM css/teti.css */

.relative { position: relative; }

/* Novo Estilo de Badge Numérico */
.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px; /* Largura mínima para o número 1 ficar redondo */
    height: 18px;
    background-color: var(--teti-accent); /* Vermelho/Rosa do tema */
    color: white;
    border-radius: 9px; /* Pílula arredondada */
    border: 2px solid var(--bg-card); /* Borda branca para separar do ícone */
    font-size: 10px;
    font-weight: 800;
    display: flex; /* Flex para centralizar o texto */
    align-items: center;
    justify-content: center;
    padding: 0 4px; /* Espaço lateral para números maiores */
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* MAIN CONTENT */
.app-content { width: 100%; max-width: 600px; margin: 0 auto; }
.view-section { display: none; }
.view-section.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* STORIES */
.stories-wrapper { background-color: var(--bg-card); padding: 16px 0; margin-bottom: 8px; }
.stories-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.stories-scroll::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; width: 72px; flex-shrink: 0; cursor: pointer; position: relative; }
.story-ring { width: 68px; height: 68px; border-radius: 50%; padding: 2px; border: 2px solid var(--border-color); }
.story-item.unseen .story-ring { border-color: var(--teti-primary); }
.story-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-card); }
.story-name { font-size: 12px; margin-top: 4px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; }
.add-story-btn {
    position: absolute;
    bottom: -5px;
    right: 0;
    background-color: var(--teti-primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    right: -7px;
}
.add-story-btn span { font-size: 16px; font-weight: bold; }

/* CAIXA DE CRIAÇÃO */
.create-post-area { background-color: var(--bg-card); padding: 12px 16px; margin-bottom: 8px; border-radius: 0 0 8px 8px; }
.cp-top { display: flex; gap: 12px; margin-bottom: 12px; }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
#inline-post-input { flex: 1; border: none; background: var(--bg-hover); border-radius: 20px; padding: 10px 16px; font-size: 12px; color: var(--text-main); resize: none; height: 44px; outline: none; transition: height 0.2s; }
#inline-post-input:focus { height: 80px; background: transparent; padding: 13px; }

#inline-image-preview-container { position: relative; margin-bottom: 12px; border-radius: 8px; overflow: hidden; }
#inline-image-preview-container.hidden { display: none; }
#inline-image-preview { width: 100%; display: block; max-height: 300px; object-fit: cover; }
#inline-remove-image-btn { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.cp-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); padding-top: 12px; }
.icon-text-btn { background: none; border: none; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 6px 12px; border-radius: 8px; }
.icon-text-btn:hover { background-color: var(--bg-hover); }
.btn-publish-small { background-color: var(--teti-primary); color: white; border: none; padding: 6px 20px; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; }
.btn-publish-small:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--text-muted); }

/* TRENDING */
.trending-section { background-color: var(--bg-card); padding: 12px 0; margin-bottom: 8px; overflow: hidden; white-space: nowrap; }
.trending-track { display: inline-block; animation: scroll-left 30s linear infinite; padding-left: 16px; }
.trending-item { display: inline-flex; align-items: center; margin-right: 24px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text-main); }
.trend-rank { font-weight: 800; color: var(--text-muted); margin-right: 6px; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* POST CARD */
.post-card { background-color: var(--bg-card); margin-bottom: 8px; padding: 12px 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.post-header { display: flex; align-items: center; margin-bottom: 12px; }
.post-meta { flex: 1; margin-left: 10px; display: flex; flex-direction: column; }
.post-username { font-weight: 600; font-size: 15px; color: var(--text-main); display: flex; align-items: center; }
.verified { color: var(--teti-primary); font-size: 14px; margin-left: 4px; }
.post-time { font-size: 12px; color: var(--text-muted); }
.post-body { margin-bottom: 12px; }
.post-text { font-size: 15px; line-height: 1.5; color: var(--text-main); margin-bottom: 8px; white-space: pre-wrap; }
.post-media { width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); margin-top: 8px; }
.post-media img { width: 100%; display: block; }

.post-actions { display: flex; justify-content: space-between; border-top: 1px solid var(--border-color); padding-top: 4px; }
.action-btn { flex: 1; background: none; border: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 8px; border-radius: 4px; font-size: 13px; font-weight: 600; }
.action-btn:hover { background-color: var(--bg-hover); }
.action-btn span.material-icons-round { font-size: 20px; }
.action-btn.liked { color: var(--teti-accent); }
.action-btn.liked span { font-variation-settings: 'FILL' 1; }

/* COMENTÁRIOS INLINE */
.inline-comments-section { background-color: var(--bg-hover); padding: 10px 10px; margin: 0 -16px -12px -16px; border-top: 1px solid var(--border-color); display: none; }
.inline-comments-section.open { display: block; }
.comment-item { display: flex; gap: 8px; margin-bottom: 8px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; }
.comment-bubble { background-color: var(--bg-card); padding: 8px 12px; border-radius: 12px; flex: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.comment-user { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.comment-text { font-size: 14px; }
.inline-comment-input-area { display: flex; gap: 8px; margin-top: 12px; }
.inline-comment-input { flex: 1; padding: 8px 12px; border-radius: 20px; border: 1px solid var(--border-color); outline: none; }

/* MODAL OPÇÕES */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; display: none; align-items: flex-end; }
.modal-overlay.open { display: flex; }
.options-sheet { background: var(--bg-card); width: 100%; border-radius: 16px 16px 0 0; padding: 16px; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.option-item { width: 100%; padding: 16px; text-align: left; background: none; border: none; font-size: 16px; color: var(--text-main); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; cursor: pointer; }
.option-item:last-child { border-bottom: none; justify-content: center; font-weight: bold; margin-top: 8px; }
.text-danger { color: #f44336; }

/* NAV */
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: var(--nav-height); background-color: var(--bg-card); border-top: 1px solid var(--border-color); display: flex; justify-content: space-around; align-items: center; z-index: 1000; }
.nav-item { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 10px; }
.nav-item.active { color: var(--teti-primary); }

/* =========================================================
   SISTEMA DE COMENTÁRIOS E RESPOSTAS (FINAL - ANTI-QUEBRA)
   ========================================================= */

/* Container geral do comentário */
.comment-container {
    margin-bottom: 12px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative; /* Necessário para o posicionamento */
}

/* Linha do Avatar + Balão */
.comment-row {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

/* Avatar */
.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; /* Impede o avatar de amassar */
}

/* Balão do Comentário */
.comment-bubble {
    background-color: var(--bg-card);
    padding: 8px 12px;
    border-radius: 0 12px 12px 12px;
    flex: 1; /* Ocupa todo espaço disponível */
    min-width: 0; /* TRUQUE DE OURO: Obriga o flex a quebrar texto longo */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid var(--border-color);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
    flex-wrap: wrap; 
}

.comment-user {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-main);
    margin-right: 8px;
    word-break: break-word; /* Previne nicks gigantes de quebrar layout */
}

.comment-text {
    font-size: 14px;
    color: var(--text-main);
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word; /* Quebra palavras longas */
    overflow-wrap: break-word; /* Compatibilidade extra */
    max-width: 100%;
}

/* Barra de Ações (Curtir, Responder) */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 42px; /* Alinha visualmente com o texto */
    margin-top: 4px;
    flex-wrap: wrap;
}

.comment-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    white-space: nowrap;
}

.comment-action-btn:hover {
    color: var(--text-main);
    text-decoration: underline;
}

.comment-action-btn.liked {
    color: var(--teti-accent);
}

.comment-action-btn.delete-btn {
    color: #ef5350;
    margin-left: auto;
}

/* --- HIERARQUIA DE RESPOSTAS (THREADS) --- */

.replies-list {
    width: 100%;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    margin-top: -10px;
}

/* O ITEM DE RESPOSTA */
.comment-item.is-reply {
    /* Indentação Padrão */
    margin-left: 12px; /* Reduzido de 24px para economizar tela */
    padding-left: 8px;
    border-left: 2px solid var(--border-color);

    padding-top: 12px;
    
    /* Garante que o item não cresça além do pai */
    width: auto; 
    align-self: stretch; 
}

.comment-item.is-reply .comment-avatar {
    width: 24px;
    height: 24px;
}

/* --- TRAVA DE PROFUNDIDADE (FIX MOBILE) --- */
/*
   A lógica aqui é: Se chegarmos no 3º nível de resposta (resposta da resposta da resposta),
   nós paramoms de empurrar para a direita. 
   O seletor abaixo procura por listas de respostas dentro de listas de respostas.
*/

.replies-list .replies-list .replies-list .comment-item.is-reply {
    margin-left: 0 !important; /* Reseta a margem */
    padding-left: 0 !important; /* Remove o padding extra */
    border-left: none !important; /* Remove a linha lateral */
}

/* Opcional: Muda a cor da borda esquerda para níveis profundos para diferenciar visualmente */
.replies-list .replies-list .comment-item.is-reply {
    border-left-color: var(--teti-primary); 
}

/* --- INPUT DE RESPOSTA --- */
.reply-input-container {
    display: none;
    margin-top: 8px;
    /* Alinha com o texto do comentário pai, mas respeita largura */
    margin-left: 0; 
    padding-left: 42px; 
    gap: 8px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.reply-input-container.open {
    display: flex;
    animation: fadeIn 0.2s ease;
}

.reply-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-hover);
    color: var(--text-main);
    font-size: 13px;
    outline: none;
    min-width: 0; /* Previne estouro */
}

/* --- NOVAS FERRAMENTAS DE POST (Item 3) --- */
.cp-tools {
    display: flex;
    gap: 16px; /* Espaçamento entre ícones */
    margin-right: auto; /* Empurra o botão publicar para a direita */
}

.tool-btn {
    background: none; border: none; cursor: pointer;
    color: var(--teti-primary); transition: opacity 0.2s;
    padding: 4px; border-radius: 50%; display: flex;
}
.tool-btn:hover { background-color: rgba(0, 188, 212, 0.1); }

/* Área de Configuração das Ferramentas (Aparece ao clicar) */
#post-addons-area {
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
    display: none; /* Escondido por padrão */
}
#post-addons-area.active { display: block; }

/* Estilo da Enquete (Criação) */
.poll-creator input {
    width: 100%; padding: 8px 12px; margin-bottom: 8px;
    border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-body); color: var(--text-main);
}
.poll-color-picker { display: flex; gap: 8px; margin-top: 8px; }
.color-dot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.color-dot.selected { border-color: var(--text-main); transform: scale(1.1); }

/* Estilo do Cronômetro (Criação) */
.timer-creator input[type="datetime-local"] {
    padding: 8px; border-radius: 8px; border: 1px solid var(--border-color);
    background: var(--bg-body); color: var(--text-main);
}

/* --- RENDERIZAÇÃO DOS POSTS (Feed) --- */

/* Carrossel de Imagens */
.post-carousel {
    display: flex; gap: 4px; overflow-x: auto;
    scroll-snap-type: x mandatory; border-radius: 12px;
    margin-top: 8px; border: 1px solid var(--border-color);
}
.carousel-item {
    min-width: 100%; scroll-snap-align: center;
    position: relative; height: 300px;
}
.carousel-item img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Enquete no Feed */
.poll-card {
    border: 1px solid var(--border-color); border-radius: 8px;
    padding: 12px; margin-top: 8px; overflow: hidden;
}
.poll-option {
    position: relative; padding: 10px 12px; margin-bottom: 8px;
    border-radius: 8px; cursor: pointer; border: 1px solid var(--border-color);
    font-weight: 600; font-size: 14px; overflow: hidden; z-index: 1;
}
.poll-bg {
    position: absolute; top: 0; left: 0; height: 100%;
    background-color: rgba(0, 188, 212, 0.2); /* Cor padrão */
    z-index: -1; transition: width 0.5s ease;
}

/* Link Card */
.link-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--border-color); border-radius: 12px;
    overflow: hidden; margin-top: 8px; cursor: pointer;
    text-decoration: none; background: var(--bg-hover);
}
.link-image { height: 160px; width: 100%; object-fit: cover; background: #000; }
.link-meta { padding: 10px; }
.link-title { font-weight: 700; font-size: 14px; color: var(--text-main); margin-bottom: 4px; }
.link-domain { font-size: 12px; color: var(--text-muted); }

/* Cronômetro no Feed */
.countdown-card {
    background: linear-gradient(135deg, #ff9800, #f44336);
    color: white; padding: 16px; border-radius: 12px;
    text-align: center; margin-top: 8px;
}
.countdown-timer { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.countdown-label { font-size: 12px; opacity: 0.9; text-transform: uppercase; margin-bottom: 4px; }

/* Barra de Ações Estilo X/Twitter (Item 1) */
.post-actions {
    display: flex; justify-content: space-between;
    padding-top: 8px; border-top: 1px solid var(--border-color); margin-top: 8px;
}
.action-group { display: flex; align-items: center; gap: 4px; }
.action-btn { flex: unset; padding: 6px; } /* Remove flex:1 anterior */
.action-btn span.count { font-size: 12px; font-weight: normal; margin-left: 2px; }
.views-count { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

/* --- NOVA GRID DE IMAGENS (Item 4) --- */
.post-media-grid {
    display: grid;
    gap: 2px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--border-color);
}
/* Layouts dinâmicos baseados no número de fotos */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr 1fr; height: 250px; }
.grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 300px; }
.grid-3 img:first-child { grid-row: span 2; height: 100%; }
.grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 300px; }

.media-grid-item { position: relative; width: 100%; height: 100%; cursor: pointer; }
.media-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.more-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: bold;
}

/* --- LIGHTBOX (Visualizar Imagem Grande) --- */
.lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.95); z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.lightbox-overlay.active { opacity: 1; pointer-events: auto; }
.lightbox-img { max-width: 90%; max-height: 85vh; border-radius: 4px; }
.lightbox-close { position: absolute; top: 20px; right: 20px; color: white; background: none; border: none; font-size: 30px; cursor: pointer; }

/* --- TIMER CUSTOMIZADO (Item 1) --- */
.countdown-card.has-bg {
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.countdown-card.has-bg::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); border-radius: 12px; z-index: 0;
}
.countdown-content { position: relative; z-index: 1; }

/* --- FEED INTELIGENTE: ETIQUETAS DE RELEVÂNCIA --- */
.post-relevance-context {
    padding: 4px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(0, 188, 212, 0.05); /* Leve toque ciano */
    margin-bottom: 8px;
}

.relevance-icon {
    font-size: 14px;
    color: var(--teti-primary);
}

.relevance-highlight {
    color: var(--text-main);
    font-weight: 700;
}

/* Em teti.css (Opcional, pois usei inline styles para garantir) */
.repost-embed-card:hover {
    background-color: rgba(0,0,0,0.02) !important;
    border-color: var(--teti-primary) !important;
}

/* css/teti.css - ADICIONE NO FINAL */

/* CORREÇÃO CAMADAS (Z-INDEX) */
/* O modal de opções (3 pontinhos) deve ser o mais alto de todos */
#options-modal {
    z-index: 9999 !important;
}

/* O modal de visualização do post deve ficar abaixo das opções, mas acima do resto */
#single-post-modal {
    z-index: 5000 !important;
    background: rgba(0, 0, 0, 0.85); /* Fundo mais escuro para foco */
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    padding: 20px;
}

/* ESTILO DO MODAL DE POST ÚNICO (Item 3) */
#single-post-modal .modal-content {
    max-width: 600px; /* Largura máxima estilo feed */
    width: 100%;
    max-height: 90vh; /* Altura máxima */
    border-radius: 16px;
    height: auto !important; /* Remove altura fixa forçada */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    background: var(--bg-card);
    position: relative;
}

#single-post-content {
    overflow-y: auto;
    padding: 0;
    /* Esconde barra de rolagem feia mas permite rolar */
    scrollbar-width: thin; 
}

/* CORREÇÃO DO TIMER DENTRO DE REPOST (Item 4) */
.repost-embed-card .countdown-card {
    margin-top: 8px;
    padding: 10px;
}
.repost-embed-card .countdown-timer {
    font-size: 18px !important; /* Texto menor no repost */
    font-weight: 700;
}
.repost-embed-card .countdown-label {
    font-size: 10px;
}

/* CORREÇÃO LINK PREVIEW NO REPOST (Item 5) */
.repost-embed-card .link-card {
    margin-top: 8px;
    background: var(--bg-body);
}
.repost-embed-card .link-image {
    height: 120px; /* Imagem menor no repost */
}

/* css/teti.css - ADICIONE NO FINAL */

/* --- CORREÇÃO DE MODAIS E CAMADAS --- */

/* O modal de opções (3 pontinhos) deve ser o mais alto */
#options-modal {
    z-index: 9999 !important;
}

/* CORREÇÃO DO MODAL DE POST ÚNICO */
#single-post-modal {
    z-index: 5000 !important;
    background: rgba(0, 0, 0, 0.85);
    /* Define como invisível por padrão */
    display: none; 
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Só aparece quando tem a classe .open */
#single-post-modal.open {
    display: flex;
}

/* Conteúdo do Modal de Post Único */
#single-post-modal .modal-content {
    max-width: 600px;
    width: 100%;
    max-height: 90vh; /* Altura máxima para não estourar a tela */
    height: auto !important; /* Remove altura fixa */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    position: relative;
}

/* Área de rolagem dentro do modal */
#single-post-content {
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin; 
}

/* --- ESTILOS DO REPOST (Para ficar bonito dentro do card) --- */
.repost-embed-card:hover {
    background-color: rgba(0,0,0,0.02);
    border-color: var(--teti-primary);
}

/* Ajuste do Cronômetro dentro do Repost (Menor) */
.repost-embed-card .countdown-card {
    margin-top: 8px;
    padding: 10px;
}
.repost-embed-card .countdown-timer {
    font-size: 18px !important;
    font-weight: 700;
}
.repost-embed-card .countdown-label {
    font-size: 10px;
}

/* Ajuste do Link dentro do Repost */
.repost-embed-card .link-card {
    margin-top: 8px;
    background: var(--bg-body);
}
.repost-embed-card .link-image {
    height: 120px;
}

/* css/teti.css - ADICIONE NO FINAL */

/* --- VISUALIZADOR DE STORIES (FULLSCREEN) --- */
.story-viewer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 4000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

.story-progress-bar {
    position: absolute; top: 10px; left: 0; width: 100%; padding: 0 10px;
    display: flex; gap: 4px; z-index: 4002;
}

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

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

.story-viewer-header {
    position: absolute; top: 20px; left: 0; width: 100%;
    padding: 10px 16px; display: flex; justify-content: space-between; align-items: center;
    z-index: 4002; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.story-content-media {
    max-width: 100%; max-height: 100%; width: 100%; height: 100%;
    object-fit: contain; /* Mostra a imagem inteira sem cortar */
}

/* Área de clique para navegar (Esquerda/Direita) */
.story-nav-left, .story-nav-right {
    position: absolute; top: 0; height: 100%; width: 30%; z-index: 4001;
}
.story-nav-left { left: 0; }
.story-nav-right { right: 0; }

/* css/teti.css */

/* --- GRID DE MÍDIA INTELIGENTE (TIPO FACEBOOK) --- */
.post-media-grid {
    display: grid;
    gap: 2px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-hover);
}

.media-grid-item { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    cursor: pointer;
    overflow: hidden; 
}

.media-grid-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.2s;
}

.media-grid-item:active img {
    transform: scale(1.02);
}

/* LAYOUTS DINÂMICOS */

/* 1 Imagem: Full */
.grid-1 { 
    grid-template-columns: 1fr; 
    height: 300px; 
}

/* 2 Imagens: Meio a Meio Vertical */
.grid-2 { 
    grid-template-columns: 1fr 1fr; 
    height: 250px; 
}

/* 3 Imagens: 1 Grande na Esquerda, 2 Pequenas na Direita */
.grid-3 { 
    grid-template-columns: 2fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    height: 300px; 
}
.grid-3 .media-grid-item:nth-child(1) { grid-row: span 2; }

/* 4 Imagens: 1 Grande no Topo, 3 Pequenas em Baixo */
.grid-4 { 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 2fr 1.2fr; /* Topo maior */
    height: 350px; 
}
.grid-4 .media-grid-item:nth-child(1) { grid-column: span 3; }

/* 5 Imagens (PEDIDO ESPECÍFICO): 2 Retângulos Topo, 3 Quadrados Baixo */
/* Usamos 6 colunas virtuais para dividir: Topo (3+3), Baixo (2+2+2) */
.grid-5 { 
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: 1fr 1fr; 
    height: 320px; 
}
.grid-5 .media-grid-item:nth-child(1) { grid-column: span 3; } /* Topo Esq */
.grid-5 .media-grid-item:nth-child(2) { grid-column: span 3; } /* Topo Dir */
.grid-5 .media-grid-item:nth-child(3) { grid-column: span 2; } /* Baixo 1 */
.grid-5 .media-grid-item:nth-child(4) { grid-column: span 2; } /* Baixo 2 */
.grid-5 .media-grid-item:nth-child(5) { grid-column: span 2; } /* Baixo 3 */

/* Overlay (+X) */
.more-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: bold;
    backdrop-filter: blur(2px);
}

/* Indicador de "Seguindo" no post */
.following-indicator {
    animation: fadeIn 0.3s ease;
    display: inline-flex;
    align-items: center;
}

/* css/teti.css - ADICIONE NO FINAL */

/* --- PLAYER FULLSCREEN (ESTILO TIKTOK) --- */
.video-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 6000; display: none;
}
.video-modal-overlay.active { display: block; }

.video-container-full {
    width: 100%; height: 100%; position: relative;
    display: flex; align-items: center; justify-content: center;
}

.video-container-full video {
    width: 100%; height: 100%; object-fit: contain; max-width: 600px;
}

.close-video-btn {
    position: absolute; top: 20px; left: 20px; z-index: 6002;
    background: rgba(0,0,0,0.5); color: white; border: none;
    border-radius: 50%; width: 40px; height: 40px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* Ações Laterais (Direita) */
.vm-actions {
    position: absolute; bottom: 100px; right: 10px; z-index: 6001;
    display: flex; flex-direction: column; gap: 20px; align-items: center;
}
.vm-actions button {
    background: none; border: none; color: white; display: flex;
    flex-direction: column; align-items: center; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    cursor: pointer;
}
.vm-actions span.material-icons-round { font-size: 32px; }
.vm-actions span.count { font-size: 12px; font-weight: 600; margin-top: 4px; }

/* Informações (Baixo) */
.vm-info {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 20px 80px 40px 16px; /* Espaço para não bater nos botões */
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white; z-index: 6001;
}
.vm-user { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vm-user img { width: 36px; height: 36px; border-radius: 50%; border: 1px solid white; }
.vm-user span { font-weight: 700; font-size: 15px; }
.vm-follow-btn {
    background: transparent; border: 1px solid white; color: white;
    padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;
}
.vm-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.vm-desc { font-size: 13px; opacity: 0.9; line-height: 1.3; margin-bottom: 6px; }
.vm-tags { font-size: 13px; font-weight: 700; color: var(--teti-primary); }

/* --- CARD DE PREVIEW NO FEED (CLIQUE PARA EXPANDIR) --- */
.video-feed-card {
    position: relative; width: 100%; height: 450px; /* Vertical */
    background: #000; border-radius: 12px; overflow: hidden;
    margin-top: 8px; cursor: pointer;
}
.video-feed-card video { width: 100%; height: 100%; object-fit: cover; }
.play-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.4); border-radius: 50%; width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.video-bottom-gradient {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 80px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    display: flex; align-items: flex-end; padding: 12px;
}
.video-card-title { color: white; font-weight: 700; font-size: 14px; }

/* --- GRID DO PERFIL (VERTS) --- */
.verts-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.vert-thumb {
    aspect-ratio: 9/16; background: #333; position: relative; cursor: pointer;
}
.vert-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vert-views {
    position: absolute; bottom: 4px; left: 4px; font-size: 10px; color: white;
    display: flex; align-items: center; gap: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* css/teti.css */

/* --- CORREÇÃO Z-INDEX (CRÍTICO) --- */
/* O modal de vídeo é 6000. O de opções deve ser maior */
#options-modal {
    z-index: 9999 !important;
}

/* --- BARRA DE PROGRESSO DO VÍDEO (Item 5) --- */
.vm-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px; /* Fina */
    background: rgba(255, 255, 255, 0.2);
    z-index: 6005;
    cursor: pointer;
}

.vm-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--teti-primary);
    transition: width 0.1s linear;
}

/* --- FEEDBACK VISUAL DE GESTOS (Item 6 e 7) --- */
.video-gesture-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 16px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 6010;
    opacity: 0;
    pointer-events: none; /* Não bloqueia cliques */
    transition: opacity 0.2s;
    font-size: 14px;
    font-weight: 700;
}

.video-gesture-feedback.active {
    opacity: 1;
}

.video-gesture-feedback span.material-icons-round {
    font-size: 32px;
    margin-bottom: 4px;
}

/* Ajuste para não selecionar texto ao dar duplo clique */
.video-container-full {
    user-select: none; 
    -webkit-user-select: none;
}

/* css/teti.css */

/* --- CORREÇÃO DE Z-INDEX (CRÍTICO) --- */
/* O modal de vídeo é 6000. */
/* O modal de compartilhamento/opções precisa ser maior */
.modal-overlay, #options-modal {
    z-index: 9999 !important; /* Acima do vídeo */
}

/* --- LAYOUT DE COMENTÁRIOS NO VÍDEO (Estilo Instagram) --- */
/* Classe que será adicionada ao #video-modal quando clicar em comentar */
#video-modal.split-view .video-container-full {
    height: 35%; /* Vídeo ocupa 35% do topo */
    background: #000;
}

#video-modal.split-view video {
    object-fit: contain; /* Garante que o vídeo apareça inteiro */
}

/* Esconde controles sobrepostos quando comentários estão abertos */
#video-modal.split-view .vm-actions,
#video-modal.split-view .vm-info,
#video-modal.split-view .vm-progress-container,
#video-modal.split-view .video-gesture-feedback {
    display: none; 
}

/* Área de Comentários do Vídeo (Inicialmente oculta) */
.vm-comments-panel {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%; /* Restante da tela */
    background: var(--bg-card);
    border-radius: 16px 16px 0 0;
    flex-direction: column;
    z-index: 6005;
}

#video-modal.split-view .vm-comments-panel {
    display: flex;
    animation: slideUp 0.3s ease;
}

.vm-comments-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}

.vm-comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Ajuste do botão fechar no modo split */
#video-modal.split-view .close-video-btn {
    top: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
}

/* css/teti.css */

/* --- CORREÇÃO DO RODAPÉ NO MODO VÍDEO --- */

/* 1. Garante que o menu inferior fique ACIMA do vídeo */
.bottom-nav {
    z-index: 10000 !important; /* Maior que o video-modal (6000) e options (9999) */
}

/* 2. Ajuste do Modal de Vídeo quando aberto pela aba (Tab Mode) */
#video-modal.tab-view {
    /* Reduz a altura para não ficar atrás do menu */
    height: calc(100% - var(--nav-height)); 
    top: 0;
    left: 0;
    bottom: var(--nav-height); /* Encosta no topo do menu */
    border-radius: 0; /* Remove bordas arredondadas se tiver */
}

/* No modo Aba, escondemos o botão de fechar "X", 
   pois o usuário sai clicando em outra aba do menu */
#video-modal.tab-view .close-video-btn {
    display: none;
}

/* css/teti.css */

/* Garante que o menu de opções fique SOBRE o vídeo (que é 6000) */
#options-modal {
    z-index: 10005 !important;
}

/* Garante que o alerta do navegador (confirm/alert) não quebre o layout */
.modal-overlay {
    z-index: 10005;
}

/* css/teti.css - ADICIONE NO FINAL */

/* Classe utilitária para esconder o rodapé quando o vídeo for Fullscreen (Feed/Perfil) */
body.hide-bottom-nav .bottom-nav {
    display: none !important;
}

/* css/teti.css - Localize e atualize a seção .vm-actions */

/* Ações Laterais (Direita) */
.vm-actions {
    position: absolute; 
    bottom: 120px; /* Subimos um pouco para não bater na descrição */
    right: 12px;   /* Mais próximo da borda */
    z-index: 6020; /* Z-Index ALTÍSSIMO para garantir clique */
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    align-items: center;
}

/* Estilo dos Botões Laterais */
.vm-actions button {
    background: none; 
    border: none; 
    color: white; 
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    cursor: pointer;
    pointer-events: auto; /* Garante que recebe cliques */
    padding: 8px; /* Aumenta área de toque */
}

/* Ajuste de Tamanho dos Ícones (Item 1) */
.vm-actions span.material-icons-round { 
    font-size: 28px; /* Reduzido de 32px para 28px */
}

/* Ajuste do Texto Abaixo do Ícone */
.vm-actions span.count { 
    font-size: 11px; 
    font-weight: 600; 
    margin-top: 2px; 
}

/* --- CORREÇÃO ESPECÍFICA PARA O BOTÃO 3 PONTOS (Item 2) --- */
/* Garante que o último botão (mais options) tenha prioridade de clique */
.vm-actions button:last-child {
    z-index: 6025;
}

/* css/teti.css */

/* --- HIERARQUIA DE Z-INDEX DEFINITIVA --- */
/* Nível 1: Conteúdo Normal (0-100) */
/* Nível 2: Header/Nav (1000-10000) */
/* Nível 3: Modais e Overlays (acima de 10000) */

.bottom-nav {
    z-index: 10000 !important; 
}

/* Modal de Post Único (5000 -> mudamos para compatibilidade) */
#single-post-modal {
    z-index: 10001 !important; 
}

/* Modal de Opções (...) */
#options-modal {
    z-index: 10005 !important;
}

/* Modal de Stories (Deve cobrir tudo) */
.story-viewer-overlay {
    z-index: 10010 !important; 
}

/* Lightbox (Visualizador de Imagem - O MAIS ALTO) */
.lightbox-overlay {
    z-index: 11000 !important; /* CORREÇÃO DO ITEM 2 */
}

/* Classes utilitárias de visibilidade (MANTIDAS) */
body.hide-bottom-nav .bottom-nav {
    display: none !important;
}

/* css/teti.css */

/* --- CORREÇÃO DE CAMADA DO VÍDEO (Item 2) --- */
/* Aumentamos de 6000 para 10002. */
/* Isso garante que ele fique: */
/* 1. ACIMA do Rodapé (10000) */
/* 2. ACIMA do Modal de Post Único (10001) <--- CORREÇÃO DO PROBLEMA */
/* 3. ABAIXO do Menu de Opções/3 Pontinhos (10005) */

.video-modal-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: #000; 
    z-index: 10002 !important; /* ALTERADO AQUI */
    display: none;
}

.video-modal-overlay.active { 
    display: block; 
}

/* --- teti.css (Adicionar ao final) --- */

/* MODAL DE BUSCA GLOBAL */
.search-modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: 16px 16px 0 0;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper span {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 20px;
}

.real-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border-radius: 12px;
    border: none;
    background-color: var(--bg-hover);
    color: var(--text-main);
    font-size: 15px;
    outline: none;
}

/* ABAS DA BUSCA (Explorar / Contas) */
.search-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.search-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.search-tab.active {
    color: var(--text-main);
    border-bottom-color: var(--text-main);
}

/* FILTROS DE USUÁRIO (Tags horizontais) */
.search-filters-scroll {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    scrollbar-width: none; /* Firefox */
}
.search-filters-scroll::-webkit-scrollbar { display: none; }

.filter-chip {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    font-size: 13px;
    white-space: nowrap;
    color: var(--text-main);
    background: var(--bg-card);
    cursor: pointer;
}
.filter-chip.active {
    background: var(--text-main);
    color: var(--bg-card);
    border-color: var(--text-main);
}

/* GRID DE EXPLORAR (POSTS) */
.explore-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding-top: 2px;
}

.explore-item {
    position: relative;
    aspect-ratio: 1/1; /* Quadrado Perfeito */
    background-color: var(--bg-hover);
    cursor: pointer;
    overflow: hidden;
}

.explore-item img, .explore-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.explore-type-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* LISTA DE USUÁRIOS (CONTAS) */
.search-user-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.s-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
}

.s-user-info {
    flex: 1;
}

.s-user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 4px;
}

.s-user-handle {
    font-size: 13px;
    color: var(--text-muted);
}

.s-user-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Estilo para posts de texto no Grid do Explorar */
.explore-item.text-only {
    background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--border-color);
}

.explore-text-content {
    font-size: 11px;
    color: var(--text-main);
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
}

/* NOTIFICAÇÕES */
.notif-item {
    display: flex; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    align-items: flex-start;
}
.notif-item.unread { background-color: rgba(0, 188, 212, 0.05); }

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

.notif-content { flex: 1; font-size: 14px; color: var(--text-main); }
.notif-user { font-weight: 700; cursor: pointer; }
.notif-time { font-size: 11px; color: var(--text-muted); margin-left: 4px; }

.notif-post-thumb {
    width: 40px; height: 40px; background: var(--bg-hover);
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); cursor: pointer;
}

/* Botões de Aceitar/Recusar */
.req-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-accept {
    background: var(--teti-primary); color: white; border: none;
    padding: 6px 16px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer;
}
.btn-decline {
    background: var(--bg-hover); color: var(--text-main); border: 1px solid var(--border-color);
    padding: 6px 16px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer;
}

/* CORREÇÃO DO MODAL DE COMPARTILHAMENTO E OPÇÕES */
/* Deve ser maior que o video-modal-overlay (que é 10002) */
.modal-overlay, 
#options-modal,
#single-post-modal {
    z-index: 10005 !important;
}

/* O Lightbox de imagem continua sendo o maior de todos */
.lightbox-overlay {
    z-index: 11000 !important;
}

/* --- teti.css --- */

/* TRENDING TOPICS (Real Loop) */
.trending-section { 
    background-color: var(--bg-card); 
    padding: 10px 0; 
    margin-bottom: 8px; 
    overflow: hidden; 
    white-space: nowrap; 
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.trending-container {
    width: 100%;
    overflow: hidden;
}

.trending-track { 
    display: inline-flex; /* Garante que fiquem em linha */
    align-items: center;
    white-space: nowrap;
    /* Aumentei para 40s para ficar mais suave */
    animation: scroll-left 40s linear infinite; 
    /* Força aceleração de hardware para não travar no celular */
    transform: translateZ(0); 
    width: max-content; /* Garante que o container abrace todo o conteúdo */
}

/* Pausa a animação ao passar o mouse ou tocar */
.trending-track:hover {
    animation-play-state: paused;
}

.trending-item { 
    display: inline-flex; 
    align-items: center; 
    margin-right: 32px; /* Espaço entre itens */
    font-size: 13px; 
    font-weight: 600; 
    cursor: pointer; 
    color: var(--text-main); 
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.trending-item:hover {
    background-color: var(--bg-hover);
}

.trend-rank { 
    font-weight: 800; 
    color: var(--teti-primary); 
    margin-right: 6px; 
    font-size: 14px;
}

.trend-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 6px;
    font-weight: 400;
}

@keyframes scroll-left { 
    0% { transform: translateX(0); }
    /* Move exatamente 50% (que é o tamanho do conteúdo original antes da duplicação) */
    100% { transform: translateX(-50%); } 
}

/* css/teti.css */

/* INDICADOR PULL TO REFRESH */
#ptr-indicator {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    left: 50%;
    transform: translate(-50%, -50px); /* Escondido pra cima */
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

#ptr-indicator.visible {
    opacity: 1;
}

#ptr-indicator.loading {
    animation: spin 1s linear infinite;
}

@keyframes spin { 100% { transform: translate(-50%, 60px) rotate(360deg); } }

/* BOTÃO DE NOVAS POSTAGENS (FLUTUANTE) */
.new-posts-floater {
    position: fixed;
    top: calc(var(--header-height) + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(-100px); /* Escondido */
    background-color: var(--teti-primary);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0,188,212,0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 800;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.new-posts-floater.visible {
    transform: translateX(-50%) translateY(0);
}

.new-posts-floater:active {
    transform: translateX(-50%) scale(0.95);
}

/* Transição suave na Main para o Pull effect */
main.app-content {
    transition: transform 0.2s ease-out;
}

/* Container da Notificação com Swipe */
.notif-swipe-wrapper {
    position: relative;
    overflow: hidden; /* Esconde o botão vermelho que fica fora da tela */
    border-bottom: 1px solid var(--border-color);
}

/* EM css/teti.css */

/* O botão de excluir (Fundo Vermelho) */
.notif-delete-bg {
    position: absolute;
    top: 0;
    /* MUDANÇA 1: Removemos 'right: 0' e usamos 'left: 100%' para empurrá-lo para fora da tela */
    left: 100%; 
    bottom: 0;
    width: 80px;
    background-color: #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1;
    /* MUDANÇA 2: Adicionamos transição para ele animar suavemente ao soltar */
    transition: transform 0.2s ease-out;
}

/* O conteúdo da frente que desliza */
.notif-item {
    position: relative;
    z-index: 2;
    background-color: var(--bg-card);
    transition: transform 0.2s ease-out;
    border-bottom: none;
    /* MUDANÇA 3: Garantimos que a largura seja 100% para cobrir bem o container */
    width: 100%; 
}

/* --- CARD DE VÍDEO NO FEED (ESTILO INSTA/REELS) --- */
.video-feed-card {
    position: relative;
    width: 100%;
    /* Altura fixa ou aspect-ratio para ficar vertical bonito no feed */
    aspect-ratio: 4/5; /* Padrão Instagram Feed */
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background-size: cover;
    background-position: center;
}

/* O vídeo em si fica "atrás", servindo de preview */
.video-feed-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Botão de Play Centralizado */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Deixa o clique passar pro card */
    border: 1px solid rgba(255,255,255,0.3);
}

/* Gradiente Inferior para o Título */
.video-bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Altura do degradê */
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    display: flex;
    align-items: flex-end;
    padding: 12px;
    pointer-events: none;
}

/* Texto do Título */
.video-card-title {
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a 2 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- AJUSTE BARRA DE PROGRESSO NO PLAYER FULLSCREEN --- */
.vm-progress-container {
    position: absolute;
    bottom: 0; /* Cola no fundo da tela */
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.3);
    z-index: 6010;
}

.vm-progress-bar {
    height: 100%;
    background-color: var(--teti-primary);
    width: 0%;
    transition: width 0.1s linear;
}

/* --- CARD DE VÍDEO NO FEED (ESTILO INSTA/REELS) --- */
.video-feed-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5; /* Formato vertical padrão de feed */
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background-size: cover;
    background-position: center;
}

/* Overlay do Botão Play */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.3);
    pointer-events: none; /* O clique passa para o card */
}

/* Gradiente para ler o título */
.video-bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    display: flex;
    align-items: flex-end;
    padding: 12px;
    pointer-events: none;
}

.video-card-title {
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- CORREÇÃO DE THUMBNAILS VAZIAS --- */

/* Quando a imagem falha no perfil */
.vert-thumb.no-cover,
.no-cover-placeholder {
    width: 100%;
    height: 100%;
    background: #37474f; /* Cinza escuro */
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-cover-placeholder span {
    color: rgba(255,255,255,0.2);
    font-size: 32px;
}

/* Garante que o card do feed tenha cor de fundo se a imagem falhar */
.video-feed-card {
    background-color: #263238; 
}

/* css/teti.css - Adicione ao final */

/* Loader do Player de Vídeo */
.video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5; /* Acima do vídeo, abaixo dos controles */
    display: none; /* Oculto por padrão, JS controla */
    pointer-events: none;
}

.video-loader .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid var(--teti-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* --- CORREÇÃO DE PREVIEW DE IMAGEM (CRIAÇÃO) --- */
.preview-media-wrapper {
    position: relative;
    width: 100%;
    background-color: #000; /* Fundo preto para realçar a imagem */
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    border: 1px solid var(--border-color);
}

.preview-img-responsive {
    display: block;
    max-width: 100%;      /* Nunca excede a largura da tela */
    max-height: 350px;    /* Limite de altura para não cobrir o teclado */
    width: auto;          /* Mantém proporção */
    height: auto;         /* Mantém proporção */
    object-fit: contain;  /* Garante que a imagem apareça inteira */
}

.preview-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 10;
    transition: background 0.2s;
}

.preview-close-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.preview-count-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}

/* --- CORREÇÃO DEFINITIVA DE IMAGEM ÚNICA (GRID-1) --- */

/* Container da Imagem Única */
.grid-1 {
    display: flex !important;       /* Flexbox para centralizar */
    justify-content: center;
    align-items: center;
    background-color: #000;         /* Fundo preto (Estilo Cinema) para destacar a arte */
    
    /* Regras de Altura Inteligente */
    height: auto !important;        /* Altura se adapta à imagem */
    min-height: 250px;              /* Altura mínima (para não ficar uma tira fina) */
    max-height: 600px;              /* Altura máxima (para prints longos não quebrarem o feed) */
    
    border-radius: 12px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--border-color);
}

/* O item wrapper da imagem */
.grid-1 .media-grid-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Remove background herdado */
}

/* A Imagem em si */
.grid-1 .media-grid-item img {
    /* O SEGREDO: 'contain' garante que 100% da imagem apareça sem cortes */
    object-fit: contain !important; 
    
    width: 100%;
    height: auto;           /* Mantém a proporção */
    max-height: 600px;      /* Trava na altura máxima do container */
    display: block;
}

/* --- MANTÉM OS GRIDS MÚLTIPLOS (2, 3, 4 fotos) COMO 'COVER' --- */
/* Para 2 ou mais fotos, o 'cover' ainda é melhor para manter o alinhamento bonito */
.grid-2 .media-grid-item img,
.grid-3 .media-grid-item img,
.grid-4 .media-grid-item img,
.grid-5 .media-grid-item img {
    object-fit: cover !important;
}

/* --- REAÇÕES (ESTILO FACEBOOK) --- */

/* Wrapper do botão para posicionar o dock */
.reaction-wrapper {
    position: relative;
    display: inline-block;
}

/* O Dock flutuante (Menu de emojis) */
.reaction-dock {
    position: absolute;
    bottom: 100%; /* Acima do botão */
    left: 0;
    background: var(--bg-card);
    border-radius: 50px;
    padding: 6px;
    display: flex;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.8);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none; /* Não clicável quando invisível */
}

/* Quando ativo */
.reaction-dock.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(-10px) scale(1);
    pointer-events: auto;
}

/* Os Emojis dentro do Dock */
.reaction-emoji {
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
    user-select: none;
}

.reaction-emoji:hover {
    transform: scale(1.3) translateY(-5px);
}

/* Feedback Visual no Botão Ativado */
.action-btn.reacted, 
.comment-action-btn.reacted {
    font-weight: 700;
    transition: color 0.2s;
}

/* Cores específicas para cada reação no texto do botão */
.reacted-love { color: #e91e63 !important; }   /* ❤️ */
.reacted-haha { color: #fbc02d !important; }   /* 😆 */
.reacted-sad { color: #fbc02d !important; }    /* 😢 (Amarelo ou Azul) */
.reacted-angry { color: #e64a19 !important; }  /* 😡 */
.reacted-wow { color: #fbc02d !important; }    /* 😮 */
.reacted-clap { color: #4caf50 !important; }   /* 👏 */

/* Animação de "Pop" ao curtir */
@keyframes reactPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

.pop-anim {
    animation: reactPop 0.3s ease;
}

/* teti.css */

/* --- STORY NÃO VISTO (AZUL PADRÃO) --- */
.story-ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    padding: 2px;
    /* Volta para o azul da sua marca */
    border: 2px solid var(--teti-primary); 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* --- STORY VISTO (CINZA E OPACO) --- */
.story-item.seen .story-ring {
    border: 2px solid #555; /* Borda cinza */
    opacity: 0.6; /* Levemente transparente */
}

/* Opcional: Efeito hover para feedback visual */
.story-item:not(.seen):hover .story-ring {
    transform: scale(1.05);
}

/* --- ESTILOS PARA STORY NO FEED E PERFIL --- */

/* Anel de Story na Foto do Post (Feed) */
.post-avatar.has-story {
    box-sizing: border-box; /* Garante que a borda não aumente o tamanho */
    padding: 2px;
    border: 2px solid var(--teti-primary); /* Azul (Não visto) */
    cursor: pointer;
    transition: all 0.3s ease;
}

.post-avatar.has-story.story-seen {
    border-color: #555; /* Cinza (Visto) */
    opacity: 0.8;
}

/* Anel de Story na Foto Grande do Perfil */
.profile-image-container.has-story {
    position: relative;
    padding: 3px;
    border-radius: 50%;
    border: 3px solid var(--teti-primary); /* Azul (Não visto) */
    cursor: pointer;
}

.profile-image-container.has-story.story-seen {
    border-color: #555; /* Cinza (Visto) */
}

/* --- STATUS DA MENSAGEM (CHECKS) --- */
.msg-info-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 2px;
}

.msg-time {
    font-size: 10px;
    color: rgba(255,255,255,0.7);
}

.msg-bubble.received .msg-time {
    color: var(--text-muted);
}

.msg-status-icon {
    font-size: 14px !important; /* Tamanho do ícone check */
    color: rgba(255,255,255,0.6); /* Cor padrão (Enviado) */
}

/* Check Azul (Lido) */
.msg-status-icon.read {
    color: #4fc3f7; /* Azul claro para destacar no fundo escuro ou claro */
}

/* Ajuste para mensagens recebidas (sem checks, só hora) */
.msg-bubble.received .msg-status-icon {
    display: none;
}

/* --- FEEDBACK DE UPLOAD (Carregando...) --- */
.upload-progress-bubble {
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 120px;
}
.upload-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- STORY NA LISTA DE CONVERSAS (INBOX) --- */
.inbox-avatar-container {
    position: relative;
    width: 48px;
    height: 48px;
}
.inbox-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    padding: 2px; /* Espaço para borda */
    border: 2px solid transparent; /* Padrão sem story */
}

/* Tem Story (Azul) */
.inbox-avatar.has-story {
    border-color: var(--teti-primary);
}
/* Story Visto (Cinza) */
.inbox-avatar.story-seen {
    border-color: #555;
    opacity: 0.8;
}

/* Header do Chat - Nome Clicável */
.chat-header-info h3 {
    cursor: pointer;
}
.chat-header-info h3:hover {
    text-decoration: underline;
}

/* --- SWIPE TO DELETE (CORRIGIDO) --- */

.swipe-wrapper {
    position: relative;
    overflow: hidden;
    /* CORREÇÃO: Removemos o vermelho daqui para evitar as "beiradinhas" */
    background-color: transparent; 
    margin-bottom: 1px;
}

.swipe-actions-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    background-color: #ff3b30;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    
    /* CORREÇÃO: Invisível por padrão para não vazar cor */
    opacity: 0; 
    transition: opacity 0.2s ease; 
}

.swipe-delete-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.swipe-delete-btn .material-icons-round {
    font-size: 24px;
}

.swipe-content {
    background-color: var(--bg-card);
    position: relative;
    z-index: 2;
    width: 100%;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-bottom: 1px solid var(--border-color);
}

/* Classe auxiliar que o JS vai adicionar quando tocar */
.swipe-wrapper.swiping .swipe-actions-bg {
    opacity: 1;
}

/* --- CORREÇÃO DE VISIBILIDADE CHAT --- */

/* Estilo para a linha de info (Hora + Check) */
.msg-info-row {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinha à direita */
    gap: 4px;
    margin-top: 4px; /* Espaço do texto */
}

/* MENSAGEM ENVIADA (AZUL) */
.msg-bubble.sent .msg-time {
    color: #FFFFFF !important; /* Branco Puro */
    font-size: 11px;
    opacity: 0.9; /* Quase opaco para leitura fácil */
    font-weight: 500;
}

.msg-bubble.sent .msg-status-icon {
    font-size: 15px !important;
    /* Padrão (2 Checks Cinzas Claros/Brancos) */
    color: rgba(255, 255, 255, 0.7) !important; 
}

/* Quando lido (Check Azul Claro Neon para destacar no fundo azul) */
.msg-bubble.sent .msg-status-icon.read {
    color: #00e5ff !important; /* Ciano/Branco brilhante para diferenciar */
    /* OU use branco puro se preferir: color: #ffffff !important; font-weight: bold; */
    opacity: 1;
}

/* MENSAGEM RECEBIDA (CINZA/BRANCA) */
.msg-bubble.received .msg-time {
    color: #555555 !important; /* Cinza escuro para contraste no fundo claro */
    font-size: 11px;
    font-weight: 500;
}

/* Garante que o ícone não apareça na mensagem recebida (opcional) */
.msg-bubble.received .msg-status-icon {
    display: none;
}

/* --- RESUMO DE REAÇÕES (CORRIGIDO) --- */
.reaction-summary-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    margin-right: 12px;
}

.reaction-pile {
    display: flex;
    align-items: center;
    flex-direction: row-reverse; /* Inverte a ordem visual */
    margin-right: 6px;
}

.reaction-mini-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    
    /* BORDA DA COR DO CARTÃO: Cria o efeito de separação/recorte */
    border: 2px solid var(--bg-card); 
    
    /* FUNDO DA COR DO CARTÃO: Para o emoji ficar limpo em cima */
    background: var(--bg-card); 
    
    margin-left: -6px; /* Sobreposição */
    font-size: 14px; /* Tamanho do Emoji */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* MODAL DE LISTA DE CURTIDAS */
.reaction-tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
    gap: 16px;
}

.reaction-tab {
    padding: 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reaction-tab.active {
    color: var(--teti-primary);
    border-bottom-color: var(--teti-primary);
}

/* css/teti.css */

/* --- CORREÇÃO MATEMÁTICA DEFINITIVA (V3) --- */

/* 1. O Container Cinza */
.inline-comments-section {
    /* O SEGREDO: Largura = 100% + 16px da esq + 16px da dir */
    width: calc(100% + 32px) !important; 
    
    /* Puxa para as bordas */
    margin-left: -16px !important;
    margin-right: -16px !important;
    
    /* Configurações visuais */
    box-sizing: border-box !important;
    display: block;
    background-color: var(--bg-hover); /* Garante o fundo cinza */
    padding: 10px 16px; /* Ajuste o padding interno se achar necessário */
}

/* 2. A Lista de Comentários e Inputs */
.inline-comment-list, 
.inline-comment-input-area {
    width: 100% !important;
    box-sizing: border-box;
}

/* 3. Área do Input (Flexbox para alinhar avatar e campo) */
.inline-comment-input-area {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* 4. O Campo de Texto */
.inline-comment-input {
    flex: 1; /* Ocupa todo o espaço restante */
    min-width: 0;
}

/* --- INÍCIO: ABAS E FEED DE QUESTÕES (REFINADO V2) --- */

/* 1. Abas de Navegação (Correção de Cor) */
.feed-header-tabs {
    display: flex;
    justify-content: center;
    background-color: var(--bg-body); /* Fundo igual ao do corpo (cinza/escuro) */
    border-bottom: 1px solid var(--border-color);
    position: sticky; 
    top: 60px; 
    z-index: 9;
}

.feed-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 7.5px 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.feed-tab.active {
    color: var(--teti-primary);
    border-bottom: 3px solid var(--teti-primary);
}

/* 2. Card da Questão (Estilo POST SOCIAL) */
.question-post-card {
    background: var(--bg-card);
    border-radius: 0; /* Mobile style */
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    padding: 0; /* Padding controlado internamente */
    overflow: hidden;
}

/* Cabeçalho do Post (Igual ao Post Comum) */
.q-post-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.q-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    cursor: pointer;
}

/* Container para Nome + Badges na mesma linha */
.q-name-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap; /* Caso tenha muitos badges, quebra linha */
    margin-bottom: 2px;
}

/* O nome em si */
.q-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main);
    line-height: 1.2;
    cursor: pointer; /* Mãozinha de clique */
}
.q-name:hover {
    text-decoration: underline;
}

/* Ajuste para as badges ficarem alinhadas */
.q-badges-container {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.q-meta {
    display: flex;
    flex-direction: column;
}

.q-time {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Corpo da Questão */
.q-post-body {
    padding: 0 16px 16px 16px;
}

.q-topic-badge {
    display: inline-block;
    background: var(--bg-hover);
    color: var(--teti-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.question-enunciado {
    font-size: 15px;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: 16px;
    font-weight: 400;
}

/* --- ESTILO DAS ALTERNATIVAS (Fundo Escuro) --- */
.options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.question-option {
    background-color: #1e1e1e !important; /* Fundo Preto/Cinza Escuro sempre */
    border: 1px solid #333;
    border-radius: 8px;
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
    color: #e0e0e0; /* Texto claro */
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    outline: none;
    font-family: inherit;
    position: relative;
    line-height: 1.4;
}

/* Texto da Alternativa */
.opt-text { display: block; font-weight: 500; }

/* FEEDBACK INTERNO */
.opt-feedback {
    display: none; /* Oculto */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
    color: #bbb;
}

.feedback-badge {
    display: inline-block;
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
    margin-right: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
}

/* --- ESTADOS DE RESPOSTA (Muda a cor do Texto/Borda) --- */

/* 1. ACERTOU (Texto Verde) */
.question-option.correct {
    border-color: #00e676 !important; /* Borda Verde Neon */
    color: #00e676 !important; /* Texto Verde */
}
.question-option.correct .opt-feedback {
    display: block !important;
    color: #a5d6a7; /* Texto da explicação um pouco mais suave */
}
.question-option.correct .feedback-badge {
    background: #00e676;
    color: #000;
}

/* 2. ERROU (Texto Vermelho) */
.question-option.wrong {
    border-color: #ff5252 !important; /* Borda Vermelha */
    color: #ff5252 !important; /* Texto Vermelho */
}
.question-option.wrong .opt-feedback {
    display: block !important;
    color: #ffcdd2;
}
.question-option.wrong .feedback-badge {
    background: #ff5252;
    color: #fff;
}

/* 3. NEUTRO REVELADO (A que você não clicou, mas mostra feedback) */
.question-option.reveal-neutral {
    opacity: 0.6; /* Fica um pouco apagada */
}
.question-option.reveal-neutral .opt-feedback {
    display: block !important;
}

/* --- RODAPÉ DO POST (ACTIONS UNIFICADO) --- */
/* Substitui as classes .q-post-footer e .q-action-btn antigas */

.question-feed-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color); /* Linha divisória sutil */
    padding-top: 12px;
    margin-top: 16px;
}

.question-feed-actions .action-btn {
    flex: 1; /* Distribui espaço igualmente */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Espaço entre ícone e número/texto */
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px; /* Tamanho padrão feed social */
    background: none;
    border: none;
    padding: 10px; /* Área de clique confortável */
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.question-feed-actions .action-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-main);
}

.question-feed-actions .action-btn .material-icons-round {
    font-size: 20px; /* Tamanho padrão ícones feed */
}

/* Estado Ativo (Like) */
.question-feed-actions .action-btn.active {
    color: #e91e63;
}
.question-feed-actions .action-btn.active .material-icons-round {
    /* Opcional: animação ou preenchimento */
}

/* Botão Anular (Topo) - Refinado */
.btn-anular-top {
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 20px; /* Arredondado estilo "chip" */
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-anular-top:hover {
    background-color: rgba(244, 67, 54, 0.1); /* Vermelho bem claro */
    color: #f44336; /* Vermelho Material Design */
}

/* Container da Questão dentro do Post Social (Shared) */
.shared-question-container {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    background-color: var(--bg-body); /* Contraste sutil com o card */
    position: relative;
}

/* Loader específico para o embed */
.embed-loader {
    display: flex;
    justify-content: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 12px;
}

/* Card de questão que já foi respondida */
.question-post-card.answered-card {
    border: 1px solid #4caf50; /* Borda verde sutil */
    opacity: 0.9; /* Levemente mais apagado para dar destaque às novas */
    background-color: rgba(76, 175, 80, 0.05); /* Fundo verde muito claro */
}

/* Botão de Novas Questões (Mesmo estilo do Social) */
.new-posts-floater {
    /* (Se já não existir no seu CSS) */
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--teti-primary);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1000;
    border: none;
    font-weight: 700;
    display: none; /* Escondido por padrão */
    align-items: center;
    gap: 8px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.27);
}
.new-posts-floater.visible {
    display: flex;
    transform: translateX(-50%) translateY(0);
}

/* Card quando acertou */
.question-post-card.answered-correct {
    border: 1px solid #4caf50 !important;
    background-color: rgba(76, 175, 80, 0.05);
}

/* Card quando errou */
.question-post-card.answered-wrong {
    border: 1px solid #f44336 !important;
    background-color: rgba(244, 67, 54, 0.05);
}