:root{
    --wa-green: #25D366;
    --card-bg: #ffffff;
    --muted: #6b7280;
    --glass: rgba(15,23,42,0.03);
    --shadow: 0 8px 30px rgba(2,6,23,0.12);
    --radius: 14px;
    --max-width: 320px;
  }

  .wa-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999999;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  /* Floating WhatsApp button */
  .wa-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2ed573, var(--wa-green));
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 8px 18px rgba(37,211,102,0.18);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
    border: none;
  }
  .wa-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 30px rgba(37,211,102,0.22); }
  .wa-button img{ width:34px; height:34px; display:block; }

  /* Panel container */
.wa-panel {
  width: var(--max-width);
  max-width: calc(100vw - 40px);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), var(--card-bg));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 12px;

  /* KEY FIXES BELOW */
  position: absolute;
  bottom: calc(100% + 10px);      /* panel appears ABOVE the button */
  right: 0;                       /* align panel left edge to button right edge */
  transform-origin: bottom right; /* open from the button's right side */

  transform: translateY(12px) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2,.9,.25,1),
              opacity .18s ease;
}

/* show panel when widget open */
.wa-widget.open .wa-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}


  /* Header */
  .wa-panel .wa-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 14px;
    background: linear-gradient(90deg, rgba(37,211,102,0.06), rgba(37,211,102,0.02));
    border-bottom: 1px solid rgba(15,23,42,0.04);
  }
  .wa-title {
    display:flex;
    gap:10px;
    align-items:center;
  }
  .wa-title .brand {
    font-weight:700;
    font-size:15px;
    color:#081124;
    letter-spacing: .2px;
  }
  .wa-title .sub {
    font-size:12px;
    color:var(--muted);
    display:block;
    margin-top:-2px;
  }

  .wa-close {
    background: transparent;
    border: none;
    width:36px;
    height:36px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--muted);
    transition: background .12s ease, color .12s ease;
  }
  .wa-close:hover { background: var(--glass); color:#111827; }

  /* Agents list */
  .wa-agents {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    background: transparent;
  }
  .wa-agent {
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    border-radius:12px;
    background: linear-gradient(180deg, rgba(250,250,250,1), rgba(245,247,250,1));
    text-decoration:none;
    color:#061226;
    box-shadow: 0 4px 14px rgba(8,12,20,0.04);
    transition: transform .12s ease, box-shadow .12s ease;
    border: 1px solid rgba(10,14,20,0.04);
  }
  .wa-agent:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(8,12,20,0.07); }

  .wa-agent .pic {
    width:52px;
    height:52px;
    border-radius:50%;
    overflow:hidden;
    flex: 0 0 52px;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(2,6,23,0.06);
  }
  .wa-agent img { width:100%; height:100%; object-fit:cover; display:block; }

  .wa-agent .meta {
    display:flex;
    flex-direction:column;
  }
  .wa-agent .name { font-weight:600; font-size:14px; }
  .wa-agent .role { font-size:12px; color:var(--muted); margin-top:3px; }

  .wa-agent .cta {
    margin-left:auto;
    background:var(--wa-green);
    color:#fff;
    font-weight:600;
    font-size:13px;
    padding:8px 10px;
    border-radius:10px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
    box-shadow: 0 6px 18px rgba(37,211,102,0.12);
  }
  .wa-agent .cta img { width:16px; height:16px; }

  /* small tip */
  .wa-tip { padding:10px 12px 16px 12px; color:var(--muted); font-size:13px; border-top:1px solid rgba(15,23,42,0.03); }

  /* responsive */
  @media (max-width:420px){
    .wa-panel { --max-width: 92vw; margin-right:8px; }
    .wa-button { width:56px; height:56px; }
  }