/* Pustaka-Bot (v1.24). Warna mengikuti --teal (hijau) dan --gold (oranye). */
.el-mascot{cursor:pointer}
.el-mascot.has-new::after{content:"1";position:absolute;top:-2px;right:-2px;width:22px;height:22px;border-radius:50%;background:#dc2626;color:#fff;font:700 12px/22px 'Poppins',Arial,sans-serif;text-align:center;animation:bot-ping 1.6s infinite}
@keyframes bot-ping{0%{box-shadow:0 0 0 0 rgba(220,38,38,.6)}70%{box-shadow:0 0 0 12px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
.bot-tip{position:fixed;right:108px;bottom:46px;z-index:91;display:flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:10px 12px 10px 16px;font-size:13px;font-weight:500;box-shadow:0 10px 26px rgba(0,0,0,.18);animation:bot-pop .5s cubic-bezier(.2,.9,.3,1.3) both;max-width:230px}
.bot-tip[hidden]{display:none}
.bot-tip span{cursor:pointer}
.bot-tip button{border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
@keyframes bot-pop{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.bot{position:fixed;right:20px;bottom:124px;z-index:95;width:380px;max-width:calc(100vw - 24px);height:560px;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.35);transform-origin:bottom right;animation:bot-open .35s cubic-bezier(.2,.9,.3,1.2) both;font-family:'Poppins',Arial,sans-serif}
.bot[hidden]{display:none}
@keyframes bot-open{from{opacity:0;transform:scale(.6) translateY(30px)}to{opacity:1;transform:none}}
.bot-h{display:flex;align-items:center;gap:10px;padding:14px 14px 14px 16px;color:#fff;background:linear-gradient(135deg,var(--teal-d),var(--teal));border-bottom:4px solid var(--gold)}
.bot-av{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--teal);font-size:20px;overflow:hidden;border:2px solid var(--gold)}
.bot-av img{width:100%;height:100%;object-fit:cover}
.bot-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.bot-t strong{font-size:15px;letter-spacing:.06em}
.bot-t small{font-size:11.5px;opacity:.9}
.bot-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4ade80;margin-right:3px;animation:bot-ping2 2s infinite}
@keyframes bot-ping2{0%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.bot-x{border:0;background:rgba(255,255,255,.14);color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:15px;display:grid;place-items:center;transition:background .2s,transform .2s}
.bot-x:hover{background:var(--gold);transform:rotate(12deg)}
.bot-b{flex:1;overflow-y:auto;padding:16px 14px;background:var(--bg);display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;overscroll-behavior:contain}
.bot-m{display:flex;flex-direction:column;max-width:88%}
.bot-m.bt{align-self:flex-start}
.bot-m.me{align-self:flex-end;align-items:flex-end}
.bot-m.in{animation:bot-msg .3s ease both}
@keyframes bot-msg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bot-bb{padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.55;word-break:break-word;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.bot-m.bt .bot-bb{background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
.bot-m.me .bot-bb{background:var(--teal);color:#fff;border-bottom-right-radius:4px}
.bot-bb a{color:var(--gold);font-weight:600;text-decoration:underline;word-break:break-all}
.bot-m.me .bot-bb a{color:#fff}
.bot-m time{font-size:10.5px;color:var(--muted);margin:3px 6px 0}
.bot-ty{display:flex;gap:5px;padding:13px 16px}
.bot-ty i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bot-dots 1.1s infinite ease-in-out}
.bot-ty i:nth-child(2){animation-delay:.15s}.bot-ty i:nth-child(3){animation-delay:.3s}
@keyframes bot-dots{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}
.bot-ch{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.bot-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--gold);background:#fff;color:var(--teal-d);border-radius:999px;padding:7px 13px;font:600 12.5px/1.3 'Poppins',Arial,sans-serif;cursor:pointer;text-decoration:none;text-align:left;transition:background .2s,color .2s,transform .2s}
.bot-chip:hover,.bot-chip:focus-visible{background:var(--gold);color:var(--el-btn-text,#fff);transform:translateY(-2px)}
.bot-chip i{font-size:13px}
a.bot-chip-wa{border-color:#16a34a;color:#166534}
a.bot-chip-wa:hover{background:#16a34a;color:#fff}
.bot-f{padding:10px 12px 12px;background:#fff;border-top:1px solid var(--line)}
.bot-form{display:flex;gap:8px}
.bot-form input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;font:14px 'Poppins',Arial,sans-serif;outline:0;transition:border-color .2s,box-shadow .2s}
.bot-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(249,115,22,.18)}
.bot-form button{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:var(--gold);color:var(--el-btn-text,#fff);font-size:16px;cursor:pointer;transition:transform .2s,background .2s}
.bot-form button:hover{transform:scale(1.08) rotate(-8deg);background:#C2410C}
@media(max-width:560px){
  .bot{right:0;left:0;bottom:0;width:100%;max-width:100%;height:88vh;height:88dvh;max-height:none;border-radius:20px 20px 0 0}
  body.bot-open .el-mascot,body.bot-open .bot-tip{display:none}
  .bot-tip{right:96px;bottom:40px}
}
@media(prefers-reduced-motion:reduce){.bot,.bot-m.in,.bot-tip,.el-mascot.has-new::after,.bot-dot,.bot-ty i{animation:none}}
@media print{.bot,.bot-tip{display:none!important}}