/* ==========================================================================
   Keynest Stays — enquiry chatbot
   Brand colours sirf yahan change karne hain (ek jagah).
   ========================================================================== */

.kc-root {
  --kc-ink: #10312a;
  --kc-ink-soft: #1d4a40;
  --kc-cream: #f7f4ee;
  --kc-gold: #c1954f;
  --kc-white: #ffffff;
  --kc-line: rgba(16, 49, 42, 0.12);
  --kc-muted: #6b7b76;
  --kc-radius: 14px;
  --kc-font: var(--font-body, "Jost", "Segoe UI", system-ui, -apple-system, sans-serif);

  position: fixed;
  right: 24px;
  /* Sits right below the site's own WhatsApp/Call buttons (.fab-stack,
     shifted up to bottom:94px in style.css to make room) — same 14px
     rhythm they use between each other, so the three read as one stack,
     with chat closest to the screen edge, above 760px. */
  bottom: 24px;
  z-index: 9998;
  font-family: var(--kc-font);
  font-size: 15px;
  line-height: 1.5;
}

/* Below 760px — the site's own mobile breakpoint — .fab-stack is hidden
   in favour of the full-width .sticky-cta-bar, and the launcher/panel
   switch to the mobile rules at the bottom of this file. */

.kc-root *,
.kc-root *::before,
.kc-root *::after {
  box-sizing: border-box;
}

/* --- Launcher ----------------------------------------------------------- */

.kc-launcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--kc-ink);
  color: var(--kc-cream);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(16, 49, 42, 0.28);
}

.kc-launcher:hover {
  background: var(--kc-ink-soft);
}

.kc-launcher:focus-visible,
.kc-root button:focus-visible,
.kc-root input:focus-visible,
.kc-root textarea:focus-visible {
  outline: 2px solid var(--kc-gold);
  outline-offset: 2px;
}

.kc-launcher-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.kc-launcher-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--kc-gold);
}

.kc-root[data-open="true"] .kc-launcher {
  display: none;
}

/* --- Panel -------------------------------------------------------------- */

.kc-panel {
  display: none;
  flex-direction: column;
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 40px);
  background: var(--kc-white);
  border: 1px solid var(--kc-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 49, 42, 0.24);
}

.kc-root[data-open="true"] .kc-panel {
  display: flex;
}

.kc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--kc-ink);
  color: var(--kc-cream);
  border-bottom: 2px solid var(--kc-gold);
}

.kc-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--kc-gold);
  color: var(--kc-ink);
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.kc-header-text {
  flex: 1;
  min-width: 0;
}

.kc-header-title {
  font-weight: 600;
  font-size: 15px;
}

.kc-header-sub {
  font-size: 12px;
  opacity: 0.75;
}

.kc-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.kc-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* --- Messages ----------------------------------------------------------- */

.kc-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
  background: var(--kc-white);
  scroll-behavior: smooth;
}

.kc-msg {
  max-width: 84%;
  margin-bottom: 10px;
  padding: 10px 14px;
  border-radius: var(--kc-radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kc-msg-bot {
  background: var(--kc-cream);
  color: var(--kc-ink);
  border-bottom-left-radius: 4px;
}

.kc-msg-user {
  margin-left: auto;
  background: var(--kc-ink);
  color: var(--kc-cream);
  border-bottom-right-radius: 4px;
}

.kc-msg a {
  color: inherit;
  text-decoration: underline;
}

.kc-typing {
  display: flex;
  gap: 4px;
  width: 54px;
  padding: 14px;
}

.kc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kc-muted);
  animation: kc-bounce 1s infinite;
}

.kc-typing span:nth-child(2) {
  animation-delay: 0.15s;
}
.kc-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes kc-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* --- Summary card --------------------------------------------------------- */

.kc-summary {
  max-width: 100%;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--kc-line);
  border-left: 3px solid var(--kc-gold);
  border-radius: var(--kc-radius);
  background: var(--kc-white);
  font-size: 14px;
}

.kc-summary dl {
  margin: 0;
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: 6px 10px;
}

.kc-summary dt {
  color: var(--kc-muted);
}

.kc-summary dd {
  margin: 0;
  color: var(--kc-ink);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* --- Input area ------------------------------------------------------------ */

.kc-foot {
  border-top: 1px solid var(--kc-line);
  padding: 12px;
  background: var(--kc-white);
}

.kc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kc-option {
  padding: 9px 14px;
  border: 1px solid var(--kc-ink);
  border-radius: 999px;
  background: var(--kc-white);
  color: var(--kc-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.kc-option:hover {
  background: var(--kc-ink);
  color: var(--kc-cream);
}

.kc-option-primary {
  background: var(--kc-ink);
  color: var(--kc-cream);
}

.kc-option-primary:hover {
  background: var(--kc-ink-soft);
}

.kc-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.kc-field {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--kc-line);
  border-radius: 10px;
  background: var(--kc-white);
  color: var(--kc-ink);
  font: inherit;
  resize: none;
}

.kc-field::placeholder {
  color: var(--kc-muted);
}

.kc-send {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 10px;
  background: var(--kc-ink);
  color: var(--kc-cream);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.kc-send:hover {
  background: var(--kc-ink-soft);
}

.kc-send:disabled {
  opacity: 0.6;
  cursor: default;
}

.kc-error {
  margin: 0 0 8px;
  color: #a8341f;
  font-size: 13px;
}

.kc-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kc-contact-links a {
  padding: 9px 14px;
  border: 1px solid var(--kc-ink);
  border-radius: 999px;
  color: var(--kc-ink);
  font-size: 14px;
  text-decoration: none;
}

.kc-contact-links a:hover {
  background: var(--kc-ink);
  color: var(--kc-cream);
}

.kc-note {
  margin: 8px 2px 0;
  color: var(--kc-muted);
  font-size: 11.5px;
  text-align: center;
}

/* --- Mobile -----------------------------------------------------------------
   Matches the site's own mobile breakpoint (760px — see .fab-stack /
   .sticky-cta-bar in style.css) rather than a chatbot-specific one, so the
   launcher and the site's floating buttons always agree on which layout
   is active. Below that, the open panel takes over the full screen
   instead of floating, so nothing behind it (the sticky CTA bar, page
   content) shows through the edges. */

@media (max-width: 760px) {
  .kc-root {
    right: 14px;
    bottom: 80px;
  }

  .kc-root[data-open="true"] {
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
  }

  .kc-panel {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .kc-root {
    bottom: 65px;
  }

  .kc-launcher span:not(.kc-launcher-dot) {
    display: none;
  }

  .kc-launcher {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kc-root * {
    animation: none !important;
    scroll-behavior: auto;
  }
}