/* WhatsApp skin — SOMENTE artigos .wa-bubble (WhatsApp, nao internos). Aditivo e reversivel. */

/* fundo bege da area de conversa quando ha baloes de WhatsApp */
.wa-room {
  background-color: #efeae2 !important;
  background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px) !important;
  background-size: 16px 16px !important;
}

/* layout: esconder avatar, permitir alinhar, neutralizar moldura/seta padrao */
.ticket-article-item.wa-bubble .js-avatar { display: none !important; }
.ticket-article-item.wa-bubble .article-content { display: flex !important; }
.ticket-article-item.wa-bubble .bubble-gap { max-width: 78% !important; }
.ticket-article-item.wa-bubble .bubble-arrow { display: none !important; }
.ticket-article-item.wa-bubble .internal-border { border: none !important; padding: 0 !important; }

/* balao base */
.ticket-article-item.wa-bubble .textBubble {
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 1px .5px rgba(0,0,0,.13) !important;
}
/* o texto da mensagem sempre alinhado a esquerda dentro do balao */
.ticket-article-item.wa-bubble .richtext-content { text-align: left !important; }

/* CLIENTE -> esquerda, branco */
.ticket-article-item.wa-bubble.customer .bubble-gap { margin-right: auto !important; }
.ticket-article-item.wa-bubble.customer .textBubble { background: #ffffff !important; }

/* AGENTE -> direita, verde */
.ticket-article-item.wa-bubble.agent .bubble-gap { margin-left: auto !important; }
.ticket-article-item.wa-bubble.agent .textBubble { background: #d9fdd3 !important; }

/* SYSTEM (eventos) -> discreto, centralizado */
.ticket-article-item.wa-bubble.system .bubble-gap { margin: 0 auto !important; }
.ticket-article-item.wa-bubble.system .textBubble { background: #fff7d6 !important; }

/* horario discreto */
.ticket-article-item.wa-bubble .task-subline { opacity: .7 !important; font-size: 11px !important; }
.ticket-article-item.wa-bubble.agent .task-subline { float: right !important; }

/* GARANTIR que acoes/ferramentas continuem visiveis e usaveis */
.ticket-article-item.wa-bubble .js-article-actions { display: block !important; text-align: left !important; }