/* COMENTÁRIOS SEM SAIR DO FEED (18/08/26) — o modal do balão de comentários.
   Por dentro usa o MESMO markup e o MESMO thread.css da página /bip, então a
   conversa fica idêntica à página cheia. Este arquivo cuida só do que é do
   modal: a moldura, a barra de rolagem discreta e a folha no celular.

   Truque do fundo: o painel usa a cor de PÁGINA (--bg), não a de superfície.
   Assim os cards `.bip-thread__card` (que são --surface com borda) "pulam" do
   fundo exatamente como pulam na página /bip — sem eles, card-sobre-card fica
   chapado. */

.bipc-modal {
    position: fixed;
    inset: 0;
    /* ABAIXO dos overlays que o próprio modal dispara (18/08/26): compartilhar
       (.tool-modal 10000), toast (10050/10200), lightbox de imagem (10060) e o
       modal de confirmação de excluir (10120). Em 11000 o modal ficava POR CIMA
       de todos eles — "Enviar para", "Copiar link" e "Excluir" abriam atrás e
       pareciam não funcionar. Acima do feed (~1201), abaixo do resto. */
    z-index: 9900;
}
.bipc-modal[hidden] { display: none; }

.bipc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, 0.62);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* O painel é POSICIONADO sobre a coluna do feed (o JS mede a `.feed-main` e
   grava `left`/`width` inline). Assim o modal cai exatamente em cima do post,
   e não boiando no centro da tela — que ficava desalinhado por causa do menu à
   esquerda e do rail à direita. `left`/`width` default só valem se o JS falhar. */
.bipc-modal__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    width: min(600px, calc(100vw - 32px));
    /* ALTURA FIXA (18/08/26, referência Facebook): a janela não encolhe com 1
       comentário nem cresce com muitos — o tamanho é o mesmo, só a rolagem muda.
       min() adapta a telas baixas sem estourar. */
    height: min(86vh, 820px);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius, 16px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    animation: bipc-pop 0.18s ease;
}
/* Alinhado à coluna do feed (JS pôs left/width inline): sem o translate-X. */
.bipc-modal__panel.bipc-aligned {
    transform: translateY(-50%);
}
@keyframes bipc-pop {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Alça de arrastar — só no celular (folha). */
.bipc-modal__grip { display: none; }

.bipc-modal__head {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 14px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.bipc-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
}
.bipc-modal__close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-2);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.bipc-modal__close:hover { background: var(--surface-2); }

.bipc-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px 16px;
    /* Barra de rolagem DISCRETA (Firefox + WebKit) — a padrão do sistema saltava
       grossa e escura no meio do modal. */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.bipc-modal__body::-webkit-scrollbar { width: 4px; }
.bipc-modal__body::-webkit-scrollbar-track { background: transparent; }
.bipc-modal__body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}
.bipc-modal__body::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* O post no topo: sem os 22px que a página /bip usa abaixo do cabeçalho dela —
   aqui o respiro já vem do padding do corpo, e 22px+12px quebrava o ritmo. */
.bipc-thread .bip-thread__root { padding-top: 0; }

/* "nada mais por aqui" vive sobre o fundo cinza, FORA do card branco (que fecha
   limpo no último comentário). Texto centralizado, sem os filetes. */
.bipc-thread .bipc-end {
    justify-content: center;
    padding: 14px 0 4px;
}

/* Rolagem infinita: o sentinela é invisível (só um gatilho); o spinner aparece
   centrado enquanto o próximo bloco carrega. */
.bipc-sentinel { height: 1px; }
.bipc-loadmore {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    color: var(--text-3);
    font-size: 22px;
}
.bipc-loadmore[hidden] { display: none; }

/* Troca de ordem SUAVE: a lista atual só esmaece um pouco enquanto a nova ordem
   é buscada — nada de spinner que colapsa e faz o modal inteiro piscar. Escopado
   ao modal (.bipc-thread) para não mexer na página /bip. */
.bipc-thread .bip-thread__replies { transition: opacity 0.15s ease; }
.bipc-thread .bip-thread__replies.bipc-swapping { opacity: 0.45; }

body.bipc-modal-open { overflow: hidden; }

/* Convite ao visitante (defensivo — o visitante normalmente vai à página cheia). */
.bipc-login {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 20px;
    background: var(--btn-azul);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

/* ─────────────── CELULAR: folha subindo de baixo ─────────────── */
@media (max-width: 768px) {
    .bipc-modal__backdrop { background: rgba(8, 8, 8, 0.5); }
    /* Folha subindo de baixo — vence o left/width que o JS pôs inline no desktop
       (por isso o !important), caso a pessoa gire ou redimensione para o celular. */
    .bipc-modal__panel,
    .bipc-modal__panel.bipc-aligned {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh;
        height: 92dvh;
        transform: none !important;
        border-radius: 20px 20px 0 0;
        border-bottom: none;
        animation: bipc-sheet 0.24s ease;
    }
    @keyframes bipc-sheet {
        from { transform: translateY(100%); }
        to   { transform: none; }
    }
    .bipc-modal__grip {
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 8px auto 2px;
        flex: 0 0 auto;
    }
    .bipc-modal__head { padding: 8px 16px 12px; }
    .bipc-modal__body { padding: 10px 10px calc(4px + env(safe-area-inset-bottom, 0)); }
}

@media (prefers-reduced-motion: reduce) {
    .bipc-modal__panel { animation: none; }
}