/* ==========================================================================
   Chat bot — antara muka terapung (kongsi untuk kedua-dua laman)
   ========================================================================== */
.bot-btn {
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 18px; border:0; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg,var(--bot-warna, #15715F),var(--bot-warna-2, #0A312D));
  color:#fff; font:inherit; font-weight:700; font-size:.92rem;
  box-shadow:0 12px 30px -12px rgba(6,36,32,.65), 0 2px 6px rgba(0,0,0,.15);
  transition:transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease);
}
.bot-btn:hover { transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(6,36,32,.7); }
.bot-btn svg { width:20px; height:20px; flex:none; }
.bot-btn .bot-tanda {
  position:absolute; top:-4px; right:-4px; width:12px; height:12px; border-radius:50%;
  background:#E2A33C; border:2px solid var(--paper, #fff);
}
.bot-btn.bot-tutup .bot-tanda { display:none; }
@media (max-width:640px) { .bot-btn { padding:14px; } .bot-btn .bot-lbl { display:none; } }

.bot-panel {
  position:fixed; right:18px; bottom:88px; z-index:75;
  width:min(380px, calc(100vw - 36px));
  max-height:min(600px, 76vh);
  display:none; flex-direction:column; overflow:hidden;
  background:var(--card, #fff); color:var(--ink, #0B1F1C);
  border:1px solid var(--line, #E2DED3); border-radius:20px;
  box-shadow:0 30px 70px -30px rgba(6,36,32,.55), 0 4px 14px rgba(0,0,0,.12);
}
.bot-panel.bot-buka { display:flex; animation:botNaik .28s var(--ease, ease) both; }
@keyframes botNaik { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.bot-head {
  display:flex; align-items:center; gap:11px; padding:14px 16px;
  background:linear-gradient(135deg,var(--bot-warna, #15715F),var(--bot-warna-2, #0A312D));
  color:#fff; flex:none;
}
.bot-head .bot-avatar {
  width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.18); font-weight:800; font-size:.95rem;
}
.bot-head strong { display:block; font-size:.98rem; line-height:1.2; }
.bot-head small { color:rgba(255,255,255,.8); font-size:.76rem; display:flex; align-items:center; gap:6px; }
.bot-head small::before { content:""; width:7px; height:7px; border-radius:50%; background:#7BE495; display:inline-block; }
.bot-close {
  margin-left:auto; background:rgba(255,255,255,.14); border:0; color:#fff;
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1.05rem; line-height:1;
}
.bot-close:hover { background:rgba(255,255,255,.26); }

.bot-body { padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; flex:1; }
.bot-msg { max-width:86%; padding:11px 14px; border-radius:16px; font-size:.92rem; line-height:1.55; white-space:pre-line; }
.bot-msg.bot { align-self:flex-start; background:var(--card-2, #F4F1EA); border:1px solid var(--line, #E2DED3); border-bottom-left-radius:5px; }
.bot-msg.user { align-self:flex-end; background:var(--bot-warna, #15715F); color:#fff; border-bottom-right-radius:5px; }
.bot-msg a { color:inherit; text-decoration:underline; font-weight:700; }
.bot-msg .bot-kecil { display:block; margin-top:7px; font-size:.8rem; opacity:.75; }

.bot-typing { align-self:flex-start; display:flex; gap:4px; padding:12px 15px; background:var(--card-2, #F4F1EA); border:1px solid var(--line, #E2DED3); border-radius:16px; border-bottom-left-radius:5px; }
.bot-typing i { width:7px; height:7px; border-radius:50%; background:var(--ink-mute, #75857F); animation:botTitik 1.1s infinite; }
.bot-typing i:nth-child(2) { animation-delay:.18s; }
.bot-typing i:nth-child(3) { animation-delay:.36s; }
@keyframes botTitik { 0%,60%,100% { opacity:.28; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }

.bot-chips { display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
.bot-chip {
  background:transparent; border:1px solid var(--line-2, #D3CEC0); color:var(--ink-soft, #3C514D);
  border-radius:999px; padding:7px 13px; font:inherit; font-size:.82rem; cursor:pointer;
  transition:all .16s var(--ease, ease);
}
.bot-chip:hover { background:var(--bot-warna, #15715F); color:#fff; border-color:transparent; }

.bot-foot { display:flex; gap:9px; padding:12px 14px; border-top:1px solid var(--line, #E2DED3); background:var(--card, #fff); flex:none; }
.bot-foot input {
  flex:1; padding:11px 14px; font:inherit; font-size:.92rem; color:inherit;
  background:var(--card-2, #F7F5F0); border:1px solid var(--line-2, #D3CEC0); border-radius:999px;
}
.bot-foot input:focus { outline:none; border-color:var(--bot-warna, #15715F); box-shadow:0 0 0 4px color-mix(in srgb, var(--bot-warna, #15715F) 16%, transparent); }
.bot-foot button {
  flex:none; width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:var(--bot-warna, #15715F); color:#fff; display:grid; place-items:center;
}
.bot-foot button:disabled { opacity:.45; cursor:default; }
.bot-foot button svg { width:19px; height:19px; }

@media (max-width:520px) {
  .bot-panel { left:12px; right:12px; bottom:80px; width:auto; max-height:74vh; }
}
@media print { .bot-btn, .bot-panel { display:none !important; } }