/* Anak WhatsApp Chat — Frontend Widget v2.0 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --awac-g:      #25D366;
  --awac-gd:     #128C7E;
  --awac-gdd:    #075E54;
  --awac-gl:     #DCF8C6;
  --awac-bg:     #ECE5DD;
  --awac-w:      #ffffff;
  --awac-text:   #111b21;
  --awac-sub:    #667781;
  --awac-r:      18px;
  --awac-font:   'DM Sans', sans-serif;
  --awac-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
}

#awac-root {
  position: fixed; bottom: 24px; z-index: 99999;
  font-family: var(--awac-font);
}
#awac-root.awac-right { right: 24px; }
#awac-root.awac-left  { left:  24px; }

/* FAB */
#awac-fab {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--awac-widget-color, #25D366);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  position: relative; z-index: 2;
}
#awac-fab:hover { transform: scale(1.1); }
#awac-fab svg { width: 30px; height: 30px; }
#awac-fab::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: rgba(37,211,102,.3);
  animation: awac-pulse 2.2s ease-out infinite;
}
#awac-root.awac-no-pulse #awac-fab::before { display: none; }
@keyframes awac-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(1.6); opacity: 0;  }
  100% { transform: scale(1.6); opacity: 0;  }
}
#awac-badge {
  position: absolute; top: -3px; right: -3px;
  background: #ef4444; color: #fff;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  animation: awac-badge-in .4s cubic-bezier(.34,1.56,.64,1) .9s both;
}
@keyframes awac-badge-in { from { transform:scale(0); } to { transform:scale(1); } }
#awac-root.awac-open #awac-badge { display: none; }
.awac-icon-close { display: none; stroke: #fff; stroke-width: 2.5; fill: none; }
.awac-icon-wa { display: block; fill: white; }
#awac-root.awac-open .awac-icon-close { display: block; }
#awac-root.awac-open .awac-icon-wa    { display: none;  }
#awac-root.awac-open #awac-fab::before { display: none; }

/* Panel */
#awac-panel {
  position: absolute; bottom: 74px;
  width: 340px; border-radius: var(--awac-r);
  overflow: hidden; box-shadow: var(--awac-shadow);
  background: var(--awac-bg);
  transform: scale(.85) translateY(12px); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), opacity .25s;
}
#awac-root.awac-right #awac-panel { right: 0; transform-origin: bottom right; }
#awac-root.awac-left  #awac-panel { left:  0; transform-origin: bottom left; }
#awac-root.awac-open  #awac-panel { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }

/* Header */
#awac-header {
  background: var(--awac-header-color, #075E54);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.awac-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--awac-widget-color, #25D366);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; border: 2px solid rgba(255,255,255,.25);
}
.awac-header-text h3 { margin:0; color:#fff; font-size:14.5px; font-weight:700; }
.awac-header-text p  { margin:2px 0 0; color:rgba(255,255,255,.7); font-size:11.5px; }
.awac-online { width:8px; height:8px; border-radius:50%; background:#69e06d; margin-left:auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.25); animation: awac-blink 2s ease-in-out infinite; }
@keyframes awac-blink { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* Body */
#awac-body { padding:12px 12px 6px; display:flex; flex-direction:column; gap:8px; }
.awac-bubble {
  background: var(--awac-w); border-radius: 0 12px 12px 12px;
  padding: 10px 13px; font-size: 13.5px; line-height: 1.55;
  color: var(--awac-text); max-width: 90%;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  animation: awac-pop .35s cubic-bezier(.34,1.56,.64,1) both;
  position: relative;
}
.awac-bubble::before {
  content:''; position:absolute; top:0; left:-8px;
  border-width:0 10px 10px 0; border-style:solid;
  border-color:transparent var(--awac-w) transparent transparent;
}
.awac-bubble .awac-time { font-size:10px; color:var(--awac-sub); text-align:right; margin-top:4px; display:block; }
@keyframes awac-pop {
  from { transform:scale(.85) translateY(6px); opacity:0; }
  to   { transform:scale(1) translateY(0); opacity:1; }
}
.awac-typing { display:flex; align-items:center; gap:4px; padding:8px 13px; }
.awac-typing span { width:7px; height:7px; border-radius:50%; background:var(--awac-sub); animation:awac-bounce .9s infinite; }
.awac-typing span:nth-child(2) { animation-delay:.15s; }
.awac-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes awac-bounce { 0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-5px);} }

/* Actions */
#awac-actions { padding:6px 10px 10px; display:flex; flex-direction:column; gap:7px; }
.awac-btn {
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-radius:11px; border:none; cursor:pointer;
  font-family:var(--awac-font); font-size:13.5px; font-weight:600;
  text-decoration:none; transition:transform .18s, filter .18s, box-shadow .18s;
  width:100%; text-align:left;
}
.awac-btn:hover { transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 4px 12px rgba(0,0,0,.13); }
.awac-btn-call    { background: var(--awac-header-color, #075E54); color:#fff; }
.awac-btn-msg     { background: var(--awac-widget-color, #25D366); color:#fff; }
.awac-btn-explore { background:var(--awac-w); color:var(--awac-gdd); border:1.5px solid rgba(7,94,84,.15); }
.awac-btn-faq     { background:var(--awac-w); color:var(--awac-gdd); border:1.5px solid rgba(7,94,84,.15); }
.awac-btn svg { width:19px; height:19px; flex-shrink:0; }
.awac-btn span { flex:1; }
.awac-btn-chevron { margin-left:auto; width:15px !important; opacity:.45; }

/* Panels (Explore / FAQ) */
.awac-subpanel {
  display:none; flex-direction:column; max-height:300px; overflow:hidden;
}
.awac-subpanel.awac-active { display:flex; }
#awac-root.awac-subpanel-open #awac-body,
#awac-root.awac-subpanel-open #awac-actions { display:none; }

.awac-subpanel-header {
  background: var(--awac-header-color, #075E54); color:#fff;
  padding:11px 14px; display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:600;
}
.awac-back-btn {
  background:none; border:none; color:#fff; cursor:pointer;
  padding:0; opacity:.8; display:flex; align-items:center;
}
.awac-subpanel-scroll { overflow-y:auto; flex:1; padding:10px; display:flex; flex-direction:column; gap:8px;
  scrollbar-width:thin; }

/* Products */
.awac-product-card {
  background:var(--awac-w); border-radius:11px; padding:11px 13px;
  display:flex; align-items:center; gap:11px; text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,.09); border:1.5px solid transparent;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.awac-product-card:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12); border-color:var(--awac-g); }
.awac-product-icon {
  width:40px; height:40px; border-radius:9px;
  background:linear-gradient(135deg,#e8f8ed,#c8f0d8);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
  overflow:hidden;
}
.awac-product-icon img { width:100%; height:100%; object-fit:cover; }
.awac-product-name { margin:0; font-size:13px; font-weight:600; color:var(--awac-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.awac-product-price { margin:2px 0 0; font-size:11.5px; color:var(--awac-gd); font-weight:600; }
.awac-product-arrow { color:var(--awac-sub); flex-shrink:0; }

/* FAQ */
.awac-faq-item { background:var(--awac-w); border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.awac-faq-q {
  padding:11px 14px; font-size:13px; font-weight:600; color:var(--awac-text);
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition:background .15s;
}
.awac-faq-q:hover { background:var(--awac-gl); }
.awac-faq-q svg { width:15px; height:15px; flex-shrink:0; transition:transform .2s; stroke:var(--awac-sub); fill:none; }
.awac-faq-item.awac-open .awac-faq-q svg { transform:rotate(180deg); }
.awac-faq-a {
  display:none; padding:0 14px 12px; font-size:12.5px; line-height:1.6; color:var(--awac-sub);
}
.awac-faq-item.awac-open .awac-faq-a { display:block; }

/* Footer */
#awac-footer {
  text-align:center; padding:5px 0 9px;
  font-size:10.5px; color:var(--awac-sub); background:var(--awac-bg);
}
#awac-footer a { color:var(--awac-gd); text-decoration:none; }

@media (max-width:400px) {
  #awac-panel { width:calc(100vw - 28px); }
  #awac-root.awac-right { right:10px; }
  #awac-root.awac-left  { left:10px; }
}