/* ============================================================
   Kampi assistant: a floating chat that follows the visitor
   across every page.
   ============================================================ */
.kbot-fab {
  position: fixed; z-index: 60; bottom: 20px; inset-inline-start: 20px;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  background: linear-gradient(120deg, #4b1fb0, #8b6cf6);
  box-shadow: 0 14px 34px rgba(75, 31, 176, .42);
  display: grid; place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.kbot-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 40px rgba(75, 31, 176, .52); }
.kbot-fab svg { width: 26px; height: 26px; color: #fff; }
.kbot-fab::after {
  content: ""; position: absolute; top: 4px; inset-inline-end: 4px;
  width: 11px; height: 11px; border-radius: 50%; background: #35f0a1; border: 2px solid #fff;
  animation: kbotBlip 2.4s ease-in-out infinite;
}
@keyframes kbotBlip { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.kbot-fab[hidden] { display: none; }

.kbot-panel {
  position: fixed; z-index: 61; bottom: 20px; inset-inline-start: 20px;
  width: min(392px, calc(100vw - 32px)); max-height: min(620px, calc(100dvh - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: #1b1233; border-radius: 22px;
  border: 1px solid #e9e3fa; box-shadow: 0 32px 70px rgba(6, 2, 20, .3);
  animation: kbotIn .24s cubic-bezier(.2, .8, .3, 1);
}
@keyframes kbotIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.kbot-panel[hidden] { display: none; }

.kbot-head {
  display: flex; align-items: center; gap: 11px; padding: 14px 16px;
  background: linear-gradient(120deg, #4b1fb0, #8b6cf6); color: #fff;
}
.kbot-head img { width: 30px; height: 30px; border-radius: 9px; background: #fff; padding: 4px; object-fit: contain; }
.kbot-head b { font-size: 15px; font-weight: 800; display: block; line-height: 1.2; }
.kbot-head small { font-size: 11.5px; opacity: .85; }
.kbot-head .kbot-x {
  margin-inline-start: auto; background: rgba(255, 255, 255, .16); border: 0; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1;
}
.kbot-head .kbot-x:hover { background: rgba(255, 255, 255, .28); }

.kbot-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 11px; background: #faf8ff; }
.kbot-msg { max-width: 88%; font-size: 14.5px; line-height: 1.68; padding: 11px 14px; border-radius: 16px; white-space: pre-wrap; }
.kbot-msg.bot { background: #fff; border: 1px solid #e9e3fa; align-self: flex-start; border-start-start-radius: 6px; }
.kbot-msg.me { background: linear-gradient(120deg, #4b1fb0, #8b6cf6); color: #fff; align-self: flex-end; border-end-end-radius: 6px; }
.kbot-msg.typing { color: #6b6390; font-style: italic; }

.kbot-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.kbot-chips button {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; color: #4b1fb0;
  background: #f2edff; border: 1px solid #e9e3fa; border-radius: 999px; padding: 7px 13px;
}
.kbot-chips button:hover { background: #e7dfff; }

.kbot-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.kbot-src a {
  font-size: 12px; font-weight: 700; color: #4b1fb0; text-decoration: none;
  background: #f2edff; border: 1px solid #e9e3fa; border-radius: 999px; padding: 5px 11px;
}
.kbot-handoff {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; text-decoration: none;
  font-size: 13.5px; font-weight: 800; color: #fff; background: #25d366;
  border-radius: 999px; padding: 10px 16px; box-shadow: 0 8px 20px rgba(37, 211, 102, .3);
}
.kbot-handoff svg { width: 16px; height: 16px; }

.kbot-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e9e3fa; background: #fff; }
.kbot-foot input {
  flex: 1; font: inherit; font-size: 16px; padding: 11px 15px; border-radius: 999px;
  border: 1px solid #e9e3fa; background: #faf8ff; color: #1b1233;
}
.kbot-foot input::placeholder { color: #9d95bb; }
.kbot-foot button {
  font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; color: #fff; border: 0;
  padding: 11px 20px; border-radius: 999px; background: linear-gradient(120deg, #4b1fb0, #8b6cf6);
}
.kbot-foot button:disabled { opacity: .5; cursor: default; }

@media (max-width: 520px) {
  .kbot-panel { inset-inline: 12px; width: auto; bottom: 12px; max-height: calc(100dvh - 24px); }
  .kbot-fab { bottom: 14px; inset-inline-start: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .kbot-fab::after, .kbot-panel { animation: none; }
}