/**
 * Sala privada — celular (última camada, vence as anteriores).
 * Cabeçalho fino de uma linha, botão Adicionar, e UMA só pílula de mensagem colada no rodapé.
 */

/* ---------- ferramentas (foto, câmera, chamada): bandeja que abre pelo clipe ---------- */
.privada-atalhos-movel{display:none}
.privada-composer-tools[hidden]{display:none!important}
/* a bandeja só aparece quando o clipe a abre (o atributo hidden é das permissões da sala) */
html body .privada-composer-tools:not(.privada-tools-abertas),
html body.sala-privada .privada-composer-tools:not(.privada-tools-abertas),
html body.pagina-sala.sala-privada .privada-composer-tools:not(.privada-tools-abertas){display:none!important}

@media (max-width:820px){
    /* ---------- cabeçalho: uma linha só ---------- */
    html body.pagina-sala.sala-privada .cabecera-sala{
        display:flex!important;
        align-items:center!important;
        gap:6px!important;
        height:56px!important;
        min-height:0!important;
        padding:0 8px!important;
        box-sizing:border-box!important;
        position:relative!important;
    }
    html body.pagina-sala.sala-privada .cabecera-sala .identidad-sala{
        display:flex!important;
        flex:1 1 auto!important;
        align-items:center!important;
        gap:6px!important;
        min-width:0!important;
        max-width:none!important;
        padding:0!important;
        margin:0!important;
    }
    html body.pagina-sala.sala-privada .cabecera-sala .identidad-sala-texto,
    html body.pagina-sala.sala-privada .cabecera-sala .titulo-en-vivo{
        flex:1 1 auto!important;
        min-width:0!important;
        display:block!important;
    }
    /* Nome da sala: até 2 linhas (antes cortava em "Grupo pr…"); só um nome
       enorme ganha reticências no fim da segunda linha. */
    html body.pagina-sala.sala-privada .cabecera-sala .titulo-en-vivo h1{
        display:-webkit-box!important;
        -webkit-box-orient:vertical!important;
        -webkit-line-clamp:2!important;
        line-clamp:2!important;
        margin:0!important;
        font-size:14px!important;
        line-height:1.2!important;
        max-height:2.4em!important;
        white-space:normal!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        overflow-wrap:anywhere!important;
        word-break:normal!important;
    }
    /* quem está online: fica na linha, sem posição absoluta */
    html body.pagina-sala.sala-privada .cabecera-sala .sala-online-cluster{
        position:static!important;
        transform:none!important;
        flex:none!important;
        margin:0!important;
        left:auto!important;
        right:auto!important;
    }
    html body.pagina-sala.sala-privada .cabecera-sala .acciones-cabecera-sala{
        position:static!important;
        display:flex!important;
        flex:none!important;
        align-items:center!important;
        gap:6px!important;
        margin:0 0 0 auto!important;
        padding:0!important;
        width:auto!important;
        max-width:none!important;
    }
    /* o que sai da linha vai para o menu ☰ */
    html body.pagina-sala.sala-privada .cabecera-sala #privada-btn-celebrar,
    html body.pagina-sala.sala-privada .cabecera-sala #privada-btn-musica,
    html body.pagina-sala.sala-privada .cabecera-sala #privada-open-shorts-channel,
    html body.pagina-sala.sala-privada .cabecera-sala #privada-report,
    html body.pagina-sala.sala-privada .cabecera-sala #privada-perfil-btn,
    html body.pagina-sala.sala-privada .cabecera-sala .privada-e2e-badge{
        display:none!important;
    }
    /* Pessoas: ícone de linha solto, sempre à vista (sem bola verde por trás) */
    html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        gap:0!important;
        width:34px!important;
        height:40px!important;
        min-width:34px!important;
        padding:0!important;
    }
    html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora .privada-pessoas-txt{display:none!important}
    html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora [data-morph-icone],
    html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora svg{width:22px!important;height:22px!important}
    html body.pagina-sala.sala-privada .cabecera-sala #privada-menu-btn{
        display:inline-flex!important;
        position:relative;
        width:34px!important;
        min-width:34px!important;
        height:40px!important;
    }
    /* Área de toque de 44px sem mudar o desenho nem a fila única do cabeçalho em 360px. */
    html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora::before{content:"";position:absolute;inset:-2px -4px -2px -6px}
    html body.pagina-sala.sala-privada .cabecera-sala #privada-menu-btn::before{content:"";position:absolute;inset:-3px -9px -3px -3px}
    /* Duas por linha; o atalho que sobra sozinho ocupa a linha toda (conversa a dois: só
       "Denunciar a sala" ficava pela metade e quebrava em duas linhas, 2026-10-16). */
    .privada-perfil-sheet .privada-atalhos-movel{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-bottom:10px;
    }
    .privada-perfil-sheet .privada-atalhos-movel > button{flex:1 1 calc(50% - 4px);min-width:0}

    /* ---------- rodapé: uma pílula, colada no limite do celular ---------- */
    html body.sala-privada .privada-chat-footer,
    html body.pagina-sala.sala-privada .privada-chat-footer{
        padding:0!important;
        margin:0!important;
        border:0!important;
        border-radius:0!important;
        background:rgba(6,12,6,.96)!important;
        box-shadow:none!important;
    }
    html body.sala-privada .form-chat-privada,
    html body.sala-privada .form-chat-privada:focus-within{
        display:flex!important;
        align-items:var(--alinhar-composer,center)!important;
        gap:8px!important;
        margin:0!important;
        /* Embaixo sem folga: a pílula encosta no fim da tela, como no WhatsApp (2026-10-06). */
        padding:6px 8px env(safe-area-inset-bottom,0px)!important;
        background:transparent!important;
        border:0!important;
        box-shadow:none!important;
        border-radius:0!important;
    }
    html body.sala-privada .form-chat-privada .privada-message-pill{
        display:flex!important;
        flex:1 1 auto!important;
        align-items:var(--alinhar-composer,center)!important;
        gap:2px!important;
        min-width:0!important;
        min-height:44px!important;
        padding:0 4px!important;
        border-radius:var(--raio-pilula,999px)!important;
        background:rgba(3,12,7,.92)!important;
        border:1px solid rgba(199,165,90,.6)!important;
        box-shadow:inset 0 1px 4px rgba(0,0,0,.38)!important;
    }
    /* o campo de texto NÃO é outra caixa: sem borda, sem fundo, dentro da pílula */
    html body.sala-privada .form-chat-privada .privada-message-pill :is(input,textarea),
    html body.sala-privada .form-chat-privada .privada-message-pill :is(input,textarea):focus,
    html body.sala-privada .form-chat-privada .privada-message-pill :is(input,textarea):focus-visible{
        flex:1 1 auto!important;
        min-width:0!important;
        width:auto!important;
        height:var(--altura-campo,40px)!important;
        margin:0!important;
        padding:9px 6px!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        outline:none!important;
        font-size:16px!important;
    }
    /* Carita, câmera e clipe: o desenho continua do mesmo tamanho; a área de toque chega a 44px. */
    html body.sala-privada .form-chat-privada .privada-message-pill .privada-icon-btn::before{content:"";position:absolute;inset:-3px -6px}
    /* Câmera e clipe ficam colados (2px): cada um cresce para o seu lado, sem roubar o toque do outro. */
    html body.sala-privada .form-chat-privada .privada-message-pill #privada-tirar-foto::before{inset:-3px -1px -3px -11px}
    html body.sala-privada .form-chat-privada .privada-message-pill #privada-abrir-ferramentas::before{inset:-3px -11px -3px -1px}
    html body.sala-privada .form-chat-privada .privada-message-pill .privada-icon-btn{
        position:relative;
        flex:none!important;
        width:38px!important;
        height:38px!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        background:transparent!important;
        box-shadow:none!important;
    }
    html body.sala-privada .form-chat-privada .boton-voz-msg,
    html body.sala-privada .form-chat-privada .boton-enviar-chat{
        flex:none!important;
        width:46px!important;
        height:46px!important;
        min-width:46px!important;
        margin:0!important;
        padding:0!important;
        border-radius:50%!important;
    }
    /* bandeja de ferramentas aberta pelo clipe */
    html body.sala-privada .privada-composer-tools.privada-tools-abertas:not([hidden]){
        display:flex!important;
        justify-content:space-around!important;
        gap:8px!important;
        padding:8px 12px!important;
        margin:0!important;
        border-top:1px solid rgba(199,165,90,.25)!important;
        overflow:visible!important;
    }
}

/* a bandeja fecha de verdade quando está [hidden] (as regras antigas forçavam display:flex) */
html body.sala-privada .privada-composer-tools[hidden],
html body.pagina-sala.sala-privada .privada-composer-tools[hidden]{display:none!important}

/* O campo de texto é só texto dentro da pílula (nada de segunda caixa): reinicia tudo e devolve só o essencial. */
@media (max-width:820px){
    html body.sala-privada .form-chat-privada .privada-message-pill :is(input,textarea)#privada-mensaje-chat,
    html body.sala-privada .form-chat-privada .privada-message-pill :is(input,textarea)#privada-mensaje-chat:focus,
    html body.sala-privada .form-chat-privada .privada-message-pill :is(input,textarea)#privada-mensaje-chat:focus-visible{
        box-sizing:border-box!important;
        flex:1 1 auto!important;
        min-width:0!important;
        /* Bloco 4: o campo cresce até 6 linhas (a altura vem de --altura-campo, posta pelo script). */
        height:var(--altura-campo,40px)!important;
        padding:9px 6px!important;
        color:#f4fffc!important;
        line-height:22px!important;
        font-family:inherit!important;
        caret-color:#8cff5a!important;
        resize:none;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-width:none;
    }
    html body.sala-privada .form-chat-privada .privada-message-pill :is(input,textarea)#privada-mensaje-chat::placeholder{
        color:rgba(244,255,252,.6)!important;
        opacity:1!important;
    }
}

/* ---------- Adicionar pessoa (janela) ---------- */
#privada-adicionar-busca{
    width:100%;
    box-sizing:border-box;
    height:44px;
    padding:0 14px;
    margin:2px 0 10px;
    border-radius:12px;
    border:1px solid rgba(199,165,90,.55);
    background:rgba(3,12,7,.85);
    color:#f4fffc;
    font-size:16px;
}
#privada-adicionar-busca::placeholder{color:rgba(244,255,252,.55)}
#privada-adicionar-lista{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
#privada-adicionar-lista .privada-membros-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
#privada-adicionar-lista .privada-membros-item > span{flex:1 1 auto;font-weight:700}
#privada-adicionar-lista .privada-membros-item > small{flex:1 1 100%;order:3;opacity:.7}
.privada-adicionar-botao{
    background:linear-gradient(160deg,#6ad61a,#3f9a0a)!important;
    color:#06120a!important;
    border:0!important;
    font-weight:800!important;
}
.privada-adicionar-botao:disabled{opacity:.6;background:rgba(255,255,255,.14)!important;color:#fff!important}

/* quem não administra a sala não vê o botão Adicionar (o atributo hidden vence o display do botão) */
html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora[hidden],
html body.sala-privada #privada-abrir-convite-fora[hidden],
html body.sala-privada #privada-abrir-adicionar[hidden]{display:none!important}

/* ---------- mensagens: cada um do seu lado, letras alinhadas, ✓✓ sem pisar na hora ----------
   Mensagem própria vai à direita; a dos outros à esquerda (antes todas herdavam texto à direita). */
html body.pagina-sala.sala-privada .semi-lista-mensagens article{justify-self:start}
html body.pagina-sala.sala-privada .semi-lista-mensagens article.is-self{justify-self:end}
html body.pagina-sala.sala-privada .semi-lista-mensagens article:not(.is-self) > div,
html body.pagina-sala.sala-privada .semi-lista-mensagens article:not(.is-self) > div > b,
html body.pagina-sala.sala-privada .semi-lista-mensagens article:not(.is-self) > div > p{text-align:left!important}
html body.pagina-sala.sala-privada .semi-lista-mensagens article:not(.is-self) > div > small{margin-left:auto!important}
html body.pagina-sala.sala-privada .semi-lista-mensagens article[data-gaba3-msg-own="1"]{padding-right:30px!important}

/* ---------- escritorio: o chat nunca passa por baixo da barra de avatares ----------
   A fileira da grade media 12 px a mais que o espaço útil (o relleno de cima) e empurrava a pílula para baixo da barra. */
@media (min-width:821px){
    html body.pagina-sala.sala-privada main.privada-aplicacion.layout-una-pantalla{
        grid-template-rows:minmax(0,1fr)!important;
    }
    html body.pagina-sala.sala-privada main.privada-aplicacion.layout-una-pantalla > #privada-chat-sala{
        height:auto!important;
        max-height:100%!important;
        align-self:stretch!important;
    }
}

/* ---------- sala temporária (celular): o cronômetro não espreme mais o título ----------
   Na linha fina do cabeçalho não sobrava lugar: o título virava "A". O relógio passa a flutuar logo abaixo do cabeçalho. */
@media (max-width:820px){
    html body.pagina-sala.sala-privada .cabecera-sala #privada-cronometro{
        position:absolute!important;
        top:60px!important;
        left:50%!important;
        transform:translateX(-50%)!important;
        z-index:30!important;
        margin:0!important;
        flex:none!important;
        box-shadow:0 4px 14px rgba(0,0,0,.45);
    }
}

/* ---------- "Celebrar" e "Música" só na sala TEMPORÁRIA (pedido do dono) ----------
   Na sala privada eles nem funcionavam (os efeitos só ligam na sala de evento).
   privateEvent.js põe .sala-de-evento no <body> quando a sala é temporária. */
html body.pagina-sala.sala-privada:not(.sala-de-evento) #privada-btn-celebrar,
html body.pagina-sala.sala-privada:not(.sala-de-evento) #privada-btn-musica,
html body.pagina-sala.sala-privada:not(.sala-de-evento) [data-atalho="privada-btn-celebrar"],
html body.pagina-sala.sala-privada:not(.sala-de-evento) [data-atalho="privada-btn-musica"]{
    display:none!important;
}

/* ---------- madeira real nos painéis pequenos da sala privada/temporal ----------
   Menu ☰, Adicionar, Convidar, Participantes, Sala temporária, etc.: antes verde-preto liso ("esfumaçado").
   Agora textura de madeira escura com só um véu de verniz, e botões/listas como fichas de madeira. */
html body.pagina-sala.sala-privada dialog,
html body.pagina-sala.sala-privada .privada-painel-convites,
html body.pagina-sala.sala-privada #privada-online-sheet{
    background:
        linear-gradient(160deg,rgba(40,20,8,.34),rgba(14,7,3,.44)),
        url("../../../assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/cover!important;
    border:1px solid rgba(199,165,90,.45)!important;
}
html body.pagina-sala.sala-privada dialog::backdrop{background:rgba(10,6,3,.72)}
html body.pagina-sala.sala-privada dialog .boton-secundario,
html body.pagina-sala.sala-privada dialog .privada-membros-item,
html body.pagina-sala.sala-privada dialog .privada-atalhos-movel button,
html body.pagina-sala.sala-privada .privada-painel-convites .boton-secundario{
    background:
        linear-gradient(180deg,rgba(255,210,140,.05) 0%,rgba(0,0,0,.14) 100%),
        url("../../../assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/190px auto!important;
    border:1px solid rgba(199,165,90,.38)!important;
    color:#f4ead8!important;
}
html body.pagina-sala.sala-privada dialog input,
html body.pagina-sala.sala-privada dialog select,
html body.pagina-sala.sala-privada dialog textarea{
    background:rgba(24,12,5,.78)!important;
    border:1px solid rgba(199,165,90,.35)!important;
    color:#f4ead8!important;
}
html body.pagina-sala.sala-privada .privada-painel-convites input,
html body.pagina-sala.sala-privada .privada-painel-convites select,
html body.pagina-sala.sala-privada .privada-painel-convites textarea{
    background:rgba(24,12,5,.78)!important;
    border:1px solid rgba(199,165,90,.35)!important;
    color:#f4ead8!important;
}

/* (O botão "↓ Nova mensagem" agora fica no fluxo acima da barra de escrever e já não cobre o
   aviso da gravação; a regra que o subia 124 px saiu — etapa 1, 2026-10-12.) */

/* ---------- cabeçalho: Adicionar e contadores sem bola nem caixa ----------
   Regra do dono: ícone sozinho, cor pela própria linha (currentColor). O botão
   Adicionar tinha um círculo verde cheio; os números "online" e "no grupo" eram
   dois círculos sobrepostos. Agora: ícone de pessoa + "1/2" em texto. */
html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora{
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#9be05a!important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora:hover,
html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora.activo{color:#c8ff8a!important}
html body.pagina-sala.sala-privada .cabecera-sala #privada-abrir-convite-fora svg *{fill:none!important}
html body.pagina-sala.sala-privada .cabecera-sala .sala-member-badges{
    display:inline-flex!important;
    align-items:center!important;
    gap:3px!important;
    height:40px!important;
    padding:0 2px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#f4ead8!important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.65));
}
html body.pagina-sala.sala-privada .cabecera-sala .sala-member-badges-icone{
    display:inline-flex;
    width:18px;
    height:18px;
    color:#9be05a;
}
html body.pagina-sala.sala-privada .cabecera-sala .sala-member-badges-icone svg{width:18px;height:18px}
html body.pagina-sala.sala-privada .cabecera-sala .sala-member-badge{
    display:inline!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    inline-size:auto!important;
    block-size:auto!important;
    aspect-ratio:auto!important;
    flex:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:0!important;
}
html body.pagina-sala.sala-privada .cabecera-sala .sala-member-badge--online{color:#9be05a!important}
html body.pagina-sala.sala-privada .cabecera-sala .sala-member-badge--total{color:#d9cdb6!important}
html body.pagina-sala.sala-privada .cabecera-sala .sala-member-badge--total::before{
    content:"/";
    margin:0 2px 0 1px;
    font-weight:600;
    opacity:.7;
}

/* Ícones de linha que substituíram emojis (cadeado do portão, nota da música). */
html body.pagina-sala.sala-privada .sala-acesso-seguro > [data-morph-icone]{display:inline-grid;margin:0 auto 14px}
html body.pagina-sala.sala-privada .sala-acesso-seguro > [data-morph-icone] svg{width:40px;height:40px}
.privada-icone-nota{display:inline-grid;place-items:center;line-height:1}
.privada-icone-nota svg{width:18px;height:18px}
.privada-atalhos-movel [data-morph-icone],
.privada-atalhos-movel .privada-icone-nota{vertical-align:-3px}
/* Sem acesso (portão do convite) não há grupo para contar: sem "1/0" no cabeçalho. */
html body.pagina-sala.sala-privada.privada-bloqueado .cabecera-sala .sala-online-cluster{display:none!important}

/* ---------- Pessoas (simplificação das salas, 2026-10-08) ----------
   Um só ícone para Adicionar pessoa + Pedidos de contato + Participantes.
   O número de pedidos fica solto ao lado do ícone (sem bola nem caixa). */
html body.pagina-sala.sala-privada #privada-abrir-convite-fora{position:relative}
/* 20px no computador; no celular o bloco de cima deixa 22px. */
html body.pagina-sala.sala-privada #privada-abrir-convite-fora [data-morph-icone]{display:inline-grid;width:20px;height:20px}
html body.pagina-sala.sala-privada #privada-abrir-convite-fora .privada-pessoas-contador{position:absolute;top:2px;right:-2px;padding:0;border:0;background:none;color:#ffd166;font-size:11px;font-weight:900;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85))}
html body.pagina-sala.sala-privada #privada-abrir-convite-fora .privada-pessoas-contador[hidden]{display:none!important}

/* Dono não denuncia a própria sala: cabeçalho e atalho do menu ☰. */
html body.pagina-sala.sala-privada #privada-report[hidden],
html body.pagina-sala.sala-privada [data-atalho="privada-report"][hidden]{display:none!important}

/* Menu ☰: rótulos pequenos Sala / Conversa / Conta. */
.privada-perfil-sheet .privada-sheet-grupo{display:block;margin:6px 2px -4px;color:#d9bf7f;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.privada-perfil-sheet .privada-sheet-grupo[data-grupo="sala"]{margin-top:0}
.privada-perfil-sheet .privada-sheet-grupo[hidden]{display:none!important}

/* Grupo como no WhatsApp (2026-10-09): selo de cargo em texto (sem bola) e linha do sistema. */
#privada-membros-lista .privada-membros-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
#privada-membros-lista .privada-membros-item > span{flex:1 1 auto;font-weight:700;overflow-wrap:anywhere;min-width:0}
.privada-membros-selo{color:#d9bf7f;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
#privada-membros-lista .privada-membros-ultima-conexao{flex:1 1 100%;opacity:.7}
.privada-linha-sistema{align-self:center;max-width:min(92%,520px);margin:6px auto;padding:4px 12px;border-top:1px solid rgba(199,165,90,.35);border-bottom:1px solid rgba(199,165,90,.35);color:#e9d9b4;font-size:12px;text-align:center;overflow-wrap:anywhere;background:transparent}

/* QA 2026-10-09: explicação do "toque de novo" (Sair do grupo / Sair e eliminar) dentro
   do próprio menu ☰, logo abaixo do botão — antes ia para a faixa de status, escondida
   pelo fundo escuro do menu. Plaquinha de madeira, letra legível. */
.privada-perfil-sheet .privada-sheet-confirma{margin:-2px 0 4px;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,#5a2d12,#45220e);border:1px solid rgba(255,214,150,.35);color:#fbeed6;font:500 14px/1.4 Inter,system-ui,sans-serif;text-align:left;overflow-wrap:anywhere}
.privada-perfil-sheet .privada-sheet-confirma[hidden]{display:none!important}
/* "Tornar administrador" não é perigoso: tom de madeira dourada, não o vermelho.
   O vermelho fica para "Remover do grupo" e "Remover administrador". */
.privada-membros-remover.privada-membros-tornar{color:#2a1608;background:#d9bf7f}
.privada-membros-remover.privada-membros-tornar:hover,
.privada-membros-remover.privada-membros-tornar:focus-visible{background:#e6cf94}