:root {
   --wa-green: #25d366;
   --wa-green-dark: #075e54;
   --wa-bg: #eae6df;
   --wa-agent: #ffffff;
   /* bolha recebida */
   --wa-user: #d9fdd3;
   /* bolha enviada (visual) */
 }

 /* BOTÃO FLOTANTE */
 .wa-fixed-btn {
   position: fixed;
   right: 24px;
   bottom: 24px;
   z-index: 99998;
   width: 64px;
   height: 64px;
   border: none;
   border-radius: 50%;
   background: var(--wa-green);
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .25)
 }

 .wa-fixed-btn:focus {
   outline: 2px solid #fff;
   outline-offset: 3px
 }

 .wa-fixed-btn svg {
   width: 42px;
   height: 42px;
   fill: #fff
 }

 /* JANELA DE CHAT */
 .wa-chat[aria-hidden="true"] {
   display: none
 }

 .wa-chat {
   position: fixed;
   right: 24px;
   bottom: 96px;
   z-index: 99999;
   width: 360px;
   max-width: 92vw;
   height: 500px;
   max-height: 78vh;
   background: #fff;
   border-radius: 16px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   box-shadow: 0 20px 40px rgba(0, 0, 0, .28);
   animation: wa-in .18s ease-out
 }

 @keyframes wa-in {
   from {
     opacity: 0;
     transform: translateY(12px) scale(.98)
   }

   to {
     opacity: 1;
     transform: none
   }
 }

 /* HEADER */
 .wa-chat-header {
   background: var(--wa-green-dark);
   color: #fff;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px
 }

 .wa-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: #128c7e;
   display: grid;
   place-items: center;
   font: bold 14px/1 system-ui, Arial;
   color: #fff;
   flex: 0 0 auto
 }

 .wa-head {
   display: flex;
   flex-direction: column;
   line-height: 1.15;
   flex: 1
 }

 .wa-title {
   font: 600 15px/1.2 system-ui, Arial;
   margin: 0
 }

 .wa-status {
   font: 12px/1.2 system-ui, Arial;
   opacity: .9;
   display: flex;
   align-items: center;
   gap: 6px
 }

 .wa-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #4fff74;
   box-shadow: 0 0 8px #4fff74
 }

 .wa-close {
   border: none;
   background: transparent;
   color: #fff;
   cursor: pointer;
   padding: 6px;
   margin-left: 6px
 }

 .wa-close svg {
   display: block
 }

 /* CORPO (lista de mensagens) */
 .wa-chat-body {
   background: var(--wa-bg);
   flex: 1;
   overflow: auto;
   padding: 14px;
   display: flex;
   flex-direction: column;
   gap: 8px
 }

 .wa-bubble {
   max-width: 85%;
   padding: 8px 10px;
   border-radius: 10px;
   position: relative;
   font: 14px/1.35 system-ui, Arial;
   color: #111;
   box-shadow: 0 1px 0 rgba(0, 0, 0, .05)
 }

 .wa-bubble.agent {
   align-self: flex-start;
   background: var(--wa-agent);
   border-top-left-radius: 0
 }

 .wa-bubble.user {
   align-self: flex-end;
   background: var(--wa-user);
   border-top-right-radius: 0
 }

 .wa-time {
   display: block;
   margin-top: 4px;
   font-size: 11px;
   opacity: .6
 }

 /* Bolha que contém o FORM (iframe) */
 .wa-bubble.form {
   background: #fff;
   align-self: flex-start;
   border-top-left-radius: 0;
   padding: 0;
   overflow: hidden;
   height: 100%;
 }

 .wa-form-frame {
   border: 0;
   width: 100%;
   height: min(300px, 100%);
   display: block;
 }

 /* RODAPÉ (fake input) – opcional visual */
 /* .wa-chat-footer {
    background: #f0f2f5;
    padding: 8px 10px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    gap: 8px
  }
  .wa-input-fake {
    flex: 1;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 18px;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font: 14px/1 system-ui, Arial;
    color: #999
  } */

 /* Mobile: sobe o chat para não colidir com o teclado/CTA fixos */
 @media (max-width:480px) {
   .wa-chat {
     right: 12px;
     left: 12px;
     bottom: 12px;
     width: auto;
     height: 70vh
   }
 }