/* Marcas rapidas do chat: fileira de botoes so com emoji acima da caixa de resposta (cliente e equipe).
   Tamanho fixo e sem encolher: no chat flutuante (estreito) os botoes ficavam um em cima do outro. */
.marcas-chat{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;width:100%}
.marcas-chat .marca-chat{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:34px;min-width:0;padding:0;margin:0;border-radius:99px;font:inherit;font-size:18px;line-height:1;
  cursor:pointer;color:inherit;background:rgba(255,255,255,.06);border:1px solid var(--borda,rgba(255,255,255,.14));
  position:static;transform:none}
.marcas-chat .marca-chat:hover{border-color:var(--azul-claro,#59a0ff);background:rgba(89,160,255,.14)}
.marcas-chat .marca-chat:disabled{opacity:.55;cursor:default}

/* Reacao e resposta em cima da fala, como no WhatsApp: dois botoes sempre a vista no fim da mensagem (suaves, ficam
   fortes com o mouse em cima) e a etiqueta do emoji na borda. */
.fala[data-id]{position:relative}
.fala.tem-reacao{margin-bottom:14px}
.fala .fala-acoes{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}
.fala .fala-acao{margin:0;padding:3px 2px;border:0;background:none;color:inherit;font:inherit;font-size:12.5px;line-height:1.2;
  cursor:pointer;opacity:.7;border-radius:6px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);
  text-underline-offset:3px}
.fala .fala-acao:hover,.fala .fala-acao:focus-visible,.fala .fala-acao.aberto{opacity:1;
  text-decoration-color:currentColor;background:rgba(255,255,255,.1)}
.fala.sistema .fala-acoes{justify-content:center}
.fala .fala-reacoes{position:absolute;bottom:-12px;display:inline-flex;align-items:center;gap:2px;padding:1px 7px;
  border-radius:99px;font-size:13px;line-height:20px;cursor:pointer;background:var(--cartao,#151d2e);
  border:1px solid var(--borda,rgba(255,255,255,.18));color:var(--txt,#fff);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.fala.cliente .fala-reacoes{right:10px}
.fala.equipe .fala-reacoes{left:10px}
.fala.sistema .fala-reacoes{right:10px}
.fala .fala-reacoes .conta{font-size:11px;opacity:.8;margin-left:1px}

.fala-picker{position:fixed;z-index:2147483000;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:18px;
  background:var(--cartao,#151d2e);border:1px solid var(--borda,rgba(255,255,255,.2));
  box-shadow:0 6px 20px rgba(0,0,0,.45);min-width:200px}
.fala-picker .linha-emojis{display:flex;gap:2px;justify-content:space-between;padding:0 2px 4px}
.fala-picker .linha-emojis button{width:36px;height:36px;padding:0;margin:0;border:0;border-radius:50%;background:none;
  font-size:21px;line-height:1;cursor:pointer;transition:transform .1s,background .1s}
.fala-picker .linha-emojis button:hover{transform:scale(1.22);background:rgba(255,255,255,.08)}
.fala-picker .linha-emojis button.minha{background:rgba(89,160,255,.28)}
.fala-picker .acao{display:block;width:100%;text-align:left;padding:8px 12px;margin:0;border:0;border-radius:10px;
  background:none;color:var(--txt,#fff);font:inherit;font-size:14px;cursor:pointer}
.fala-picker .acao:hover{background:rgba(255,255,255,.08)}

/* Resposta citando uma fala (como no WhatsApp): a barra acima da caixa de texto e o trecho dentro do balao. */
.resp-barra{display:flex;align-items:stretch;gap:8px;margin:0 0 8px;padding:6px 8px;border-radius:10px;
  background:rgba(255,255,255,.06);border-left:3px solid var(--azul-claro,#59a0ff);width:100%;box-sizing:border-box}
.resp-barra .resp-seta{align-self:center;color:var(--azul-claro,#59a0ff);font-size:16px}
.resp-barra .resp-corpo{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px;line-height:1.35}
.resp-barra .resp-corpo b{color:var(--azul-claro,#59a0ff);font-size:12px}
.resp-barra .resp-corpo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt-2,#aab4c8)}
.resp-barra .resp-x{align-self:center;flex:0 0 auto;width:26px;height:26px;padding:0;margin:0;border:0;border-radius:50%;
  background:none;color:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.7}
.resp-barra .resp-x:hover{opacity:1;background:rgba(255,255,255,.1)}
.resp-barra.nova{animation:resp-nova 1.2s ease}
@keyframes resp-nova{0%,50%{background:rgba(89,160,255,.4)}100%{background:rgba(255,255,255,.06)}}
.fala .fala-cita{display:flex;flex-direction:column;margin:2px 0 6px;padding:5px 9px;border-radius:8px;text-decoration:none;
  background:rgba(0,0,0,.22);border-left:3px solid var(--azul-claro,#59a0ff);color:inherit;font-size:12.5px;line-height:1.35;
  max-width:100%}
.fala .fala-cita b{font-size:12px;color:var(--azul-claro,#59a0ff)}
.fala .fala-cita span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  opacity:.85;white-space:normal;word-break:break-word}
.fala.destaque{animation:fala-destaque 1.4s ease}
@keyframes fala-destaque{0%,60%{box-shadow:0 0 0 3px rgba(89,160,255,.7)}100%{box-shadow:0 0 0 0 rgba(89,160,255,0)}}