.ask { align-self:flex-start; width:100%; max-width:460px; display:flex; flex-direction:column; gap:10px; }
.ask .ask-meta { display:flex; gap:6px; flex-wrap:wrap; }
.ask .fb-msg { width:100%; }
.pa .ask { background:var(--ag-bg); box-shadow:none; border-radius:20px; padding:18px 20px; }
.pa:not(.show-panel) .ask { max-width:520px; }
.ask .md-lite:not(.clipped) { max-height:60vh; overflow:auto; }
/* only for the keyboard: on a mouse/touch press the hint would grow the card under the pointer and the
   click would land elsewhere (the transcript is bottom-anchored, so the card jumps up) */
.ask:has(:focus-visible) .ask-keys { display:block; }
.ask-kicker { font-size:12px; font-weight:700; color:var(--tone-gold-fg); display:inline-flex; align-items:center; gap:6px; }
.ask-kicker.ok { color:var(--tone-ok-fg); }
.ask-title { margin:0; font-size:15px; font-weight:700; line-height:1.35; }
.ask-txt { margin:0; color:var(--text-2); font-size:13px; }
.ask-actions { display:flex; gap:8px; flex-wrap:wrap; padding-top:2px; }
.ask-actions .ask-more { margin-left:auto; }
.ask-note { margin:0; font-size:12px; color:var(--text-2); background:var(--surface-2); border-radius:8px; padding:8px 10px; }
.ask-done { margin:0; font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--tone-ok-fg); }
.ask-done.later { color:var(--text-2); }
.ask-done:focus { outline:none; }
.ask-done:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.adj { display:flex; flex-direction:column; gap:8px; }
.adj label { font-size:12px; font-weight:600; }
.adj-opt { font-weight:400; color:var(--text-2); }
/* pending task cards in the conversation */
.asks { display:flex; flex-direction:column; gap:14px; }
/* Pedido: on the agent's column in a transcript. While the conversation is empty, the Pedidos and "Hoje"
   share one centred column (the Pedidos come first in the DOM, so no `order`) */
.pa .asks .ask { max-width:min(82%, 560px); }
/* Pedido answer: the consequence line ("Se disser sim, vou …"), "Descartar pedido" set apart at the row end,
   and its in-page confirmation */
.ask-plan { margin:0; font-size:13px; color:var(--text); background:var(--surface-2); border-radius:8px; padding:8px 10px; }
.ask-plan strong { font-weight:700; }
.ask-confirm { display:flex; flex-direction:column; gap:8px; background:var(--tone-err-bg); border-radius:10px; padding:10px 12px; }
/* the R$ "Confirmar: …?" step confirms a yes, it is not a danger: neutral surface (red stays for Descartar) */
.ask-confirm.ask-sure { background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.ask-confirm-q { margin:0; font-size:13px; font-weight:600; color:var(--text); }
.msgs-in.is-empty > .asks { width:100%; max-width:560px; align-self:center; }
.msgs-in.is-empty > .asks .ask { align-self:center; max-width:100%; }
.ask-go {
  display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:8px 14px; border:0;
  border-radius:12px; text-align:left; background:var(--tone-gold-bg); color:var(--tone-gold-fg); font-weight:600;
  font-size:14px;
}
.ask-go[hidden] { display:none; }
.ask-go .ask-t { flex:1; }
/* Pedido card internals: the decision's facts (amount, payee, due), the question as clamped markdown, the
   secondary "O que eu já vi" disclosure and the receipt. Also the clamp used by Avisos and the task note. */
.ask-facts { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.ask-amount { font-size:18px; font-weight:600; color:var(--text); }
.ask-payee { font-size:13px; color:var(--text-2); }
.ask-due {
  font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--tone-neutral-bg);
  color:var(--tone-neutral-fg); align-self:center;
}
.ask-due.over { background:var(--tone-err-bg); color:var(--tone-err-fg); }
.ask-seen { display:flex; flex-direction:column; gap:6px; }
.ask-seen-btn { align-self:flex-start; color:var(--text-2); }
.ask-seen-btn svg { transition:transform .15s; }
.ask-seen-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.ask-seen-body { background:var(--surface-2); border-radius:8px; padding:8px 10px; }
.ask-when { font-weight:400; color:var(--muted); }
.ask-dismiss { align-self:flex-start; color:var(--text-2); }
.ask-keys { display:none; margin:0; font-size:12px; color:var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .ask-done.fresh { animation:pa-settle .35s cubic-bezier(.16,1,.3,1) both; }
  .ask-done.fresh .i path { stroke-dasharray:18; animation:pa-check .5s cubic-bezier(.16,1,.3,1) .08s both; }
}
@container (max-width: 719px) {
  .ask .ask-actions .btn { padding:0 14px; }
  .pa .asks .ask { max-width:100%; }
}
@media (pointer: coarse) {
  .ask:has(:focus-visible) .ask-keys { display:none; }
  .ask-keys { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-seen-btn svg { transition:none; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes pa-check { from { stroke-dashoffset:18; } to { stroke-dashoffset:0; } }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes pa-settle { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
}