/* support — ported verbatim from the client-approved static build (support.html).
   Loaded only on this template. Do not restyle without checking the approved demo. */


.pagewrap{max-width:1180px;margin:0 auto;padding:0 clamp(14px,2.4vw,26px) 70px}
.head{padding:22px 0 16px}
.head h1{margin:0 0 6px;font-size:clamp(23px,3.2vw,32px);font-weight:750;letter-spacing:-.026em}
.head p{margin:0;color:var(--hft-ink-3);max-width:76ch}
.layout{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:1fr}}

.chat{background:var(--hft-surface);border:1px solid var(--hft-line);border-radius:.5rem;
  display:flex;flex-direction:column;overflow:hidden;min-height:540px}
.chat-head{background:var(--hft-navy);color:#fff;padding:14px 18px;display:flex;
  align-items:center;gap:12px}
.bot-av{width:38px;height:38px;border-radius:50%;background:var(--hft-red);display:grid;
  place-items:center;font-weight:800;font-size:.8rem;flex-shrink:0}
.chat-head .t{font-weight:700}
.chat-head .s{font-size:.76rem;color:#9fadbd;display:flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;background:#4fbe8b;display:inline-block}
.log{flex:1;padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:460px}
.msg{display:flex;gap:11px;max-width:88%}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg .av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:.68rem;font-weight:800}
.msg.bot .av{background:var(--hft-red);color:#fff}
.msg.me .av{background:var(--hft-surface-2);color:var(--hft-ink-2)}
.bub{padding:11px 15px;border-radius:.6rem;font-size:.92rem;line-height:1.58}
.msg.bot .bub{background:var(--hft-surface-2);color:var(--hft-ink);border-top-left-radius:.15rem}
.msg.me .bub{background:var(--hft-red);color:#fff;border-top-right-radius:.15rem}
.bub .src{margin-top:9px;padding-top:9px;border-top:1px solid var(--hft-line);
  font-size:.76rem;color:var(--hft-ink-3)}
.bub .src a{color:var(--hft-red-hi);text-decoration:none}
.bub .src a:hover{text-decoration:underline}
.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--hft-ink-3);
  margin-right:3px;animation:bl 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}
.composer{border-top:1px solid var(--hft-line);padding:14px 18px;display:flex;gap:10px}
.composer input{flex:1;padding:11px 14px;border:1px solid var(--hft-line);border-radius:.35rem;
  background:var(--hft-surface);color:var(--hft-ink);font-size:.94rem}
.composer button{padding:11px 20px;border:0;border-radius:.35rem;background:var(--hft-red);
  color:#fff;font-weight:680;cursor:pointer}
.composer button:disabled{opacity:.5;cursor:not-allowed}
.suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 14px}
.suggest button{font-size:.8rem;padding:6px 12px;border-radius:.25rem;border:1px solid var(--hft-line);
  background:var(--hft-surface);color:var(--hft-ink-2);cursor:pointer}
.suggest button:hover{border-color:var(--hft-red);color:var(--hft-red-hi)}
.esc{background:var(--hft-warn-bg);border-left:3px solid var(--hft-warn);padding:12px 16px;
  border-radius:0 .35rem .35rem 0;font-size:.85rem;color:var(--hft-warn);margin:0 18px 14px}
.side .hft-card{margin-bottom:14px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--hft-line-soft);font-size:.86rem}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--hft-ink-3)}