/* Pergunte à Selene: the open-question box of the FAQ and the LP (Doop "Pergunte à Selene · estados
   da caixa", approved by the owner on 2026-11-08). 400 px in the left column on a computer, the full
   width on a phone. Uses the kit's tokens (site.css); /site/pergunta.js brings it to life. */
html:not(.js) .ps{display:none}
.ps{margin-top:32px;background:var(--card);border-radius:18px;box-shadow:var(--raised);padding:20px;font-size:15px;line-height:1.5;color:var(--fg);text-align:left}
.ps .ps-top{display:flex;align-items:center;gap:8px}
.ps .ps-top .sel{width:20px;height:20px}
.ps .ps-top h3{font:600 16px/1.3 var(--sans)}
.ps .ps-sub{margin-top:6px;color:var(--muted-fg)}
.ps:not([data-estado="vazio"]) .ps-sub,.ps:not([data-estado="vazio"]) .ps-ex-ini{display:none}

/* the question asked and the Selene's answer */
.ps .ps-voce{margin-top:16px;padding:10px 12px;border-radius:10px;background:var(--soft);box-shadow:0 0 0 1px var(--border)}
.ps .ps-l{font:500 12px/1.3 var(--sans);color:var(--faint)}
.ps .ps-voce .ps-q{margin-top:2px;font-weight:500;overflow-wrap:anywhere}
.ps .ps-resp{margin-top:16px;display:grid;grid-template-columns:28px 1fr;gap:10px}
.ps .ps-av{width:28px;height:28px;border-radius:99px;background:var(--signal-soft);display:grid;place-items:center}
.ps .ps-av .sel{width:16px;height:16px}
.ps .ps-quem{font:600 14px/28px var(--sans)}
.ps .ps-quem span{font-weight:400;font-size:12px;color:var(--signal)}
.ps .ps-t{overflow-wrap:anywhere}
.ps .ps-t b{font-weight:600}
.ps .ps-base{margin-top:12px}
.ps .ps-base a{display:flex;align-items:center;gap:6px;margin-top:6px;width:fit-content;font:500 14px/1.35 var(--sans);color:var(--signal);text-decoration:none}
.ps .ps-base a:hover{text-decoration:underline;text-underline-offset:3px}
.ps .ps-base svg{width:14px;height:14px;flex:none}
.ps .btn-sec{margin-top:12px;height:40px;font-size:14px;gap:8px}
.ps .btn-sec svg{width:16px;height:16px;color:var(--muted-fg)}
.ps .ps-aviso{margin-top:16px;display:grid;grid-template-columns:20px 1fr;gap:10px;padding:12px;border-radius:10px;background:var(--soft);box-shadow:0 0 0 1px var(--border);font-size:14px;line-height:1.5}
.ps .ps-aviso>svg{width:18px;height:18px;margin-top:1px;color:var(--muted-fg)}
.ps .ps-aviso.erro>svg{color:var(--danger)}
.ps .ps-aviso b{font-weight:600}
.ps .ps-aviso .mais{margin-top:4px;color:var(--muted-fg)}
.ps .ps-aviso .mais a{color:var(--signal);text-decoration:none;font-weight:500}
.ps .ps-aviso .btn-sec{margin-top:10px}

/* the field: grows to four lines, the send button inside */
.ps .ps-campo{margin-top:16px;display:flex;align-items:flex-end;gap:8px;min-height:48px;padding:4px 4px 4px 14px;border-radius:10px;background:var(--card);box-shadow:0 0 0 1px var(--input),inset 0 1px 2px rgb(10 26 58 / .04);transition:box-shadow .2s var(--ease),background-color .2s var(--ease)}
.ps .ps-campo:focus-within{box-shadow:0 0 0 1px var(--signal),0 0 0 4px rgb(37 88 232 / .18)}
.ps[data-estado="respondendo"] .ps-campo,.ps[data-estado="limite"] .ps-campo{background:var(--soft)}
.ps .ps-campo textarea{flex:1;min-width:0;height:40px;max-height:112px;padding:8px 0;border:0;outline:0;resize:none;background:none;font:400 15px/24px var(--sans);color:var(--fg)}
.ps .ps-campo textarea::placeholder{color:var(--faint);opacity:1}
.ps .ps-enviar{flex:none;width:40px;height:40px;border-radius:6px;display:grid;place-items:center;background:var(--muted);color:var(--faint);transition:background-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
.ps .ps-enviar svg{width:18px;height:18px}
.ps .ps-enviar:not(:disabled){background:var(--primary);color:var(--on-primary);box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 1px 2px rgb(10 26 58 / .2)}
.ps .ps-enviar:not(:disabled):hover{background:var(--primary-hover)}
.ps .ps-enviar:not(:disabled):active{transform:scale(.96)}
.ps .ps-enviar:disabled{cursor:default}
.ps .ps-conta{margin-top:6px;text-align:right;font-size:12px;color:var(--faint)}
.ps .ps-conta.erro{text-align:left;color:var(--danger)}

/* example questions */
.ps .ps-ex{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.ps .ps-ex button{height:30px;padding:0 10px;border-radius:6px;background:var(--muted);font:500 13px/1 var(--sans);color:var(--fg);transition:background-color .2s var(--ease)}
.ps .ps-ex button:hover{background:color-mix(in srgb,var(--muted) 88%,var(--fg))}
.ps .ps-priv{margin-top:14px;font-size:12px;line-height:1.45;color:var(--faint)}
.ps .ps-priv a{color:var(--muted-fg);text-underline-offset:2px}

/* the Selene at work: the S breathes and the kit's caret blinks */
.ps .ps-av.vivo .sel{animation:ps-pulso 1.2s ease-in-out infinite}
@keyframes ps-pulso{50%{opacity:.45;transform:scale(.88)}}
.ps .ps-t .caret{height:16px;vertical-align:-3px}

/* the FAQ item an answer leans on, lit for a moment when its link is followed */
.q.ps-destaque{position:relative;isolation:isolate}
.q.ps-destaque::before{content:"";position:absolute;inset:-1px -12px 0;border-radius:12px;background:var(--signal-soft);z-index:-1;animation:ps-luz 2.6s var(--ease) forwards}
@keyframes ps-luz{0%,55%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .ps .ps-av.vivo .sel{animation:none}
  .q.ps-destaque::before{animation:none;opacity:0}
}

/* phones: 44 px controls; on the LP (section 08 with .com-selene) the box comes after the six questions */
@media (max-width:959px){
  .ps{padding:16px}
  .ps .ps-campo{min-height:52px}
  .ps .ps-campo textarea{height:44px;padding:10px 0;font-size:16px}
  .ps .ps-enviar{width:44px;height:44px}
  .ps .ps-enviar svg{width:20px;height:20px}
  .ps .ps-ex button{height:36px;padding:0 12px;font-size:14px}
  .ps .ps-base a{min-height:36px;margin-top:0;font-size:15px}
  .fq.com-selene .wrap{display:flex;flex-direction:column;gap:0}
  .fq.com-selene .wrap>div:first-child{display:contents}
  .fq.com-selene .qs{order:2}
  .fq.com-selene .ps{order:3}
}