/* ═══════════════════════════════════════════════════════════════
   ESTILOS DE MENSAGEM — página /social/mensagens E dock de chat

   Este bloco vivia dentro do HTML da página de mensagens. O dock roda nas
   OUTRAS páginas do /social, onde esse CSS não existia: as mensagens
   apareciam sem balão, sem cor e com a imagem estourando a largura. Num
   arquivo, os dois usam a mesma aparência por construção.
   ═══════════════════════════════════════════════════════════════ */

/* Avatar: também morava só na página de mensagens, e por isso o dock
   mostrava a foto em tamanho natural — foi o que estourou a janela no
   screenshot da lista de conversas. */
.ms-ava-wrap { position:relative; flex:none; }
  .ms-ava { width:44px; height:44px; border-radius:50%; object-fit:cover; background:#F0EDE7; display:block; }
  .ms-ava-v { display:flex; align-items:center; justify-content:center; font-weight:800; color:#8A857C; font-size:16px; }

.ms-corpo { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:3px; min-height:0; }
  .ms-dia { align-self:center; font-size:11px; font-weight:700; color:var(--t3); background:#F0EDE7;
    padding:3px 12px; border-radius:11px; margin:10px 0 6px; }
  .ms-b { max-width:74%; padding:8px 13px; border-radius:16px; font-size:14.5px; line-height:1.45;
    word-wrap:break-word; position:relative; }
  .ms-b.eu { align-self:flex-end; background:#16301C; color:#fff; border-bottom-right-radius:5px; }
  .ms-b.ele { align-self:flex-start; background:#F2F0EB; color:#111; border-bottom-left-radius:5px; }
  .ms-b.seq { margin-top:-1px; }
  .ms-b img { max-width:100%; max-height:340px; width:auto; height:auto; object-fit:contain;
    border-radius:11px; display:block; margin:2px 0; cursor:zoom-in; }
  .ms-b.apagada { font-style:italic; opacity:.65; }
  .ms-b .ed { font-size:10.5px; opacity:.6; margin-left:6px; }
  /* Os botões encostam na bolha (right:100%) e o afastamento visual vem de
     um padding DENTRO do próprio elemento. Com `calc(100% + 6px)` havia
     6px de espaço morto no caminho: o mouse saía da bolha, o :hover caía e
     os botões sumiam justamente quando se ia clicar neles.
     A área também cresceu para cima e para baixo, porque mira de mouse em
     alvo de 24px colado na borda é o tipo de coisa que só funciona bem para
     quem desenhou. */
  .ms-b-acts { position:absolute; top:-4px; right:100%; display:none; gap:2px;
    padding:4px 7px 4px 0; }
  .ms-b.eu:hover .ms-b-acts,
  .ms-b-acts:focus-within { display:flex; }
  .ms-b-acts button { border:0; background:#fff; border:1px solid var(--border); border-radius:7px;
    width:24px; height:24px; cursor:pointer; color:var(--t3); display:flex; align-items:center; justify-content:center; }
  .ms-b-acts button:hover { color:#111; border-color:#009C3B; }
  .ms-visto { align-self:flex-end; font-size:11px; color:var(--t3); margin:2px 4px 6px; }
  .ms-digitando { align-self:flex-start; font-size:12px; color:var(--t3); font-style:italic; padding:4px 6px; }
  .ms-pe { flex:none; border-top:1px solid var(--border); padding:10px 12px; display:flex; align-items:flex-end; gap:8px; }
  .ms-ta { flex:1; border:1.5px solid var(--border); border-radius:20px; padding:9px 14px; resize:none;
    font-family:var(--font); font-size:14.5px; line-height:1.4; max-height:120px; min-height:40px;
    box-sizing:border-box; outline:0; }
  .ms-ta:focus { border-color:#009C3B; }
  .ms-ico { border:0; background:none; cursor:pointer; color:var(--t3); padding:9px; border-radius:50%; flex:none; }
  .ms-ico:hover { background:#F0EDE7; color:#111; }
  .ms-enviar { background:#16301C; color:#fff; border:0; border-radius:50%; width:40px; height:40px;
    cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center; }
  .ms-enviar:disabled { opacity:.35; cursor:default; }
  .ms-vazio { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%;
    color:var(--t3); text-align:center; padding:30px; gap:10px; }
  .ms-edbar { display:flex; align-items:center; gap:8px; padding:6px 14px; background:#FFF7E0;
    border-top:1px solid #F0E2B8; font-size:12.5px; color:#8a6d00; }
  .ms-edbar button { margin-left:auto; border:0; background:none; color:#8a6d00; font-weight:700; cursor:pointer; }