/* ═══════════════════════════════════════════════════════════════════════════
   chat-comum.css · estilos compartilhados entre o /chat e o mini-chat.

   O popover de ação da mensagem é criado pelo chat-comum.js e usado pelas duas
   telas, então o estilo dele mora aqui em vez de duplicado em cada template.
   ═══════════════════════════════════════════════════════════════════════════ */

.msg-pop { position: fixed; z-index: 9999; display: none; flex-direction: column; background: var(--white); border: 1px solid rgba(0,0,0,.1); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.20); padding: 6px; }
.msg-pop .pop-emojis { display: flex; gap: 3px; justify-content: center; padding: 2px 4px 6px; border-bottom: 1px solid rgba(0,0,0,.07); }
.msg-pop .pe { font-size: 21px; cursor: pointer; padding: 2px 4px; border-radius: 50%; transition: transform .1s; }
.msg-pop .pe:hover { transform: scale(1.3); }
.msg-pop .pop-actions { display: flex; flex-direction: column; padding-top: 4px; }
.msg-pop .pop-actions button { background: none; border: 0; text-align: left; padding: 7px 12px; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 7px; display: inline-flex; align-items: center; gap: 9px; font-family: inherit; white-space: nowrap; }
.msg-pop .pop-actions button:hover { background: var(--green-xl); }
.msg-pop .pop-actions button .fa-trash { color: var(--red); }

/* Na janelinha do mini-chat o popover precisa ser mais enxuto que no /chat */
.msg-pop.compacto { padding: 5px; }
.msg-pop.compacto .pe { font-size: 18px; }
.msg-pop.compacto .pop-actions button { padding: 6px 10px; font-size: 12.5px; gap: 8px; }

/* ── Indicador "N respostas" (threads) ─────────────────────────────────────
   A mensagem que abre uma thread mostra a contagem e os rostos de quem
   participou; clicar abre o painel da thread. Igual no /chat e no mini-chat. */
.thread-ind { display:flex; align-items:center; gap:6px; margin-top:6px; padding:3px 8px 3px 4px; background:var(--green-xl); border:1px solid var(--green-l); border-radius:12px; cursor:pointer; font-size:11.5px; font-weight:600; color:var(--green-d); width:fit-content; max-width:100%; }
.thread-ind:hover { background:var(--green-l); }
.thread-ind .ti-rostos { display:inline-flex; flex-shrink:0; }
.thread-ind .ti-rostos img { width:17px; height:17px; border-radius:50%; object-fit:cover; border:1.5px solid var(--white); margin-right:-6px; background:var(--green-l); }
.thread-ind .ti-rostos img:last-child { margin-right:0; }
.thread-ind .ti-rostos:empty { display:none; }
.thread-ind .ti-n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread-ind i { font-size:9px; opacity:.7; margin-left:auto; }