/* ============================================================
   GetSiap - Chatbot bantuan (widget mandiri) · gaya futuristik
   Glassmorphism + glow neon biru/cyan. Dark-mode aware.
   ============================================================ */

/* ---------- Launcher: tombol mengambang bercahaya ---------- */
.cbot-launch{position:fixed;right:24px;bottom:26px;z-index:95;width:62px;height:62px;border-radius:50%;
  border:none;cursor:pointer;color:#fff;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#4cc9ff 0%,#2f7cf6 55%,#1857c4 100%);
  box-shadow:0 10px 28px rgba(4,12,32,.55), 0 0 22px rgba(56,190,255,.55), inset 0 1px 1px rgba(255,255,255,.35);
  animation:cbotFloat 4s ease-in-out infinite;transition:transform .2s ease, box-shadow .2s ease}
.cbot-launch::before{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(56,190,255,.55);animation:cbotPulse 2.4s ease-out infinite}
.cbot-launch:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 34px rgba(4,12,32,.6), 0 0 34px rgba(56,190,255,.8)}
.cbot-launch svg{width:28px;height:28px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.cbot-launch .ic-x{display:none}
.cbot-launch.open{animation:none}
.cbot-launch.open::before{animation:none;box-shadow:none}
.cbot-launch.open .ic-chat{display:none}
.cbot-launch.open .ic-x{display:block}
.cbot-launch .dot{position:absolute;top:3px;right:5px;width:13px;height:13px;border-radius:50%;
  background:#ff4d6d;border:2px solid #0b1220;box-shadow:0 0 8px rgba(255,77,109,.9)}
.cbot-launch.open .dot{display:none}
@keyframes cbotPulse{0%{box-shadow:0 0 0 0 rgba(56,190,255,.5)}70%{box-shadow:0 0 0 18px rgba(56,190,255,0)}100%{box-shadow:0 0 0 0 rgba(56,190,255,0)}}
@keyframes cbotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ---------- Bubble sapaan (menarik perhatian) ---------- */
.cbot-hint{position:fixed;right:100px;bottom:40px;z-index:94;max-width:230px;
  background:rgba(18,27,46,.92);color:#eaf2ff;border:1px solid rgba(90,160,255,.35);
  border-radius:14px 14px 4px 14px;padding:11px 14px;font-size:13px;line-height:1.5;
  box-shadow:0 12px 30px rgba(2,8,23,.5), 0 0 18px rgba(56,190,255,.18);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;
  opacity:0;transform:translateY(8px) scale(.96);transition:opacity .3s ease, transform .3s ease}
.cbot-hint.show{opacity:1;transform:none}
.cbot-hint b{color:#fff}
.cbot-hint .hx{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;
  background:#1f2b45;color:#cfe0ff;border:1px solid rgba(120,170,255,.4);font-size:12px;
  display:grid;place-items:center;line-height:1}

/* ---------- Panel chat: glassmorphism + glow ---------- */
.cbot-panel{position:fixed;right:24px;bottom:100px;z-index:96;width:min(380px,calc(100vw - 32px));
  height:min(580px,calc(100vh - 150px));display:flex;flex-direction:column;overflow:hidden;
  border-radius:22px;background:rgba(255,255,255,.82);border:1px solid rgba(150,180,230,.4);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 30px 80px rgba(10,20,50,.28), 0 0 0 1px rgba(56,190,255,.06);
  opacity:0;transform:translateY(20px) scale(.97);transform-origin:bottom right;pointer-events:none;
  transition:opacity .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1)}
.cbot-panel.open{opacity:1;transform:none;pointer-events:auto}

.cbot-head{position:relative;display:flex;align-items:center;gap:12px;padding:16px 18px;color:#fff;overflow:hidden;
  background:linear-gradient(120deg,#1857c4 0%,#2f7cf6 55%,#22d3ee 130%)}
.cbot-head::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120px 60px at 85% -10%,rgba(255,255,255,.35),transparent 70%);pointer-events:none}
.cbot-head .av{position:relative;width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:20px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.cbot-head .av .live{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  background:#34e5a3;border:2px solid #2f7cf6;box-shadow:0 0 6px rgba(52,229,163,.9)}
.cbot-head b{font-size:15px;display:block;line-height:1.2;letter-spacing:.01em}
.cbot-head .st{font-size:11.5px;opacity:.9;display:flex;align-items:center;gap:5px}
.cbot-head .st i{width:6px;height:6px;border-radius:50%;background:#34e5a3;display:inline-block;box-shadow:0 0 6px #34e5a3}
.cbot-head .close{position:relative;margin-left:auto;background:rgba(255,255,255,.15);border:none;color:#fff;
  width:30px;height:30px;border-radius:9px;font-size:17px;cursor:pointer;line-height:1;transition:.15s}
.cbot-head .close:hover{background:rgba(255,255,255,.28)}

.cbot-body{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:11px;
  background:linear-gradient(180deg,rgba(240,246,255,.5),rgba(240,246,255,.15))}
.cbot-body::-webkit-scrollbar{width:7px}
.cbot-body::-webkit-scrollbar-thumb{background:rgba(120,150,200,.4);border-radius:4px}
.cbot-msg{max-width:84%;padding:11px 14px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;
  animation:cbotIn .3s ease both}
.cbot-msg.bot{align-self:flex-start;background:rgba(255,255,255,.92);border:1px solid rgba(150,180,230,.4);
  color:#1d2433;border-radius:16px 16px 16px 5px;box-shadow:0 2px 10px rgba(20,40,90,.06)}
.cbot-msg.user{align-self:flex-end;color:#fff;border-radius:16px 16px 5px 16px;
  background:linear-gradient(135deg,#2f7cf6,#1857c4);box-shadow:0 4px 14px rgba(24,87,196,.4)}
.cbot-msg a{color:#1857c4;font-weight:600}
.cbot-msg.user a{color:#fff;text-decoration:underline}
@keyframes cbotIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.cbot-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 8px}
.cbot-chip{border:1px solid rgba(47,124,246,.4);background:rgba(255,255,255,.7);color:#1857c4;
  font:inherit;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:100px;cursor:pointer;
  transition:.16s;backdrop-filter:blur(4px)}
.cbot-chip:hover{background:linear-gradient(135deg,#2f7cf6,#1857c4);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(24,87,196,.35);transform:translateY(-1px)}

.cbot-input{display:flex;gap:9px;padding:12px 14px;border-top:1px solid rgba(150,180,230,.35);background:rgba(255,255,255,.6)}
.cbot-input input{flex:1;border:1px solid rgba(150,180,230,.5);background:rgba(255,255,255,.85);color:#1d2433;
  border-radius:100px;padding:11px 16px;font:inherit;font-size:14px;outline:none;transition:.15s}
.cbot-input input:focus{border-color:#2f7cf6;box-shadow:0 0 0 3px rgba(47,124,246,.18)}
.cbot-input button{flex:none;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;color:#fff;
  font-size:17px;display:grid;place-items:center;background:linear-gradient(135deg,#2f7cf6,#1857c4);
  box-shadow:0 4px 14px rgba(24,87,196,.4);transition:.15s}
.cbot-input button:hover{transform:scale(1.06)}
.cbot-note{font-size:10.5px;color:#7a86a0;text-align:center;padding:0 14px 10px;background:rgba(255,255,255,.6)}

/* ---------- Dark mode: glass gelap + neon ---------- */
@media (prefers-color-scheme: dark){
  .cbot-panel{background:rgba(16,24,42,.78);border-color:rgba(90,160,255,.28);
    box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(56,190,255,.1), 0 0 40px rgba(47,124,246,.12)}
  .cbot-body{background:linear-gradient(180deg,rgba(9,16,30,.5),rgba(9,16,30,.2))}
  .cbot-msg.bot{background:rgba(30,42,68,.92);border-color:rgba(90,140,220,.28);color:#e7ecf6}
  .cbot-msg a{color:#7fb4ff}
  .cbot-chip{background:rgba(30,42,68,.7);color:#9cc3ff;border-color:rgba(90,150,255,.35)}
  .cbot-input{background:rgba(16,24,42,.6);border-top-color:rgba(90,140,220,.22)}
  .cbot-input input{background:rgba(9,16,30,.8);border-color:rgba(90,140,220,.3);color:#e7ecf6}
  .cbot-note{background:rgba(16,24,42,.6);color:#8fa0b8}
  .cbot-body::-webkit-scrollbar-thumb{background:rgba(90,140,220,.35)}
}

/* Naikkan tombol kembali-ke-atas agar tak bertumpuk dengan launcher */
.to-top{bottom:100px!important}

@media(max-width:480px){
  .cbot-panel{right:12px;left:12px;width:auto;bottom:92px;height:min(72vh,540px)}
  .cbot-launch{right:16px;bottom:18px}
  .cbot-hint{right:84px;bottom:30px;max-width:180px}
  .to-top{bottom:90px!important;right:16px!important}
}
@media (prefers-reduced-motion: reduce){
  .cbot-launch,.cbot-launch::before,.cbot-msg{animation:none}
}