/* patron-computer.css — p94: the computer's window (patron-computer.js). Floats over the app, dragged by its head; × makes
   it the pill at the bottom right. --pcu is the robot's own colour. */
.pcu{position:fixed;z-index:60;top:72px;right:20px;width:400px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;
  background:rgba(27,28,31,.94);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35);
  color:#ececea;font-size:13.5px;line-height:19px;overflow:hidden;animation:pcu-in .22s cubic-bezier(.2,.8,.2,1)}
@keyframes pcu-in{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.pcu-head{display:flex;align-items:center;gap:10px;padding:11px 10px 10px 14px;cursor:grab;user-select:none;touch-action:none}
.pcu-head:active{cursor:grabbing}
.pcu-dot{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:var(--pcu,#2e8bff)}
.pcu[data-st=working] .pcu-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.6px solid transparent;
  border-top-color:var(--pcu,#2e8bff);border-right-color:var(--pcu,#2e8bff);animation:pcu-spin .9s linear infinite}
.pcu[data-st=asking] .pcu-dot,.pcu[data-st=human] .pcu-dot{background:#e8b04a;box-shadow:0 0 0 4px rgba(232,176,74,.18)}
.pcu[data-st=done] .pcu-dot{background:#3cc47c}
.pcu[data-st=failed] .pcu-dot,.pcu[data-st=cancelled] .pcu-dot,.pcu[data-st=expired] .pcu-dot{background:#8e8e8a}
@keyframes pcu-spin{to{transform:rotate(360deg)}}
.pcu-who{flex:1;min-width:0;display:flex;flex-direction:column}
.pcu-title{font-weight:650;font-size:13.5px;line-height:18px;letter-spacing:.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcu-sub{font-size:12px;line-height:16px;color:#9a9a96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcu-x{flex:none;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:999px;background:none;color:#9a9a96;cursor:pointer}
.pcu-x:hover{background:rgba(255,255,255,.08);color:#fff}
.pcu-view{position:relative;margin:0 10px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0b0b0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.pcu-shot,.pcu-vnc{position:absolute;inset:0}
.pcu-shot img{width:100%;height:100%;object-fit:contain;display:block}
.pcu-vnc>div{width:100%!important;height:100%!important;background:transparent!important}
.pcu-vnc canvas{max-width:100%;max-height:100%}
.pcu-veil{position:absolute;inset:0;pointer-events:none}
.pcu[data-taken="1"] .pcu-view{box-shadow:inset 0 0 0 2px var(--pcu,#2e8bff)}
.pcu-ask{padding:10px 14px 2px}
.pcu-ask[hidden]{display:none}
.pcu-q{margin:0 0 8px;color:#ececea}
.pcu-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.pcu-reply{display:flex;gap:6px;margin:0 0 8px}
.pcu-reply input{flex:1;min-width:0;height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:#fff;font:inherit;font-size:13px;outline:none}
.pcu-reply input:focus{border-color:var(--pcu,#2e8bff)}
.pcu-foot{display:flex;justify-content:flex-end;gap:6px;padding:10px 10px 10px}
.pcu-btn{height:32px;padding:0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.07);color:#ececea;font:inherit;font-size:13px;
  font-weight:550;cursor:pointer;white-space:nowrap}
.pcu-btn:hover{background:rgba(255,255,255,.13)}
.pcu-btn.pcu-go{background:#f4f4f1;color:#0b0b0b}
.pcu-btn.pcu-go:hover{background:#fff}
.pcu-btn.pcu-stop{color:#ff8a80}
.pcu-btn[hidden]{display:none}
.pcu :is(button,input):focus-visible{outline:2px solid #6c9cff;outline-offset:2px}
.pcu-pill{position:fixed;z-index:60;right:20px;bottom:20px;display:flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 14px;
  border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(27,28,31,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  box-shadow:0 12px 32px rgba(0,0,0,.5);color:#ececea;font:inherit;font-size:13px;font-weight:600;cursor:pointer;animation:pcu-in .2s ease}
.pcu-pill:hover{background:rgba(38,39,43,.96)}
.pcu-pdot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--pcu,#2e8bff)}
.pcu-pill[data-st=working] .pcu-pdot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.6px solid transparent;
  border-top-color:var(--pcu,#2e8bff);animation:pcu-spin .9s linear infinite}
.pcu-pill[data-st=asking] .pcu-pdot,.pcu-pill[data-st=human] .pcu-pdot{background:#e8b04a}
.pcu-pill[data-st=done] .pcu-pdot{background:#3cc47c}
@media (max-width:600px){
  .pcu{top:auto!important;left:8px!important;right:8px;bottom:8px;width:auto}
  .pcu-head{cursor:default}
  .pcu-pill{right:12px;bottom:12px}
}
@media (prefers-reduced-motion:reduce){.pcu,.pcu-pill{animation:none}.pcu-dot::after,.pcu-pdot::after{animation:none!important}}
/* p96: the window grows (a button in the head, a grip at the corner); the question is answered in the chat (.pcq) */
.pcu-grip{position:absolute;right:3px;bottom:3px;width:14px;height:14px;cursor:nwse-resize;opacity:.55;
  background:linear-gradient(135deg,transparent 0 50%,rgba(255,255,255,.55) 50% 56%,transparent 56% 68%,rgba(255,255,255,.55) 68% 74%,transparent 74%)}
.pcu-grip:hover{opacity:1}
.pcu-ask .pcu-q{color:#c9c9c4}
@media (max-width:600px){.pcu-grip,.pcu-big{display:none}}
/* the card in the chat: the computer's question in plain words, its answers, and "Something else…" */
.pc-msg.pcq-msg{align-self:flex-start;max-width:min(560px,86%)}
.pcq{--pcu:#2e8bff;padding:14px 16px 14px;border-radius:18px;background:#1d1e21;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.28);color:#ececea}
.pcq-head{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:#9a9a96;margin:0 0 8px}
.pcq-dot{width:8px;height:8px;border-radius:50%;background:#8e8e8a}
.pcq[data-open="1"] .pcq-dot{background:#e8b04a;box-shadow:0 0 0 3px rgba(232,176,74,.18)}
.pcq-q{margin:0 0 12px;font-size:15px;line-height:22px;color:#f4f4f1}
.pcq-said{margin:0;font-size:13.5px;color:#9a9a96}
.pcq-opts{display:flex;flex-direction:column;gap:7px}
.pcq-opt{display:block;width:100%;text-align:left;padding:10px 14px;border:1px solid rgba(255,255,255,.1);border-radius:12px;
  background:rgba(255,255,255,.04);color:#ececea;font:inherit;font-size:14px;line-height:20px;cursor:pointer}
.pcq-opt:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.pcq-opt.pcq-best,.pcq-opt.pcq-go{background:#f4f4f1;color:#0b0b0b;border-color:#f4f4f1;font-weight:600}
.pcq-opt.pcq-best:hover,.pcq-opt.pcq-go:hover{background:#fff}
.pcq-opt.pcq-other{color:#9a9a96;border-style:dashed}
.pcq-opt[hidden],.pcq-else[hidden]{display:none}
.pcq-else{display:flex;gap:6px;margin:8px 0 0}
.pcq-else input{flex:1;min-width:0;height:38px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:#fff;font:inherit;font-size:14px;outline:none}
.pcq-else input:focus{border-color:#6c9cff}
.pcq-send{height:38px;padding:0 16px;border:0;border-radius:12px;background:#f4f4f1;color:#0b0b0b;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.pcq :is(button,input):focus-visible{outline:2px solid #6c9cff;outline-offset:2px}