/* ==========================================================================
   JJB AI Assistant widget
   ========================================================================== */

.chat {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  font-family: var(--font-body);
  /* The wrapper stays sized to the panel even while the panel is closed, which
     left a ~390x450 transparent rectangle over the bottom-right of every page
     quietly eating clicks on whatever sat beneath it. Same guard the .bk
     overlay already uses: the container itself is never a click target, only
     its real controls are. */
  pointer-events: none;
}

.chat__launcher,
.chat__panel {
  pointer-events: auto;
}

/* ---- launcher ----------------------------------------------------------- */

.chat__launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.25rem;
  order: 2;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  background-image: linear-gradient(170deg, #D2FFC6 0%, var(--signal) 46%, #96E884 100%);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.75),
    0 14px 34px -12px rgba(185, 253, 168, 0.6);
  transition: transform 260ms var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.chat__launcher:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 22px 50px -14px rgba(185, 253, 168, 0.75);
}

.chat__launcher-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--green-900);
  animation: chat-pulse 2.6s var(--ease-in-out) infinite;
}

@keyframes chat-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__launcher-dot { animation: none; }
}

.chat.is-open .chat__launcher-text,
.chat.is-open .chat__launcher-dot {
  display: none;
}

/* ---- panel -------------------------------------------------------------- */

.chat__panel {
  order: 1;
  width: min(92vw, 390px);
  max-height: min(78svh, 620px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-lg);
  background-color: rgba(6, 14, 10, 0.9);
  /* This panel inherits a live 34px backdrop-filter from .glass--panel, which
     has to keep resampling continuously while it's open - directly behind
     the text input the visitor is typing into. At 90% opacity the blur is
     doing almost nothing visually (there's barely any light getting through
     to blur), so it's dropped here rather than carried for no visible gain.
     This was the real source of the reported typing lag: the panel wrapping
     the input, not the animations elsewhere on the page. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transform-origin: bottom right;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.chat.is-open .chat__panel {
  opacity: 1;
  transform: none;
}

/* The `display: flex` above beats the UA stylesheet's `[hidden] { display: none }`,
   so setting the hidden attribute did not actually hide anything: the closed
   panel stayed laid out at full size, invisible at opacity 0 but still
   hit-testable and still in the tab order. On the contact page it sat directly
   over the right-hand form column and swallowed every click on the email field
   and the enquiry-type select.

   visibility rather than display, because chat.js sets the hidden attribute 220ms
   AFTER removing .is-open, so the fade has already finished by the time this
   applies - and going straight to display:none would kill the opening
   transition, since there would be no rendered opacity:0 frame to animate from. */
.chat__panel[hidden] {
  visibility: hidden;
}

.chat__header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(207, 247, 205, 0.12);
}

.chat__mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
}

.chat__id {
  flex: 1;
  min-width: 0;
}

.chat__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bone);
  line-height: 1.2;
}

.chat__sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 3px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--stone-400);
}

/* the badge is part of the standing declaration, not decoration */
.chat__badge {
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--ink-900);
  background-color: var(--signal);
}

.chat__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--stone-400);
  background-color: rgba(255, 255, 255, 0.06);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.chat__close:hover {
  color: var(--bone);
  background-color: rgba(255, 255, 255, 0.12);
}

/* ---- the static Article 50 declaration ---------------------------------- */

.chat__declaration {
  padding: 0.7rem 1rem;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--stone-400);
  background-color: rgba(185, 253, 168, 0.06);
  border-bottom: 1px solid rgba(207, 247, 205, 0.1);
}

.chat__declaration a {
  color: var(--green-200);
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* ---- log ---------------------------------------------------------------- */

.chat__log {
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overscroll-behavior: contain;
}

.chat__msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}

.chat__msg--user {
  align-self: flex-end;
  align-items: flex-end;
}

.chat__who {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-300);
  margin-bottom: 4px;
}

.chat__bubble {
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat__msg--bot .chat__bubble {
  color: var(--stone-200);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 5px;
}

.chat__msg--user .chat__bubble {
  color: var(--ink-900);
  background-color: var(--green-200);
  border-bottom-right-radius: 5px;
}

.chat__status {
  padding: 0 1rem;
  min-height: 1.1em;
  font-size: 0.6875rem;
  color: var(--green-300);
}

/* ---- form --------------------------------------------------------------- */

.chat__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
}

.chat__srlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.chat__input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--bone);
  -webkit-text-fill-color: var(--bone);
  caret-color: var(--signal);
  background-color: rgba(8, 20, 16, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13);
  transition: box-shadow var(--dur) var(--ease-out);
}

.chat__input::placeholder {
  color: var(--stone-600);
  -webkit-text-fill-color: var(--stone-600);
}

.chat__input:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(185, 253, 168, 0.6),
    0 0 0 3px rgba(185, 253, 168, 0.14);
}

.chat__input:disabled {
  opacity: 0.55;
}

.chat__send {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink-900);
  background-image: linear-gradient(170deg, #D2FFC6 0%, var(--signal) 46%, #96E884 100%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.chat__send:hover {
  transform: scale(1.06);
}

.chat__send:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

@media (max-width: 480px) {
  .chat__panel {
    width: calc(100vw - 2rem);
    max-height: 74svh;
  }
}

/* quick action: booking must not depend on the model behaving */
.chat__actions {
  padding: 0 1rem;
}

.chat__action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--green-100);
  background-color: rgba(185, 253, 168, 0.1);
  box-shadow: inset 0 0 0 1px rgba(185, 253, 168, 0.26);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.chat__action:hover {
  color: var(--ink-900);
  background-color: var(--signal);
}

/* ---- typing indicator ----------------------------------------------------
   Three dots while waiting on the reply, then swapped in place for the
   typewriter reveal. Matches the Premier Gas Care widget's pattern. */

.chat__bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-block: 0.85rem;
}

.chat__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--stone-400);
  animation: chat-dot 1.1s ease-in-out infinite;
}

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

@keyframes chat-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .chat__dot {
    animation: none;
    opacity: 0.7;
  }
}