/* =============================================================================
   TIMELINE  ·  aparência
   =============================================================================

   Tudo que a timeline desenha na tela: a postagem e o que existe dentro dela,
   as reações, os comentários, o cartão de link, a mídia, a área de escrever, o
   visualizador em tela cheia, a grade do perfil e as listas de grupos e amigos.

   A regra do que entra aqui é uma só: SE INTERAGE ENTRE USUÁRIOS, É TIMELINE.
   Cabeçalho, janelas de conta, tema e o botão de instalar ficam no liket.css —
   aquilo é o app em volta, não a conversa entre as pessoas.

   Esta folha veio inteira do liket.css, sem reescrita: o visual é o mesmo que
   já estava aprovado e testado. O que mudou foi só o endereço.

   Carregada DEPOIS do liket.css (ver index.php), então as variáveis de tema
   (--pri, --border, --panel…) já existem quando estas regras são lidas.
   ============================================================================= */

        /* ===== SOCIAL PANEL (Amigos & Grupos) ===== */
        .social-panel {
            position: fixed; width: 340px; background: var(--card-bg);
            box-shadow: 0 10px 25px var(--card-shadow); z-index: 1050;
            border-radius: 12px; padding: 0; opacity: 0; visibility: hidden;
            top: 60px; left: 15px; max-height: 75vh; overflow: hidden;
            transition: opacity .25s, visibility .25s, transform .25s;
            transform: translateY(-8px);
            display: flex; flex-direction: column;
        }
        .social-panel.active { opacity: 1; visibility: visible; transform: translateY(0); }
        .social-panel-header {
            padding: 14px 18px; font-weight: 700; font-size: 1rem; color: var(--text);
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
        }
        .social-tabs {
            display: flex; border-bottom: 1.5px solid var(--border-color); flex-shrink: 0;
        }
        .social-tab {
            flex: 1; padding: 10px 6px; font-size: .82rem; font-weight: 700;
            background: none; border: none; cursor: pointer; color: var(--muted);
            border-bottom: 2.5px solid transparent; transition: all .2s;
            font-family: inherit; position: relative;
        }
        .social-tab:hover { color: var(--text); background: rgba(0,0,0,.02); }
        .social-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
        .tab-badge {
            position: absolute; top: 5px; right: 8px; min-width: 16px; height: 16px;
            background: var(--accent); border-radius: 10px; font-size: .6rem;
            font-weight: 800; color: #fff; display: inline-flex; align-items: center;
            justify-content: center; padding: 0 4px; line-height: 1;
        }
        .social-tab-content { display: none; overflow-y: auto; flex: 1; padding: 10px 0; }
        .social-tab-content.active { display: block; }

        /* ===== VISÃO AMIGOS & GRUPOS (na área principal, no lugar da timeline) ===== */
        /* #social-view fica escondida; a classe view-social no body alterna timeline ⇄ lista */
        #social-view { display: none; }
        body.view-social .chat-wrapper:not(#social-view) { display: none; }
        body.view-social #social-view { display: flex; }
        body.view-social .send-area { display: none !important; }
        /* Feed público (nenhuma outra tela na frente) = só foto e vídeo, como
           Instagram/TikTok: sem caixa de texto, emoji nem áudio (Alex, 2026-10-03). */
        /* Lá há um botão só, "📎 Postar": escolheu, já vai (sem prévia nem Enviar). */
        body:not(.view-group):not(.view-social):not(.view-perfil) :is(.media-btns-row, #message, #send-btn, #emoji-painel, #file-preview) { display: none !important; }
        #btn-postar { display: none; }
        body:not(.view-group):not(.view-social):not(.view-perfil) #btn-postar {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            flex: 1; width: auto; height: 44px; padding: 0 18px; border-radius: 12px;
            font-family: inherit; font-weight: 700; font-size: .95rem;
        }
        #btn-postar svg { width: 20px; height: 20px; }
        /* ▶ sobre o vídeo que acabou (conversa e grupo não repetem). */
        .video-denovo {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(4px);
            box-shadow: 0 4px 16px rgb(0 0 0 / .3);
        }
        .video-denovo[hidden] { display: none; }
        .video-denovo svg { width: 24px; height: 24px; margin-left: 3px; }
        /* Conversas e grupos: o mesmo 📎 no lugar dos botões de imagem e vídeo,
           só o ícone; o resto da barra continua igual (Alex, 2026-10-03). */
        body.view-group :is(#btn-image, #btn-video) { display: none !important; }
        body.view-group #btn-postar { display: inline-flex; align-items: center; justify-content: center; }
        body.view-group #btn-postar span { display: none; }

        /* ===== TIMELINE DE GRUPO (chat próprio de um grupo aberto) ===== */
        #group-view { display: none; }
        body.view-group .chat-wrapper:not(#group-view) { display: none; }
        body.view-group #group-view { display: flex; }


        /* ===== GRADE DO PERFIL — três postagens por linha =====
           O corpo do perfil é um índice, não uma timeline: mostra o que a
           pessoa postou de relance, três por linha, e o toque leva ao conteúdo.

           As células são as MESMAS postagens que as timelines desenham (o
           appendMsg de sempre, com id, autor, slug e endereço da mídia) — a
           classe .grade só muda a forma. É isso que faz segurar 2 segundos,
           abrir em tela cheia, reagir, comentar e apagar continuarem valendo
           aqui sem uma segunda implementação.

           Todas as regras abaixo passam por #perfil-posts de propósito: o id
           vence, sem precisar de !important, as regras de tamanho de mídia da
           timeline (que chegam a sete classes encadeadas). */
        #perfil-posts.perfil-grade {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 3px; padding: 3px; align-content: start;
            /* start, nao stretch: a celula tem que valer o proprio quadrado
               (aspect-ratio), e nao a altura da linha inteira. */
            align-items: start;
        }
        /* "Carregando…" e o aviso de perfil vazio atravessam a linha. */
        #perfil-posts.perfil-grade > .social-empty { grid-column: 1 / -1; }

        /* A célula: um quadrado, sem enfeite de balão de conversa. */
        #perfil-posts .msg-row.grade {
            display: block; position: relative; overflow: hidden; cursor: pointer;
            width: 100%; max-width: none; min-width: 0; aspect-ratio: 1 / 1;
            margin: 0; padding: 0; border-radius: 7px;
            background: var(--comment-bg);
            animation: none;
        }
        /* Nick, hora e a barra de ações são da timeline, não do índice. Elas
           continuam no HTML: é de lá que "Comentar" e "Reagir" saem quando a
           célula se abre (ver o remove('grade') nas opções da postagem). */
        #perfil-posts .msg-row.grade .msg-nick,
        #perfil-posts .msg-row.grade .msg-time,
        #perfil-posts .msg-row.grade .reaction-bar,
        #perfil-posts .msg-row.grade .comment-list,
        #perfil-posts .msg-row.grade .media-time-overlay { display: none; }

        #perfil-posts .msg-row.grade .msg-bubble {
            width: 100%; height: 100%; max-width: none;
            margin: 0; padding: 0; border: 0; border-radius: 0;
            background: transparent; box-shadow: none;
        }
        #perfil-posts .msg-row.grade .media-wrap { width: 100%; height: 100%; }
        #perfil-posts .msg-row.grade .media-img,
        #perfil-posts .msg-row.grade .media-video {
            display: block; width: 100%; height: 100%;
            min-height: 0; max-height: none; aspect-ratio: auto;
            object-fit: cover; border-radius: 0;
        }
        /* Legenda de foto/vídeo não cabe num quadrado desse tamanho. */
        #perfil-posts .msg-row.grade .msg-text { display: none; }

        /* O vídeo ganha um selo no canto: parado, ele é indistinguível de uma
           foto. Áudio e texto não aparecem no perfil (ver o filtro do servidor,
           LIKET_SQL_PERFIL_VISUAL), então a grade só tem esses dois tipos. */
        #perfil-posts .msg-row.grade-video::after {
            content: '\25B6'; color: #fff;
            position: absolute; top: 5px; right: 7px; font-size: .8rem;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
        }

        /* O ✕ de apagar, no canto oposto ao selo de vídeo (que mora no canto
           superior direito) — os dois aparecem na mesma célula e não podem
           disputar o mesmo lugar. Só existe onde a pessoa alcança a postagem;
           quem decide é o JS, em celulaDaGrade. */
        #perfil-posts .msg-row.grade .grade-apagar {
            position:absolute; top:4px; left:4px; z-index:2;
            width:24px; height:24px; padding:0; border:none; border-radius:50%;
            background:rgba(0,0,0,.5); color:#fff; font-size:.72rem; line-height:1;
            display:flex; align-items:center; justify-content:center; cursor:pointer;
        }
        #perfil-posts .msg-row.grade .grade-apagar:hover { background:rgba(220,38,38,.92); }
        /* Célula aberta (ver a regra logo abaixo) volta a ser o cartão inteiro,
           e lá quem apaga é a folha de segurar 2 segundos — não este atalho,
           que ficaria solto no meio do cartão. */
        #perfil-posts .msg-row:not(.grade) .grade-apagar { display:none; }

        /* Célula aberta: "Comentar" e "Reagir" tiram o .grade e a postagem volta
           a ser o cartão inteiro das timelines, atravessando as três colunas —
           é onde a barra de ações e a caixa de comentário cabem. */
        #perfil-posts.perfil-grade > .msg-row:not(.grade) {
            grid-column: 1 / -1; max-width: none; width: 100%;
        }

        /* Em tela estreita três colunas continuam sendo três — é o que a grade
           é. Só o respiro entre elas encolhe. */
        @media (max-width: 420px) {
            #perfil-posts.perfil-grade { gap: 2px; padding: 2px; }
            #perfil-posts .msg-row.grade { border-radius: 5px; }
        }
        /* Luz de cima à esquerda, como nos outros programas do Alex (17/10/2026): o mais
           claro no canto de cima à esquerda; verde para verde mais claro, sem branco. */
        :root { --luz-topo: linear-gradient(135deg, hsl(178, 62%, 91%), hsl(178, 58%, 82%)); }
        .social-view-top {
            display: flex; align-items: center; gap: 8px; justify-content: space-between;
            padding: 10px 12px; border-bottom: 1.5px solid var(--border);
            background: var(--luz-topo);
        }
        .social-back-btn {
            background: transparent; border: none; cursor: pointer; font-family: inherit;
            font-size: .82rem; font-weight: 800; color: var(--pri-dark);
            padding: 6px 8px; border-radius: 8px; transition: background .2s;
        }
        .social-back-btn:hover { background: rgba(0,0,0,.06); }
        .social-view-label {
            font-size: .86rem; font-weight: 800; color: var(--pri-dark);
            padding: 6px 8px; user-select: none;
        }
        .create-toggle-btn {
            background: var(--pri); border: none; cursor: pointer; font-family: inherit;
            font-size: .82rem; font-weight: 800; color: #fff;
            padding: 7px 14px; border-radius: 20px; transition: background .2s, transform .12s;
        }
        .create-toggle-btn:hover  { background: var(--pri-dark); }
        .create-toggle-btn:active { transform: scale(.96); }
        .create-accordion { display: none; flex-direction: column; gap: 6px; padding: 10px 12px;
            border-bottom: 1px solid var(--border); background: var(--comment-bg); }
        /* 20/10: o acordeão virou o menu do ⋮ — abre por cima da lista, no canto direito */
        #social-view { position: relative; }
        .social-acoes { display: inline-flex; align-items: center; gap: 2px; }
        #create-accordion {
            position: absolute; right: 8px; top: 52px; z-index: 30; min-width: 240px;
            border: 1px solid var(--border); border-radius: 14px; background: var(--panel);
            box-shadow: 0 10px 30px rgba(0,0,0,.18);
        }
        /* cartão de boas-vindas no topo dos Lembretes */
        .lembretes-intro {
            margin: 12px; padding: 14px 16px; border-radius: 14px;
            background: linear-gradient(135deg, var(--comment-bg), var(--panel));
            border: 1px solid var(--border); font-size: .9rem; line-height: 1.55;
        }
        .lembretes-intro b { color: var(--pri-dark); }
        .create-accordion.open { display: flex; animation: slideIn .16s ease; }
        .create-opt {
            text-align: left; background: var(--panel); border: 1.5px solid var(--border);
            border-radius: 10px; padding: 11px 14px; cursor: pointer; font-family: inherit;
            font-size: .88rem; font-weight: 700; color: var(--text); transition: all .2s;
        }
        .create-opt:hover { background: var(--pri-pale); border-color: var(--pri); color: var(--pri-dark); }
        .social-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; }
        .social-list { padding: 0; }
        .social-empty { padding: 30px 20px; text-align: center; color: #999; font-size: .88rem; }
        .social-add-btn {
            display: flex; align-items: center; gap: 6px; width: calc(100% - 28px);
            margin: 0 14px 10px; padding: 10px 14px; border: 1.5px dashed var(--border);
            border-radius: 10px; background: transparent; color: var(--primary);
            font-size: .88rem; font-weight: 700; cursor: pointer; transition: all .2s;
            font-family: inherit;
        }
        .social-add-btn:hover { background: var(--pri-pale); border-style: solid; }

        /* Friend / Group items */
        .social-item {
            padding: 10px 18px; display: flex; align-items: center; gap: 12px;
            cursor: pointer; transition: background .2s;
            border-bottom: 1px solid rgba(0,0,0,.04);
        }
        .social-item:hover { background: rgba(0,0,0,.03); }
        .social-item:last-child { border-bottom: none; }
        .social-item-avatar {
            width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: 1rem; color: #fff;
        }
        .social-item-avatar { overflow: hidden; }
        .msg-nick-foto { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
        .social-item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .social-item-info { flex: 1; min-width: 0; }
        .social-item-name { font-weight: 700; font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .social-item-sub { font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
        .social-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
        .social-item-btn {
            width: 30px; height: 30px; border-radius: 50%; border: none;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; font-size: .9rem; transition: all .2s; background: transparent;
        }
        .social-item-btn:hover { background: rgba(0,0,0,.06); }
        .social-item-btn.danger:hover { background: hsla(0,68%,52%,.1); color: var(--danger); }

        /* Grupo member badges */
        .member-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--comment-bg); border: 1px solid var(--border-color);
            border-radius: 20px; padding: 5px 12px 5px 5px; font-size: .82rem;
            font-weight: 600; color: var(--text); margin: 3px;
        }
        .member-badge-avatar {
            width: 22px; height: 22px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .6rem; font-weight: 800; color: #fff;
        }
        .member-badge-remove {
            margin-left: 4px; cursor: pointer; color: #999;
            font-size: .75rem; transition: color .2s;
        }
        .member-badge-remove:hover { color: var(--danger); }

        .modal-section-title {
            font-size: .78rem; font-weight: 800; color: var(--muted);
            text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
        }
        .btn-danger {
            background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
            padding: 10px 20px; border-radius: 25px; cursor: pointer;
            font-weight: 700; font-size: .9rem; transition: all .2s; font-family: inherit;
        }
        .btn-danger:hover { background: hsla(0,68%,52%,.08); }

        /* Notif items inside social panel */
        .notif-item {
            padding: 10px 18px; border-bottom: 1px solid rgba(0,0,0,.04);
            display: flex; gap: 10px; align-items: flex-start;
            cursor: pointer; transition: background .2s;
        }
        .notif-item:hover { background: rgba(0,0,0,.03); }
        .notif-item.unread { background: rgba(0,90,110,.04); }
        .notif-icon { font-size: 1.1rem; flex-shrink: 0; }
        .notif-content { flex-grow: 1; min-width: 0; }
        .notif-text { font-size: .85rem; color: var(--text); line-height: 1.3; }
        .notif-time { font-size: .72rem; color: #999; margin-top: 2px; }
        .notif-clear-btn {
            font-size: .78rem; color: var(--primary); cursor: pointer;
            font-weight: 600; border: none; background: none;
        }
        .notif-clear-btn:hover { text-decoration: underline; }


        /* ===== CONVERSA ITEM (sidebar) ===== */
        .menu-section-title {
            padding: 12px 20px 8px; font-size: .85rem; color: #888;
            font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
            background: var(--bg); position: sticky; top: 0; z-index: 10;
        }
        .conversa-item {
            padding: 12px 15px; border-bottom: 1px solid rgba(0,0,0,.05);
            cursor: pointer; transition: background .2s;
            display: flex; gap: 12px; align-items: center;
        }
        .conversa-item:hover { background: rgba(0,0,0,.03); }
        .conversa-avatar {
            width: 45px; height: 45px; border-radius: 50%;
            background: var(--primary); color: #fff;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
        }
        .conversa-info { flex-grow: 1; min-width: 0; }
        .conversa-nome { font-weight: 600; font-size: .95rem; color: var(--text); }
        .conversa-preview { font-size: .82rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


        /* ===== CHAT WRAPPER ===== */
        .chat-wrapper { position:relative; background:var(--panel); border:1.5px solid var(--border); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; display:flex; flex-direction:column; flex:1; min-height:0; }

        /* ===== (Sem overlay customizado de volume — usando controles nativos do <video>) ===== */
        .chat-header { background:var(--luz-topo); border-bottom:1.5px solid var(--border); padding:10px 16px; font-size:.72rem; font-weight:800; color:var(--pri-dark); text-transform:uppercase; letter-spacing:.8px; display:flex; align-items:center; gap:8px; }

        /* ===== MESSAGES ===== */
        /* .timeline-scroll: estilo comum a QUALQUER timeline (feed público,
           timeline de grupo, e futuras) — não fica preso só ao #chat. */
        /* Rolagem SOLTA, sem prender de mídia em mídia: áudio e texto entre dois
           vídeos eram pulados pelo scroll-snap, que só parava em postagem com
           foto ou vídeo. Aqui todas passam igual. */
        .timeline-scroll { flex:1; min-height:0; height:auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; scroll-behavior:smooth; scroll-padding-top:16px; }
        .timeline-scroll::-webkit-scrollbar { width:4px; }
        .timeline-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; }

        .msg-row { display:flex; flex-direction:column; max-width:78%; animation:slideIn .22s ease; }
        @keyframes slideIn { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }
        .msg-row.me     { align-self:flex-end;   align-items:flex-end; }
        .msg-row.peer   { align-self:flex-start;  align-items:flex-start; }
        .msg-row.system { align-self:center; align-items:center; max-width:92%; }
        /* Mensagens com mídia ocupam quase toda a largura (estilo TikTok/feed) */
        .msg-row.has-media { max-width:96%; min-width:300px; width:min(560px, 96%); scroll-margin-top:8px; }

        .msg-nick { font-size:.66rem; font-weight:800; color:var(--muted); margin-bottom:3px; padding:0 4px; }
        .msg-row.me .msg-nick { color:var(--pri-mid); }

        .msg-bubble { padding:9px 14px; border-radius:15px; font-size:.91rem; font-weight:600; line-height:1.5; word-break:break-word; }
        .msg-row.me   .msg-bubble { background:var(--pri); color:#fff; border-bottom-right-radius:4px; box-shadow:0 3px 14px rgba(0,90,110,.28); }
        .msg-row.peer .msg-bubble { background:var(--panel); color:var(--text); border:1.5px solid var(--border); border-bottom-left-radius:4px; }
        .msg-row.system .msg-bubble { background:var(--comment-bg); border:1px solid var(--border); color:var(--muted); font-size:.72rem; font-style:italic; border-radius:30px; padding:4px 14px; }

        /* Bubble com mídia: sem padding interno no topo — mídia vai edge-to-edge */
        .msg-bubble.has-media { padding:0; overflow:hidden; }
        .msg-bubble.has-media .msg-text { padding:8px 14px 10px; }
        /* Texto sozinho sem mídia */
        .msg-bubble.text-only { padding:9px 14px; }

        .msg-time { font-size:.61rem; color:var(--muted); margin-top:3px; padding:0 4px; }
        .msg-row.me .msg-time { color:var(--pri-mid); }
        /* ✓ / ✓✓ / ✓✓ azul da conversa (como no WhatsApp) */
        .recibo { margin-left:4px; font-weight:700; letter-spacing:-3px; padding-right:3px; color:#8a94a6; }
        .recibo.lida { color:#2f9bf0; }
        .media-time-overlay .recibo { color:rgba(255,255,255,.85); }
        .media-time-overlay .recibo.lida { color:#5cc2ff; }

        /* ===== CARTÃO DE LINK =====
           Link do YouTube, Instagram, Facebook ou de qualquer lugar colado no
           texto vira um cartão com miniatura, título e descrição. Mora dentro da
           bolha, embaixo do texto — a postagem continua sendo a postagem, o
           cartão é o que o link mostra. */
        .link-card {
            display:flex; flex-direction:column; margin:8px 0 0;
            border:1.5px solid var(--border); border-radius:12px; overflow:hidden;
            background:var(--panel); color:inherit; text-decoration:none;
            transition:border-color .15s, background .15s;
        }
        .link-card:hover { border-color:var(--pri); background:var(--pri-pale); }
        .msg-row.me .link-card { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
        .msg-row.me .link-card:hover { background:rgba(255,255,255,.22); }
        /* A miniatura é a parte atraente: larga, em cima, no formato de cartão.
           object-fit:cover aqui É proposital — a moldura tem tamanho fixo e a
           imagem que vem de fora pode ter qualquer proporção. */
        .link-card-img { width:100%; aspect-ratio:1.91 / 1; object-fit:cover; display:block; background:var(--comment-bg); }
        .link-card-texto { padding:9px 12px; display:flex; flex-direction:column; gap:3px; min-width:0; }
        .link-card-site {
            font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
            color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
        }
        .msg-row.me .link-card-site { color:rgba(255,255,255,.8); }
        .link-card-titulo {
            font-size:.86rem; font-weight:800; line-height:1.3; overflow:hidden;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
        }
        .link-card-desc {
            font-size:.76rem; font-weight:500; line-height:1.35; color:var(--muted);
            overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
        }
        .msg-row.me .link-card-desc { color:rgba(255,255,255,.85); }
        /* Enquanto o servidor busca. Sem isto o cartão aparecia de repente e
           empurrava a timeline pra baixo depois que a pessoa já estava lendo. */
        .link-card.carregando { min-height:64px; align-items:center; justify-content:center; }
        .link-card.carregando .link-card-texto { color:var(--muted); font-size:.76rem; }
        /* Bolha com midia nao tem respiro nas bordas (a foto vai de ponta a
           ponta), entao o cartao poe o dele — o mesmo do .msg-text ao lado. */
        .msg-bubble.has-media .link-card { margin:0 14px 10px; }
        /* Na grade do perfil a celula e um quadrado de miniatura: cartao de link
           dentro dela nao cabe nem faz sentido. */
        #perfil-posts .msg-row.grade .link-card { display:none; }

        /* ===== REAÇÕES ===== */

        /* Barra de ações do post: ocupa a largura toda e ganha um separador no
           topo, deixando claro onde termina a postagem e começam as ações. */
        .reaction-bar {
            display:flex; align-items:center; gap:8px; flex-wrap:wrap;
            width:100%; align-self:stretch;
            margin-top:8px; padding:8px 2px 0;
            border-top:1px solid var(--border);
            position:relative;
        }
        /* Ordem fixa: primeiro a reação do usuário (gatilho), depois o resumo
           público — igual em posts próprios e de outros. */
        .reaction-trigger {
            border:1.5px solid var(--border); background:var(--panel);
            border-radius:14px; cursor:pointer; line-height:1; min-height:28px;
            font-size:.95rem; padding:2px 10px; transition:background .15s, border-color .15s, transform .1s;
            display:inline-flex; align-items:center; justify-content:center;
        }
        .reaction-trigger:hover  { background:var(--pri-pale); border-color:var(--pri); }
        .reaction-trigger:active { transform:scale(.9); }
        .reaction-trigger.reacted { background:var(--pri-pale); border-color:var(--pri); }
        /* Sem nenhuma reação ainda: o gatilho exibe o rótulo "Reagir". */
        .reaction-trigger.trigger-empty {
            font-size:.72rem; font-weight:700; color:var(--muted);
            padding:3px 12px; letter-spacing:.3px;
        }
        .reaction-summary {
            font-size:.74rem; font-weight:700; color:var(--muted);
            background:var(--comment-bg); border:1px solid var(--border);
            border-radius:12px; padding:0 11px; min-height:28px; white-space:nowrap;
            display:inline-flex; align-items:center;
            cursor:pointer; user-select:none; transition:border-color .15s, color .15s;
        }
        .reaction-summary:hover { border-color:var(--pri); color:var(--pri); }
        .reaction-summary.open  { border-color:var(--pri); color:var(--pri); }
        /* Botão de remover a própria reação (dentro do seletor) */
        .reaction-remove {
            font-size:1rem !important; color:var(--muted);
            border-left:1px solid var(--border) !important;
            margin-left:3px; padding-left:9px !important;
        }
        .reaction-remove:hover { background:var(--pri-glow); }
        /* Acordeão com a lista de reações por tipo */
        .reaction-breakdown {
            display:none; margin-top:5px; padding:5px;
            background:var(--panel); border:1.5px solid var(--border);
            border-radius:12px; width:max-content; max-width:100%;
            box-shadow:var(--sh-sm);
        }
        .reaction-breakdown.open {
            display:flex; flex-wrap:wrap; gap:5px 7px; align-items:center;
            animation:slideIn .16s ease;
        }
        .reaction-breakdown-item {
            display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
            padding:2px 8px; font-size:.76rem; line-height:1.4;
            background:var(--comment-bg); border:1px solid var(--border); border-radius:10px;
        }
        .reaction-breakdown-item .rb-emoji { font-size:.95rem; }
        .reaction-breakdown-item .rb-label { color:var(--muted); font-weight:700; }
        .reaction-breakdown-item .rb-count { color:var(--pri); font-weight:800; }
        /* Seletor de emojis (abre ao clicar no gatilho) */
        .reaction-picker {
            display:none; align-items:center; gap:2px;
            background:var(--panel); border:1.5px solid var(--border);
            border-radius:22px; padding:4px 8px; box-shadow:0 6px 22px rgba(0,0,0,.18);
            position:absolute; bottom:calc(100% + 6px); left:0; z-index:40;
        }
        .msg-row.me .reaction-picker { left:auto; right:0; }
        .reaction-bar.picker-open .reaction-picker { display:flex; }
        .reaction-opt {
            border:none; background:none; cursor:pointer; font-size:1.4rem;
            line-height:1; padding:3px; border-radius:50%;
            transition:transform .12s ease, background .15s;
        }
        .reaction-opt:hover  { transform:scale(1.35); background:var(--pri-pale); }
        .reaction-opt.active { background:var(--pri-pale); box-shadow:0 0 0 2px var(--pri) inset; }
        /* Anônimo vê os contadores, mas não o gatilho de reagir (gating). */
        body.auth-anonymous .reaction-trigger { display:none; }
        /* Anônimo não tem botões na barra; sem o separador a barra "vazia" some. */
        body.auth-anonymous .reaction-bar { border-top:none; margin-top:4px; padding-top:0; }

        /* Rodapé enxuto (2026-10-01): uma linha pequena, reações à esquerda e o
           V dos comentários à direita. Reagir, Comentar e Compartilhar saem do
           rodapé e moram na folha que abre segurando a postagem. Os botões
           continuam no HTML (o V e a folha usam o clique deles), só escondidos. */
        .reaction-bar {
            margin-top:3px; padding:2px 2px 0; border-top:none;
            gap:6px; flex-wrap:nowrap; min-height:22px;
        }
        .reaction-bar .reaction-trigger,
        .reaction-bar .comment-btn { display:none !important; }
        .reaction-bar .reaction-summary {
            min-height:24px; padding:0 9px; font-size:.76rem; border-radius:12px;
        }
        .postagem-data {
            font-size:.68rem; font-weight:600; color:var(--muted);
            white-space:nowrap; font-variant-numeric:tabular-nums;
        }
        .comentarios-v {
            display:inline-flex; align-items:center; gap:2px;
            border:none; background:transparent; cursor:pointer;
            color:var(--muted); font-size:.74rem; font-weight:700;
            padding:2px 6px; border-radius:12px; min-height:24px;
            transition:background .15s, color .15s;
        }
        .comentarios-v:hover { background:var(--pri-pale); color:var(--pri); }
        .comentarios-v svg { width:18px; height:18px; transition:transform .25s ease; }
        .comentarios-v.aberto { color:var(--pri); }
        .comentarios-v.aberto svg { transform:rotate(180deg); }

        /* Curtida pelo duplo toque na tela cheia: o ❤️ salta onde o dedo tocou e some. */
        .viewer-curtida {
            position:fixed; z-index:50; pointer-events:none;
            font-size:5rem; line-height:1;
            transform:translate(-50%, -50%);
            filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));
            animation:curtidaSalta .8s ease forwards;
        }
        @keyframes curtidaSalta {
            0%   { opacity:0; transform:translate(-50%, -50%) scale(.3); }
            25%  { opacity:1; transform:translate(-50%, -50%) scale(1.15); }
            45%  { transform:translate(-50%, -50%) scale(.95); }
            75%  { opacity:1; transform:translate(-50%, -60%) scale(1); }
            100% { opacity:0; transform:translate(-50%, -90%) scale(.9); }
        }

        /* ===== COMENTÁRIOS ===== */
        /* Grupo "Comentar/Ver comentários" + "Compartilhar", empurrado para a
           direita da barra de ações. O margin-left:auto fica AQUI (no grupo,
           não em cada botão) pra eles sempre quebrarem linha juntos num
           celular estreito, nunca um em cada linha. */
        .post-actions-right { margin-left:auto; display:inline-flex; align-items:center; gap:8px; }
        .comment-btn {
            display:inline-flex; align-items:center; gap:5px; min-height:28px;
            border:1.5px solid var(--border); background:var(--panel);
            border-radius:14px; cursor:pointer; line-height:1;
            font-size:.74rem; font-weight:700; color:var(--muted);
            padding:0 13px; letter-spacing:.2px;
            transition:background .15s, border-color .15s, color .15s;
        }
        .comment-btn:hover { background:var(--pri-pale); border-color:var(--pri); color:var(--pri); }
        /* Anônimo só vê o botão de comentar quando já existe comentário pra ler
           (vira "Ver comentário(s)"); sem nenhum, some — igual ao "Comentar"
           sozinho antes. :not(.share-btn) pra não apagar "Compartilhar" junto
           — ele reaproveita a classe .comment-btn só pelo estilo visual, mas
           deve continuar visível pra anônimo (compartilhar não exige login). */
        body.auth-anonymous .comment-btn:not(.has-comments):not(.share-btn) { display:none; }

        /* Caixa de escrever (acordeão que abre no "Comentar") */
        .comment-compose { display:none; margin-top:8px; width:100%; align-self:stretch; flex-direction:column; gap:6px; }
        .comment-compose.open { display:flex; animation:slideIn .16s ease; }
        .comment-compose textarea {
            width:100%; resize:vertical; min-height:42px; max-height:140px;
            border:1.5px solid var(--border); border-radius:12px; padding:8px 11px;
            font-family:inherit; font-size:.85rem; background:var(--bg); color:var(--text); outline:none;
        }
        .comment-compose textarea:focus { border-color:var(--pri); box-shadow:0 0 0 3px var(--pri-glow); }
        .comment-compose-actions { display:flex; justify-content:flex-end; }
        .comment-send-btn {
            border:none; background:var(--pri); color:#fff; cursor:pointer;
            border-radius:12px; padding:7px 16px; font-weight:700; font-size:.82rem;
            font-family:inherit; transition:opacity .2s;
        }
        .comment-send-btn:hover { opacity:.9; }
        .comment-send-btn:disabled { opacity:.5; cursor:default; }

        /* .comment-btn.has-comments: mesmo botão, agora funcionando como
           "Ver comentário(s) (N)" — cor de destaque igual ao antigo link. */
        .comment-btn.has-comments { color:var(--pri); border-color:var(--pri-pale); }

        /* Lista (acordeão com rolagem + paginação 5 em 5) */
        .comment-list {
            display:none; margin-top:8px; width:100%; align-self:stretch;
            background:var(--panel); border:1.5px solid var(--border);
            border-radius:12px; box-shadow:var(--sh-sm); overflow:hidden;
        }
        .comment-list.open { display:block; animation:slideIn .16s ease; }
        .comment-list-head {
            font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
            color:var(--muted); padding:8px 12px; border-bottom:1px solid var(--border);
            background:var(--comment-bg);
        }
        .comment-scroller { max-height:260px; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:7px; }
        .comment-scroller::-webkit-scrollbar { width:4px; }
        .comment-scroller::-webkit-scrollbar-thumb { background:var(--border); border-radius:8px; }
        .comment-item {
            background:var(--comment-bg); border:1px solid var(--border);
            border-left:3px solid var(--pri); border-radius:10px; padding:7px 11px;
        }
        .comment-item .ci-nick { font-weight:800; font-size:.73rem; color:var(--pri-dark); margin-right:6px; }
        .comment-item .ci-text { font-size:.84rem; color:var(--text); word-break:break-word; line-height:1.4; }
        .comment-item .ci-time { display:block; font-size:.62rem; color:var(--muted); margin-top:3px; }
        .comment-loading { text-align:center; font-size:.72rem; color:var(--muted); padding:8px; }

        /* ===== MEDIA EM BUBBLES — LAYOUT EDGE-TO-EDGE ===== */
        .media-wrap { width:100%; }

        /* Imagens: preenchem toda a largura da bolha — estilo TikTok (verticais grandes) */
        /* PROPORÇÃO ORIGINAL, sempre. Antes a mídia era forçada a 9/16 com
           object-fit:cover — o que enquadrava tudo em pé e CORTAVA as laterais
           de qualquer foto ou vídeo deitado. Uma paisagem virava uma tira do
           meio dela.

           Agora largura e altura são as naturais do arquivo, com teto nas duas:
           cabe na largura da postagem e na altura útil da timeline, encolhendo
           proporcionalmente. Sem corte e sem tarja preta, porque a caixa tem a
           forma do conteúdo em vez de o conteúdo ser espremido numa caixa. */
        .media-img {
            display:block; cursor:pointer; transition:opacity .2s;
            width:auto; height:auto;
            max-width:100%; max-height:var(--media-max, 70vh);
            margin:0 auto; object-fit:contain;
        }
        .media-img:hover { opacity:.92; }
        /* Cantos da imagem acompanham a bolha */
        .msg-bubble.has-media.media-only .media-wrap .media-img {
            border-radius:15px;
        }
        .msg-row.me .msg-bubble.has-media.media-only .media-wrap .media-img {
            border-bottom-right-radius:4px;
        }
        .msg-row.peer .msg-bubble.has-media.media-only .media-wrap .media-img {
            border-bottom-left-radius:4px;
        }
        /* Imagem + texto: imagem com canto reto embaixo */
        .msg-bubble.has-media:not(.media-only) .media-wrap .media-img {
            border-radius:0;
        }

        /* Mesma regra da imagem: o vídeo em pé continua em pé, o deitado
           continua deitado. O fundo preto aparece só nas sobras da .media-wrap
           quando o vídeo é mais estreito que a postagem. */
        .media-video {
            display:block;
            width:auto; height:auto;
            max-width:100%; max-height:var(--media-max, 70vh);
            margin:0 auto; background:#000; object-fit:contain;
        }
        .msg-bubble.has-media.media-only .media-wrap .media-video {
            border-radius:15px;
        }
        .msg-row.me .msg-bubble.has-media.media-only .media-wrap .media-video {
            border-bottom-right-radius:4px;
        }
        .msg-row.peer .msg-bubble.has-media.media-only .media-wrap .media-video {
            border-bottom-left-radius:4px;
        }
        .msg-bubble.has-media:not(.media-only) .media-wrap .media-video {
            border-radius:0;
        }
        /* Limita a altura da mídia ao espaço útil da timeline (feed público OU
           grupo) para que a barra de reações (rodapé) NUNCA fique escondida
           abaixo de um vídeo/imagem alto. --media-max é recalculado em JS
           conforme a altura real da timeline aberta no momento (adjustMediaMax);
           o fallback em vh cobre o intervalo até o JS rodar.
           O min-height é clampado ao próprio --media-max (via min()) para que,
           em telas/janelas baixas, NÃO vença o teto e empurre a barra pra fora
           — esta regra (classe .timeline-scroll + classe de mídia) tem
           prioridade sobre os min-height das classes .media-img/.media-video
           e dos media queries acima. */
        .timeline-scroll .media-video, .timeline-scroll .media-img {
            max-height: var(--media-max, 64vh);
        }

        /* Áudio: player customizado que preenche toda a largura */
        .audio-player {
            display:flex; align-items:center; gap:10px;
            padding:12px 14px; width:100%; min-width:240px;
        }
        .audio-player-btn {
            width:36px; height:36px; border-radius:50%; border:none;
            display:flex; align-items:center; justify-content:center;
            cursor:pointer; flex-shrink:0; transition:transform .12s, background .2s;
        }
        .audio-player-btn:active { transform:scale(.9); }
        .audio-player-btn svg { width:16px; height:16px; }
        /* Cores do player por tipo de mensagem */
        .msg-row.me .audio-player-btn { background:rgba(255,255,255,.22); color:#fff; }
        .msg-row.me .audio-player-btn:hover { background:rgba(255,255,255,.35); }
        .msg-row.peer .audio-player-btn { background:var(--pri-pale); color:var(--pri); }
        .msg-row.peer .audio-player-btn:hover { background:var(--pri-glow); }

        /* "V" ao lado do áudio que abre o texto que veio junto (fechado por padrão) */
        .audio-texto-btn {
            width:26px; height:26px; border-radius:50%; border:none; padding:0;
            display:flex; align-items:center; justify-content:center;
            background:transparent; cursor:pointer; flex-shrink:0;
            transition:transform .25s ease, background .2s;
        }
        .audio-texto-btn svg { width:16px; height:16px; }
        .audio-texto-btn.aberto { transform:rotate(180deg); }
        .msg-row.me .audio-texto-btn { color:rgba(255,255,255,.8); }
        .msg-row.me .audio-texto-btn:hover { background:rgba(255,255,255,.18); }
        .msg-row.peer .audio-texto-btn { color:var(--muted); }
        .msg-row.peer .audio-texto-btn:hover { background:var(--pri-pale); }
        .msg-bubble.has-media .msg-text.msg-text-recolhido { display:none; }
        .msg-bubble.has-media .msg-text.msg-text-recolhido.aberto {
            display:block; animation:textoAbre .22s ease;
        }
        @keyframes textoAbre { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

        .audio-player-track {
            flex:1; display:flex; flex-direction:column; gap:4px; min-width:0;
        }
        .audio-player-bar {
            width:100%; height:5px; border-radius:3px; cursor:pointer;
            appearance:none; -webkit-appearance:none; outline:none; border:none;
        }
        .msg-row.me .audio-player-bar { background:rgba(255,255,255,.2); accent-color:#fff; }
        .msg-row.peer .audio-player-bar { background:var(--border); accent-color:var(--pri); }
        .audio-player-bar::-webkit-slider-thumb {
            -webkit-appearance:none; width:14px; height:14px;
            border-radius:50%; border:none; cursor:pointer;
        }
        .msg-row.me .audio-player-bar::-webkit-slider-thumb { background:#fff; }
        .msg-row.peer .audio-player-bar::-webkit-slider-thumb { background:var(--pri); }
        .audio-player-bar::-moz-range-thumb {
            width:14px; height:14px; border-radius:50%; border:none; cursor:pointer;
        }
        .msg-row.me .audio-player-bar::-moz-range-thumb { background:#fff; }
        .msg-row.peer .audio-player-bar::-moz-range-thumb { background:var(--pri); }

        .audio-player-time {
            font-size:.62rem; font-weight:700;
            font-family:'JetBrains Mono',monospace;
            display:flex; justify-content:space-between;
        }
        .msg-row.me .audio-player-time { color:rgba(255,255,255,.6); }
        .msg-row.peer .audio-player-time { color:var(--muted); }

        /* Waveform decorativa */
        .audio-waveform {
            display:flex; align-items:center; gap:1.5px; height:28px; flex:1; min-width:0;
        }
        .audio-waveform-bar {
            flex:1; min-width:2px; max-width:4px; border-radius:2px;
            transition:height .15s ease, opacity .15s;
        }
        .msg-row.me .audio-waveform-bar { background:rgba(255,255,255,.35); }
        .msg-row.me .audio-waveform-bar.played { background:rgba(255,255,255,.85); }
        .msg-row.peer .audio-waveform-bar { background:var(--border); }
        .msg-row.peer .audio-waveform-bar.played { background:var(--pri); }

        /* Link de arquivo genérico */
        .media-file-link {
            display:flex; align-items:center; gap:10px;
            padding:12px 16px; margin:6px;
            border-radius:10px; text-decoration:none;
            font-size:.84rem; font-weight:700; transition:background .2s;
        }
        .msg-row.me .media-file-link { background:rgba(255,255,255,.15); color:#fff; }
        .msg-row.me .media-file-link:hover { background:rgba(255,255,255,.25); }
        .msg-row.peer .media-file-link { background:rgba(0,90,110,.08); border:1px solid var(--border); color:var(--pri-dark); }
        .msg-row.peer .media-file-link:hover { background:var(--pri-pale); }
        .media-file-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .msg-row.me .media-file-icon { background:rgba(255,255,255,.18); }
        .msg-row.peer .media-file-icon { background:var(--pri-pale); color:var(--pri); }
        .media-file-info { flex:1; min-width:0; }
        .media-file-name { font-weight:700; font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .media-file-size { font-size:.68rem; font-weight:600; opacity:.6; margin-top:1px; }

        /* Timestamp sobre mídia (quando sem texto) */
        .media-time-overlay {
            position:absolute; bottom:6px; right:8px;
            font-size:.58rem; font-weight:700; color:#fff;
            background:rgba(0,0,0,.45); padding:2px 7px;
            border-radius:8px; pointer-events:none;
            font-family:'JetBrains Mono',monospace;
        }
        .media-wrap { position:relative; }

        /* Autofalante pequeno do vídeo no feed — ver miniSom em timeline.js.
           Mesmo estilo do .media-time-overlay (pílula escura sobre a mídia),
           só que clicável e no canto oposto. Invisível por padrão; a classe
           .visivel entra por JS e some sozinha depois de 3s. */
        .mini-som-btn {
            position:absolute; top:8px; left:8px; z-index:3;
            width:30px; height:30px; border-radius:50%; border:none;
            display:flex; align-items:center; justify-content:center;
            font-size:15px; line-height:1;
            background:rgba(0,0,0,.5); color:#fff; cursor:pointer;
            opacity:0; pointer-events:none;
            transition:opacity .25s ease;
        }
        .mini-som-btn.visivel { opacity:1; pointer-events:auto; }

        /* ===== SEND AREA ===== */
        .send-area {
            position: fixed; bottom: 0; left: 0; right: 0;
            width: 100%; max-width: 800px; margin: 0 auto;
            border-top:1.5px solid var(--border);
            padding:10px 12px; background:var(--comment-bg);
            display:flex; flex-direction:column; gap:8px;
            z-index: 50;
            box-shadow: 0 -4px 20px var(--card-shadow);
        }
        .file-preview { display:none; align-items:center; gap:10px; background:var(--panel); border:1.5px solid var(--pri-pale); border-radius:10px; padding:8px 12px; font-size:.8rem; font-weight:700; color:var(--pri-dark); }
    .file-preview.visible { display:flex; }
        .file-preview img, .file-preview video { max-height:56px; max-width:80px; border-radius:6px; object-fit:cover; }
        .file-preview audio { height:32px; flex:1; accent-color:var(--pri); }
        .file-preview-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; color:var(--muted); }
        .file-preview-remove { background:none; border:none; cursor:pointer; color:var(--danger); font-size:1.1rem; line-height:1; padding:2px 4px; border-radius:6px; }
        .file-preview-remove:hover { background:hsla(0,68%,52%,.1); }

        .upload-progress { display:none; height:3px; border-radius:4px; background:var(--border); overflow:hidden; }
        .upload-progress.visible { display:block; }
        .upload-progress-fill { height:100%; width:0%; border-radius:4px; background:var(--pri); transition:width .2s; }

        .input-row { display:flex; gap:8px; align-items:center; }
        #message { flex:1; background:var(--panel); border:1.5px solid var(--border); border-radius:11px; padding:11px 14px; font-family:inherit; font-size:.93rem; font-weight:600; color:var(--text); outline:none; transition:border-color .2s,box-shadow .2s; }
        #message::placeholder { color:var(--muted); font-weight:500; }
        #message:focus { border-color:var(--pri); box-shadow:0 0 0 3px var(--pri-glow); }

        .media-btn { background:var(--panel); border:1.5px solid var(--border); border-radius:10px; padding:9px 10px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all .2s; flex-shrink:0; }
        /* Só com mouse: no celular o hover gruda depois do toque e o botão ficava azul. */
        @media (hover:hover) { .media-btn:hover { background:var(--pri-pale); color:var(--pri); border-color:var(--pri); } }
        .media-btn svg { width:18px; height:18px; }
        #btn-audio.apertado { transform:scale(1.5); background:var(--danger); border-color:var(--danger); color:#fff; transition:transform .15s, background .15s; }
        .media-btn.recording { background:var(--danger); border-color:var(--danger); color:#fff; animation:recPulse 1s ease-in-out infinite; }
        .media-btn.ativo { background:var(--pri-pale); color:var(--pri); border-color:var(--pri); }

        /* ── Painel de emojis (como no WhatsApp, 2026-10-03) ── */
        .emoji-painel { margin-top:8px; border-radius:16px; background:var(--panel);
                        border:1.5px solid var(--border); box-shadow:0 -4px 18px rgba(20,40,80,.10);
                        display:flex; flex-direction:column; height:min(42vh, 300px); overflow:hidden; }
        .emoji-painel[hidden] { display:none; }
        .emoji-grade { flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(42px, 1fr));
                       gap:2px; padding:8px; align-content:start; }
        .emoji-item { font-size:1.75rem; line-height:1; padding:6px 0; border:none; background:none; cursor:pointer;
                      border-radius:10px; transition:transform .12s, background .12s; }
        .emoji-item:active { transform:scale(1.25); background:var(--pri-pale); }
        @media (hover:hover) { .emoji-item:hover { background:var(--pri-pale); } }
        .emoji-vazio { grid-column:1 / -1; text-align:center; color:var(--muted); font-size:.85rem; padding:30px 10px; }
        .emoji-abas { display:flex; justify-content:space-around; align-items:center; gap:2px; padding:4px 6px;
                      border-top:1px solid var(--border); background:linear-gradient(180deg, transparent, rgba(163,181,213,.12)); }
        .emoji-aba { font-size:1.15rem; border:none; background:none; padding:6px 5px; border-radius:10px; cursor:pointer;
                     filter:grayscale(.7); opacity:.7; transition:all .15s; }
        .emoji-aba.ativa { filter:none; opacity:1; background:var(--pri-pale); }
        .emoji-apagar { filter:none; opacity:.85; font-size:1.25rem; color:var(--muted); }

        /* Mensagem só de emoji (até 3): grande e sem balão, como no WhatsApp. */
        .msg-bubble.so-emoji { background:none !important; box-shadow:none !important; border:none !important;
                               padding:0 2px !important; font-size:2.9rem; line-height:1.15; }
        .msg-bubble.so-emoji.emoji-1 { font-size:3.6rem; }
        @keyframes recPulse { 0%,100%{box-shadow:0 0 0 0 hsla(0,68%,52%,.5)} 50%{box-shadow:0 0 0 6px transparent} }

        .send-btn { background:var(--pri); border:none; border-radius:11px; padding:11px 20px; cursor:pointer; display:flex; align-items:center; gap:8px; font-family:inherit; font-size:.88rem; font-weight:800; color:#fff; letter-spacing:.2px; transition:background .2s,transform .14s,box-shadow .2s; box-shadow:0 3px 14px rgba(0,90,110,.32); white-space:nowrap; flex-shrink:0; }
        .send-btn:hover  { background:var(--pri-dark); }
        .send-btn:active { transform:scale(.97); }
        .send-btn:disabled { opacity:.5; cursor:not-allowed; }
        .send-btn svg { width:16px; height:16px; }

        /* ===== VISUALIZADOR EM TELA CHEIA =====
           Vale igual pras cinco timelines. Fundo preto de propósito: em tela
           cheia a mídia é o conteúdo, e qualquer moldura clara rouba atenção.
           touch-action:none porque os gestos (arrastar pra cima/baixo) são
           tratados no JS — sem isso o navegador rola a página por baixo. */
        /* z-index acima do cabeçalho (1100) e dos menus (1500), abaixo dos
           modais (2000) — o de login precisa aparecer por cima quando o
           visitante sem conta tenta compartilhar daqui. */
        .viewer { display:none; position:fixed; inset:0; background:#000; z-index:1600;
                  flex-direction:column; touch-action:none; user-select:none; -webkit-user-select:none; }
        .viewer.open { display:flex; }
        /* touch-action:none é o que faz a pinça existir: sem ele o navegador
           trata dois dedos como zoom DA PÁGINA e os eventos nunca chegam aqui.
           O cursor conta o resto da história no computador: mão aberta só
           quando a mídia ampliada tem pra onde ser arrastada (classe posta pelo
           viewerAplicarTransformacao). */
        .viewer-palco { flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
                        overflow:hidden; touch-action:none; cursor:default; }
        .viewer-palco.arrastavel { cursor:grab; }
        .viewer-palco.arrastavel:active { cursor:grabbing; }
        .viewer-palco img, .viewer-palco video {
            max-width:100vw; max-height:100%; object-fit:contain; background:#000;
            -webkit-user-drag:none; user-drag:none; pointer-events:none;
            /* O giro e a ampliação saem do centro da mídia — é o que faz a pinça
               crescer em volta dos dedos em vez de escorregar pro canto. */
            transform-origin:center center; will-change:transform;
        }
        /* Troca de mídia: leve deslize no sentido do gesto, pra ficar claro que
           veio a próxima e não que a mesma recarregou. */
        .viewer-palco.desliza-cima   > * { animation:viewerCima .22s ease; }
        .viewer-palco.desliza-baixo  > * { animation:viewerBaixo .22s ease; }
        @keyframes viewerCima  { from { transform:translateY(26px); opacity:.2 } to { transform:none; opacity:1 } }
        @keyframes viewerBaixo { from { transform:translateY(-26px); opacity:.2 } to { transform:none; opacity:1 } }

        /* Barra de cima e controles de baixo entram e saem JUNTOS: são a mesma
           camada de comandos, aparecendo por 3 segundos ao abrir e a cada toque
           rápido (classe .chrome, posta pelo mostrarChrome). Fora disso o vídeo
           fica limpo, sem nada por cima. */
        .viewer-topo, .viewer-controles {
            opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
        }
        .viewer.chrome .viewer-topo, .viewer.chrome .viewer-controles {
            opacity:1; visibility:visible;
        }
        .viewer-controles[hidden] { display:none; }

        .viewer-topo { position:absolute; top:0; left:0; right:0; z-index:2;
                       display:flex; align-items:center; justify-content:space-between; gap:10px;
                       padding:10px 12px; background:linear-gradient(rgba(0,0,0,.55), transparent); }

        /* Pausar · linha do tempo · relógio. */
        .viewer-controles {
            position:absolute; left:0; right:0; bottom:0; z-index:2;
            display:flex; align-items:center; gap:12px;
            padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
            background:linear-gradient(transparent, rgba(0,0,0,.6));
        }
        .viewer-tempo { color:rgba(255,255,255,.9); font-size:.78rem; font-weight:700;
                        font-variant-numeric:tabular-nums; flex-shrink:0; }
        /* A linha do tempo é onde se adianta o vídeo. Alta o bastante pra pegar
           com o dedo sem mirar. */
        .viewer-linha {
            flex:1; min-width:0; height:24px; margin:0; padding:0;
            background:transparent; -webkit-appearance:none; appearance:none;
            cursor:pointer; accent-color:#fff;
        }
        .viewer-linha::-webkit-slider-runnable-track {
            height:4px; border-radius:3px; background:rgba(255,255,255,.35);
        }
        .viewer-linha::-webkit-slider-thumb {
            -webkit-appearance:none; appearance:none; margin-top:-6px;
            width:16px; height:16px; border-radius:50%; background:#fff; border:none;
        }
        .viewer-linha::-moz-range-track { height:4px; border-radius:3px; background:rgba(255,255,255,.35); }
        .viewer-linha::-moz-range-thumb { width:16px; height:16px; border:none; border-radius:50%; background:#fff; }
        /* O SOM, EM CIMA À ESQUERDA: ícone e barra lado a lado.
           A barra é curta de propósito — ela divide a faixa de cima com a
           contagem (2/5) e o X de fechar, e no celular não sobra largura pra
           três coisas grandes. Some junto com o ícone quando não há vídeo. */
        .viewer-som { display:flex; align-items:center; gap:8px; flex-shrink:0; }
        .viewer-som[hidden] { display:none; }
        .viewer-som-linha {
            width:84px; height:24px; margin:0; padding:0;
            background:transparent; -webkit-appearance:none; appearance:none;
            cursor:pointer; accent-color:#fff;
        }
        .viewer-som-linha::-webkit-slider-runnable-track {
            height:4px; border-radius:3px; background:rgba(255,255,255,.35);
        }
        .viewer-som-linha::-webkit-slider-thumb {
            -webkit-appearance:none; appearance:none; margin-top:-5px;
            width:14px; height:14px; border-radius:50%; background:#fff; border:none;
        }
        .viewer-som-linha::-moz-range-track { height:4px; border-radius:3px; background:rgba(255,255,255,.35); }
        .viewer-som-linha::-moz-range-thumb { width:14px; height:14px; border:none; border-radius:50%; background:#fff; }
        /* Tela estreita: a barra encolhe em vez de empurrar o X pra fora. */
        @media (max-width:420px) { .viewer-som-linha { width:60px; } }
        .viewer-btn { width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
                      background:rgba(0,0,0,.45); color:#fff; font-size:1.15rem; line-height:1;
                      display:flex; align-items:center; justify-content:center; }
        .viewer-btn:hover { background:rgba(0,0,0,.7); }
        .viewer-btn svg { width:20px; height:20px; }
        /* O botão de virar é quadrado, não redondo: ele não é uma ação da
           mídia como as outras, é um comando da TELA — e a forma diferente
           é o que separa os dois de relance. */
        .viewer-girar { border-radius:8px; flex-shrink:0; }
        .viewer-girar[hidden] { display:none; }
        .viewer-girar.virado { background:var(--pri); }
        .viewer-pos { color:rgba(255,255,255,.85); font-size:.82rem; font-weight:700; }

        /* Dica de gesto: aparece na primeira abertura e some sozinha. */
        .viewer-dica { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
                       color:rgba(255,255,255,.9); background:rgba(0,0,0,.5); border-radius:20px;
                       padding:7px 14px; font-size:.78rem; opacity:0; transition:opacity .3s;
                       pointer-events:none; text-align:center; max-width:88vw; }
        .viewer-dica.visivel { opacity:1; }

        /* ===== CHAMADA DE VOZ/VÍDEO ===== */
        .group-view-actions { display:flex; align-items:center; gap:6px; }
        /* Topo da conversa no jeito do WhatsApp (16/10/2026): foto do amigo que leva
           ao perfil, ícones de vídeo e ligar LIMPOS (sem a bolinha verde em volta)
           e o ⋮ com Ver perfil, Limpar conversa e Desfazer amizade. */
        #group-view-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .topo-pessoa { background: none; border: none; padding: 0; cursor: pointer; flex: none; }
        .topo-pessoa[hidden] { display: none; }
        .topo-pessoa-foto {
            width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 800; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18);
        }
        .topo-pessoa-foto img { width: 100%; height: 100%; object-fit: cover; }
        .topo-icone {
            background: transparent; border: none; cursor: pointer; color: var(--pri-dark);
            width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; font-weight: 900; line-height: 1; transition: background .2s;
        }
        .topo-icone[hidden] { display: none; }
        .topo-icone:hover, .topo-icone:active { background: rgba(0,0,0,.07); }
        #group-view { position: relative; }
        .topo-menu {
            position: absolute; top: 54px; right: 10px; z-index: 50; min-width: 190px; padding: 6px 0;
            background: linear-gradient(160deg, rgba(255,255,255,.97), rgba(240,244,250,.95));
            border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.22); backdrop-filter: blur(8px);
        }
        .topo-menu[hidden] { display: none; }
        .topo-menu button {
            display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
            padding: 12px 18px; font: inherit; font-size: .95rem; color: #222;
        }
        .topo-menu button:hover { background: rgba(0,0,0,.05); }
        .topo-menu button.perigo { color: #c62828; }

        /* Mesma ideia do .viewer: camada fixa cobrindo a tela inteira, acima de
           tudo — uma ligação interrompe qualquer outra coisa que estivesse na
           tela (por isso o z-index vence até os modais, 2000). */
        .call-overlay { display:none; position:fixed; inset:0; background:#0b0f1c; z-index:2100;
                        flex-direction:column; align-items:center; justify-content:center; }
        .call-overlay.aberta { display:flex; }

        .call-video-remoto { display:none; position:absolute; inset:0; width:100%; height:100%;
                              object-fit:cover; background:#000; }
        .call-overlay.com-video .call-video-remoto { display:block; }

        /* Espelhado (scaleX) porque é a própria câmera de quem está vendo —
           sem isso a pessoa se vê "ao contrário" do que está acostumada no
           espelho, como em qualquer chamada de vídeo. */
        .call-video-local { display:none; position:absolute; top:calc(16px + env(safe-area-inset-top, 0px));
                             right:16px; width:96px; height:128px; border-radius:12px; object-fit:cover;
                             background:#111; box-shadow:0 6px 18px rgba(0,0,0,.5); z-index:2; transform:scaleX(-1); }
        .call-overlay.com-video .call-video-local { display:block; }
        .call-overlay.cam-desligada .call-video-local { display:none; }

        .call-info { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
                     gap:10px; color:#fff; text-align:center; padding:0 24px; }
        /* Vídeo já conectado: a própria imagem remota vira o "retrato" — o nome
           e o cronômetro sobem pro canto, do jeito que qualquer chamada de
           vídeo mostra, e o avatar redondo (que ficaria por cima da imagem) some. */
        .call-overlay.com-video.conectada .call-info {
            position:absolute; top:calc(16px + env(safe-area-inset-top, 0px)); left:16px;
            align-items:flex-start; text-align:left;
        }
        .call-overlay.com-video.conectada .call-avatar { display:none; }

        .call-avatar { width:120px; height:120px; border-radius:50%; display:flex; align-items:center;
                        justify-content:center; font-size:2.6rem; font-weight:800; color:#fff;
                        background:var(--pri); overflow:hidden; flex-shrink:0; }
        .call-avatar img { width:100%; height:100%; object-fit:cover; }
        .call-nome { font-size:1.3rem; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.5); }
        .call-estado { font-size:.9rem; opacity:.8; font-variant-numeric:tabular-nums; }
        /* Tocando: o texto pulsa. Atendeu: fica fixo e mais forte. */
        .call-overlay:not(.conectada) .call-estado { animation:callEstadoPulsa 1.2s ease-in-out infinite; }
        .call-overlay.conectada .call-estado { opacity:1; font-weight:700; font-size:1rem; }
        @keyframes callEstadoPulsa { 50% { opacity:.35; } }

        .call-controles { position:absolute; left:0; right:0; bottom:calc(28px + env(safe-area-inset-bottom, 0px));
                           z-index:1; display:flex; align-items:center; justify-content:center; gap:22px; }
        .call-btn { width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
                    background:rgba(255,255,255,.16); color:#fff; font-size:1.4rem;
                    display:flex; align-items:center; justify-content:center; transition:background .2s; }
        .call-btn:hover { background:rgba(255,255,255,.28); }
        .call-btn.ligado { background:#fff; color:#0b0f1c; }
        .call-btn-cam[hidden] { display:none; }
        .call-btn-desligar { background:#d93636; }
        .call-gira { display:inline-block; transform:rotate(135deg); }   /* só o telefone gira, não o rótulo */
        .call-btn-desligar:hover { background:#c22; }
        /* Nome embaixo de cada botão, como no WhatsApp. */
        .call-btn { position:relative; }
        .call-btn[data-rotulo]::after { content:attr(data-rotulo); position:absolute; top:100%; left:50%;
            transform:translateX(-50%); margin-top:8px; white-space:nowrap; font-size:.72rem; font-weight:600;
            color:#fff; opacity:.85; pointer-events:none; }
        /* ===== CHAMADA CHEGANDO =====
           Acima até da própria .call-overlay (2100): existe pra receber, então
           precisa ganhar de qualquer coisa que já estivesse na tela. */
        .call-recebendo { position:fixed; inset:0; background:#0b0f1c; z-index:2200;
                           flex-direction:column; align-items:center; justify-content:center; gap:14px; color:#fff;
                           animation:callRecebendoEntra .25s ease; }
        .call-recebendo[hidden] { display:none; }
        .call-recebendo:not([hidden]) { display:flex; }
        @keyframes callRecebendoEntra { from { opacity:0; } to { opacity:1; } }

        .call-avatar-grande { width:132px; height:132px; font-size:2.9rem;
                               animation:callPulsar 1.4s ease-in-out infinite; }
        @keyframes callPulsar {
            0%, 100% { box-shadow:0 0 0 0 rgba(255,255,255,.25); }
            50%      { box-shadow:0 0 0 18px rgba(255,255,255,0); }
        }
        .call-recebendo-nome { font-size:1.3rem; font-weight:800; }
        .call-recebendo-tipo { font-size:.88rem; opacity:.75; }
        .call-recebendo-acoes { margin-top:26px; display:flex; align-items:center; gap:44px; }
        .call-recebendo-btn { width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
                               color:#fff; font-size:1.6rem; display:flex; align-items:center; justify-content:center; }
        .call-atender { background:#22a559; animation:callPulsar 1.4s ease-in-out infinite; }
        .call-recusar { background:#d93636; transform:rotate(135deg); }

        @media (max-width:420px) {
            .call-avatar { width:96px; height:96px; font-size:2.1rem; }
            .call-video-local { width:78px; height:104px; }
            .call-btn { width:50px; height:50px; font-size:1.25rem; }
        }

        /* Folha de opções da postagem — vale pros dois caminhos que a abrem:
           segurar na postagem da timeline e segurar na mídia em tela cheia.
           Por isso é `fixed` (não vive mais dentro do visualizador) e fica
           acima dele no empilhamento (o visualizador é 1600). */

        /* ===== EDITOR DE IMAGEM =====
           Acima da folha de opções (1700), que é de onde ele abre por um dos
           dois caminhos — senão a folha ficaria por cima do que ela mesma
           chamou. */
        .editor-img { display:none; position:fixed; inset:0; z-index:1800; background:#0b0b0b;
                      flex-direction:column; touch-action:none;
                      user-select:none; -webkit-user-select:none; }
        .editor-img.aberto { display:flex; }

        .editor-topo { display:flex; align-items:center; justify-content:space-between; gap:10px;
                       padding:10px 12px calc(10px + env(safe-area-inset-top, 0px)); flex-shrink:0; }
        .editor-titulo { color:#fff; font-weight:800; font-size:.95rem; }
        .editor-btn { min-width:38px; height:38px; padding:0 12px; border-radius:19px; border:none;
                      cursor:pointer; background:rgba(255,255,255,.14); color:#fff;
                      font-size:1.05rem; font-weight:800; font-family:inherit; line-height:1;
                      display:flex; align-items:center; justify-content:center; }
        .editor-btn:hover { background:rgba(255,255,255,.24); }
        .editor-btn svg { width:20px; height:20px; }
        .editor-pronto { background:var(--pri); font-size:.9rem; }
        .editor-pronto:hover { background:var(--pri); filter:brightness(1.12); }
        .editor-btn[disabled] { opacity:.45; cursor:default; }

        /* O palco centraliza a imagem e NÃO rola: a tela inteira é a área de
           desenho, e um arrasto que rolasse a página no meio de uma seta
           estragaria o traço. */
        .editor-palco { flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
                        overflow:hidden; padding:0 8px; }
        .editor-palco .canvas-container { touch-action:none; }
        .editor-palco canvas { border-radius:10px; }

        .editor-aviso { color:#ffb4ae; background:rgba(0,0,0,.4); text-align:center;
                        font-size:.82rem; padding:10px 16px; }
        .editor-aviso[hidden] { display:none; }

        .editor-barra { display:flex; align-items:center; justify-content:center; gap:14px;
                        flex-wrap:wrap; flex-shrink:0;
                        padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
        .editor-formas, .editor-cores { display:flex; align-items:center; gap:8px; }

        .editor-forma { width:40px; height:40px; border-radius:12px; border:2px solid transparent;
                        cursor:pointer; background:rgba(255,255,255,.12); color:#fff;
                        display:flex; align-items:center; justify-content:center; }
        .editor-forma svg { width:22px; height:22px; }
        .editor-forma.ativa { background:var(--pri); border-color:#fff; }

        .editor-cor { width:28px; height:28px; border-radius:50%; cursor:pointer; padding:0;
                      background:var(--cor); border:2px solid rgba(255,255,255,.45); }
        .editor-cor.ativa { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.28); }

        /* Tela estreita: as formas e as cores em duas filas, em vez de espremer
           tudo numa só e deixar os alvos pequenos demais pro dedo. */
        @media (max-width:420px) {
            .editor-barra { gap:10px; }
            .editor-forma { width:38px; height:38px; }
        }

        /* O "Anotar" da barra de escrever, ao lado do nome do arquivo. */
        .file-preview-anotar { border:none; cursor:pointer; flex-shrink:0;
                               background:var(--pri); color:#fff; font-family:inherit;
                               font-size:.74rem; font-weight:800; padding:5px 10px; border-radius:12px; }
        .file-preview-anotar[hidden] { display:none; }
        .opcoes-postagem { position:fixed; inset:0; z-index:1700; background:rgba(0,0,0,.72);
                           display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
                           padding:20px; animation:fadeIn .16s ease; }
        /* O `display:flex` acima vence o `hidden` do navegador (estilo do autor
           ganha do estilo padrão), então o menu nascia aberto. Esta regra
           devolve o sentido ao atributo. */
        .opcoes-postagem[hidden] { display:none; }
        .opcao-postagem { width:100%; max-width:300px; padding:13px 16px; border-radius:12px; border:none;
                          background:rgba(255,255,255,.12); color:#fff; font-size:.95rem; font-weight:600;
                          cursor:pointer; text-align:left; }
        .opcao-postagem:hover { background:rgba(255,255,255,.22); }
        .opcao-postagem.danger { color:#ff8b8b; }
        /* O convite do visitante é o único botão da folha que não é um item de
           lista: é a resposta inteira. Centralizado e com a cor da marca, ele
           se lê como uma frase, que é o que a descrição pede. */
        .opcao-postagem.convite { text-align:center; background:var(--pri); color:#fff;
                                  font-weight:700; line-height:1.35; padding:15px 18px; }
        .opcao-postagem.convite:hover { filter:brightness(1.08); background:var(--pri); }

        /* Segurar 2s numa postagem da timeline: enquanto o dedo está parado o
           navegador do celular ofereceria "copiar/selecionar" por cima da nossa
           folha. Fora daqui a seleção de texto continua livre. */
        .msg-row { -webkit-touch-callout:none; }

        @media (max-width:480px) {
            .opcao-postagem { font-size:.9rem; padding:12px 14px; }
        }


        /* ===== TELAS ESTREITAS ·  parte da timeline =====
           Veio da seção RESPONSIVE do liket.css. As regras de cabeçalho, de
           janela de gravação e de layout geral ficaram lá — aqui entra só o
           que desenha postagem. */
        @media (max-width:600px) {
            .msg-row { max-width:90%; }
            .msg-row.has-media { max-width:98%; min-width:260px; width:98%; }
        }
        @media (max-width:480px) {
            .social-panel { width: 90%; max-width: 370px; left: 5%; max-height: 70vh; }
            .send-area { padding:8px 8px 10px; gap:6px; }
            .input-row { flex-wrap:wrap; gap:6px; }
            .media-btns-row { display:flex; gap:6px; width:100%; order:1; }
            .media-btn { flex:1; padding:8px 0; border-radius:9px; }
            .media-btn svg { width:16px; height:16px; }
            #message { width:100%; flex:1 1 0; min-width:0; font-size:.88rem; padding:9px 11px; order:2; }
            .send-btn { order:3; padding:9px 14px; border-radius:9px; flex-shrink:0; }
            .send-btn span { display:none; }
            .send-btn svg { width:17px; height:17px; }
            .file-preview { padding:6px 8px; gap:7px; }
            .file-preview img, .file-preview video { max-height:44px; max-width:60px; }
            .file-preview audio { height:28px; }
            .msg-bubble { font-size:.86rem; }
            .msg-bubble.text-only { padding:8px 11px; }
            .msg-bubble.has-media .msg-text { padding:6px 11px 8px; }
            .audio-player { padding:10px 11px; gap:8px; min-width:200px; }
            .audio-player-btn { width:32px; height:32px; }
            .media-file-link { padding:10px 12px; margin:4px; }
            /* Rodapé social com alvos de toque maiores no celular */
            .reaction-opt { font-size:1.7rem; padding:6px; }
            .reaction-trigger, .reaction-summary, .comment-btn { min-height:32px; }
            .reaction-picker { padding:6px 9px; gap:3px; }
            /* Menos respiro horizontal nos botões da barra de ações — em telas
               estreitas, "Ver comentários (NN)" + "Compartilhar" já preenchem
               quase toda a largura; isso evita que Compartilhar ainda quebre
               pra segunda linha quando o número de comentários tem 2 dígitos. */
            .reaction-bar { gap:6px; }
            .post-actions-right { gap:6px; }
            .comment-btn { padding:0 9px; font-size:.71rem; }
            .comment-scroller { max-height:220px; }
            .comment-compose textarea { font-size:.9rem; }
        }

        /* ===== BARRA DE CONVERSA E GRUPO · jeito WhatsApp (Alex, 2026-10-03) =====
           Uma linha: a "pílula" com 😊, caixa de escrever e 📎, e na ponta
           direita o botão redondo grande do microfone — que vira o de enviar
           quando há algo escrito. Fica no fim do arquivo para valer sobre as
           regras de tela estreita acima. A pílula são três peças vizinhas com
           o mesmo fundo (😊 arredondado à esquerda, 📎 à direita), sem mexer
           na ordem do HTML: a fileira de botões vira display:contents. */
        body.view-group .input-row { flex-wrap: nowrap; gap: 0; align-items: center; }
        body.view-group .media-btns-row { display: contents; }
        #btn-camera { display: none; }
        body.view-group #btn-camera { display: flex; align-items: center; justify-content: center; }
        body.view-group :is(#btn-emoji, #message, #btn-postar, #btn-camera) {
            height: 46px; margin: 0; border: none; box-shadow: 0 1px 2px rgb(0 0 0 / .12);
            background: var(--panel); border-radius: 0;
        }
        body.view-group #btn-emoji  { order: 1; flex: 0 0 44px; width: 44px; padding: 0 0 0 6px; border-radius: 23px 0 0 23px; }
        body.view-group #message    { order: 2; flex: 1 1 0; min-width: 0; width: auto; padding: 0 6px; font-size: .95rem; }
        body.view-group #message:focus { box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
        body.view-group #btn-postar { order: 3; flex: 0 0 38px; width: 38px; padding: 0; }
        body.view-group #btn-camera { order: 3; flex: 0 0 44px; width: 44px; padding: 0 8px 0 0; border-radius: 0 23px 23px 0; }
        body.view-group :is(#btn-emoji, #btn-postar, #btn-camera) svg { width: 22px; height: 22px; }
        /* Escrevendo, a câmera sai (como no WhatsApp) e o 📎 fecha a pílula. */
        body.view-group .input-row:has(#message:not(:placeholder-shown)) #btn-camera { display: none; }
        body.view-group .input-row:has(#message:not(:placeholder-shown)) #btn-postar { flex-basis: 44px; width: 44px; padding: 0 6px 0 0; border-radius: 0 23px 23px 0; }
        body.view-group :is(#btn-audio, #send-btn) {
            order: 4; flex: 0 0 50px; width: 50px; height: 50px; margin-left: 6px; padding: 0;
            border: none; border-radius: 50%; background: var(--pri); color: #fff;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 6px rgb(0 0 0 / .2);
        }
        body.view-group :is(#btn-audio, #send-btn) svg { width: 24px; height: 24px; }
        /* Gravando: o microfone fica vermelho e cresce, para não parecer que o
           toque não pegou (Alex, 2026-10-03). */
        body.view-group :is(#btn-audio.recording, #btn-audio.apertado, #btn-audio:active) {
            background: #e53935; transform: scale(1.5);
            box-shadow: 0 0 0 6px rgb(229 57 53 / .25), 0 2px 8px rgb(0 0 0 / .25);
            transition: transform .15s, background .15s;
        }
        body.view-group #send-btn span { display: none; }
        /* Microfone OU enviar, nunca os dois: com texto escrito, vale o enviar. */
        body.view-group #send-btn { display: none; }
        body.view-group .input-row:has(#message:not(:placeholder-shown)) #send-btn { display: flex; }
        body.view-group .input-row:has(#message:not(:placeholder-shown)) #btn-audio { display: none; }

        /* ===== RESPONDER (estilo WhatsApp, 2026-10-10) ===== */
        /* Citação no topo do balão: barra colorida, nome de quem postou e o trecho. */
        .resposta-citacao {
            border-left: 4px solid var(--pri); background: rgba(0,0,0,.07);
            border-radius: 8px; padding: 6px 10px; margin: 4px 6px 6px; cursor: pointer;
            max-width: 100%; overflow: hidden;
        }
        .resposta-citacao-nome { font-weight: 700; font-size: .8rem; color: var(--pri); overflow-wrap: anywhere; }
        .resposta-citacao-trecho {
            font-size: .85rem; opacity: .85; overflow-wrap: anywhere;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        /* Ao tocar na citação, a postagem original pisca. */
        .msg-row.resposta-destaque .msg-bubble { animation: respostaPisca 1.4s ease; }
        @keyframes respostaPisca { 0%,60% { box-shadow: 0 0 0 3px var(--pri); } 100% { box-shadow: none; } }
        /* Barra "respondendo a…" acima da caixa de escrever. */
        .resposta-barra {
            display: flex; align-items: center; gap: 8px; flex: 0 0 100%; width: 100%;
            box-sizing: border-box; margin: 0 0 8px; padding: 6px 10px;
            border-left: 4px solid var(--pri); background: rgba(0,0,0,.06); border-radius: 10px;
        }
        .resposta-barra[hidden] { display: none; }
        .resposta-barra-texto { flex: 1; min-width: 0; }
        .resposta-barra-nome { font-weight: 700; font-size: .8rem; color: var(--pri); }
        .resposta-barra-trecho { font-size: .85rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .resposta-barra-fechar { border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; padding: 4px 8px; color: inherit; }


/* ── Menu do 📎 em conversa e grupo ─────────────────────────────────────── */
.folha-clipe { position:fixed; left:10px; right:10px; bottom:86px; z-index:60; max-width:520px; margin:0 auto;
    background:#fff; border-radius:18px; box-shadow:0 10px 34px rgba(0,0,0,.25); padding:14px 10px; }
.folha-clipe[hidden], .folha-clipe [hidden] { display:none; }
.clipe-opcoes { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.clipe-opcoes button { background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:6px;
    font-size:.78rem; color:inherit; padding:8px 2px; border-radius:12px; cursor:pointer; }
.clipe-opcoes button:active { background:var(--pri-pale); }
.clipe-icone { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:1.45rem; background:var(--pri-pale); }
.clipe-titulo { font-weight:800; font-size:.85rem; padding:2px 8px 8px; }
.clipe-lista { max-height:40vh; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.clipe-contato { text-align:left; padding:11px 12px; border:0; background:none; border-radius:10px; font-size:.95rem; cursor:pointer; color:inherit; }
.clipe-contato:active { background:var(--pri-pale); }
.cartao-especial-acoes { display:flex; gap:6px; padding:0 12px 10px; flex-wrap:wrap; }
.cartao-especial-acoes button { border:1.5px solid var(--border); background:var(--panel); color:inherit; border-radius:999px;
    padding:6px 12px; font-size:.82rem; font-weight:700; cursor:pointer; }
.msg-row.me .cartao-especial-acoes button { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); }


/* ── Feed público no jeito dos vídeos curtos (só o #chat, que é o feed público) ── */
#chat.feed-vertical { scroll-snap-type:y mandatory; scroll-behavior:auto; overscroll-behavior-y:contain; gap:0; padding-top:16px; padding-bottom:16px; }
#chat.feed-vertical > .msg-row { scroll-snap-align:start; scroll-snap-stop:always; min-height:var(--feed-alto, 100%); justify-content:center; animation:none; }
#chat.feed-vertical > .feed-vazio { min-height:var(--feed-alto, 60vh); display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:var(--muted); font-weight:800; scroll-snap-align:start; }
#chat.feed-vertical > .feed-vazio span { font-weight:600; font-size:.82rem; margin-top:6px; }
.feed-atualizando { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:30; background:var(--pri-dark, #1d4f4a); color:#fff;
    padding:6px 14px; border-radius:999px; font-size:.8rem; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.25); }

/* 20/10/2026: com FOTO, o fundo da bolinha some. A cor (tirada do nome) só serve
   de fundo para a inicial; com foto de cantos transparentes (ícone redondo ou de
   cantos arredondados) ela aparecia nos cantos, rosa. Vale para pessoa e grupo. */
[class*="avatar"]:has(> img),
[class*="-foto"]:has(> img) { background: transparent !important; }

/* Topo do grupo igual ao da conversa (24/10/2026): a foto do grupo tem o canto
   quadrado-arredondado da lista, e o nome também é tocável. */
.topo-pessoa-foto.eh-grupo { border-radius: 12px; }
#group-view-title.clicavel { cursor: pointer; }
#modal-ver-grupo .modal-content { position: relative; }
#ver-grupo-menu { top: 58px; right: 14px; }
#ver-grupo-menu button[hidden] { display: none; }
/* Opções negativas (sair, excluir, desfazer amizade) existem, mas disfarçadas:
   letra menor e cinza, nada de vermelho chamando o dedo (Alex, 24/10/2026). */
.topo-menu button.discreto { font-size: .8rem; color: #8a94a6; padding: 9px 18px; }
.topo-menu button[hidden] { display: none; }
/* Janela do grupo (25/10/2026): X no canto, foto + nome + ⋮ na linha de baixo. */
#modal-ver-grupo .ver-grupo-x { position: absolute; top: 10px; right: 16px; }
#modal-ver-grupo .ver-grupo-linha { display: flex; align-items: center; gap: 14px; margin: 22px 0 16px; }
#modal-ver-grupo .ver-grupo-linha h2 { flex: 1; min-width: 0; font-size: 1.2rem; color: var(--primary); overflow-wrap: anywhere; }
#ver-grupo-menu { top: 92px; right: 14px; }
.ver-grupo-busca { width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 8px; border: 1px solid var(--border-color); border-radius: 10px; font: inherit; }
.ver-grupo-busca[hidden] { display: none; }
.ver-grupo-midias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 14px; }
.ver-grupo-midias a { position: relative; aspect-ratio: 1; background: #e8edf5; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1.6rem; }
.ver-grupo-midias img { width: 100%; height: 100%; object-fit: cover; }
.ver-grupo-midias a span { position: absolute; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.ver-grupo-midias a span:only-child { position: static; color: #555; text-shadow: none; }
/* O ⋮ do topo serve à conversa e ao grupo (25/10/2026): cada um vê só os seus. */
#group-view-menu[data-tipo="grupo"] .so-conversa,
#group-view-menu[data-tipo="conversa"] .so-grupo { display: none; }
#group-view-menu[data-tipo="saido"] .so-conversa,
#group-view-menu[data-tipo="saido"] .so-grupo,
#group-view-menu:not([data-tipo="saido"]) .so-saido { display: none; }
.item-saido .social-item-sub { font-style: italic; }
.item-saido { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Janelinha de escolha (Sair e apagar / Somente sair) */
.escolha-opcao { max-width: 340px; display: flex; flex-direction: column; gap: 8px; }
.escolha-opcao p { margin: 0 0 6px; font-weight: 700; color: var(--pri-dark); }
.escolha-opcao button { border: none; border-radius: 12px; padding: 12px; font: inherit; cursor: pointer;
    background: linear-gradient(160deg, #eef2f8, #dde5f1); color: #223; }
.escolha-opcao button.discreto { background: none; color: #8a94a6; font-size: .85rem; }
#ver-grupo-assumir[hidden] { display: none; }
/* Moderação (25/10/2026) */
#ver-grupo-avisos { margin-bottom: 14px; }
#ver-grupo-avisos[hidden] { display: none; }
.aviso-mod { background: linear-gradient(160deg, #fff7e6, #fdeccc); border-radius: 10px; padding: 9px 11px; margin-bottom: 6px; font-size: .84rem; }
.aviso-mod span { color: #999; font-size: .72rem; }
.aviso-mod-botoes { display: flex; gap: 8px; margin-top: 6px; }
.aviso-mod-botoes button { flex: 1; border: none; border-radius: 8px; padding: 7px; cursor: pointer; font: inherit; background: #fff; }
.aviso-mod-botoes button[data-v="desfazer"] { color: #b45309; }
.item-bloqueado { opacity: .6; }