/* Octa's chat on sitebyeight.com: Octa himself (octa.mjs, the page's own character) stands in the bottom corner and opens
   in place into a chat panel. Every class starts with sbo- so nothing collides with site.css. It uses the page's own
   tokens (--page, --win, --bar, --edge, --hair, --ink, --soft, --dim, --warm, --mono, --sans) and nothing else from it,
   so it falls back to the same colours if a token is missing. No inline style is written by markup: only the CSSOM. */

.sbo{--sbo-w:392px;--sbo-gap:20px;position:fixed;right:var(--sbo-gap);bottom:calc(var(--sbo-lift,0px) + var(--sbo-gap));z-index:60;font:400 15px/1.5 var(--sans,Inter,system-ui,sans-serif);color:var(--ink,#ececec)}
@supports (padding:max(0px)){.sbo{right:max(var(--sbo-gap),env(safe-area-inset-right));bottom:calc(var(--sbo-lift,0px) + max(14px,env(safe-area-inset-bottom)))}}
.sbo *{box-sizing:border-box}
.sbo[hidden]{display:none}
.sbo[data-wait="true"][data-open="false"]{visibility:hidden;pointer-events:none}

/* ---- the button: Octa himself, breathing, a little smaller than the one in the headline ---- */
.sbo-fab{position:relative;display:block;width:68px;height:80px;padding:0;margin:0;border:0;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:18px;transition:transform .25s var(--ease,cubic-bezier(.2,.8,.2,1)),opacity .2s,visibility .2s}
.sbo-fab .octa{left:0;top:0;position:absolute;pointer-events:none}
.sbo-fab:hover{transform:translateY(-3px)}
.sbo-fab.sbo-shy{opacity:0;pointer-events:none}
.sbo-fab.sbo-shy~.sbo-tip{opacity:0;visibility:hidden}
.sbo-fab:focus-visible{outline:2px solid var(--warm,#ffd9b0);outline-offset:4px}
.sbo[data-open="true"] .sbo-fab{opacity:0;visibility:hidden;pointer-events:none}
.sbo-fab .sbo-dot{position:absolute;right:2px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--warm,#ffd9b0);box-shadow:0 0 0 3px rgb(20 20 19 / .9),0 0 14px 3px rgb(255 180 100 / .6);opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.sbo[data-news="true"] .sbo-dot{opacity:1;transform:scale(1)}

/* ---- the one small line he says ---- */
.sbo-tip{position:absolute;right:62px;bottom:30px;margin:0;padding:9px 14px;border:1px solid var(--edge,#3a3a3a);border-radius:14px 14px 4px 14px;background:var(--win,#171717);color:var(--ink,#ececec);font:500 14px/1.3 var(--sans,Inter,system-ui,sans-serif);white-space:nowrap;box-shadow:0 14px 40px -14px rgb(0 0 0 / .8);cursor:pointer;opacity:0;transform:translateY(6px) scale(.96);transform-origin:100% 100%;visibility:hidden;transition:opacity .3s,transform .3s var(--ease,cubic-bezier(.2,.8,.2,1)),visibility .3s}
.sbo-tip[data-show="true"]{opacity:1;transform:none;visibility:visible}
.sbo[data-open="true"] .sbo-tip{display:none}

/* ---- the panel ---- */
.sbo-panel{position:absolute;right:0;bottom:0;width:var(--sbo-w);height:min(600px,calc(100vh - 56px - var(--sbo-lift,0px)));height:min(600px,calc(100dvh - 56px - var(--sbo-lift,0px)));display:flex;flex-direction:column;border:1px solid var(--edge,#3a3a3a);border-radius:14px;background:var(--win,#171717);box-shadow:0 30px 80px -24px rgb(0 0 0 / .85),0 0 0 1px rgb(255 190 120 / .06);overflow:hidden;transform-origin:100% 100%;opacity:0;transform:translateY(10px) scale(.94);visibility:hidden;transition:opacity .22s,transform .26s var(--ease,cubic-bezier(.2,.8,.2,1)),visibility .26s}
.sbo[data-open="true"] .sbo-panel{opacity:1;transform:none;visibility:visible}
.sbo-bar{flex:none;display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 10px 8px 14px;background:var(--bar,#232322);border-bottom:1px solid var(--hair,rgb(255 255 255 / .1))}
.sbo-who{position:relative;flex:none;width:34px;height:40px}
.sbo-who .octa{position:absolute;left:0;top:0}
.sbo-title{flex:1;min-width:0;margin:0}
.sbo-title b{display:block;font:600 15px/1.2 var(--sans,Inter,system-ui,sans-serif);letter-spacing:-.01em}
.sbo-title span{display:block;margin-top:2px;font:400 11px/1.2 var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.04em;color:var(--dim,#929290)}
.sbo-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--soft,#b4b4b4);cursor:pointer;transition:background .16s,color .16s}
.sbo-close:hover{background:rgb(255 255 255 / .08);color:#fff}
.sbo-close:focus-visible,.sbo-send:focus-visible,.sbo-chip:focus-visible,.sbo-btn:focus-visible,.sbo-in:focus-visible,.sbo-log:focus-visible,.sbo-field input:focus-visible,.sbo-title:focus-visible{outline:2px solid var(--warm,#ffd9b0);outline-offset:2px}
.sbo-close svg{width:18px;height:18px;display:block}

.sbo-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 6px;display:flex;flex-direction:column;gap:10px;scroll-behavior:auto}
.sbo-m{max-width:86%;margin:0;padding:10px 13px;border-radius:14px;font-size:15px;line-height:1.5;overflow-wrap:break-word;white-space:pre-wrap;animation:sbo-in .28s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
.sbo-m.sbo-you{align-self:flex-end;background:#2a2a28;border:1px solid var(--edge,#3a3a3a);border-radius:14px 14px 4px 14px;color:var(--cream,#fff3e2)}
.sbo-m.sbo-bot{align-self:flex-start;background:transparent;border:1px solid var(--hair,rgb(255 255 255 / .1));border-radius:14px 14px 14px 4px}
.sbo-m a{color:var(--warm,#ffd9b0);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.sbo-m a:hover{color:#fff}
.sbo-tag{display:inline-block;margin:0 0 5px;padding:1px 7px;border:1px solid var(--edge,#3a3a3a);border-radius:999px;font:400 10.5px/1.5 var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.05em;color:var(--dim,#929290);white-space:normal}
.sbo-m.sbo-bot .sbo-tag{display:block;width:max-content}
.sbo-m.sbo-err{border-color:rgb(255 170 120 / .45)}

.sbo-think{align-self:flex-start;display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--hair,rgb(255 255 255 / .1));border-radius:14px 14px 14px 4px;color:var(--dim,#929290);font:400 12px/1 var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.03em;animation:sbo-in .28s both}
.sbo-dots{display:inline-flex;gap:4px}
.sbo-dots i{width:5px;height:5px;border-radius:50%;background:var(--warm,#ffd9b0);opacity:.35;animation:sbo-dot 1.1s infinite both}
.sbo-dots i:nth-child(2){animation-delay:.16s}.sbo-dots i:nth-child(3){animation-delay:.32s}

/* the thinking pose: he tilts his head back and his eyes go up and to the side (the rig has no thinking pose of its own,
   and its eyes are moved with transform by the page's script, so these use the individual rotate and translate properties) */
.sbo-thinking .sbo-who .octa-rig,.sbo-thinking .sbo-fab .octa-rig{rotate:-5deg;transition:rotate .3s}
.sbo-thinking .octa-eye{translate:-9px -12px;transition:translate .3s}
.sbo .octa-rig{transition:rotate .3s}
.sbo .octa-eye{transition:translate .3s}

.sbo-chips{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:6px 14px 12px}
.sbo-chips[hidden]{display:none}
.sbo-chip{max-width:100%;padding:8px 13px;border:1px solid var(--edge,#3a3a3a);border-radius:999px;background:transparent;color:var(--ink,#ececec);font:500 13.5px/1.25 var(--sans,Inter,system-ui,sans-serif);text-align:left;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}
.sbo-chip:hover{background:rgb(255 255 255 / .07);border-color:rgb(255 214 170 / .55)}
.sbo-chip:active{transform:scale(.98)}

.sbo-form{flex:none;display:flex;gap:8px;padding:10px 12px 6px;border-top:1px solid var(--hair,rgb(255 255 255 / .1))}
.sbo-in{flex:1;min-width:0;height:44px;padding:0 14px;border:1px solid var(--edge,#3a3a3a);border-radius:999px;background:var(--deep,#0f0f0e);color:var(--ink,#ececec);font:400 16px/1 var(--sans,Inter,system-ui,sans-serif)}
.sbo-in::placeholder{color:var(--dim,#929290)}
.sbo-send{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--ink,#ececec);color:#0d0d0d;cursor:pointer;transition:background .16s,transform .16s,opacity .16s}
.sbo-send:hover{background:#fff;transform:translateY(-1px)}
.sbo-send[disabled]{opacity:.45;cursor:default;transform:none}
.sbo-send svg{width:18px;height:18px;display:block}
.sbo-fine{flex:none;margin:0;padding:2px 14px 12px;font:400 11px/1.4 var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.02em;color:var(--dim,#929290)}
.sbo-fine button{padding:0;border:0;background:none;color:var(--soft,#b4b4b4);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.sbo-fine button:hover{color:#fff}

/* the offer and the form for details, inside the conversation */
.sbo-card{align-self:stretch;margin:0;padding:13px 14px;border:1px solid rgb(255 214 170 / .35);border-radius:12px;background:rgb(255 190 120 / .05);animation:sbo-in .28s var(--ease,cubic-bezier(.2,.8,.2,1)) both}
.sbo-card p{margin:0 0 10px;font-size:14.5px;line-height:1.5}
.sbo-card .sbo-consent{margin:2px 0 12px;font:400 12.5px/1.45 var(--mono,ui-monospace,Menlo,monospace);color:var(--soft,#b4b4b4)}
.sbo-row{display:flex;flex-wrap:wrap;gap:8px}
.sbo-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border:1px solid transparent;border-radius:999px;background:var(--ink,#ececec);color:#0d0d0d;font:500 14px/1 var(--sans,Inter,system-ui,sans-serif);cursor:pointer;transition:background .16s,transform .16s}
.sbo-btn:hover{background:#fff;transform:translateY(-1px)}
.sbo-btn.ghost{background:transparent;color:var(--ink,#ececec);border-color:var(--edge,#3a3a3a)}
.sbo-btn.ghost:hover{background:rgb(255 255 255 / .07)}
.sbo-btn[disabled]{opacity:.5;cursor:default;transform:none}
.sbo-field{display:block;margin:0 0 9px}
.sbo-field span{display:block;margin:0 0 4px;font:400 11.5px/1.3 var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.04em;color:var(--dim,#929290)}
.sbo-field input{width:100%;height:42px;padding:0 12px;border:1px solid var(--edge,#3a3a3a);border-radius:10px;background:var(--deep,#0f0f0e);color:var(--ink,#ececec);font:400 16px/1 var(--sans,Inter,system-ui,sans-serif)}
.sbo-field input[aria-invalid="true"]{border-color:rgb(255 150 110 / .8)}
.sbo-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.sbo-note{margin:6px 0 0;font:400 12.5px/1.4 var(--sans,Inter,system-ui,sans-serif);color:#ffb99a}
.sbo-ts{flex:none;padding:10px 12px 4px;border-top:1px solid var(--hair,rgb(255 255 255 / .1))}
.sbo-ts[hidden]{display:block;height:0;padding:0;border:0;overflow:hidden}
.sbo-ts-say{margin:0 0 8px;font:400 13px/1.4 var(--sans,Inter,system-ui,sans-serif);color:var(--soft,#b4b4b4)}
.sbo-ts-box{min-height:0}

@keyframes sbo-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sbo-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}

/* ---- when Octa stands in the corner, the page's own line at the foot of the hero steps aside ---- */
.sbo-on .scene-note{right:calc(var(--pad,56px) + 96px)}

/* ---- a phone: the lower two thirds of the screen, a clear close button, never in the way when closed ---- */
@media (max-width:640px){
  .sbo{--sbo-gap:12px}
  .sbo-fab{width:58px;height:68px}
  .sbo-tip{right:52px;bottom:24px;font-size:13.5px}
  .sbo-panel{position:fixed;left:0;right:0;bottom:var(--sbo-kb,0px);width:auto;height:min(66vh,calc(100vh - 64px - var(--sbo-kb,0px)));height:min(66dvh,calc(100dvh - 64px - var(--sbo-kb,0px)));border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;transform-origin:50% 100%;transform:translateY(24px)}
  @supports (padding:max(0px)){.sbo-panel{padding-bottom:env(safe-area-inset-bottom)}}
  .sbo-bar{min-height:62px}
  .sbo-close{width:48px;height:48px;background:rgb(255 255 255 / .07)}
  .sbo-m{max-width:92%}
  .sbo-on .scene-note{right:auto}
}
@media (prefers-reduced-motion:reduce){
  .sbo-fab,.sbo-tip,.sbo-panel,.sbo-m,.sbo-card,.sbo-think,.sbo-chip,.sbo-btn,.sbo-send{transition:none;animation:none}
  .sbo-dots i{animation:none;opacity:.7}
}
.sbo-retry{display:inline-block;margin:8px 0 0;padding:6px 12px;border:1px solid var(--hair,rgb(255 255 255 / .18));border-radius:8px;background:transparent;color:inherit;font:500 12px/1 var(--mono,ui-monospace,Menlo,monospace);cursor:pointer}
.sbo-retry:hover,.sbo-retry:focus-visible{border-color:var(--warm,#ffd9b0);outline:none}