/* Ask Ray: the question bar under the hero CTAs, and the chalk stick figure that lives on top of it */
.ray{margin:5rem auto 0;max-width:680px;text-align:left}
.ray-stage{position:relative}
.ray-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ray-bar{position:relative;display:flex;align-items:center;height:56px;border-radius:calc(var(--radius) * 99);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 40px -24px rgba(8,20,70,.55);
  transition:border-color .25s,background .25s,box-shadow .25s}
.ray-bar:focus-within{border-color:#fff;background:rgba(255,255,255,.2);box-shadow:0 0 0 3px rgba(255,255,255,.28),0 18px 40px -24px rgba(8,20,70,.55)}
.ray-in{flex:1;min-width:0;height:100%;padding:0 64px 0 58px;border:0;background:transparent;color:#fff;font:inherit;font-size:1.02rem;outline:0;border-radius:calc(var(--radius) * 99);-webkit-appearance:none;appearance:none}
.ray-in::selection{background:rgba(255,255,255,.3)}
/* the rolling placeholder */
.ray-ph{position:absolute;left:58px;right:64px;top:0;bottom:0;display:flex;align-items:center;pointer-events:none;color:rgba(255,255,255,.86);font-size:1.02rem;transition:opacity .2s}
.ray-bar.has-text .ray-ph{opacity:0}
.ray-go{position:absolute;right:8px;top:8px;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#2D68FF;display:grid;place-items:center;cursor:pointer;
  transition:transform .3s var(--ease),opacity .2s}
.ray-go:hover{transform:scale(1.07)}
.ray-go:disabled{opacity:.6;cursor:default;transform:none}
.ray-go:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ray-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* the chat log: your questions on the right in white, Ray's answers on the left */
.ray-ans{display:flex;flex-direction:column;gap:12px;margin-top:12px;color:#fff;font-size:.98rem;line-height:1.55}
.ray-msg{max-width:85%;padding:12px 16px;border-radius:18px;animation:ray-in .45s var(--ease) both}
.ray-msg.you{align-self:flex-end;background:#fff;color:#2D68FF;white-space:pre-wrap;overflow-wrap:anywhere}
.ray-msg.bot{align-self:flex-start;background:rgba(10,20,60,.2);border:1px solid rgba(255,255,255,.24)}
/* a note from the chat itself: the token-limit notice and the summary divider */
.ray-note{align-self:center;max-width:90%;padding:6px 0;border-top:1px dashed rgba(255,255,255,.4);color:rgba(255,255,255,.82);font-size:.82rem;text-align:center;animation:ray-in .45s var(--ease) both}
.ray-ans[hidden]{display:none}
.ray-ans p{margin:0}
.ray-ans p+p{margin-top:.6rem}
.ray-ans .ray-who{display:block;line-height:0;margin-bottom:.4rem}
/* Ray's face: a chalk head, two eyes and a smile; it takes the text colour so it works on the blue hero and in both themes */
.ray-face{display:block;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ray-face .rf-eye{stroke-width:2.6;transform-box:fill-box;transform-origin:center;animation:ray-blink 6.5s infinite}
.ray-face .rf-eye+.rf-eye{animation-delay:0s}
.ray-face-b{width:32px;height:32px}
.ray-face-bar{position:absolute;left:10px;top:50%;width:38px;height:38px;margin-top:-19px;color:#fff;pointer-events:none}
@keyframes ray-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.ray-ans .ray-more{display:inline-block;margin-top:.7rem;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px}
.ray-msg.wait .ray-t::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:ray-dots 1.2s steps(4) infinite}
@keyframes ray-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ray-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
/* the figure: an overlay as wide as the bar, ground line = the bar's top edge */
.ray-fig{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:130px;overflow:visible;pointer-events:none;fill:none;stroke:rgba(255,255,255,.92);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ray-fig *{vector-effect:non-scaling-stroke}
.ray-fig .dot{stroke-width:2.6px}
.ray-fig .dup{stroke:rgba(255,255,255,.55)}
.ray-z{transform-box:fill-box;transform-origin:center;stroke:rgba(255,255,255,.9);stroke-width:1.4;opacity:0;animation:ray-z 2.6s ease-out forwards}
@keyframes ray-z{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(14px,-34px) scale(1.2)}}
@media(max-width:700px){.ray{margin-top:6.9rem}.ray-bar{height:52px}.ray-in,.ray-ph{font-size:.95rem}.ray-in{padding-left:50px}.ray-ph{left:50px}.ray-face-bar{left:8px;width:34px;height:34px;margin-top:-17px}.ray-go{top:6px;width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.ray-msg,.ray-note{animation:none}.ray-z{animation:none;opacity:0}.ray-face .rf-eye{animation:none}}

/* scrolled past the hero, the bar hands off to the launcher in the corner (ask-ray.js docks it) */
.ray-stage.ray-docked{visibility:hidden}
/* every page but the homepage: the chat opens in a blue sheet over the page */
.ray-ov{position:fixed;inset:0;z-index:44;display:flex;flex-direction:column;padding:28px var(--gutter);background:var(--accent);color:#fff}
.ray-ov[hidden]{display:none}
.ray-ov-in{flex:1;min-height:0;width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column}
/* the blue that grows out of the launcher before the chat appears */
.ray-flood{position:fixed;inset:0;z-index:43;background:var(--accent);pointer-events:none}
@media(max-width:980px){.ray-ov{padding-top:14px}}

/* placeholder decrypt */
.ray-ph{white-space:nowrap;overflow:hidden;text-overflow:clip}
.ray-ph .g{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.45)}
.ray-ph .c{animation:ray-glint .5s ease-out}
@keyframes ray-glint{0%{opacity:.4;text-shadow:0 0 8px rgba(255,255,255,.9)}100%{opacity:1;text-shadow:none}}
@media(prefers-reduced-motion:reduce){.ray-ph .c{animation:none}}