/* ================================================================
   VALSKUY CHAT WIDGET
================================================================ */
#vsk-chat-btn{
  position:fixed;bottom:24px;right:20px;z-index:9002;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--gold);border:1px solid var(--border);cursor:pointer;
  font-family:'DM Sans',sans-serif;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:border-color .2s,background .2s,transform .2s;
}
#vsk-chat-btn:hover{border-color:var(--br2);transform:scale(1.05)}
#vsk-chat-btn-icon{
  width:100%;height:100%;background:none;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#vsk-chat-btn-icon svg{width:24px;height:24px;fill:var(--void)}
#vsk-chat-btn-label{display:none}
#vsk-chat-badge{
  position:absolute;top:-6px;right:-6px;
  background:var(--red);color:var(--chalk);
  font-size:10px;font-weight:700;
  min-width:18px;height:18px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
}
#vsk-chat-badge.vsk-hidden{display:none}

#vsk-chat-panel{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9003;
  width:100vw;height:100vh;max-height:100vh; /* fallback, browser lama tanpa dvh */
  height:100dvh;max-height:100dvh;
  background:var(--base);border:none;
  display:flex;flex-direction:column;overflow:hidden;
  overscroll-behavior:contain;
  font-family:'DM Sans',sans-serif;
  opacity:1;transform:translateY(0);
  transition:opacity .22s ease,transform .22s ease,height .18s ease;
}
#vsk-chat-panel.vsk-hidden{display:none}
#vsk-chat-panel.vsk-opening{opacity:0;transform:translateY(16px)}

.vsk-head{
  display:flex;align-items:center;gap:8px;
  padding:16px 18px;border-bottom:1px solid var(--border);background:var(--surface);
  flex-shrink:0;
  touch-action:none;
}
.vsk-head-main, .vsk-head-left{flex:1;min-width:0}
.vsk-head-left{display:flex;align-items:center;gap:11px}
.vsk-head-avatar{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:16px;color:var(--void);
}
.vsk-head-title{
  font-family:'Bebas Neue',sans-serif;letter-spacing:1.5px;font-size:18px;color:var(--chalk);
}
.vsk-head-sub{font-size:11px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px}
.vsk-verified-badge{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:14px;height:14px;line-height:0;
}
.vsk-verified-badge svg{display:block;width:100%;height:100%}
.vsk-admin-status{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11px;color:var(--muted)}
.vsk-status-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex-shrink:0}
.vsk-admin-status.vsk-online .vsk-status-dot{background:#3fbf6f}
.vsk-admin-status.vsk-online .vsk-status-text{color:#3fbf6f}
.vsk-close{
  background:none;border:1px solid var(--border);color:var(--muted);
  width:28px;height:28px;cursor:pointer;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:color .15s ease,border-color .15s ease;
}
.vsk-close:hover{color:var(--cream);border-color:var(--br2)}

.vsk-minimize{
  background:none;border:1px solid var(--border);color:var(--muted);
  width:28px;height:28px;cursor:pointer;font-size:18px;line-height:1;
  display:none;align-items:center;justify-content:center;flex-shrink:0;
  transition:color .15s ease,border-color .15s ease;
}
.vsk-minimize:hover{color:var(--cream);border-color:var(--br2)}

.vsk-fullscreen-btn{
  background:none;border:1px solid var(--border);color:var(--muted);
  width:28px;height:28px;cursor:pointer;
  display:none;align-items:center;justify-content:center;flex-shrink:0;
  transition:color .15s ease,border-color .15s ease;
}
.vsk-fullscreen-btn:hover{color:var(--cream);border-color:var(--br2)}
.vsk-fullscreen-btn svg{width:14px;height:14px;fill:currentColor;display:block}

.vsk-head-settings{
  background:none;border:1px solid var(--border);color:var(--muted);
  width:28px;height:28px;cursor:pointer;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:color .15s ease,border-color .15s ease,transform .3s ease;
}
.vsk-head-settings:hover{color:var(--cream);border-color:var(--br2);transform:rotate(45deg)}

.vsk-head-identity{
  background:none;border:1px solid var(--border);color:var(--muted);
  height:28px;padding:0 9px;cursor:pointer;flex-shrink:0;
  font-family:'DM Sans',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.5px;
  white-space:nowrap;
  transition:color .15s ease,border-color .15s ease;
}
.vsk-head-identity:hover{color:var(--cream);border-color:var(--br2)}

.vsk-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:18px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* --- Auth forms --- */
.vsk-tabs{display:flex;border:1px solid var(--border);margin-bottom:18px}
.vsk-tab{
  flex:1;background:none;border:none;padding:10px;cursor:pointer;
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);border-right:1px solid var(--border);
}
.vsk-tab:last-child{border-right:none}
.vsk-tab.vsk-active{color:var(--chalk);background:var(--card)}

.vsk-field{margin-bottom:12px}
.vsk-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;letter-spacing:.5px}
.vsk-field input{
  width:100%;background:var(--card);border:1px solid var(--border);color:var(--cream);
  padding:10px 12px;font-size:16px;font-family:'DM Sans',sans-serif;
}
.vsk-field input:focus{outline:none;border-color:var(--br2)}

.vsk-btn{
  width:100%;background:var(--gold);color:var(--void);border:none;
  padding:11px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;margin-top:4px;
}
.vsk-btn:hover{opacity:.9}
.vsk-btn:disabled{opacity:.5;cursor:not-allowed}

.vsk-btn-ghost{
  width:100%;background:none;color:var(--muted);border:1px solid var(--border);
  padding:10px;font-size:11px;letter-spacing:.5px;cursor:pointer;margin-top:8px;
}
.vsk-btn-ghost:hover{color:var(--cream);border-color:var(--br2)}

.vsk-msg-err{
  font-size:12px;color:var(--red);margin-bottom:12px;padding:8px 10px;
  border:1px solid var(--red);background:rgba(184,64,64,.08);
}
.vsk-msg-info{
  font-size:12px;color:var(--silver2);margin-bottom:12px;padding:8px 10px;
  border:1px solid var(--border);
}
.vsk-hidden{display:none !important}

.vsk-text-link{
  display:inline-block;background:none;border:none;color:var(--muted);
  font-size:11.5px;letter-spacing:.3px;cursor:pointer;padding:0;
  margin-top:10px;text-decoration:underline;text-underline-offset:2px;
}
.vsk-text-link:hover{color:var(--gold)}
.vsk-text-link-back{margin-top:0;margin-bottom:14px;text-decoration:none;font-size:12px}
.vsk-text-link-back:hover{color:var(--cream)}
.vsk-forgot-title{font-size:15px;font-weight:700;color:var(--cream);margin:0 0 16px}

.vsk-otp-hint{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.vsk-otp-input{
  width:100%;background:var(--card);border:1px solid var(--border);color:var(--chalk);
  padding:12px;font-size:22px;letter-spacing:8px;text-align:center;
  font-family:'DM Sans',sans-serif;margin-bottom:12px;
}

/* --- Chat thread --- */
#vsk-chat-panel.vsk-mode-chat .vsk-body{padding:16px 14px;display:flex;flex-direction:column;gap:16px}

/* Wrapper pesan di dalem .vsk-body — sebelumnya ga ada display/gap sendiri
   jadi tiap .vsk-bubble-row numpuk nempel satu sama lain (cuma andelin gap
   dari .vsk-body, yang percuma karena threadEl cuma 1 child doang). */
.vsk-thread{display:flex;flex-direction:column;gap:14px}

.vsk-bubble-row{display:flex;animation:vsk-bubble-in .25s ease}
@keyframes vsk-bubble-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.vsk-bubble-row.vsk-from-user{justify-content:flex-end}
.vsk-bubble-row > div{max-width:78%;min-width:0}
.vsk-bubble{
  padding:11px 13px;font-size:13.5px;line-height:1.55;
  border:1px solid var(--border);border-radius:14px;
  display:flex;flex-direction:column;gap:7px;
}
.vsk-from-admin .vsk-bubble{background:var(--surface);color:var(--cream);border-bottom-left-radius:4px}
.vsk-from-user .vsk-bubble{background:var(--gold);color:var(--void);border-color:var(--gold);border-bottom-right-radius:4px}
.vsk-bubble img{width:220px;max-width:100%;height:auto;display:block;cursor:pointer;border-radius:6px;background:var(--card)}
.vsk-copy-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;padding:0;margin-top:-2px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.3px;
  color:inherit;opacity:.55;transition:opacity .15s;
}
.vsk-copy-btn:hover{opacity:.9}
.vsk-copy-icon{width:12px;height:12px;flex-shrink:0}
.vsk-copy-icon svg{width:100%;height:100%;fill:currentColor;display:block}
.vsk-copy-btn.vsk-copy-done{opacity:1;color:#4caf50}
.vsk-copy-btn.vsk-copy-fail{opacity:1;color:var(--red)}
.vsk-from-user .vsk-copy-btn{align-self:flex-end}
.vsk-bubble audio{width:220px;height:34px}
.vsk-bubble-time{font-size:9.5px;opacity:.6;display:block}

.vsk-bubble-deleted{opacity:.75}
.vsk-bubble-deleted-row{display:flex;align-items:center;gap:6px;font-style:italic;color:var(--muted)}
.vsk-bubble-deleted-icon{width:13px;height:13px;flex-shrink:0;display:flex}
.vsk-bubble-deleted-icon svg{width:100%;height:100%;fill:currentColor;display:block}

.vsk-empty-state{
  margin:auto;text-align:center;color:var(--muted);font-size:12px;padding:20px;
}
.vsk-empty-state.vsk-empty-greeting{margin:0;text-align:left;padding:0}

.vsk-intent-box{
  border:1px solid var(--border);background:var(--surface);padding:16px;margin:4px 0;
}
.vsk-intent-title{font-size:13px;font-weight:600;color:var(--chalk);margin-bottom:8px}
.vsk-intent-preview{
  font-size:12.5px;color:var(--muted);background:var(--card);border:1px solid var(--border);
  padding:8px 10px;margin-bottom:12px;white-space:pre-wrap;
}
.vsk-intent-btn{
  width:100%;padding:11px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;margin-top:8px;border:1px solid var(--border);background:var(--card);color:var(--cream);
}
.vsk-intent-btn:hover{border-color:var(--br2)}
.vsk-intent-btn.vsk-intent-beli{background:var(--gold);color:var(--void);border-color:var(--gold)}
.vsk-intent-btn.vsk-intent-beli:hover{opacity:.9}

.vsk-composer-wrap{border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}
.vsk-composer{
  padding:10px;display:flex;align-items:flex-end;gap:8px;
  touch-action:none;
}
.vsk-composer textarea{
  flex:1;min-width:0;resize:none;background:var(--card);border:1px solid var(--border);color:var(--cream);
  padding:9px 11px;font-size:16px;font-family:'DM Sans',sans-serif;
  max-height:130px;min-height:38px;overflow-y:auto;box-sizing:border-box;
}
.vsk-field textarea{
  width:100%;background:var(--card);border:1px solid var(--border);color:var(--cream);
  padding:10px 12px;font-size:16px;font-family:'DM Sans',sans-serif;resize:vertical;min-height:64px;
}
.vsk-field textarea:focus{outline:none;border-color:var(--br2)}

.vsk-identity-notice{
  font-size:11.5px;line-height:1.6;color:var(--muted);background:var(--surface);
  border:1px solid var(--border);padding:12px;margin-bottom:16px;white-space:pre-wrap;
}

.vsk-file-field{margin-bottom:14px}
.vsk-file-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;letter-spacing:.5px}
.vsk-file-hint{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.vsk-file-btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;background:var(--card);border:1px solid var(--border);color:var(--muted);
  padding:11px 12px;font-size:12.5px;cursor:pointer;font-family:'DM Sans',sans-serif;
}
.vsk-file-btn:hover{border-color:var(--br2)}
.vsk-file-btn.vsk-file-chosen{color:var(--cream);border-color:var(--gold)}
.vsk-file-btn-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsk-file-btn-tag{
  flex-shrink:0;font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);padding:3px 7px;
}
.vsk-file-btn.vsk-file-chosen .vsk-file-btn-tag{color:var(--gold);border-color:var(--gold)}

.vsk-loc-select{
  flex-shrink:0;background:var(--card);border:1px solid var(--border);color:var(--cream);
  padding:0 10px;font-size:16px;font-family:'DM Sans',sans-serif;
}

.vsk-composer textarea:focus{outline:none;border-color:var(--br2)}
.vsk-icon-btn{
  background:none;border:1px solid var(--border);color:var(--muted);
  width:38px;height:38px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.vsk-icon-btn:hover{color:var(--cream);border-color:var(--br2)}
.vsk-icon-btn svg{width:16px;height:16px;fill:currentColor}
.vsk-icon-btn.vsk-recording{background:var(--red);border-color:var(--red);color:var(--chalk)}
.vsk-icon-btn.vsk-loc-sent{background:var(--gold);border-color:var(--gold);color:var(--void)}
.vsk-send-btn{background:var(--gold);border:1px solid var(--gold);color:var(--void)}
.vsk-send-btn:hover{opacity:.9;color:var(--void)}

.vsk-recording-bar{
  display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--card);
  border:1px solid var(--red);margin-bottom:8px;font-size:12px;color:var(--cream);
}
.vsk-rec-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:vsk-pulse 1s infinite}
@keyframes vsk-pulse{0%,100%{opacity:1}50%{opacity:.3}}

.vsk-lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,0);z-index:9010;
  display:flex;align-items:center;justify-content:center;padding:30px;cursor:zoom-out;
  opacity:0;transition:background .2s ease,opacity .2s ease;
}
.vsk-lightbox img{
  max-width:100%;max-height:100%;
  transform:scale(.85);transition:transform .2s ease;
}
.vsk-lightbox.vsk-open{background:rgba(0,0,0,.85);opacity:1}
.vsk-lightbox.vsk-open img{transform:scale(1)}
.vsk-lightbox.vsk-hidden{display:none}

@media(max-width:480px){
  #vsk-chat-btn{width:50px;height:50px}
  #vsk-chat-btn-icon svg{width:22px;height:22px}
}

/* --- Account info modal (dipicu dari bubble chat yang berisi Kode akun) --- */
.vsk-acc-info-btn{
  display:inline-block;margin-top:8px;padding:6px 12px;
  background:none;border:1px solid var(--br2);color:var(--gold);
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;
  cursor:pointer;transition:border-color .2s,color .2s;
}
.vsk-acc-info-btn:hover{border-color:var(--gold);color:var(--chalk)}
.vsk-acc-modal{
  position:fixed;inset:0;z-index:9010;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.vsk-acc-modal-box{
  width:100%;max-width:360px;max-height:85vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);
  font-family:'DM Sans',sans-serif;
}
.vsk-acc-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
  font-family:'Bebas Neue',sans-serif;letter-spacing:1.5px;font-size:17px;color:var(--chalk);
  position:sticky;top:0;background:var(--surface);
}
.vsk-acc-modal-img{width:100%;display:block;background:var(--base);max-height:320px;object-fit:contain}
.vsk-acc-modal-rows{padding:14px 16px}
.vsk-acc-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.vsk-acc-row .k{color:var(--muted)}
.vsk-acc-row .v{color:var(--chalk);text-align:right;word-break:break-word}

.vsk-tx-card{border:1px solid var(--border);padding:12px 14px;margin-bottom:10px}
.vsk-tx-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.vsk-tx-kode{font-family:'Bebas Neue',sans-serif;letter-spacing:.5px;font-size:14px;color:var(--cream)}
.vsk-tx-status{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#5bb882}
.vsk-tx-status.cancelled{color:#ff3b30}
.vsk-tx-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;color:var(--muted)}
.vsk-tx-harga{color:var(--chalk)}
.vsk-acc-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:12.5px}

/* --- Chip attachment di atas composer (nempel pas klik "Beli" di katalog) --- */
.vsk-attach-preview{padding:10px 10px 0}
.vsk-attach-chip{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--border);
  padding:8px 10px;
}
.vsk-attach-thumb{width:44px;height:44px;object-fit:cover;flex-shrink:0;background:var(--base)}
.vsk-attach-text{flex:1;min-width:0}
.vsk-attach-title{
  font-size:12.5px;font-weight:600;color:var(--cream);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vsk-attach-sub{font-size:11px;color:var(--muted);margin-top:2px}
.vsk-attach-close{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:none;border:1px solid var(--border);color:var(--muted);
  cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.vsk-attach-close:hover{color:var(--cream);border-color:var(--br2)}

/* --- Kartu produk (bubble msg_type=product), dirender di chat & bisa
   diklik buat buka modal info akun (openAccountInfoModal) --- */
.vsk-bubble-product{padding:0 !important;overflow:hidden;border-color:var(--border) !important}
.vsk-prod-card{
  display:flex;flex-direction:column;align-items:stretch;gap:0;cursor:pointer;
  background:var(--card);
}
.vsk-from-user .vsk-prod-card{background:rgba(0,0,0,.08)}
.vsk-prod-card:hover{background:rgba(255,255,255,.04)}
.vsk-from-user .vsk-prod-card:hover{background:rgba(0,0,0,.14)}
.vsk-prod-thumb{width:100%;height:auto;max-height:260px;object-fit:cover;background:var(--base);display:block}
.vsk-prod-info{min-width:0;padding:10px}
.vsk-prod-kode{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsk-prod-harga{font-size:12px;opacity:.75;margin-top:2px}
.vsk-bubble-product .vsk-bubble-time{padding:0 10px 8px;opacity:.55}

/* Link di dalam teks pesan (http://, https://, www.) — dibikin bisa
   dipencet, warnanya ngikut warna teks bubble-nya (beda antara bubble user
   yang latarnya gold vs bubble admin yang latarnya gelap). */
.vsk-msg-link{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.vsk-msg-link:hover{opacity:.8}

/* Card lokasi ala WhatsApp — preview peta langsung keliatan, bisa
   dipencet buat buka Google Maps. */
.vsk-bubble-location{padding:0 !important;overflow:hidden;border-color:var(--border) !important}
.vsk-loc-card{display:block;text-decoration:none;color:inherit}
.vsk-loc-map{display:block;width:100%;height:140px;border:none;pointer-events:none;background:var(--base)}
.vsk-loc-footer{display:flex;align-items:center;gap:6px;padding:9px 10px;font-size:12px;font-weight:600}
.vsk-loc-pin{width:16px;height:16px;flex-shrink:0;display:flex;color:var(--gold)}
.vsk-from-user .vsk-loc-pin{color:var(--void)}
.vsk-loc-pin svg{width:100%;height:100%;fill:currentColor}
.vsk-bubble-location .vsk-bubble-time{padding:0 10px 8px;opacity:.55}

/* --- Kartu minta identitas (bubble msg_type=identity_request) --- */
.vsk-bubble-identity-req{border-color:var(--gold) !important}
.vsk-idreq-title{font-size:13px;font-weight:700}
.vsk-idreq-sub{font-size:12px;opacity:.85;line-height:1.5}
.vsk-idreq-btn{
  align-self:flex-start;margin-top:2px;padding:8px 14px;
  background:var(--gold);color:var(--void);border:none;
  font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  cursor:pointer;
}
.vsk-idreq-btn:hover{opacity:.9}

/* ================================================================
   ANIMASI: bubble pesan baru "pop" kecil -> besar (ala WhatsApp),
   dan animasi keluar buat bubble typing pas dilepas.
================================================================ */
@keyframes vsk-pop-in{
  0%{opacity:0;transform:scale(.7) translateY(6px);}
  60%{opacity:1;transform:scale(1.03) translateY(0);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
.vsk-bubble-pop{
  transform-origin:bottom left;
  animation:vsk-pop-in .22s cubic-bezier(.34,1.56,.64,1) both;
}
.vsk-from-user.vsk-bubble-pop{transform-origin:bottom right}

.vsk-bubble-out{
  animation:vsk-pop-out .16s ease both;
}
@keyframes vsk-pop-out{
  0%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(.85);}
}

/* --- Bubble "admin sedang mengetik" — 3 titik mantul gantian --- */
.vsk-bubble-typing{
  display:flex;align-items:center;gap:4px;
  padding:12px 14px !important;
}
.vsk-typing-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--muted);
  animation:vsk-typing-bounce 1.2s infinite ease-in-out;
}
.vsk-typing-dot:nth-child(1){animation-delay:0s}
.vsk-typing-dot:nth-child(2){animation-delay:.15s}
.vsk-typing-dot:nth-child(3){animation-delay:.3s}
@keyframes vsk-typing-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-5px);opacity:1}
}
/* ================================================================
   DESKTOP: panel jadi window kecil ngambang di pojok kanan bawah
   (ala Facebook Messenger), bukan full-screen kayak mobile — bisa
   di-minimize jadi header bar doang lewat tombol "-".
================================================================ */
@media(min-width:768px){
  #vsk-chat-panel{
    top:auto;left:auto;
    bottom:20px;right:20px;
    width:380px;height:min(600px,calc(100vh - 40px));max-height:none;
    border:1px solid var(--border);
    box-shadow:0 12px 40px rgba(0,0,0,.45);
    transition:opacity .22s ease,transform .22s ease,
      height .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),
      top .32s cubic-bezier(.4,0,.2,1),left .32s cubic-bezier(.4,0,.2,1);
  }
  #vsk-chat-panel.vsk-minimized{
    cursor:pointer;
  }
  #vsk-chat-panel.vsk-minimized .vsk-body{opacity:0;pointer-events:none}
  #vsk-chat-panel.vsk-minimized .vsk-head{cursor:pointer;border-bottom:none}
  #vsk-chat-panel.vsk-minimized .vsk-minimize{display:none}
  #vsk-chat-panel.vsk-minimized .vsk-fullscreen-btn{display:none}

  /* Layar penuh (ala Messenger di-maximize) — window ngambang jadi gede
     penuh sisa layar (dikasih margin 20px semua sisi). Nilai top/left/
     right/bottom di sini HARUS senilai sama kayak variabel `margin` di
     setFullscreen() (chat-widget.js), soalnya rule ini yang ngambil alih
     kontrol ukuran begitu animasi JS-nya kelar (biar tetep responsif kalau
     window di-resize selagi fullscreen). */
  #vsk-chat-panel.vsk-fullscreen{
    top:20px;left:20px;right:20px;bottom:20px;
    width:auto;height:auto;
  }
  #vsk-chat-panel.vsk-fullscreen .vsk-minimize{display:none}

  .vsk-body{transition:opacity .18s ease}
  .vsk-minimize{display:flex}
  .vsk-fullscreen-btn{display:flex}
}