/* =============================================================================
   PestoKill live chat widget
   -----------------------------------------------------------------------------
   Served by the Node app only and injected into every static page, so it lives
   outside ./public (which is kept byte-identical to the designer's build).

   Everything is namespaced under .pkc- and the panel is a fixed-position layer,
   so it cannot inherit from or interfere with the site's theme. Colours mirror
   the brand tokens rather than importing them, because the widget must also
   render correctly on pages that load their CSS late.
   ========================================================================== */
.pkc,
.pkc * {
  box-sizing: border-box;
}
.pkc {
  --pkc-brand: #ee9a3f;
  --pkc-dark: #323455;
  --pkc-ink: #1c1d2b;
  --pkc-muted: #6b6f81;
  --pkc-line: #e6e7ee;
  --pkc-radius: 16px;
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 2147483000;
  font:
    14px/1.5 "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  color: var(--pkc-ink);
}

/* ------------------------------- launcher -------------------------------- */
.pkc-launcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--pkc-brand);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(238, 154, 63, 0.42);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}
.pkc-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(238, 154, 63, 0.5);
}
.pkc-launcher:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.pkc-launcher svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  flex: 0 0 auto;
}
.pkc-launcher-label {
  white-space: nowrap;
}
.pkc.is-open .pkc-launcher {
  opacity: 0;
  pointer-events: none;
}
/* unread pip */
.pkc-badge {
  position: absolute;
  top: -4px;
  inset-inline-end: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #d93025;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.pkc-badge.on {
  display: flex;
}

/* --------------------------------- panel --------------------------------- */
.pkc-panel {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 374px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: var(--pkc-radius);
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.24);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.pkc.is-open .pkc-panel {
  display: flex;
  animation: pkc-in 0.22s ease both;
}
@keyframes pkc-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pkc.is-open .pkc-panel {
    animation: none;
  }
  .pkc-launcher {
    transition: none;
  }
}

/* --------------------------------- header -------------------------------- */
.pkc-head {
  background: var(--pkc-dark);
  color: #fff;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
}
.pkc-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pkc-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex: 0 0 auto;
}
.pkc-head-text {
  flex: 1;
  min-width: 0;
}
.pkc-head-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.pkc-head-sub {
  font-size: 11.5px;
  color: #b9bdd0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.pkc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ecc71;
  flex: 0 0 auto;
}
.pkc-dot.off {
  background: #f0a53c;
}
.pkc-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}
.pkc-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* --------------------------------- body ---------------------------------- */
.pkc-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  background: #f7f8fb;
  scrollbar-width: thin;
}
.pkc-body::-webkit-scrollbar {
  width: 6px;
}
.pkc-body::-webkit-scrollbar-thumb {
  background: #dfe2e9;
  border-radius: 3px;
}

/* -------------------------------- pre-chat ------------------------------- */
.pkc-intro {
  font-size: 13.5px;
  color: var(--pkc-muted);
  line-height: 1.65;
  margin: 0 0 16px;
}
.pkc-form {
  display: grid;
  gap: 12px;
}
.pkc-field {
  display: grid;
  gap: 5px;
}
.pkc-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--pkc-ink);
}
.pkc-field label span {
  color: #d93025;
}
.pkc-field input,
.pkc-field textarea {
  width: 100%;
  border: 1px solid var(--pkc-line);
  border-radius: 10px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--pkc-ink);
  background: #fff;
  min-height: 44px;
}
.pkc-field textarea {
  min-height: 84px;
  resize: vertical;
}
.pkc-field input:focus,
.pkc-field textarea:focus {
  outline: 2px solid rgba(238, 154, 63, 0.45);
  outline-offset: 0;
  border-color: var(--pkc-brand);
}
.pkc-field.err input,
.pkc-field.err textarea {
  border-color: #d93025;
}
.pkc-submit {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--pkc-brand);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.pkc-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.pkc-msg {
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 9px;
  padding: 9px 11px;
  display: none;
}
.pkc-msg.on {
  display: block;
}
.pkc-msg.bad {
  background: #fbe6e3;
  color: #b3271b;
}
.pkc-privacy {
  font-size: 11.5px;
  color: var(--pkc-muted);
  line-height: 1.55;
  margin: 2px 0 0;
}

/* -------------------------------- messages ------------------------------- */
.pkc-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pkc-bubble {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.8px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05);
}
.pkc-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pkc-row.me {
  align-items: flex-end;
}
.pkc-row.them {
  align-items: flex-start;
}
.pkc-row.me .pkc-bubble {
  background: var(--pkc-brand);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.pkc-row.them .pkc-bubble {
  background: #fff;
  color: var(--pkc-ink);
  border: 1px solid var(--pkc-line);
  border-bottom-left-radius: 5px;
}
.pkc-row.sys .pkc-bubble {
  background: #fff4e6;
  color: #8a5a12;
  border: 1px solid #f7e0c1;
  max-width: 100%;
  align-self: stretch;
}
.pkc-meta {
  font-size: 10.5px;
  color: #989daf;
  padding: 0 4px;
}
.pkc-bubble a {
  color: inherit;
  text-decoration: underline;
}
.pkc-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 9px 13px;
  background: #fff;
  border: 1px solid var(--pkc-line);
  border-radius: 14px;
  width: fit-content;
}
.pkc-typing.on {
  display: flex;
}
.pkc-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9bdc9;
  animation: pkc-bounce 1.2s infinite;
}
.pkc-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.pkc-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes pkc-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ------------------------------- composer -------------------------------- */
.pkc-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--pkc-line);
  background: #fff;
  padding: 10px 12px;
  display: none;
  gap: 8px;
  align-items: flex-end;
}
.pkc.is-chatting .pkc-foot {
  display: flex;
}
.pkc-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--pkc-line);
  border-radius: 12px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
  resize: none;
  max-height: 110px;
  min-height: 44px;
  color: var(--pkc-ink);
}
.pkc-input:focus {
  outline: 2px solid rgba(238, 154, 63, 0.4);
  border-color: var(--pkc-brand);
}
.pkc-send {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: var(--pkc-brand);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pkc-send:disabled {
  opacity: 0.45;
  cursor: default;
}
.pkc-send svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.pkc-note {
  padding: 6px 12px 0;
  font-size: 11px;
  color: var(--pkc-muted);
  text-align: center;
}

/* --------------------------------- phones -------------------------------- */
@media (max-width: 575px) {
  .pkc {
    inset-block-end: 16px;
    inset-inline-end: 16px;
  }
  .pkc-launcher {
    height: 52px;
    padding: 0 16px 0 14px;
    font-size: 14px;
  }
  /* Full-screen sheet: a 374px panel on a 360px screen is unusable, and the
     on-screen keyboard leaves almost no room for the thread. */
  .pkc.is-open .pkc-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .pkc.is-open {
    inset: 0;
  }
}
/* Very short landscape phones: keep the composer reachable. */
@media (max-height: 460px) and (min-width: 576px) {
  .pkc-panel {
    height: calc(100vh - 90px);
  }
}