/* Solenna answers the waitlist form herself - spoken above her head.
 *
 * From the "design_handoff_waitlist_solenna_reply" bundle, high-fidelity:
 * colours, type, spacing and timings are the handoff's and should stay that
 * way. It lives here rather than in site10/site10.css because that file is
 * re-imported from the Claude Design project and a sync would overwrite it.
 * Loaded after site10.css, so these rules win at equal specificity.
 *
 * The bubble is in normal flow above the mark, never absolutely positioned:
 * .pin is a 100svh sticky pane with overflow:hidden, so a floating bubble
 * either clipped on short viewports or covered the headline. In flow it makes
 * its own room.
 */

.closewrap{display:flex;flex-direction:column;align-items:center;width:100%}

.solsay{display:none;position:relative;z-index:45;width:-moz-max-content;width:max-content;max-width:min(430px,86vw);margin-bottom:15px;opacity:0;transform:translateY(9px) scale(.97);transform-origin:50% 100%;transition:opacity .42s ease,transform .5s cubic-bezier(.2,.9,.2,1)}
.solsay.live{display:block}
.solsay.on{opacity:1;transform:none}

/* The tail: a square rotated 45°, pointing down at her head. */
.solsay::after{content:"";position:absolute;left:50%;bottom:-6px;width:15px;height:15px;background:var(--surface);transform:translateX(-50%) rotate(45deg);border-radius:0 0 4px 0}

.sst{position:relative;z-index:1;min-width:0;overflow-wrap:anywhere;background:var(--surface);color:var(--ink);border-radius:19px;padding:13px 19px;box-shadow:0 16px 38px rgba(6,10,18,.34);font-family:var(--serif);font-size:clamp(15px,1.5vw,19px);line-height:1.42;letter-spacing:-.01em;text-align:center;text-wrap:pretty}
.solsay.err .sst{color:var(--clay-deep)}

/* Thinking dots - shown while she is deciding, which here means "while the
   request is in flight". */
.ssd{display:none;gap:5px;align-items:center;height:1.42em;vertical-align:-.26em}
.solsay.typing .ssd{display:inline-flex}
.ssd i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:ssdot 1.05s ease-in-out infinite}
.ssd i:nth-child(2){animation-delay:.16s}
.ssd i:nth-child(3){animation-delay:.32s}
@keyframes ssdot{0%,100%{opacity:.3;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}

.sscar{display:none;width:2px;height:.95em;background:var(--clay);vertical-align:-.13em;margin-left:3px;animation:sscar .9s steps(1) infinite}
.solsay.writing .sscar{display:inline-block}
@keyframes sscar{0%,49%{opacity:1}50%,100%{opacity:0}}

/* The field itself only reacts when the address is the problem - a failed
   round trip leaves it alone, because the address wasn't wrong. */
.wl.err input{border-color:var(--accent,#F2B48E);animation:wlnudge .42s ease}
@keyframes wlnudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}60%{transform:translateX(3px)}}

.wl.busy input{opacity:.55}
.wl.busy button,.wl button:disabled{opacity:.55;cursor:default;box-shadow:none;transform:none}

/* Once she has confirmed it, her reply takes the place of the field and the button. */
.wl.done{justify-content:center}
.wl.done input,.wl.done button{display:none}

/* Off-screen, out of the tab order, hidden from assistive tech - but still a
   real field a form-filling bot will happily complete. */
.wl .pot{position:absolute;left:-9999px;top:0;width:1px;height:1px;opacity:0;pointer-events:none}

@media(max-width:640px){
  .solsay{max-width:min(340px,88vw);margin-bottom:12px}
  .sst{font-size:15.5px;padding:12px 16px;border-radius:17px}
}
@media(prefers-reduced-motion:reduce){
  .wl.err input,.ssd i,.sscar{animation:none}
}