/* ============================================================
   HUQ REACH — floating chat widget.
   Same language as the site: bone, charcoal, one acid signal,
   sharp corners, hairline structure. Nothing rounded or bubbly.
   ============================================================ */

.hrq-chat{
  --c-bone:#F3F0E8; --c-ink:#111111; --c-acid:#C8FF3D;
  --c-line:rgba(17,17,17,.14); --c-grey:#5F5E58;
  --c-disp:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --c-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  position:fixed; z-index:70; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px);
  font-family:var(--c-body);
}

/* ---------- Launcher ---------- */
.hrq-launch{
  display:flex; align-items:center; gap:.7em;
  background:var(--c-ink); color:var(--c-bone);
  border:1.5px solid var(--c-ink); padding:.85em 1.15em;
  font-family:var(--c-disp); font-weight:700; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.06em; cursor:pointer;
  box-shadow:0 18px 44px -18px rgba(17,17,17,.55);
  transition:background .3s cubic-bezier(.16,.84,.44,1),color .3s,transform .3s;
  min-height:52px;
}
.hrq-launch:hover,.hrq-launch:focus-visible{background:var(--c-acid);color:var(--c-ink);border-color:var(--c-acid)}
.hrq-launch:focus-visible{outline:2.5px solid var(--c-ink);outline-offset:3px}
.hrq-launch svg{width:1.05em;height:1.05em;flex:none}
.hrq-launch .hrq-dot{width:7px;height:7px;background:var(--c-acid);flex:none}
.hrq-launch:hover .hrq-dot,.hrq-launch:focus-visible .hrq-dot{background:var(--c-ink)}
.hrq-chat.is-open .hrq-launch{display:none}

/* ---------- Panel ---------- */
.hrq-panel{
  display:none; flex-direction:column;
  width:min(384px,calc(100vw - 32px)); height:min(600px,calc(100dvh - 120px));
  background:var(--c-bone); border:1.5px solid var(--c-ink);
  box-shadow:0 40px 90px -30px rgba(17,17,17,.6);
  overflow:hidden;
}
.hrq-chat.is-open .hrq-panel{display:flex}

.hrq-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--c-ink); color:var(--c-bone); padding:14px 14px 14px 16px; flex:none;
}
.hrq-head__t{display:flex; flex-direction:column; gap:2px; min-width:0}
.hrq-head__n{
  font-family:var(--c-disp); font-weight:700; text-transform:uppercase;
  font-size:.82rem; letter-spacing:.02em; display:flex; align-items:center; gap:.4em;
}
.hrq-head__n svg{width:.6em;height:.6em;color:var(--c-acid)}
.hrq-head__s{font-size:.7rem; color:rgba(243,240,232,.6); display:flex; align-items:center; gap:.45em}
.hrq-head__s i{width:6px;height:6px;background:var(--c-acid);display:inline-block;flex:none}
.hrq-x{
  width:40px;height:40px;flex:none;display:grid;place-items:center;color:var(--c-bone);
  border:1px solid rgba(243,240,232,.25); background:none; cursor:pointer; transition:.25s;
}
.hrq-x:hover,.hrq-x:focus-visible{background:var(--c-bone);color:var(--c-ink)}
.hrq-x svg{width:14px;height:14px}

/* ---------- Log ---------- */
.hrq-log{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 16px; display:flex; flex-direction:column; gap:14px;
  -webkit-overflow-scrolling:touch;
}
.hrq-m{max-width:88%; font-size:.92rem; line-height:1.5; white-space:pre-wrap; word-wrap:break-word}
.hrq-m--a{align-self:flex-start; color:var(--c-ink)}
.hrq-m--a .hrq-m__b{background:#fff; border:1px solid var(--c-line); padding:.72em .9em}
.hrq-m--u{align-self:flex-end; text-align:left}
.hrq-m--u .hrq-m__b{background:var(--c-ink); color:var(--c-bone); padding:.72em .9em}
.hrq-m__who{
  font-family:var(--c-disp); font-weight:500; font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-grey); margin-bottom:.42em;
}
.hrq-m--u .hrq-m__who{text-align:right}

.hrq-typing{display:flex;gap:4px;align-items:center;padding:.72em .9em;background:#fff;border:1px solid var(--c-line)}
.hrq-typing i{width:5px;height:5px;background:var(--c-grey);animation:hrqb 1.25s infinite ease-in-out}
.hrq-typing i:nth-child(2){animation-delay:.16s} .hrq-typing i:nth-child(3){animation-delay:.32s}
@keyframes hrqb{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.hrq-err{
  border:1.5px solid #C4462F; background:rgba(196,70,47,.08);
  padding:.7em .85em; font-size:.85rem; line-height:1.45; color:#8E2F1E;
}

/* ---------- Composer ---------- */
.hrq-foot{border-top:1px solid var(--c-line); padding:12px; flex:none; background:var(--c-bone)}
.hrq-row{display:flex; gap:8px; align-items:stretch}
/* 16px: anything smaller makes iOS zoom the whole page on focus. */
.hrq-in{
  flex:1; min-width:0; font-family:var(--c-body); font-size:16px; line-height:1.35;
  background:#fff; color:var(--c-ink); border:1.5px solid var(--c-line);
  padding:.7em .8em; border-radius:0; -webkit-appearance:none; appearance:none;
  min-height:48px; resize:none; max-height:120px;
}
.hrq-in:focus{outline:0; border-color:var(--c-ink)}
.hrq-in::placeholder{color:#9A988F}
.hrq-send{
  flex:none; width:48px; min-height:48px; display:grid; place-items:center;
  background:var(--c-ink); color:var(--c-bone); border:1.5px solid var(--c-ink);
  cursor:pointer; transition:.25s;
}
.hrq-send:hover:not(:disabled),.hrq-send:focus-visible{background:var(--c-acid);color:var(--c-ink);border-color:var(--c-acid)}
.hrq-send:disabled{opacity:.4;cursor:not-allowed}
.hrq-send svg{width:16px;height:16px}
.hrq-note{
  margin-top:9px; font-size:.68rem; line-height:1.4; color:var(--c-grey);
}
.hrq-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hrq-skip{
  background:none;border:0;padding:0;margin-top:8px;cursor:pointer;
  font-family:var(--c-disp);font-weight:500;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-grey);text-decoration:underline;text-underline-offset:3px;
}
.hrq-skip:hover{color:var(--c-ink)}

/* ---------- Mobile: a sheet, not a floating card ---------- */
@media (max-width:560px){
  .hrq-chat{right:12px; bottom:12px; left:12px}
  .hrq-launch{width:100%; justify-content:center}
  .hrq-panel{
    position:fixed; inset:0; width:100vw; height:100dvh; border:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .hrq-head{padding-top:calc(14px + env(safe-area-inset-top))}
  .hrq-m{max-width:92%}
}

@media (prefers-reduced-motion:reduce){
  .hrq-typing i{animation:none;opacity:.5}
  .hrq-launch,.hrq-x,.hrq-send{transition:none}
}