/* Purple Question: the assistant panel, shared by the home page and the help pages.
   Rules copied from help.css (.hcw*) with their colour tokens scoped to the panel. */
.hcw,.hcw-fab,.pu-hc-fab{--ink:#1a1a1a;--sub:#4a4740;--line:#E8E5DD;--tint:#F1EFE8}
.hcw{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 12px 32px rgba(42,17,87,.12);display:flex;flex-direction:column;font-size:15px}
.hcw-hd{background:var(--ink);padding:14px 16px;display:flex;align-items:center;gap:12px;color:#fff}
.hcw-av{width:34px;height:34px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.hcw-av svg{width:34px;height:34px;display:block;color:var(--ink)}
.hcw-t{font-size:15px;font-weight:700;line-height:1.2}
.hcw-s{font-size:13px;color:rgba(255,255,255,.62);line-height:1.3}
.hcw-x{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center}
.hcw-body{display:flex;flex-direction:column;gap:12px;padding:16px;background:#FBFAF7;max-height:440px;overflow-y:auto;min-height:120px}
.hcw-m{max-width:92%;padding:12px 14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.hcw-m.u{align-self:flex-end;max-width:88%;background:#ECE9E1;border-radius:16px 16px 4px 16px;color:var(--ink)}
.hcw-m.a{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.hcw-m.a .src{font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;text-decoration:none;line-height:1.2}
.hcw-m.a .src:hover{text-decoration:underline}
.hcw-m.a .src svg{width:14px;height:14px;flex:none;display:block;position:relative;top:.5px}
.hcw-m.err{background:var(--tint);border-color:transparent}
.hcw-chips{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start}
.hcw-chip{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--sub);cursor:pointer;font-family:inherit;text-align:left;line-height:1.3}
.hcw-chip:hover{border-color:#CFC7EA;color:var(--ink)}
.hcw-typing{display:inline-flex;gap:4px;padding:.2rem 0}
.hcw-typing span{width:6px;height:6px;border-radius:50%;background:#C9C2E3;animation:hcwtp 1s infinite}
.hcw-typing span:nth-child(2){animation-delay:.15s}
.hcw-typing span:nth-child(3){animation-delay:.3s}
@keyframes hcwtp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.hcw-in{display:flex;align-items:center;gap:.6rem;border-top:1px solid var(--line);padding:.7rem .9rem;background:#fff}
.hcw-in textarea{flex:1;border:0;resize:none;outline:none;background:none;font-family:inherit;font-size:15px;line-height:1.5;color:var(--ink);max-height:140px}
.hcw-in button{flex-shrink:0;width:38px;height:38px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s}
.hcw-in button:disabled{opacity:.35;cursor:default}
.hcw-in button svg{width:16px;height:16px}
/* плаваючий варіант на сторінках довідок — єдина плаваюча річ на сайті */
.hcw-fab{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;border:0;background:var(--ink);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(42,17,87,.28)}
.hcw-fab svg{width:32px;height:32px;display:block}
.hcw-fab.is-hidden{display:none}
.hcw.is-float{position:fixed;right:18px;bottom:18px;z-index:61;width:400px;max-width:calc(100vw - 36px);max-height:calc(100vh - 36px)}
.hcw.is-float .hcw-x{display:inline-flex}
.hcw.is-float[hidden]{display:none}
@media(max-width:560px){.hcw.is-float{right:0;bottom:0;width:100%;max-width:100%;max-height:100vh;border-radius:24px 24px 0 0}.hcw.is-float .hcw-body{max-height:calc(100vh - 150px)}}
.hcw-note{margin:0;padding:.35rem .9rem .7rem;background:#fff;font-size:11.5px;line-height:1.4;color:rgba(0,0,0,.45);text-align:center}
.hcw-note a{color:inherit;text-decoration:underline}
.asyst .hcw{border-radius:28px}
.asyst .hcw-hd{padding:18px 22px;gap:14px}
.asyst .hcw-av,.asyst .hcw-av svg{width:40px;height:40px}
.asyst .hcw-t{font-size:17px}
.asyst .hcw-s{font-size:14px}
.asyst .hcw-body{min-height:340px;max-height:min(62vh,640px);padding:22px;gap:14px}
.asyst .hcw-body>:first-child{margin-top:auto}
.asyst .hcw-m{max-width:min(88%,720px);font-size:16px}
.asyst .hcw-chips{gap:8px}
.asyst .hcw-chip{font-size:15px;padding:11px 16px;color:var(--ink)}
.asyst .hcw-in{padding:14px 16px 14px 22px;gap:12px}
.asyst .hcw-in textarea{font-size:16px;padding:10px 0}
.asyst .hcw-in button{width:46px;height:46px}
.asyst .hcw-in button svg{width:18px;height:18px}
.asyst .hcw-note{padding:0 1rem 1rem;font-size:12.5px}
@media(max-width:560px){.asyst .hcw{border-radius:24px}.asyst .hcw-hd{padding:14px 16px}.asyst .hcw-body{min-height:300px;max-height:66vh;padding:16px}.asyst .hcw-m{max-width:92%;font-size:15px}.asyst .hcw-chip{font-size:14px;padding:10px 14px}.asyst .hcw-in{padding:12px 12px 12px 16px}}
/* 24.09.2026 (2): помічник на /help трохи менший (власник) */
.asyst .hcw{border-radius:24px}
.asyst .hcw-hd{padding:13px 18px;gap:12px}
.asyst .hcw-av,.asyst .hcw-av svg{width:34px;height:34px}
.asyst .hcw-t{font-size:15px}
.asyst .hcw-s{font-size:12.5px}
.asyst .hcw-body{min-height:260px;max-height:min(50vh,520px);padding:18px;gap:12px}
.asyst .hcw-m{font-size:15px}
.asyst .hcw-chip{font-size:14px;padding:9px 14px}
.asyst .hcw-in{padding:11px 14px 11px 18px;gap:10px}
.asyst .hcw-in textarea{font-size:15px;padding:8px 0}
.asyst .hcw-in button{width:40px;height:40px}
.asyst .hcw-note{padding:0 1rem .85rem;font-size:12px}
@media(max-width:560px){.asyst .hcw-hd{padding:12px 14px}.asyst .hcw-body{min-height:240px;max-height:56vh;padding:14px}.asyst .hcw-m{font-size:14.5px}.asyst .hcw-chip{font-size:13.5px;padding:9px 12px}}
.hcw.is-float{z-index:9995;font-family:"BDO Grotesk",system-ui,-apple-system,sans-serif}
.hcw-av img{display:block;width:62%;height:auto}
.pu-hc-fab{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9990;display:inline-flex;align-items:center;gap:.45rem;border:0;cursor:pointer;background:#15130f;color:#fff;font-family:system-ui,-apple-system,sans-serif;font-size:.85rem;font-weight:600;padding:.65rem 1.1rem;border-radius:100px;text-decoration:none;box-shadow:0 4px 18px rgba(0,0,0,.22);transition:transform .2s,opacity .2s}
.pu-hc-fab:hover{transform:translateY(-2px);opacity:.9}
.pu-hc-fab.is-hidden{opacity:0;pointer-events:none;transform:translateY(8px)}
@media(max-width:560px){.pu-hc-fab{font-size:.8rem;padding:.6rem .95rem}}
/* phones (owner, 2026-10-10): the panel is a full chat screen sized to what is visible above the keyboard (help-chat.js sets top/height from visualViewport); the page behind does not move */
@media(max-width:560px){.hcw.is-float{left:0;right:0;bottom:auto;top:0;width:100%;max-width:100%;min-height:0;max-height:none;border-radius:0;box-shadow:none}.hcw.is-float .hcw-hd{padding-top:calc(14px + env(safe-area-inset-top,0px))}.hcw.is-float .hcw-body{flex:1;min-height:0;max-height:none}.hcw.is-float .hcw-note{padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px))}}
/* the text field may shrink, so the send button always stays on screen; 16px so iPhone never zooms the page */
.hcw-in textarea{min-width:0;width:100%;font-size:16px}
/* the "?" sits optically centred in the round phone button */
.pu-hc-fab svg{display:block}
/* the close button stays a true circle whatever the page's own button styles say */
.hcw-x{flex:none;padding:0;min-width:0;min-height:0;width:32px;height:32px;aspect-ratio:1;box-sizing:border-box}
.hcw-av{flex:none;aspect-ratio:1}
/* the send button stays a true circle (a site-wide rule gave phone buttons a 44px min-height and stretched it) */
.hcw-in button{flex:none;padding:0;min-width:0;min-height:0;width:38px;height:38px;aspect-ratio:1;box-sizing:border-box}
.asyst .hcw-in button{width:40px;height:40px}
/* what the assistant is doing while it answers */
.hcw-step{font-size:12.5px;line-height:1.3;color:rgba(0,0,0,.45);margin-top:2px}
.hcw-av img[src*="question"]{width:70%;transform:translateY(1px)}
/* dots and the status line sit in one row */
#hcwTp{flex-direction:row;align-items:center;gap:10px}
#hcwTp .hcw-step{margin:0}
.hcw-av svg.hcw-cloud{width:20px;height:20px;color:var(--ink)}
.asyst .hcw-av svg.hcw-cloud{width:20px;height:20px}
.hcw-x svg{display:block;width:14px;height:14px}