/* ========================================================================= ZULK — website assistant widget. Loaded only when the assistant is switched on. Everything is prefixed `zt-as` and fixed-position, so it cannot disturb the page it sits over. ========================================================================= */ .zt-as{--as-ease:cubic-bezier(.2,.7,.2,1)} /* ── launcher ──────────────────────────────── */ .zt-as__launch{ position:fixed;right:22px;bottom:22px;z-index:92;display:flex;align-items:center;gap:10px; padding:13px 20px 13px 16px;border:0;border-radius:99px;cursor:pointer; background:var(--zt-gold);color:#141007;font-family:inherit;font-weight:500;font-size:.82rem; box-shadow:0 16px 38px -14px rgba(211,169,79,.6); transition:transform .35s var(--as-ease),box-shadow .35s,visibility .35s; } .zt-as__launch:hover{transform:translateY(-3px);box-shadow:0 22px 46px -14px rgba(211,169,79,.75)} .zt-as__launch svg{width:19px;height:19px;flex:none} /* visibility, not opacity alone: an element faded to nothing is still in the tab order, so a keyboard user would tab onto a launcher that is not there. */ .zt-as__launch.is-hidden{transform:scale(.6);opacity:0;pointer-events:none;visibility:hidden} /* The floating call/WhatsApp buttons live in the same corner, so they step aside while the panel is open. Driven by a class on rather than a sibling selector. Each layout includes the two partials in whatever order suits it, and `~` only ever matches forward — so a rule keyed on sibling order silently does nothing on every layout that happens to put the buttons first. */ .zt-fabs{transition:opacity .3s} body.zt-as-open .zt-fabs{opacity:0;pointer-events:none} @media(min-width:521px){.zt-fabs{bottom:96px}} /* ── panel ─────────────────────────────────── */ .zt-as__panel{ /* Above the floating action buttons, which sit at 90 in the same corner. */ position:fixed;right:22px;bottom:22px;z-index:95;width:min(400px,calc(100vw - 32px)); height:min(620px,calc(100vh - 44px));display:flex;flex-direction:column;overflow:hidden; background:var(--zt-panel);border:1px solid var(--zt-line);border-radius:12px; box-shadow:0 40px 90px -30px rgba(0,0,0,.92); transform:translateY(16px) scale(.97);opacity:0;pointer-events:none;visibility:hidden; /* visibility is transitioned rather than set outright so it flips at the end of the fade on the way out and at the start on the way in. Without it the whole composer stays tabbable behind an invisible panel. */ transition:transform .38s var(--as-ease),opacity .3s var(--as-ease),visibility .3s; } .zt-as__panel.is-open{transform:none;opacity:1;pointer-events:auto;visibility:visible} .zt-as__panel:focus{outline:none} @media(max-width:520px){ .zt-as__panel{right:0;bottom:0;width:100vw;height:100dvh;border:0;border-radius:0} } .zt-as__head{display:flex;align-items:center;gap:12px;padding:15px 18px; border-bottom:1px solid var(--zt-line);background:var(--zt-ink2)} .zt-as__head .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--zt-gold),#8a6a2c);color:#141007;font-weight:600;font-size:.78rem} .zt-as__head h4{margin:0;font-family:'Marcellus',serif;font-weight:400;font-size:.98rem;color:var(--zt-ivory)} .zt-as__head p{margin:0;font-size:.7rem;color:var(--zt-mut);display:flex;align-items:center;gap:6px} .zt-as__head .dot{width:7px;height:7px;border-radius:50%;background:#22c55e} .zt-as__head button{margin-left:auto;background:none;border:0;color:var(--zt-mut);font-size:1.5rem; line-height:1;cursor:pointer;padding:2px 6px;border-radius:5px;transition:.25s} .zt-as__head button:hover{color:var(--zt-ivory);background:rgba(255,255,255,.06)} /* ── log ───────────────────────────────────── */ .zt-as__log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px} .zt-as__log::-webkit-scrollbar{width:6px} .zt-as__log::-webkit-scrollbar-thumb{background:rgba(211,169,79,.3);border-radius:99px} .zt-as__msg{max-width:88%;padding:11px 14px;border-radius:13px;font-size:.9rem;line-height:1.6; animation:ztAsIn .35s var(--as-ease) both;word-wrap:break-word} @keyframes ztAsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .zt-as__msg--bot{background:var(--zt-panel2, #151827);border:1px solid var(--zt-line2, rgba(255,255,255,.07)); color:#d7dbe4;align-self:flex-start;border-bottom-left-radius:3px} .zt-as__msg--me{background:var(--zt-gold);color:#141007;align-self:flex-end;border-bottom-right-radius:3px} .zt-as__msg p{margin:0 0 7px}.zt-as__msg p:last-child{margin:0} .zt-as__msg ul{margin:6px 0 0;padding-left:18px} .zt-as__msg strong{color:var(--zt-gold-soft);font-weight:500} .zt-as__msg--me strong{color:#141007} .zt-as__msg.is-streaming::after{content:"▍";color:var(--zt-gold);animation:ztAsBlink 1s steps(2) infinite} @keyframes ztAsBlink{50%{opacity:0}} .zt-as__typing{display:flex;gap:5px;align-self:flex-start;padding:13px 15px; background:var(--zt-panel2,#151827);border:1px solid var(--zt-line2,rgba(255,255,255,.07)); border-radius:13px;border-bottom-left-radius:3px} .zt-as__typing i{width:6px;height:6px;border-radius:50%;background:var(--zt-gold);opacity:.4; animation:ztAsBob 1.3s infinite} .zt-as__typing i:nth-child(2){animation-delay:.16s} .zt-as__typing i:nth-child(3){animation-delay:.32s} @keyframes ztAsBob{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}} /* A tool round trip is the slowest thing here; silence would read as a hang. */ .zt-as__tool{align-self:flex-start;font-size:.74rem;color:var(--zt-gold-soft); background:rgba(211,169,79,.09);border:1px solid var(--zt-line); padding:7px 13px;border-radius:99px;animation:ztAsIn .3s var(--as-ease) both} /* ── starters ──────────────────────────────── */ .zt-as__chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 10px} /* Cleared once the conversation starts. Without this its padding leaves a stray gap above the composer for the rest of the session. */ .zt-as__chips:empty{display:none} .zt-as__chips button{background:none;border:1px solid var(--zt-line);color:var(--zt-gold-soft); font-family:inherit;font-size:.76rem;padding:7px 13px;border-radius:99px;cursor:pointer;transition:.25s var(--as-ease)} .zt-as__chips button:hover{background:var(--zt-gold);border-color:var(--zt-gold);color:#141007} /* ── composer ──────────────────────────────── */ .zt-as__form{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--zt-line);background:var(--zt-ink2)} .zt-as__form input{flex:1;background:var(--zt-ink);border:1px solid var(--zt-line2,rgba(255,255,255,.07)); border-radius:99px;padding:12px 17px;color:var(--zt-ivory);font-family:inherit;font-size:.9rem; font-weight:300;transition:border-color .3s} .zt-as__form input:focus{outline:none;border-color:var(--zt-gold)} .zt-as__form button{width:43px;height:43px;flex:none;border:0;border-radius:50%;background:var(--zt-gold); color:#141007;cursor:pointer;display:grid;place-items:center;transition:.28s var(--as-ease)} .zt-as__form button:hover:not(:disabled){transform:scale(1.08)} .zt-as__form button:disabled{opacity:.4;cursor:default;transform:none} .zt-as__form svg{width:16px;height:16px} .zt-as__foot{padding:0 16px 11px;font-size:.65rem;color:var(--zt-mut);text-align:center; background:var(--zt-ink2);opacity:.75} /* Announcements for screen readers, off-screen but not hidden from them. */ .zt-as__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} @media(prefers-reduced-motion:reduce){ .zt-as *,.zt-as__launch,.zt-as__panel{animation:none!important;transition:none!important} }