/* ==========================================================================
   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);
}

/* ---- 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;
}

.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;
  }
}