/* Sticky chat bubble, lower-right, expanding into a chat window (brief 4).
   Styled from the same tokens as the rest of the site: black pill surfaces,
   bone panels, butter-yellow accents, 0.5s ease transitions. */

.chat {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2xs);
  font-family: var(--font-body);
  letter-spacing: -0.03em;
  /* The panel keeps its box while collapsed, so the wrapper covers a tall
     slice of the bottom-right corner. Without this it swallows clicks meant
     for whatever is under it, which is the right-hand footer columns. */
  pointer-events: none;
}

.chat__bubble { pointer-events: auto; }
/* the panel sets its own, none while collapsed and auto once open */

/* --- bubble ---------------------------------------------------------------- */
.chat__bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3xs);
  height: 52px;
  padding: var(--s-4xs) var(--s-s) var(--s-4xs) var(--s-4xs);
  border: 0;
  border-radius: var(--s-xl);
  background: var(--ink);
  color: var(--white);
  font-size: var(--body);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-nav), 0 10px 28px #00000026;
  transition: opacity var(--t), transform var(--t-slow), padding var(--t);
}

.chat__bubble:hover { opacity: 0.9; }

.chat__bubble::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: var(--s-xl);
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: chat-ring 3s ease infinite;
  pointer-events: none;
}

@keyframes chat-ring {
  0% { opacity: 0.7; transform: scale(0.95); }
  70%, 100% { opacity: 0; transform: scale(1.08); }
}

.chat__bubble-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--body);
  object-fit: cover;
}

.chat__unread {
  position: absolute;
  top: -4px;
  right: -2px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--s-xl);
  border: 2px solid var(--bg-01);
  background: var(--accent);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  transform: scale(0);
  transition: transform var(--t-slow) var(--ease-out-quart);
}

.chat__unread.is-on { transform: scale(1); }

.chat.is-open .chat__bubble { transform: scale(0.92); }
.chat.is-open .chat__bubble::after { animation: none; }
.chat.is-open .chat__bubble-label { display: none; }

/* --- window --------------------------------------------------------------- */
.chat__panel {
  display: flex;
  flex-direction: column;
  width: min(384px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 9rem));
  border-radius: var(--s-m);
  background: var(--bg-01);
  border: 1px solid var(--n-04);
  box-shadow: 10px 18px 40px #00000026;
  overflow: hidden;
  transform-origin: bottom right;
  transform: translateY(12px) scale(0.94);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--t-slow) var(--ease-out-quart),
    opacity var(--t) ,
    visibility var(--t-slow) linear;
}

.chat.is-open .chat__panel {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.chat__head {
  display: flex;
  align-items: center;
  gap: var(--s-2xs);
  padding: var(--s-2xs);
  background: var(--ink);
  color: var(--white);
  /* pinned: the close button has to stay reachable at all times */
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
}

.chat__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-heading);
  object-fit: cover;
}

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

.chat__name {
  font-family: var(--font-heading);
  font-size: var(--h6);
  letter-spacing: -0.04em;
}

.chat__status {
  display: flex;
  align-items: center;
  gap: var(--s-4xs);
  margin-top: 1px;
  color: var(--white-80);
  font-size: var(--body-s);
}

.chat__status .dot { background: var(--n-08); box-shadow: none; }
.chat__status[data-online='true'] .dot {
  background: var(--ok-bright);
  box-shadow: 0 0 0 3px #3ddc8438;
}

.chat__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--white-20);
  border-radius: 50%;
  background: var(--white-10);
  color: var(--white);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t), transform var(--t);
}

.chat__close:hover { background: var(--white-20); transform: rotate(90deg); }

.chat__log {
  /* min-height:0 lets this shrink inside the flex column; without it a long
     conversation grows the panel and pushes the header off the top. */
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3xs);
  padding: var(--s-s) var(--s-2xs);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-02);
}

.msg {
  max-width: 85%;
  padding: var(--s-3xs) var(--s-2xs);
  border-radius: var(--s-s);
  font-size: var(--body);
  line-height: var(--lh-l);
  white-space: pre-wrap;
  word-break: break-word;
  animation: msg-in var(--t-slow) var(--ease-out-quart) both;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.msg--agent {
  align-self: flex-start;
  background: var(--white-80);
  border-bottom-left-radius: var(--s-4xs);
}

.msg--visitor {
  align-self: flex-end;
  background: var(--ink);
  color: var(--white);
  border-bottom-right-radius: var(--s-4xs);
}

.msg--system {
  align-self: center;
  max-width: 94%;
  padding: var(--s-4xs) var(--s-3xs);
  background: transparent;
  color: var(--muted);
  font-size: var(--body-s);
  text-align: center;
}

.msg__time {
  display: block;
  margin-top: 3px;
  font-size: 0.68rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: var(--s-2xs);
  border-radius: var(--s-s) var(--s-s) var(--s-s) var(--s-4xs);
  background: var(--white-80);
}

.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--n-08);
  animation: typing 1.3s ease infinite;
}

.typing span:nth-child(2) { animation-delay: 0.16s; }
.typing span:nth-child(3) { animation-delay: 0.32s; }

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

.chat__prompts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  padding: var(--s-3xs) var(--s-2xs);
  background: var(--bg-02);
}

.chat__ask {
  width: 100%;
  margin-bottom: var(--s-4xs);
  color: var(--muted);
  font-size: var(--body-s);
}

.chat__prompt {
  padding: var(--s-4xs) var(--s-2xs);
  border: 1px solid var(--n-05);
  border-radius: var(--s-xl);
  background: var(--white-60);
  font-size: var(--body-s);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}

.chat__prompt:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* The opening question is the only way into the script, and the composer stays
   locked until it is tapped, so it asks for the tap rather than waiting to be
   noticed. Both animations stop under prefers-reduced-motion, via tokens.css. */
.chat__start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4xs);
  width: 100%;
}

.chat__start-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: var(--s-xl);
  background: var(--ink);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: chat-hint 1.7s ease-in-out infinite;
}

.chat__start-hint::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--white);
}

@keyframes chat-hint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.chat__prompt--start {
  width: 100%;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 500;
  animation: chat-pulse 2.2s ease-out infinite;
}

.chat__prompt--start:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

@keyframes chat-pulse {
  0% { box-shadow: 0 0 0 0 #0a101733; }
  70% { box-shadow: 0 0 0 10px #0a101700; }
  100% { box-shadow: 0 0 0 0 #0a101700; }
}

/* the locked composer should read as waiting, not broken */
.chat__input:disabled {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  cursor: not-allowed;
}

.chat__form {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
  gap: var(--s-4xs);
  padding: var(--s-3xs);
  border-top: 1px solid var(--n-04);
  background: var(--bg-01);
}

.chat__input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: var(--s-3xs) var(--s-s);
  border: 1px solid var(--n-05);
  border-radius: var(--s-xl);
  background: var(--white-60);
  resize: none;
  font-size: var(--body);
  line-height: var(--lh-l);
  transition: border-color var(--t), background-color var(--t);
}

.chat__input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--white);
}

.chat__send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: opacity var(--t), transform var(--t);
}

.chat__send:hover { transform: scale(1.05); }
.chat__send:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.chat__foot {
  padding: 0 var(--s-2xs) var(--s-3xs);
  color: var(--muted);
  /* was 0.72rem, about 11px: too small to read, and this line carries the
     phone number, which is the one thing a visitor may want to act on. */
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}

.chat__error {
  margin: 0 var(--s-2xs) var(--s-3xs);
  padding: var(--s-3xs) var(--s-2xs);
  border: 1px solid #b3261e40;
  border-radius: var(--s-3xs);
  background: #b3261e14;
  color: var(--bad);
  font-size: var(--body-s);
}

@media (max-width: 480px) {
  .chat__bubble-label { display: none; }
  .chat__bubble { padding: var(--s-4xs); }
}

/* Full screen on a phone. As a floating panel it left a strip of the page
   showing all the way around it, so two interfaces competed for one screen.
   Sizing off the wrapper's inset rather than vh also dodges the mobile browser
   address bar, which makes 100vh taller than the screen actually is. */
@media (max-width: 767px) {
  .chat.is-open {
    /* Pinned to the visual viewport rather than the layout viewport. When the
       keyboard opens, iOS scrolls the page to reveal the focused input and
       drags a position:fixed panel up with it, taking the header and its close
       button off the top of the screen. chat.js keeps these two in step with
       window.visualViewport; the dvh fallback covers browsers without it. */
    top: var(--chat-top, 0px);
    left: 0;
    right: 0;
    bottom: auto;
    height: var(--chat-vh, 100dvh);
    align-items: stretch;
    gap: 0;
  }

  .chat.is-open .chat__panel {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    transform-origin: center;
  }

  /* nothing for the bubble to sit on once the panel fills the screen */
  .chat.is-open .chat__bubble { display: none; }

  /* clear of the notch and the home indicator */
  .chat.is-open .chat__head {
    padding-top: calc(var(--s-2xs) + env(safe-area-inset-top, 0px));
  }
  .chat.is-open .chat__form {
    padding-bottom: calc(var(--s-3xs) + env(safe-area-inset-bottom, 0px));
  }

  /* Full screen leaves room for this line to be properly legible. */
  .chat.is-open .chat__foot { font-size: 0.95rem; }

  /* the page behind must not scroll under the chat */
  html.chat-open,
  html.chat-open body { overflow: hidden; }
}