:root {
    --wa-green:      #25D366;
    --wa-green-d:    #128C7E;
    --wa-green-xl:   #dcf8c6;
    --wa-dark:       #075E54;
    --wa-bubble-out: #dcf8c6;
    --wa-bubble-in:  #ffffff;
    --wa-bg:         #e5ddd5;
    --wa-header:     #075E54;
    --wa-radius:     18px;
    --wa-shadow:     0 8px 32px rgba(0,0,0,.22);
    --wa-w:          340px;
    --ff-head: 'Playfair Display', Georgia, serif;
    --ff-body: 'DM Sans', system-ui, sans-serif;
  }

  /* ── Launcher FAB ── */
  #wa-launcher {
    position: fixed;
    bottom: 65px; right: 20px;
    z-index: 9999;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--wa-green);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(37,211,102,.5);
    transition: transform .2s, box-shadow .2s;
    outline: none;
  }
  #wa-launcher:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37,211,102,.6); }
  #wa-launcher:active { transform: scale(.97); }
  #wa-launcher svg { width: 30px; height: 30px; fill: #fff; transition: opacity .2s, transform .2s; }
  #wa-launcher .wa-ico-close { display: none; }
  #wa-launcher.open .wa-ico-wa { display: none; }
  #wa-launcher.open .wa-ico-close { display: block; }

  /* Pulse ring */
  #wa-launcher::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(37,211,102,.5);
    animation: wa-pulse 2.2s ease-out infinite;
  }
  @keyframes wa-pulse {
    0%   { transform: scale(1);   opacity: .8; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
  }

  /* Unread badge */
  #wa-badge {
    position: absolute;
    top: -3px; right: -3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #ff3b30;
    color: #fff;
    font-family: var(--ff-body);
    font-size: 11px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    pointer-events: none;
    transition: transform .2s;
  }
  #wa-badge.hidden { transform: scale(0); }

  /* Tooltip on hover */
  #wa-tooltip {
    position: fixed;
    bottom: 36px; right: 100px;
    background: var(--wa-dark);
    color: #fff;
    font-family: var(--ff-body);
    font-size: 13px; font-weight: 500;
    padding: 8px 14px;
    border-radius: 10px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .2s, transform .2s;
    z-index: 9998;
  }
  #wa-tooltip::after {
    content: '';
    position: absolute;
    top: 50%; right: -7px; transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--wa-dark);
  }
  #wa-launcher:hover ~ #wa-tooltip,
  #wa-launcher:focus ~ #wa-tooltip { opacity: 1; transform: translateX(0); }

  /* ── Chat window ── */
  #wa-window {
    position: fixed;
    bottom: 100px; right: 28px;
    z-index: 9998;
    width: var(--wa-w);
    max-height: 520px;
    border-radius: var(--wa-radius);
    box-shadow: var(--wa-shadow);
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--wa-bg);
    transform-origin: bottom right;
    transform: scale(.85) translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
    font-family: var(--ff-body);
  }
  #wa-window.open {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  /* Header */
  .wa-header {
    background: var(--wa-header);
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
  }
  .wa-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
  }
  .wa-avatar svg { width: 22px; height: 22px; fill: #fff; }
  .wa-avatar .wa-online-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--wa-green);
    border: 2px solid var(--wa-header);
  }
  .wa-header-info { flex: 1; min-width: 0; }
  .wa-header-info .wa-name {
    color: #fff; font-size: 14.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--ff-head);
  }
  .wa-header-info .wa-status {
    color: rgba(255,255,255,.75); font-size: 11.5px;
  }
  .wa-header-actions { display: flex; gap: 8px; }
  .wa-icon-btn {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,.85);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s; padding: 0;
  }
  .wa-icon-btn:hover { background: rgba(255,255,255,.12); }
  .wa-icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

  /* Intro banner */
  .wa-intro {
    background: var(--wa-header);
    padding: 0 16px 18px;
    color: rgba(255,255,255,.85);
    font-size: 12.5px;
    line-height: 1.6;
    flex-shrink: 0;
  }
  .wa-intro strong { color: #fff; display: block; font-size: 13px; margin-bottom: 3px; }

  /* Divider with date */
  .wa-date-divider {
    text-align: center; padding: 12px 0 6px;
    flex-shrink: 0;
  }
  .wa-date-divider span {
    background: rgba(225,245,254,.9);
    color: #555;
    font-size: 11.5px; padding: 4px 10px;
    border-radius: 8px;
    display: inline-block;
  }

  /* Bubble area */
  .wa-bubbles {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px 12px;
    display: flex; flex-direction: column; gap: 6px;
    scroll-behavior: smooth;
  }
  .wa-bubbles::-webkit-scrollbar { width: 3px; }
  .wa-bubbles::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 3px; }

  /* Individual bubble */
  .wa-msg {
    max-width: 85%;
    border-radius: 8px;
    padding: 8px 12px 4px;
    font-size: 13.5px; line-height: 1.55;
    position: relative;
    word-break: break-word;
  }
  .wa-msg.in {
    background: var(--wa-bubble-in);
    align-self: flex-start;
    border-top-left-radius: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
  }
  .wa-msg.out {
    background: var(--wa-bubble-out);
    align-self: flex-end;
    border-top-right-radius: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    color: #303030;
  }
  .wa-msg .wa-sender {
    font-size: 11px; font-weight: 600; color: var(--wa-green-d);
    margin-bottom: 2px; display: block;
  }
  .wa-msg .wa-time {
    font-size: 10.5px; color: rgba(0,0,0,.38);
    text-align: right; margin-top: 3px;
    display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  }
  .wa-msg.out .wa-time { color: rgba(0,100,70,.5); }
  .wa-tick { width: 14px; height: 14px; fill: #53bdeb; }

  /* Quick replies */
  .wa-quick-replies {
    padding: 8px 12px;
    display: flex; flex-wrap: wrap; gap: 6px;
    border-top: 1px solid rgba(0,0,0,.06);
    background: rgba(255,255,255,.6);
    flex-shrink: 0;
  }
  .wa-qr-btn {
    border: 1.5px solid var(--wa-green-d);
    color: var(--wa-green-d);
    background: #fff;
    font-family: var(--ff-body);
    font-size: 12px; font-weight: 500;
    padding: 5px 12px;
    border-radius: 50px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
  }
  .wa-qr-btn:hover { background: var(--wa-green-d); color: #fff; }

  /* Typing indicator */
  .wa-typing {
    background: var(--wa-bubble-in);
    border-radius: 8px; border-top-left-radius: 0;
    align-self: flex-start;
    padding: 10px 14px;
    display: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
  }
  .wa-typing span {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #aaa;
    animation: wa-bounce .9s infinite;
    margin: 0 1.5px;
  }
  .wa-typing span:nth-child(2) { animation-delay: .15s; }
  .wa-typing span:nth-child(3) { animation-delay: .3s; }
  @keyframes wa-bounce {
    0%,60%,100% { transform: translateY(0); }
    30%          { transform: translateY(-5px); }
  }

  /* Input bar */
  .wa-input-bar {
    padding: 10px 10px;
    display: flex; align-items: center; gap: 8px;
    background: #f0f0f0;
    flex-shrink: 0;
  }
  .wa-input-wrap {
    flex: 1; background: #fff;
    border-radius: 24px;
    display: flex; align-items: center;
    padding: 0 12px; gap: 6px;
    border: 1px solid rgba(0,0,0,.08);
  }
  .wa-input {
    flex: 1; border: none; outline: none;
    background: transparent;
    font-family: var(--ff-body); font-size: 13.5px;
    padding: 9px 0;
    color: #303030;
    resize: none;
    max-height: 80px;
    overflow-y: auto;
  }
  .wa-input::placeholder { color: #aaa; }
  .wa-send-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--wa-green);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .1s;
    flex-shrink: 0;
  }
  .wa-send-btn:hover { background: var(--wa-green-d); }
  .wa-send-btn:active { transform: scale(.93); }
  .wa-send-btn svg { width: 18px; height: 18px; fill: #fff; }

  /* Footer tagline */
  .wa-footer-tag {
    text-align: center; padding: 6px;
    font-size: 11px; color: rgba(0,0,0,.35);
    background: #f0f0f0;
    flex-shrink: 0;
  }
  .wa-footer-tag a { color: var(--wa-green-d); }

  /* Mobile adjustments */
  @media (max-width: 480px) {
    :root { --wa-w: calc(100vw - 28px); }
    #wa-window { right: 14px; bottom: 88px; }
    #wa-launcher { bottom: 20px; right: 20px; }
  }