/* Webabby WhatsApp Chat — frontend styles. Built by Webabby Services. */

#webabby-wa{
  --wa-brand:#25D366;
  --wa-header:#14302B;
  position:fixed; bottom:22px; z-index:99990;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
#webabby-wa.wa-pos-right{ right:22px; }
#webabby-wa.wa-pos-left{ left:22px; }

/* Floating action button */
.wa-fab{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--wa-brand); color:#fff; border:none; cursor:pointer;
  height:58px; padding:0 20px 0 14px; border-radius:34px;
  box-shadow:0 8px 26px rgba(0,0,0,.22);
  font-size:15px; font-weight:600; line-height:1;
  transition:transform .18s ease, box-shadow .18s ease;
}
.wa-fab:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.28); }
.wa-fab:active{ transform:translateY(0); }
.wa-fab-icon{ flex:0 0 auto; }
.wa-fab-label{ white-space:nowrap; }
.wa-dot{
  position:absolute; top:6px; right:8px; width:12px; height:12px; border-radius:50%;
  background:#ff3b30; border:2px solid #fff;
  animation:wa-pulse 2s infinite;
}
#webabby-wa.wa-pos-left .wa-dot{ right:auto; left:8px; }
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,59,48,.55); }
  70%{ box-shadow:0 0 0 9px rgba(255,59,48,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,48,0); }
}

/* When open, shrink FAB to a round close-ish state */
#webabby-wa.is-open .wa-fab-label{ display:none; }
#webabby-wa.is-open .wa-fab{ padding:0; width:58px; justify-content:center; }
#webabby-wa.is-open .wa-dot{ display:none; }

/* Chat panel */
.wa-panel{
  position:absolute; bottom:74px; width:330px; max-width:calc(100vw - 36px);
  background:#ECE5DD; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.30);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.98);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
#webabby-wa.wa-pos-right .wa-panel{ right:0; }
#webabby-wa.wa-pos-left .wa-panel{ left:0; }
#webabby-wa.is-open .wa-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

.wa-head{
  display:flex; align-items:center; gap:12px; padding:14px 14px;
  background:var(--wa-header); color:#fff;
}
.wa-avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto;
  background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center;
}
.wa-id{ flex:1 1 auto; min-width:0; line-height:1.25; }
.wa-id strong{ display:block; font-size:15px; }
.wa-id span{ display:block; font-size:12px; opacity:.85; }
.wa-id span::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#5dff8a; margin-right:6px; vertical-align:middle;
}
.wa-close{
  background:none; border:none; color:#fff; font-size:24px; line-height:1;
  cursor:pointer; opacity:.8; padding:2px 4px;
}
.wa-close:hover{ opacity:1; }

.wa-body{
  padding:18px 16px 16px;
  background:#ECE5DD;
  background-image:radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size:18px 18px;
}
.wa-bubble{
  background:#fff; color:#111b21; font-size:14px; line-height:1.5;
  padding:12px 14px; border-radius:0 12px 12px 12px;
  box-shadow:0 1px 1px rgba(0,0,0,.08); margin-bottom:14px;
  position:relative;
}
.wa-bubble::before{
  content:""; position:absolute; top:0; left:-7px;
  border-width:0 8px 8px 0; border-style:solid; border-color:transparent #fff transparent transparent;
}
.wa-name, .wa-msg{
  width:100%; border:1px solid #cfd3cd; border-radius:9px;
  padding:10px 12px; font-size:14px; margin-bottom:10px;
  background:#fff; color:#111b21; box-sizing:border-box; font-family:inherit;
}
.wa-msg{ resize:vertical; min-height:64px; }
.wa-name:focus, .wa-msg:focus{ outline:none; border-color:var(--wa-brand); box-shadow:0 0 0 2px rgba(37,211,102,.18); }

.wa-send{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--wa-brand); color:#fff; border:none; cursor:pointer;
  padding:12px 16px; border-radius:24px; font-size:15px; font-weight:600; font-family:inherit;
  transition:filter .15s ease, transform .15s ease;
}
.wa-send:hover{ filter:brightness(.96); transform:translateY(-1px); }
.wa-hours{ margin:10px 2px 0; font-size:11px; color:#54656f; text-align:center; }

/* Inline (shortcode) variant */
.webabby-wa-inline{ position:relative; display:inline-block; }
.wa-inline-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#fff; border:none; cursor:pointer;
  padding:12px 20px; border-radius:30px; font-size:15px; font-weight:600; font-family:inherit;
  box-shadow:0 6px 18px rgba(0,0,0,.14); transition:transform .15s ease;
}
.wa-inline-btn:hover{ transform:translateY(-2px); }
.wa-inline-panel{ bottom:auto; top:calc(100% + 10px); left:0; }
.webabby-wa-inline.is-open .wa-inline-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }

@media (max-width:480px){
  #webabby-wa{ bottom:16px; }
  #webabby-wa.wa-pos-right{ right:16px; }
  #webabby-wa.wa-pos-left{ left:16px; }
  .wa-fab-label{ display:none; }
  .wa-fab{ width:58px; padding:0; justify-content:center; }
  .wa-panel{ width:calc(100vw - 32px); }
}

@media (prefers-reduced-motion:reduce){
  .wa-fab, .wa-send, .wa-inline-btn, .wa-panel{ transition:none; }
  .wa-dot{ animation:none; }
}