/* /ask: Bolty on the void. Mercury fills the screen behind the nav; what Bolty says is set as a column on the left while
   it answers, and the bottom belongs to the visitor: two suggestions, the box, and one line on what happens to a
   question. Source of these rules: experiments/vgpu/src/bolty/bolty.css (the lab), on the site's tokens. Desktop first:
   the phone layout waits until the desktop one is approved. */
.page-ask{--ease:cubic-bezier(.2,.7,.2,1);--m:clamp(20px,4vw,56px);background:var(--void);overflow:hidden;height:100vh;height:100dvh}
.page-ask .bt{position:fixed;inset:0}
.page-ask #stage{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}
.page-ask .nav{z-index:5}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bt-note{margin:0;font-size:12px;line-height:1.5;color:var(--t4);text-align:center}
.bt-note a{color:var(--t3);text-decoration:underline;text-decoration-color:var(--edge-2);text-underline-offset:3px}
.bt-note a:hover{color:var(--ink)}

/* what Bolty says: a column on the left, the form stands to its right while it answers */
.bt-say{position:fixed;left:clamp(32px,7vw,120px);top:31%;width:min(35vw,540px);z-index:2;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease)}
.bt-say.on{opacity:1}
.bt-q{font-size:15px;line-height:1.4;color:var(--t3);margin-bottom:18px;min-height:1.4em}
.bt-a{font-size:clamp(28px,2.5vw,38px);font-weight:500;line-height:1.16;letter-spacing:-.022em;color:var(--ink);text-wrap:pretty}
.bt-a .w{display:inline-block;opacity:0;filter:blur(7px);transform:translateY(.22em);
  transition:opacity .42s var(--ease),filter .5s var(--ease),transform .5s var(--ease)}
.bt-a .w.on{opacity:1;filter:none;transform:none}
.bt-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;pointer-events:auto}
.bt-links a{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 15px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--edge-2);opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .5s var(--ease),background .2s}
.bt-links a::after{content:'→';color:var(--t3);transition:transform .2s var(--ease)}
.bt-links a[data-ext]::after{content:'↗'}
.bt-links a:hover{background:rgba(255,255,255,.06)}
.bt-links a:hover::after{transform:translateX(2px)}
.bt-links a[data-ext]:hover::after{transform:translate(2px,-2px)}
.bt-links.on a{opacity:1;transform:none}
.bt-ghost{position:fixed;z-index:4;font-size:16px;line-height:1.4;color:var(--ink);white-space:nowrap;pointer-events:none}

/* the visitor's part: suggestions while nothing is happening, and the box */
.bt-bar{position:fixed;left:50%;bottom:calc(var(--m) + var(--kb, 0px));transform:translateX(-50%);width:min(680px,calc(100vw - 2*var(--m)));display:grid;gap:12px;z-index:3}
.bt-sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.bt-sugg.off{opacity:0;transform:translateY(6px);pointer-events:none}
.bt-sugg button{height:34px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--t2);box-shadow:inset 0 0 0 1px var(--edge);transition:color .2s,box-shadow .2s}
.bt-sugg button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge-2)}
.bt-ask input{width:100%;height:54px;padding:0 20px;border-radius:14px;border:0;outline:0;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(16,16,20,.72);box-shadow:inset 0 0 0 1px var(--edge-2),0 20px 40px -24px rgba(0,0,0,.9);backdrop-filter:blur(12px);transition:box-shadow .3s}
.bt-ask input::placeholder{color:var(--t4)}
.bt-ask input:focus{box-shadow:inset 0 0 0 1px rgba(69,224,232,.45),0 20px 40px -24px rgba(0,0,0,.9)}
@media (prefers-reduced-motion:reduce){.bt-a .w{filter:none;transform:none}.bt-links a{transform:none}}

/* without WebGPU: a still of Mercury that steps aside for the words, and the work in a plain frame where the screen
   would be (main.ts htmlStage) */
.bt-still{position:fixed;left:50%;top:45%;width:min(34vh,420px);transform:translate(-50%,-50%);pointer-events:none;z-index:1;mix-blend-mode:lighten;
  transition:left .9s var(--ease),opacity .5s var(--ease),transform .9s var(--ease)}
body.bt-flat[data-state="answering"] .bt-still{left:69%;transform:translate(-50%,-50%) scale(.86)}
body.bt-flat[data-state="presenting"] .bt-still{left:69%;opacity:0}
.bt-frame{position:fixed;left:69%;top:45%;width:min(40vw,640px);max-height:44vh;margin:0;transform:translate(-50%,-50%) scale(.96);border-radius:12px;overflow:hidden;
  background:#0a0a0d;box-shadow:inset 0 0 0 1px var(--edge-2),0 30px 60px -30px rgba(0,0,0,.9);opacity:0;pointer-events:none;z-index:1;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.bt-frame--tall{width:auto;height:min(44vh,560px);border-radius:28px}
.bt-frame video,.bt-frame img{display:block;width:100%;height:100%;object-fit:cover}
body.bt-flat[data-state="presenting"] .bt-frame{opacity:1;transform:translate(-50%,-50%)}
@media (prefers-reduced-motion:reduce){.bt-still,.bt-frame{transition:none}}

/* the brief Bolty writes with the visitor (main.ts): the contact form's own sentence filling in under its question, the
   blanks it has filled underlined in the LED, their message in their words, and the way to send it */
.bt-brief{margin-top:28px;display:grid;gap:14px;max-width:460px}
.bt-brief[hidden]{display:none}
.bt-brief-line{margin:0;font-size:18px;line-height:1.55;color:var(--t3);text-wrap:pretty}
.bt-brief-line b{font-weight:500;color:var(--t5);transition:color .5s var(--ease)}
.bt-brief-line b.on{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(69,224,232,.6);text-decoration-thickness:1px;text-underline-offset:5px}
.bt-brief-words{margin:0;font-size:14px;line-height:1.6;color:var(--t3);text-wrap:pretty}
.bt-brief-words:empty{display:none}
.bt-send{justify-self:start;display:none;align-items:center;gap:10px;height:42px;padding:0 16px;border-radius:12px;font-size:15px;font-weight:500;
  color:var(--void);background:var(--ink);text-decoration:none;pointer-events:auto;transition:transform .2s var(--ease)}
.bt-send::after{content:'→'}
.bt-send:hover{transform:translateX(2px)}
.bt-brief.done .bt-send{display:inline-flex}

/* touch: suggestions big enough for a thumb */
@media (pointer:coarse){.bt-sugg button{height:40px;padding:0 15px}}

/* portrait, for phones and iPads held upright (main.ts does the same for Mercury): Bolty above as the one focal point,
   its words below in a column that scrolls when an answer runs long, and the box at the bottom within reach of a thumb.
   --bar-h is the box's height, measured in main.ts, so the words always stop above it */
@media (max-aspect-ratio:1/1){
  .bt-say{left:50%;transform:translateX(-50%);top:40%;bottom:calc(var(--bar-h,150px) + var(--m) + var(--kb,0px) + 10px);
    width:min(620px,calc(100vw - 2*var(--m)));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
  .bt-say::-webkit-scrollbar{display:none}
  .bt-say.on{pointer-events:auto}
  .bt-q{font-size:14px;margin-bottom:12px}
  .bt-a{font-size:clamp(21px,5.4vw,30px);line-height:1.2}
  .bt-links{margin-top:18px}
  .bt-brief{margin-top:20px;padding-bottom:24px}
  .bt-brief-line{font-size:16px}
  /* without WebGPU: the still above the words, the work in its frame where Mercury's screen would be */
  .bt-still{top:36%;width:min(48vw,300px)}
  body.bt-flat[data-state="answering"] .bt-still{left:50%;top:22%;transform:translate(-50%,-50%) scale(.72)}
  body.bt-flat[data-state="presenting"] .bt-still{left:50%;top:22%;opacity:0}
  .bt-frame{left:50%;top:23%;width:min(86vw,560px);max-height:30vh}
  .bt-frame--tall{width:auto;height:min(30vh,360px)}
}

/* short, for phones held sideways: the desktop arrangement, tighter, the words stopping above the box */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .bt-say{top:64px;bottom:calc(var(--bar-h,110px) + 18px + var(--kb,0px));width:min(46vw,520px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
  .bt-say::-webkit-scrollbar{display:none}
  .bt-say.on{pointer-events:auto}
  .bt-q{font-size:13px;margin-bottom:8px}
  .bt-a{font-size:clamp(18px,2.6vw,24px)}
  .bt-links{margin-top:14px}
  .bt-bar{gap:8px;bottom:calc(12px + var(--kb,0px))}
  .bt-ask input{height:46px}
}