/* Vivtaa — the floating "Ask Vivtaa" stack (#vvf): the assistant panel, the
 * share panel and the back-to-top button, used on /careers and /blogs.
 *
 * Ported from the Vivtaa Website export. Two things were left behind on
 * purpose:
 *   - the export's [data-fpanel] rules, which positioned the careers filter
 *     sheets from --vvf-f* custom properties published by a permanent
 *     requestAnimationFrame loop. css/careers.css already positions those
 *     sheets in plain CSS, so both the rules and the loop are gone.
 *   - the export's newsletter dialog (.vvn-*), which this site implements
 *     itself in blogs.html against the real subscriptions endpoint.
 *
 * Everything here is scoped to #vvf / .vvf-*, so it cannot reach the page.
 */

/* same geometry as the home page: a right-hand column of round buttons with
   the open panel sitting to its left, bottom-aligned */
#vvf{position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:90;
 display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end;gap:12px;
 pointer-events:none;font-family:'Satoshi',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif}
#vvf *{box-sizing:border-box}
.vvf-col{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:none}
.vvf-btn{pointer-events:auto;width:52px;height:52px;padding:0;border-radius:999px;
 border:1px solid #e2e2e2;background:#fff;color:#101011;display:grid;place-items:center;cursor:pointer;
 box-shadow:0 12px 28px rgba(16,16,17,.14);
 transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s,background-color .35s,
 opacity .35s,visibility .35s}
.vvf-btn:hover{transform:translateY(-3px);border-color:#101011}
.vvf-btn svg{width:18px;height:18px}
.vvf-ai{width:64px;height:64px;border:1px solid rgba(255,255,255,.65);
 background:radial-gradient(120% 120% at 30% 22%,#ffffff 0%,#f7f8fa 58%,#eceef1 100%);
 box-shadow:0 16px 36px rgba(16,16,17,.18),inset 0 1px 0 rgba(255,255,255,.95),
 inset 0 0 0 1px rgba(255,255,255,.5);
 transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.vvf-ai:hover{transform:translateY(-3px) scale(1.05);border-color:rgba(255,255,255,.65);
 box-shadow:0 22px 46px rgba(16,16,17,.24),inset 0 1px 0 rgba(255,255,255,.95),
 inset 0 0 0 1px rgba(255,255,255,.6)}
.vvf-ai img{display:block;width:46px;height:46px;object-fit:contain}
#vvf[data-top="0"] .vvf-top{opacity:0;visibility:hidden}
.vvf-panel{pointer-events:auto;width:min(78vw,360px);background:#fff;border:1px solid #ececec;
 border-radius:22px;box-shadow:0 30px 70px -24px rgba(16,16,17,.4);display:none;
 flex-direction:column;overflow:hidden}
.vvf-panel[data-open="1"]{display:flex;animation:vvfUp .3s cubic-bezier(.16,1,.3,1)}
@keyframes vvfUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* when opened from a control elsewhere on the page it becomes a popover
   anchored to that control instead of sitting in the stack */
.vvf-panel[data-anchored="1"]{position:fixed;z-index:95}
.vvf-head{display:flex;align-items:center;gap:11px;padding:16px 16px 14px;border-bottom:1px solid #f1f1f0}
.vvf-dot{width:9px;height:9px;border-radius:999px;background:#178640;flex:none}
.vvf-h-t{font-size:15px;font-weight:500;color:#101011}
.vvf-h-s{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.1em;
 text-transform:uppercase;color:#8a8f8e}
.vvf-x{margin-left:auto;width:30px;height:30px;border-radius:999px;border:0;background:#f1f1f0;color:#3e453f;
 display:grid;place-items:center;cursor:pointer;transition:background-color .3s,color .3s}
.vvf-x:hover{background:#101011;color:#fff}
.vvf-log{flex:1;max-height:min(48vh,360px);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.vvf-msg{max-width:86%;font-size:14px;line-height:1.6;padding:11px 14px;border-radius:16px}
.vvf-msg.bot{align-self:flex-start;background:#f7f6f4;color:#3e453f;border-bottom-left-radius:6px}
.vvf-msg.you{align-self:flex-end;background:#101011;color:#fff;border-bottom-right-radius:6px}
.vvf-msg a{color:#f54901;text-decoration:none}
.vvf-msg.bot b{color:#101011;font-weight:500}
.vvf-dots{align-self:flex-start;display:flex;gap:4px;padding:12px 14px}
.vvf-dots i{width:6px;height:6px;border-radius:999px;background:#a3a3a3;display:block;
 animation:vvfBlink 1.1s ease-in-out infinite}
.vvf-dots i:nth-child(2){animation-delay:.18s}.vvf-dots i:nth-child(3){animation-delay:.36s}
@keyframes vvfBlink{0%,100%{opacity:.25}50%{opacity:1}}
.vvf-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px}
.vvf-chip{padding:7px 12px;border:1px solid #e2e2e2;border-radius:999px;background:#fff;color:#3e453f;
 font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .3s,color .3s}
.vvf-chip:hover{border-color:#101011;color:#101011}
.vvf-ask{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid #f1f1f0}
.vvf-in{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:#101011;outline:none}
.vvf-send{flex:none;width:34px;height:34px;border-radius:999px;border:0;background:#101011;color:#fff;
 display:grid;place-items:center;cursor:pointer;transition:background-color .3s}
.vvf-send:hover{background:#f54901}
.vvf-sh-t{padding:16px 16px 4px;font-size:15px;font-weight:500;color:#101011}
.vvf-sh-s{padding:0 16px 12px;font-size:13px;line-height:1.55;color:#6b7170}
.vvf-opts{display:flex;flex-direction:column;padding:4px 8px 12px}
.vvf-opt{display:flex;align-items:center;gap:13px;padding:12px 12px;border:0;border-radius:14px;
 background:none;font:inherit;font-size:14.5px;color:#101011;text-align:left;cursor:pointer;width:100%;
 transition:background-color .25s}
.vvf-opt:hover{background:#f7f6f4}
.vvf-ic{flex:none;width:34px;height:34px;border-radius:999px;background:#f1f1f0;color:#101011;
 display:grid;place-items:center}
.vvf-ic svg{width:17px;height:17px}
.vvf-opt small{margin-left:auto;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.1em;
 text-transform:uppercase;color:#178640;opacity:0;transition:opacity .3s}
.vvf-opt[data-done="1"] small{opacity:1}
#vvf :focus-visible{outline:2px solid #f54901;outline-offset:3px}
/* Phones: the page pins an open filter list to the bottom of the screen because
   the filter rail clips absolute children. Re-anchor it to its own button using
   variables set on <html> — writing to the panel's own style attribute fights
   the page renderer, which owns it. */
@media (max-width:760px){
 
}
@media (max-width:620px){
 #vvf{right:14px;bottom:14px;flex-direction:column;align-items:flex-end}
 .vvf-panel{width:min(92vw,360px)}
 .vvf-col{flex-direction:row;align-items:flex-end}
}
@media (prefers-reduced-motion:reduce){.vvf-panel[data-open="1"]{animation:none}
 .vvf-btn,.vvf-ai,.vvf-opt,.vvf-chip{transition:none}.vvf-dots i{animation:none}}