/* ==========================================================================
   Chat assistant

   Loaded only when the widget is switched on in wp-admin, which is why this
   is its own file rather than a block in components.css: a site with the chat
   off should not pay for its rules.

   Everything is fixed-position and outside the flow, so nothing here can
   contribute to Cumulative Layout Shift. Colours are tokens only, so dark
   theme is inherited rather than re-declared.
   ========================================================================== */

/* No script, no launcher. A chat button that opens nothing is worse than none,
   and the panel is built by JavaScript. */
.c-chat { display: none; }
.js .c-chat { display: block; }

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

.c-chat__launcher {
  position: fixed;
  z-index: var(--z-drawer);
  right: var(--gutter);
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--control-h);
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  box-shadow: var(--e-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.c-chat__launcher:hover  { background: var(--c-accent-hover); }
.c-chat__launcher:active { background: var(--c-accent-press); transform: scale(.97); }

.c-chat__launcher-icon { display: grid; place-items: center; }
.c-chat__launcher-icon svg { display: block; }

/* Open state: the panel carries the close button, so the launcher shrinks to
   its icon rather than sitting under the panel repeating itself. */
.c-chat.is-open .c-chat__launcher { transform: scale(.9); opacity: .7; }

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

.c-chat__panel {
  position: fixed;
  z-index: var(--z-overlay);
  right: var(--gutter);
  bottom: calc(var(--control-h) + var(--s-10) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - var(--gutter) * 2));
  /* Capped against the viewport so the log scrolls rather than the panel
     growing past the top of the screen on a short window. */
  max-height: min(560px, calc(100vh - var(--control-h) - var(--s-20)));
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--e-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transform-origin: bottom right;
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur) var(--ease-out);
}

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

.c-chat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line-soft);
  background: var(--c-surface-2);
}

.c-chat__title {
  margin: 0;
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.01em;
  color: var(--c-ink);
}

.c-chat__sub {
  margin: 2px 0 0;
  font-size: var(--t-xs);
  color: var(--c-ink-3);
}

.c-chat__close {
  display: grid;
  place-items: center;
  width: var(--target-touch);
  height: var(--target-touch);
  flex: none;
  margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--c-ink-2);
  cursor: pointer;
}

.c-chat__close:hover { background: var(--c-surface-3); color: var(--c-ink); }

/* --------------------------------------------------------------------------
   Transcript
   -------------------------------------------------------------------------- */

.c-chat__log {
  flex: 1 1 auto;
  /* Two bubbles' worth, always. The actions area grows with its content - the
     enquiry form is four controls tall - and `flex: none` on it let it take
     437px of a 560px panel, leaving the transcript 43px: the reply the visitor
     had just been given, and the line asking for their details, were both
     scrolled out of a one-line window. */
  min-height: 5.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.c-chat__msg { display: flex; }
.c-chat__msg--me { justify-content: flex-end; }

.c-chat__bubble {
  margin: 0;
  max-width: 85%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  background: var(--c-surface-2);
  color: var(--c-ink);
  /* A pasted URL in the visitor's own message must not widen the panel. */
  overflow-wrap: anywhere;
}

.c-chat__msg--me .c-chat__bubble {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.c-chat__actions {
  /* Takes the height its content needs - the enquiry form is four controls
     tall, and a Send button the visitor has to find by scrolling is a form
     half of them abandon. It stops at the point where the transcript above
     would fall below two bubbles: the panel header (~5rem) plus that minimum.
     Past there the form scrolls inside this pane instead. */
  flex: 0 0 auto;
  max-height: calc(100% - 10.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line-soft);
  background: var(--c-surface);
}

.c-chat__chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  padding: 0 var(--s-4);
  border: 1px solid var(--c-accent-ring);
  border-radius: var(--r-pill);
  background: var(--c-accent-wash);
  color: var(--c-accent-text);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.c-chat__chip:hover { background: var(--c-accent-ring); }

.c-chat__chip--go   { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }
.c-chat__chip--go:hover { background: var(--c-accent-hover); }

.c-chat__chip--wa {
  background: var(--c-good-wash);
  border-color: var(--c-good);
  color: var(--c-good);
}

.c-chat__chip--quiet {
  background: none;
  border-color: var(--c-line);
  color: var(--c-ink-3);
}

.c-chat__chip--quiet:hover { background: var(--c-surface-2); }

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

.c-chat__form {
  display: grid;
  gap: var(--s-3);
  width: 100%;
}

.c-chat__field { display: grid; gap: var(--s-1); }

.c-chat__field label {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--c-ink-2);
}

.c-chat__field input,
.c-chat__area {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--t-sm);
}

.c-chat__area { resize: vertical; }

.c-chat__field input:focus-visible,
.c-chat__area:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
  border-color: var(--c-accent);
}

.c-chat__send {
  justify-self: start;
  min-height: var(--control-h-sm);
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  cursor: pointer;
}

.c-chat__send:hover:not(:disabled) { background: var(--c-accent-hover); }
.c-chat__send:disabled { opacity: .6; cursor: default; }

.c-chat__error {
  margin: 0;
  font-size: var(--t-xs);
  line-height: var(--lh-body);
  color: var(--c-bad);
}

/* The border carries the error too, so the message is confirmation rather
   than the only signal - colour alone is not an accessible one. */
.c-chat__field input[aria-invalid="true"] { border-color: var(--c-bad); }

/* Honeypot. Off-screen rather than display:none - some bots skip anything
   that is not rendered, which defeats the point of the field. */
.c-chat__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  /* The label goes; the icon carries it. A pill wide enough for "Chat with us"
     covers a third of the thumb zone on a phone. */
  .c-chat__launcher-label { display: none; }

  .c-chat__launcher {
    width: var(--control-h);
    padding: 0;
    justify-content: center;
  }

  /* Clear of the sticky action bar when it is showing, so the two never
     overlap - see layout.css for the bar itself. The action bar's own
     rendered height is control-h + two lots of --s-3 padding plus its
     border, which comes to ~77px - offsetting by control-h + --s-6 (76px)
     left a ~1px margin that read as the two touching. --s-10 clears it with
     room to spare. */
  .has-actionbar .c-chat__launcher {
    bottom: calc(var(--control-h) + var(--s-10) + env(safe-area-inset-bottom, 0px));
  }

  .c-chat__panel {
    right: var(--s-3);
    left: var(--s-3);
    width: auto;
    bottom: calc(var(--control-h) + var(--s-8) + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - var(--control-h) - var(--s-16));
  }

  .has-actionbar .c-chat__panel {
    bottom: calc(var(--control-h) * 2 + var(--s-10) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-chat__launcher,
  .c-chat__panel { transition: none; }
  .c-chat.is-open .c-chat__launcher { transform: none; }
}