:root{
    --wa-green:#25d366;
    --wa-gray:#f5f5f5;
    --wa-radius:16px;
    --wa-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  }
  /* Floating icon */
  #wa-widget{
    position:fixed; right:20px; bottom:20px;
    width:62px; height:62px; border-radius:50%;
    background:var(--wa-green);
    display:grid; place-items:center;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    cursor:pointer; z-index:10000;
    transition:transform .2s,filter .2s;
    animation:wa-pulse 2.4s infinite ease-in-out;
  }
  #wa-widget:hover{transform:scale(1.08);filter:brightness(1.1);}
  @keyframes wa-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.6);}
    50%    {box-shadow:0 0 0 14px rgba(37,211,102,0);}
  }
  .wa-icon{width:32px;height:32px;object-fit:contain;pointer-events:none;}

  /* Chat window (closed state) */
  #wa-window{
    position:fixed; right:20px; bottom:96px;
    width:320px; max-width:calc(100vw - 40px);
    background:#fff; border-radius:var(--wa-radius);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    font-family:var(--wa-font);
    display:flex; flex-direction:column;
    opacity:0; pointer-events:none; transform:translateY(12px);
    transition:opacity .25s,transform .25s;
    z-index:9999;
  }
  #wa-window.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  /* Header */
  .wa-header{display:flex;align-items:center;padding:12px 16px 12px 12px;border-top-left-radius:inherit;border-top-right-radius:inherit;background:rgb(0, 128, 105);color:#fff;position:relative;}
  .wa-avatar{flex:0 0 40px;height:40px;border-radius:50%;overflow:hidden;margin-right:12px;}
  .wa-avatar img{width:100%;height:100%;object-fit:cover;}
  .wa-name{font-weight:600;font-size:15px;line-height:18px;}
  .wa-reply{font-size:12px;opacity:.85;}
  .wa-close{position:absolute;right:8px;top:8px;width:20px;height:20px;border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer;}
  .wa-close::before{content:"✕";}

  /* Chat body */
  .wa-chat{padding:12px 12px 6px;overflow-y:auto;max-height:50vh;}
  .wa-time{font-size:11px;text-align:center;color:#666;margin-bottom:8px;}
  .wa-bubble{display:flex;margin-bottom:6px;}
  .wa-bubble.bot .wa-bubble-content{
    background:var(--wa-gray);color:#111;border-radius:0 8px 8px 8px;
  }
  .wa-bubble-content{padding:8px 10px;max-width:80%;font-size:14px;line-height:18px;position:relative;}
  .wa-bubble.bot .wa-bubble-content::before{
    content:"";position:absolute;left:-6px;top:0;width:0;height:0;
    border-top:10px solid var(--wa-gray);
    border-right:10px solid transparent;
  }
  /* Typing dots */
  .wa-typing{display:flex;gap:4px;margin:4px 0 10px 0;padding-left:2px;}
  .wa-typing span{
    width:6px;height:6px;border-radius:50%;background:#bbb;display:inline-block;
    animation:dot 1.2s infinite ease-in-out;
  }
  .wa-typing span:nth-child(2){animation-delay:.2s;}
  .wa-typing span:nth-child(3){animation-delay:.4s;}
  @keyframes dot{
    0%,80%,100%{transform:scale(0);}
    40%{transform:scale(1);}
  }

  /* Input bar */
  .wa-input{display:flex;align-items:center;padding:6px 6px 8px 12px;border-top:1px solid #eee;}
#wa-text{
    flex:1;resize:none;border:0;outline:none;font-size:15px;line-height:20px;
    max-height:80px;font-family:inherit;
    background-color: var(--wa-gray);
    color: black;
}
  #wa-send{
    flex:0 0 38px;display:grid;place-items:center;
    width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
    background:var(--wa-green);
  }
  #wa-send svg{pointer-events:none;}