/* =========================================================
   WIDGET CHATBOT OSIS — tampilan segar
   ========================================================= */
.chatbot-wrap{position:fixed;right:20px;bottom:20px;z-index:9999;font-family:inherit;}

/* Tombol bulat (dipakai kalau maskot dimatikan) */
.chatbot-fab{
  position:relative;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#4ade80,#15803d);color:#fff;font-size:1.5rem;
  box-shadow:0 10px 24px rgba(21,128,61,.4);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.chatbot-fab::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(34,197,94,.6);animation:cb-ring 2.4s ease-out infinite;
}
@keyframes cb-ring{0%{transform:scale(1);opacity:.9;}100%{transform:scale(1.55);opacity:0;}}
.chatbot-fab:hover{transform:scale(1.1) rotate(-6deg);}
.chatbot-fab-icon{line-height:1;}

/* ---------- Panel ---------- */
.chatbot-panel{
  position:absolute;right:0;bottom:74px;width:360px;max-width:calc(100vw - 28px);
  height:540px;max-height:calc(100vh - 110px);
  background:#fff;border-radius:26px;overflow:hidden;
  box-shadow:0 30px 70px -10px rgba(5,46,22,.45), 0 0 0 1px rgba(22,163,74,.12);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(24px) scale(.9);pointer-events:none;visibility:hidden;
  transition:opacity .25s ease, transform .5s cubic-bezier(.34,1.46,.64,1), visibility 0s linear .5s;
}
.chatbot-panel.show{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s;}
.chatbot-panel:focus{outline:none;}
.chatbot-chip:focus-visible,.chatbot-close:focus-visible,.chatbot-reset:focus-visible,.chatbot-fab:focus-visible{outline:3px solid #86efac;outline-offset:2px;}

/* ---------- Header ---------- */
.chatbot-header{
  position:relative;overflow:hidden;flex-shrink:0;
  padding:16px 14px 16px 16px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:linear-gradient(135deg,#14532d 0%,#15803d 55%,#22c55e 100%);
}
.chatbot-header::before,.chatbot-header::after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none;
}
.chatbot-header::before{width:130px;height:130px;right:-30px;top:-60px;}
.chatbot-header::after{width:80px;height:80px;right:60px;bottom:-50px;background:rgba(255,255,255,.07);}
.chatbot-header-title{position:relative;z-index:1;display:flex;align-items:center;gap:11px;min-width:0;}
.chatbot-avatar-wrap{position:relative;flex-shrink:0;}
.chatbot-avatar-wrap::after{
  content:"";position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;
  background:#4ade80;border:2px solid #15803d;box-shadow:0 0 0 0 rgba(74,222,128,.7);
  animation:cb-online 2s infinite;
}
@keyframes cb-online{70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}
.chatbot-avatar,.chatbot-avatar-slot{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:#fff;font-size:1.4rem;
  border:2.5px solid rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.chatbot-avatar{object-fit:cover;object-position:50% 22%;margin:0;}
.chatbot-header-text{display:flex;flex-direction:column;min-width:0;}
.chatbot-name{font-weight:800;font-size:1.02rem;letter-spacing:.01em;line-height:1.2;}
.chatbot-status{font-size:.72rem;opacity:.92;margin-top:2px;}
.chatbot-header-actions{position:relative;z-index:1;display:flex;gap:4px;flex-shrink:0;}
.chatbot-close,.chatbot-reset{
  width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, transform .25s ease;
}
.chatbot-close{font-size:1.4rem;}
.chatbot-close:hover,.chatbot-reset:hover{background:rgba(255,255,255,.3);}
.chatbot-close:hover{transform:rotate(90deg);}
.chatbot-reset:hover{transform:rotate(-180deg);}

/* ---------- Area pesan ---------- */
.chatbot-messages{
  flex:1;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:12px;
  background:
    radial-gradient(circle at 1px 1px,rgba(34,197,94,.13) 1px,transparent 0) 0 0/18px 18px,
    linear-gradient(180deg,#f0fdf4 0%,#fafffb 100%);
  scroll-behavior:smooth;
}
.chatbot-messages::-webkit-scrollbar,.chatbot-suggestions::-webkit-scrollbar{width:5px;}
.chatbot-messages::-webkit-scrollbar-thumb,.chatbot-suggestions::-webkit-scrollbar-thumb{background:#bbf7d0;border-radius:4px;}

.chatbot-row{display:flex;align-items:flex-end;gap:8px;animation:cb-pop .4s cubic-bezier(.34,1.56,.64,1) both;}
.chatbot-row-user{justify-content:flex-end;}
@keyframes cb-pop{0%{opacity:0;transform:translateY(12px) scale(.9);}100%{opacity:1;transform:none;}}
.chatbot-mini-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;background:#fff;object-fit:cover;object-position:50% 22%;
  border:2px solid #bbf7d0;font-size:.9rem;display:flex;align-items:center;justify-content:center;
}

.chatbot-bubble{
  max-width:82%;padding:10px 14px;font-size:.88rem;line-height:1.55;word-wrap:break-word;
}
.chatbot-bot{
  background:#fff;color:#1f2937;border:1px solid #dcfce7;
  border-radius:18px 18px 18px 5px;box-shadow:0 3px 10px rgba(22,101,52,.08);
}
.chatbot-user{
  background:linear-gradient(135deg,#22c55e,#15803d);color:#fff;font-weight:500;
  border-radius:18px 18px 5px 18px;box-shadow:0 4px 12px rgba(21,128,61,.3);
}

/* titik-titik "sedang mengetik" */
.chatbot-typing{display:flex;gap:5px;align-items:center;padding:13px 16px;}
.chatbot-typing i{
  width:7px;height:7px;border-radius:50%;background:#4ade80;display:block;
  animation:cb-dot 1s ease-in-out infinite;
}
.chatbot-typing i:nth-child(2){animation-delay:.15s;}
.chatbot-typing i:nth-child(3){animation-delay:.3s;}
@keyframes cb-dot{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-6px);opacity:1;}}

/* ---------- Tombol pilihan ---------- */
.chatbot-suggestions{
  display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;
  max-height:230px;overflow-y:auto;padding:12px 14px 14px;
  background:#fff;border-top:1px solid #e7f8ec;box-shadow:0 -8px 18px rgba(22,101,52,.06);
}
.chatbot-chip{
  flex:1 1 100%;text-align:left;font-family:inherit;cursor:pointer;
  border:1.5px solid #d1fae5;background:#f7fef9;color:#166534;
  border-radius:14px;padding:10px 14px;font-size:.86rem;font-weight:600;
  opacity:0;animation:cb-chip .35s ease forwards;animation-delay:calc(var(--i,0) * 60ms);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@keyframes cb-chip{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:none;}}
.chatbot-chip:hover{
  background:#dcfce7;border-color:#4ade80;transform:translateX(4px);
  box-shadow:0 4px 12px rgba(34,197,94,.22);
}
.chatbot-chip:active{transform:scale(.97);}
.chatbot-chip-link{
  background:linear-gradient(135deg,#22c55e,#15803d);border-color:transparent;color:#fff;
  box-shadow:0 4px 12px rgba(21,128,61,.28);
}
.chatbot-chip-link:hover{background:linear-gradient(135deg,#16a34a,#14532d);border-color:transparent;}
.chatbot-chip-nav{
  flex:1 1 calc(50% - 4px);text-align:center;background:#f3f4f6;border-color:#e5e7eb;color:#4b5563;
  font-size:.78rem;font-weight:600;padding:8px 10px;
}
.chatbot-chip-nav:hover{background:#e5e7eb;border-color:#d1d5db;transform:none;box-shadow:none;}
.chatbot-input-row{display:none;}

/* ---------- Mode maskot: maskot membuka chatbot ---------- */
.maskot-aktif .chatbot-fab{display:none;}
.maskot-aktif .chatbot-panel{bottom:0;transform-origin:bottom right;transform:translateY(20px) scale(.5);}
.maskot-aktif .chatbot-panel.show{transform:none;}
.chatbot-wrap.chatbot-kiri{right:auto;left:20px;}
.chatbot-kiri .chatbot-panel{right:auto;left:0;transform-origin:bottom left;}

@media (max-width:480px){
  .chatbot-wrap{right:12px;bottom:12px;}
  .chatbot-wrap.chatbot-kiri{left:12px;}
  .chatbot-panel{width:calc(100vw - 24px);height:calc(100vh - 90px);max-height:560px;border-radius:22px;}
  .chatbot-kiri .chatbot-panel{left:0;}
}
@media (prefers-reduced-motion:reduce){
  .chatbot-fab::after,.chatbot-avatar-wrap::after,.chatbot-typing i{animation:none;}
  .chatbot-row,.chatbot-chip{animation:none;opacity:1;}
  .chatbot-panel{transition:opacity .2s ease;}
}