/* LPPrompt (lp-prompt.js): Distribute's one prompt box, a copy of the Script Studio's ask box (fv2-board.css
   #fsboard .fb-ask / .fb-askrow / .fb-askq / .fb-askph / .fb-askh / .fb-asksend), number for number.
   One unit: the studio's small boxes (topSlot) flush on top, the chip, the text, the yellow send square flush on the right.
   Same tokens as the board: slush.css in the light, night.css (html[data-theme="dark"]) in the dark.
   slush.css styles bare inputs and night.css re-colours them with an id-weighted :is(), so the text field's rules carry
   an id-weighted :is() too (.lpp:is(#lpp-x,*)) and win without touching either theme file. */
.lpp{
  --lpp-panel:var(--card,#fff); --lpp-inner:var(--card2,#fff4ec);
  --lpp-line:var(--border,#000); --lpp-line2:rgba(0,0,0,.14); --lpp-line3:rgba(0,0,0,.28);
  --lpp-ink:var(--ink,#000); --lpp-muted:var(--muted,#444); --lpp-faint:var(--faint,#5a5a5a);
  --lpp-sun:var(--sun,#ffd731); --lpp-pick:#fff4bf; --lpp-bad:#a02b00;
  --lpp-ui:Inter,system-ui,-apple-system,sans-serif;
  position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;
  font-family:var(--lpp-ui);font-size:13.5px;line-height:1.45;font-weight:500;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;color:var(--lpp-ink);
}
html[data-theme="dark"] .lpp{
  --lpp-panel:var(--l1,#15151a); --lpp-inner:var(--l2,#1f1f25);
  --lpp-line:rgba(255,255,255,.14); --lpp-line2:rgba(255,255,255,.08); --lpp-line3:rgba(255,255,255,.2);
  --lpp-pick:#2a2614; --lpp-bad:#ff9a85;
}
.lpp,.lpp *,.lpp *::before,.lpp *::after{box-sizing:border-box}
.lpp [hidden]{display:none!important}
.lpp :where(button){font-family:inherit;color:inherit;cursor:pointer}
.lpp :where(button:disabled){cursor:not-allowed}
.lpp .lpp-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.lpp .lpp-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:lppSpin .8s linear infinite;flex:none;opacity:.85}
.lpp :focus-visible{outline:2px solid var(--lpp-sun);outline-offset:2px}
@keyframes lppSpin{to{transform:rotate(360deg)}}
@keyframes lppPop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}

/* the box (= .fb-ask) */
.lpp .lpp-ask{position:relative;display:flex;flex-direction:column;margin:0;border-radius:16px;background:var(--lpp-panel);border:1px solid var(--lpp-line);box-shadow:0 18px 48px rgba(0,0,0,.16),0 2px 6px rgba(0,0,0,.06);overflow:hidden;transition:box-shadow .15s,border-color .15s}
.lpp .lpp-ask:focus-within{box-shadow:0 0 0 3px rgba(255,215,49,.7),0 18px 48px rgba(0,0,0,.16)}
html[data-theme="dark"] .lpp .lpp-ask{border-color:rgba(255,255,255,.14);box-shadow:0 20px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .lpp .lpp-ask:focus-within{border-color:rgba(255,215,49,.55);box-shadow:0 20px 60px rgba(0,0,0,.55)}
/* the studio's row of small boxes, flush on top inside the same card */
.lpp .lpp-top{display:block;min-width:0;padding:8px 8px 7px;border-bottom:1px solid var(--lpp-line2)}
.lpp .lpp-top:empty{display:none}
/* (= .fb-askrow / .fb-askq / .fb-askph) */
.lpp .lpp-row{display:flex;align-items:stretch;position:relative;min-width:0}
html body .lpp:is(#lpp-x,*) textarea.lpp-q{flex:1;min-width:0;width:auto;height:50px;min-height:50px;max-height:140px;padding:15px 16px!important;margin:0;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;resize:none;background:transparent!important;color:var(--lpp-ink)!important;font:500 14px/20px var(--lpp-ui)!important;letter-spacing:-.01em;overflow:hidden;user-select:text;-webkit-user-select:text}
html body .lpp:is(#lpp-x,*) textarea.lpp-q::placeholder{color:transparent!important;opacity:0}
html body .lpp:is(#lpp-x,*) textarea.lpp-q:disabled{opacity:.55;cursor:not-allowed}
.lpp .lpp-ph{position:absolute;left:16px;top:15px;right:104px;pointer-events:none;color:var(--lpp-muted);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .28s,transform .28s}
.lpp .lpp-ph.swap{opacity:0;transform:translateY(6px)}
.lpp .lpp-ph.hide{opacity:0}
/* the send square (= .fb-asksend), flush on the right, the box's full height */
.lpp .lpp-send{flex:none;width:50px;border:0;border-left:1px solid var(--lpp-line);background:var(--lpp-sun);color:#000!important;display:grid;place-items:center;align-self:stretch;padding:0;margin:0;border-radius:0;box-shadow:none}
html[data-theme="dark"] .lpp .lpp-send{border-left-color:transparent}
.lpp .lpp-send .lpp-i{width:19px;height:19px;stroke-width:2.5}
.lpp .lpp-send:hover:not(:disabled){background:#ffe066}
.lpp .lpp-send:disabled{opacity:.6}
.lpp .lpp-send.is-stop .lpp-i{width:15px;height:15px}
/* a send square that says its word (sendText): the same yellow, wider */
.lpp .lpp-send.has-text{width:auto;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font:800 13px/1 var(--lpp-ui);letter-spacing:-.01em}
.lpp .lpp-send.has-text small{font-size:11px;font-weight:800;opacity:.75}
/* (= .fb-askh) */
.lpp .lpp-h{flex:none;width:42px;border:0;background:transparent;color:var(--lpp-muted);display:grid;place-items:center;padding:0;margin:0}
.lpp .lpp-h:hover,.lpp .lpp-h.on{color:var(--lpp-ink);background:var(--lpp-inner)}
/* (= .fb-askchip): "editing: Carousel 2 ×" */
.lpp .lpp-chip{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;padding:9px 12px 0;min-width:0}
.lpp .lpp-chipl{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:12px;font-weight:600;color:var(--lpp-ink);background:var(--lpp-pick);border:1px solid var(--lpp-line2);border-radius:999px 0 0 999px;border-right:0;padding:3px 6px 3px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpp .lpp-chipl b{font-weight:800}
.lpp .lpp-chipl .lpp-i{width:13px;height:13px}
.lpp .lpp-chipx{display:grid;place-items:center;width:26px;align-self:stretch;border:1px solid var(--lpp-line2);border-left:0;border-radius:0 999px 999px 0;background:var(--lpp-pick);padding:0;color:var(--lpp-ink)}
.lpp .lpp-chipx .lpp-i{width:12px;height:12px}
.lpp .lpp-chipx:hover{background:var(--lpp-sun);color:#000}
.lpp .lpp-chipg{display:inline-flex;align-items:stretch}
/* the bubble and the earlier asks (= .fb-bubble / .fb-asklog), above the box */
.lpp .lpp-say,.lpp .lpp-log{background:var(--lpp-panel);border:1px solid var(--lpp-line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.14);animation:lppPop .2s ease both;max-height:min(42vh,340px);overflow:auto;user-select:text;-webkit-user-select:text}
html[data-theme="dark"] .lpp .lpp-say,html[data-theme="dark"] .lpp .lpp-log{border-color:rgba(255,255,255,.14);box-shadow:0 16px 48px rgba(0,0,0,.5)}
.lpp .lpp-say{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;font-size:13px;line-height:1.45}
.lpp .lpp-say > .lpp-i,.lpp .lpp-say > .lpp-spin{margin-top:2px}
.lpp .lpp-say.is-bad{border-color:var(--lpp-bad)} .lpp .lpp-say.is-bad > .lpp-i{color:var(--lpp-bad)}
.lpp .lpp-sayt{margin:0;flex:1;min-width:0;color:var(--lpp-ink);font-weight:500}
.lpp .lpp-sayx{flex:none;width:24px;height:24px;margin:-2px -4px 0 0;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;padding:0;color:var(--lpp-muted)}
.lpp .lpp-sayx:hover{background:var(--lpp-inner);color:var(--lpp-ink)}
.lpp .lpp-sayx .lpp-i{width:13px;height:13px}
.lpp .lpp-log{padding:8px}
.lpp .lpp-logh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 6px 6px;font-size:12.5px}
.lpp .lpp-log ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lpp .lpp-log li button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:0;border-radius:10px;background:transparent;padding:6px 8px;color:var(--lpp-ink)}
.lpp .lpp-log li button:hover{background:var(--lpp-inner)}
.lpp .lpp-logq{font-size:13px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpp .lpp-logm{font-size:11.5px;color:var(--lpp-muted);font-weight:600}
/* the summary line under the box */
.lpp .lpp-foot{display:flex;align-items:center;gap:6px;min-width:0;padding:0 6px;font-size:11.5px;line-height:1.4;font-weight:600;color:var(--lpp-muted)}
.lpp .lpp-foot:empty{display:none}
.lpp .lpp-foot .lpp-i{width:13px;height:13px}
.lpp .lpp-foot b{color:var(--lpp-ink);font-weight:700}

/* fixed: the box pinned to the window's foot, centred (= .fb-dock), the studio's middle padded by its height (--lpp-dockh) */
.lpp.lpp-fixed{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(680px,calc(100vw - 32px));z-index:60;pointer-events:none}
.lpp.lpp-fixed > *{pointer-events:auto}
@media (max-width:760px){
  .lpp.lpp-fixed{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px)}
  .lpp .lpp-ph{font-size:13.5px;right:96px}
}
@media (prefers-reduced-motion:reduce){ .lpp *,.lpp *::before,.lpp *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }

/* variant "make" (a Make mode): the square grows into the big labelled block (Carousel's old Generate), still flush on the
   right of the same box, the box's full height; the arrow sits in a black dot. Flow views keep the arrow-only square. */
.lpp.lpp-make .lpp-send.is-make,.lpp.lpp-make .lpp-send.is-stop{width:auto;min-width:168px;padding:0 14px 0 22px;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;font:800 16px/1 var(--lpp-ui);letter-spacing:-.015em}
.lpp.lpp-make .lpp-send small{font-size:12px;font-weight:800;opacity:.7;margin-left:-6px}
.lpp.lpp-make .lpp-send .lpp-go{width:26px;height:26px;border-radius:50%;background:#000;color:var(--lpp-sun);display:grid;place-items:center;flex:none}
.lpp.lpp-make .lpp-send .lpp-go .lpp-i{width:15px;height:15px;stroke-width:2.6}
.lpp.lpp-make .lpp-send .lpp-spin{width:16px;height:16px}
.lpp.lpp-make .lpp-send.is-stop .lpp-i{width:14px;height:14px}
/* the example stops short of the block */
.lpp.lpp-make .lpp-ph{right:200px}
@media (max-width:620px){
  .lpp.lpp-make .lpp-send.is-make,.lpp.lpp-make .lpp-send.is-stop{min-width:0;padding:0 8px 0 14px;gap:8px;font-size:14px}
  .lpp.lpp-make .lpp-send .lpp-go{width:22px;height:22px}
  .lpp.lpp-make .lpp-ph{right:150px}
}
/* Adi, Oct 9: no small line of text under any prompt box */
.lpp .lpp-foot,.lpp .lpp-foot:not(:empty){display:none!important}