:root{
  --whatchat-green:#25D366;
  --whatchat-radius:20px;
  --whatchat-shadow:0 18px 50px rgba(0,0,0,.18);
  --whatchat-border:rgba(0,0,0,.08);
  --whatchat-text:#111827;
  --whatchat-muted:#6b7280;
}

.whatchat{ position:fixed; bottom:32px; z-index:99999; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
.whatchat, .whatchat *{ box-sizing:border-box; }
.whatchat--right{ right:28px; }
.whatchat--left{ left:28px; }

/* container for fab + tooltip */
.whatchat-fabwrap{ position:relative; display:inline-block; }

/* Reset theme button styles inside widget */
.whatchat button,
.whatchat [type="button"],
.whatchat input[type="submit"],
.whatchat input[type="button"]{
  background: none !important;
  border: 0 !important;
  color: inherit !important;
  font: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#whatchat-fab{
  width:64px;height:64px;border:0;cursor:pointer;
  border-radius:999px;background:var(--whatchat-green) !important;
  box-shadow:0 14px 35px rgba(37,211,102,.35), 0 10px 24px rgba(0,0,0,.18) !important;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
#whatchat-root.is-open #whatchat-fab{ display:none; }
#whatchat-fab:before{
  content:""; position:absolute; inset:-6px; border-radius:999px;
  background:var(--whatchat-green); opacity:.18; filter:blur(14px);
}
#whatchat-fab .whatchat-fab__icon{ position:relative; display:flex; border-radius:999px; box-shadow:none; }
#whatchat-fab:hover{ transform:translateY(-1px); }
#whatchat-fab:active{ transform:translateY(0px) scale(.98); }

/* Tooltip next to FAB */
.whatchat-tooltip{
  position:absolute; bottom:50%; transform: translateY(50%) translateX(8px);
  background:#fff; color:#111827; border:1px solid var(--whatchat-border);
  border-radius:10px; padding:10px 12px; box-shadow:var(--whatchat-shadow);
  font-size:14px; font-weight:400; opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease; white-space:nowrap;
}
.whatchat--right .whatchat-tooltip{ right:76px; }
.whatchat--left .whatchat-tooltip{ left:76px; }
.whatchat-tooltip.is-show{ opacity:1; transform: translateY(50%) translateX(0); }
/* Never show tooltip while panel is open */
#whatchat-root.is-open .whatchat-tooltip{ display:none !important; }

.whatchat-panel{
  width:360px; margin-top:12px; overflow:hidden;
  border-radius:var(--whatchat-radius);
  border:1px solid var(--whatchat-border);
  box-shadow:var(--whatchat-shadow);
  background:#fff;
  display:none;
  transform-origin: 90% 100%;
  /* make modal taller while keeping viewport safety margin */
  max-height:min(680px, calc(100vh - 80px));
  /* prepare flex column layout (even while hidden) */
  flex-direction: column;
}
.whatchat--left .whatchat-panel{ transform-origin:10% 100%; }
.whatchat-panel.is-open{ display:flex; flex-direction:column; animation: whatchatPop .18s ease-out; }

@keyframes whatchatPop{
  from{ opacity:0; transform: translateY(14px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.whatchat-head{
  background:var(--whatchat-green);
  color:#fff; padding:18px 18px 14px 18px;
  position:relative;
  flex-shrink:0;
}
.whatchat-head__title{ font-size:18px; font-weight:800; line-height:1.1; }
.whatchat-head__hint{ margin-top:6px; font-size:13px; opacity:.95; padding-right:44px; }
.whatchat-close{
  position:absolute; right:10px; top:10px;
  width:34px;height:34px;border-radius:999px;
  border:0 !important; cursor:pointer; color:#fff !important;
  background:rgba(255,255,255,.18) !important;
  font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:none !important; outline:none !important;
}
.whatchat-close:hover{ background:rgba(255,255,255,.24); }

.whatchat-body{ padding:16px 16px 18px 16px; overflow:auto; flex:1 1 auto; }
.whatchat-replyhint{ display:none; }

.whatchat-list{ display:flex; flex-direction:column; gap:12px; }
#whatchat-root .whatchat-item{
  width:100%;
  border:1px solid var(--whatchat-border) !important;
  background:#f8fafc !important;
  border-radius:18px;
  min-height:72px;
  cursor:pointer;
  /* Layout utama */
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  position:relative;
  padding:14px 16px; /* baseline */
  padding-right:92px; /* ruang untuk status kanan (absolute) - dipersempit lagi */
  padding-left:72px;  /* ruang untuk ikon kiri (absolute) - dipersempit */
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
  text-align:left; /* ensure button text not centered */
}
.whatchat-item:hover{ background:#eefcf5 !important; transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.06); border-color:#a7f3d0 !important; }
.whatchat-item:active{ transform: translateY(0px) scale(.99); }
#whatchat-root .whatchat-item__left{ display:flex !important; align-items:center !important; gap:12px; flex:1 1 auto; min-width:0 !important; }
.whatchat-badge{
  width:48px;height:48px;border-radius:999px;
  background:#fff;
  /* gunakan inset shadow agar lingkaran tidak terlihat 'penyok' oleh subpixel */
  box-shadow: inset 0 0 0 1.5px var(--whatchat-border);
  display:flex; align-items:center; justify-content:center; /* perfect centering */
}
.whatchat-badge__icon{ display:flex; width:22px; height:22px; align-items:center; justify-content:center; }
.whatchat-badge__icon svg{ display:block; width:22px; height:22px; transform:none; }
#whatchat-root .whatchat-item__meta{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden; }
#whatchat-root .whatchat-item__name{
  font-size:16px; font-weight:800; color:var(--whatchat-text);
  /* pastikan maksimal 2 baris agar rapi di semua tema */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word; white-space:normal !important; max-width:100% !important; line-height:1.25;
}
#whatchat-root .whatchat-item__sub{ font-size:12px; color:var(--whatchat-muted); margin-top:2px; }
#whatchat-root .whatchat-item__right{ display:flex !important; align-items:center !important; flex:0 0 auto; margin:0 !important; position:absolute; right:12px; top:50%; transform:translateY(-50%); }

/* Ikon WhatsApp di kiri: absolute agar tidak mempengaruhi kolom teks */
#whatchat-root .whatchat-item .whatchat-badge{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
}
.whatchat-status{
  font-size:12px; font-weight:800; color:#16a34a; background:#dcfce7 !important;
  border:1px solid #bbf7d0 !important; padding:6px 8px; border-radius:999px; white-space:nowrap;
}

.whatchat-formhead{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.whatchat-formtitle{ font-size:16px; font-weight:800; color:var(--whatchat-text); display:flex; align-items:center; gap:8px; }
.whatchat-formtitle .whatchat-formicon{ display:inline-flex; vertical-align:middle; margin-right:8px; }
.whatchat-formtitle .whatchat-formicon svg{ width:18px; height:18px; display:block; }
.whatchat-back{
  border:0; background:transparent; cursor:pointer;
  font-size:12px; font-weight:800; color:#4b5563;
  padding:6px 8px; border-radius:10px;
}
.whatchat-back:hover{ background:#f3f4f6; color:#111827; }

.whatchat-selected{
  border:1px solid var(--whatchat-border);
  background:#fff; border-radius:16px; padding:12px; margin-bottom:12px;
}
.whatchat-selected__label{ font-size:11px; color:var(--whatchat-muted); }
.whatchat-selected__name{ margin-top:4px; font-size:14px; font-weight:800; color:var(--whatchat-text); }

/* Card style for selected agent in form */
.whatchat-selected--card{
  position:relative;
  background:#f8fafc;
  border-radius:16px;
  border:1px solid #e5e7eb;
  padding:12px;
  /* beri ruang tetap untuk ikon kiri dan tombol Back kanan */
  padding-left:72px;
  padding-right:88px;
}
.whatchat-selected--card .whatchat-selected__name{
  margin:0; font-size:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; line-height:1.25;
}
.whatchat-selected--card .whatchat-selected__sub{ font-size:12px; color:var(--whatchat-muted); }
.whatchat-selected__left{ display:block; min-width:0; }
.whatchat-selected--card .whatchat-selected__meta{ min-width:0; overflow:hidden; }
.whatchat-selected--card .whatchat-badge{ width:42px; height:42px; box-shadow: inset 0 0 0 1.5px #e5e7eb; position:absolute; left:12px; top:50%; transform:translateY(-50%); }
.whatchat-selected--card .whatchat-badge__icon svg{ width:18px; height:18px; transform:none; }
.whatchat-remove{
  border:1px solid #e5e7eb !important; background:#fff !important;
  padding:4px 8px; border-radius:999px; cursor:pointer; height:auto;
  display:flex; align-items:center; justify-content:center; color:#374151 !important; font-weight:600; font-size:11px; line-height:1;
}
.whatchat-selected--card .whatchat-remove{ position:absolute; right:12px; top:50%; transform:translateY(-50%); }
.whatchat-remove:hover{ background:#f3f4f6; }

/* First field spacing after card */
.whatchat-selected--card + .whatchat-field{ margin-top:14px; }

.whatchat-field{ display:block; margin:10px 0; }
.whatchat-field__label{ font-size:12px; font-weight:800; color:#374151; margin-bottom:6px; display:block; }
.whatchat-input{
  width:100%; padding:11px 12px; border-radius:12px !important;
  border:1px solid var(--whatchat-border) !important; outline:none !important;
  background:#fff !important;
  font-family:inherit;
}
.whatchat-help{ font-size:11px; color:#6b7280; margin-top:6px; }
.whatchat-error{ font-size:12px; color:#ef4444; margin-top:6px; }
.whatchat-textarea{
  width:100%; min-height:110px; padding:11px 12px;
  border-radius:12px !important; border:1px solid var(--whatchat-border) !important; outline:none !important;
  resize:none;
  background:#fff !important;
  font-family:inherit;
}
.whatchat-input:focus, .whatchat-textarea:focus{
  box-shadow:0 0 0 3px rgba(17,24,39,.08);
}

/* Placeholder styles aligned with helper text */
.whatchat-input::placeholder,
.whatchat-textarea::placeholder{
  color:#6b7280;
  font-size:12px; /* slightly larger for readability */
  opacity:1; /* ensure consistent tone across browsers */
}

/* input group for WhatsApp number */
.whatchat-inputgroup{ display:flex; align-items:center; gap:8px; }
.whatchat-prefix{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--whatchat-border) !important; background:#fff !important; cursor:pointer;
  height:40px; padding:0 10px; border-radius:12px; font-weight:700; color:#111827;
}
.whatchat-prefix .whatchat-flag{ font-size:16px; }
.whatchat-prefix .whatchat-dial{ font-size:12px; color:#111827; }
.whatchat-prefix .whatchat-caret{ color:#6b7280; margin-left:2px; }
.whatchat-input--number{ flex:1; height:40px; }
.whatchat-input--number.is-error{ border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.12); }
.whatchat-dropdown{
  position:absolute; margin-top:6px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:var(--whatchat-shadow);
  max-height:200px; overflow:auto; padding:6px; z-index:10;
}
.whatchat-inputgroup{ position:relative; }
.whatchat-option{ width:100%; text-align:left; display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; background:#fff; cursor:pointer; border-radius:10px; }
.whatchat-option:hover{ background:#f3f4f6; }
.whatchat-option .whatchat-dial{ margin-left:auto; color:#6b7280; font-weight:700; }

.whatchat-actions{ display:block; margin-top:14px; }
.whatchat-cancel{
  border:0 !important; cursor:pointer; background:#f3f4f6 !important;
  padding:10px 14px; border-radius:12px; font-weight:900; color:#111827;
}
.whatchat-cancel:hover{ background:#e5e7eb; }
#whatchat-root .whatchat-send{
  border:0 !important; cursor:pointer; color:#fff !important;
  background:var(--whatchat-green) !important;
  padding:14px 16px; border-radius:14px !important; font-weight:900 !important; width:100% !important; display:block;
  box-shadow:0 14px 28px rgba(37,211,102,.28) !important;
}
#whatchat-root .whatchat-send:hover{ filter:brightness(.96); }

/* Temp toast for submit feedback */
.whatchat-toast{
  position:fixed; z-index:999999; left:50%; transform:translateX(-50%);
  bottom:24px; background:#111827; color:#fff; padding:10px 14px; border-radius:10px; font-weight:700;
  box-shadow:0 10px 24px rgba(0,0,0,.18); opacity:.96;
}

/* responsive */
@media (max-width: 420px){
  .whatchat-panel{ width: min(360px, calc(100vw - 24px)); }
  .whatchat--right{ right:14px; }
  .whatchat--left{ left:14px; }
  .whatchat{ bottom:18px; }
}