/* agentes — estilos do jogo, da aula e do laboratório (mundo AI Engineer). */

/* ---------- aula ---------- */
/* prefixo .aga- · demos de js/games/agentes/aula.js (os balões e o bloco "rodar no LLM" vêm de css/ai.css) */

/* canvases só de leitura: o dedo que começa neles ainda rola a página
   (duas classes: lesson.css carrega depois e põe touch-action: none em .ls-canvas) */
.ls-canvas.aga-canvas { touch-action: pan-y; }

.aga-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding: 10px 12px; border: 2px solid var(--line-2); border-left: 4px solid var(--info); background: var(--bg); font-size: 14.5px; line-height: 1.45; color: var(--text); }
.aga-q:empty { display: none; }
.aga-cap { margin: 0; font: 600 10px/1.4 var(--pixel-ui); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.aga-ctrls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
.aga-ctrls .ls-choices { min-width: 0; max-width: 100%; }
.aga-ctrls .seg { flex-wrap: wrap; max-width: 100%; }

.aga-verdict { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.aga-verdict.good { color: var(--good); }
.aga-verdict.bad { color: var(--bad); }

/* JSON e código cru (pedido, resposta, traceback) */
.aga-json, .aga-crash { margin: 0; padding: 10px 12px; max-height: 320px; overflow: auto; border: 2px solid var(--line-2); background: #0a0a0f; font: 400 12px/1.55 var(--mono); color: #d4d4d4; white-space: pre; }
.aga-crash { border-color: var(--bad); background: var(--bad-soft); color: var(--text); }
.aga-details { padding: 8px 10px; border: 2px dashed var(--line-2); background: var(--bg); }
.aga-details summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.aga-details summary:hover { color: var(--text); }
.aga-details[open] summary { margin-bottom: 8px; }

/* a conversa: ids à mostra, mensagens novas destacadas, erros em laranja */
.aga-chat .ai-msg { max-width: 100%; font-size: 13px; }
.aga-chat .ai-msg.system { font-size: 12px; }
.aga-id { font: 400 11px/1.3 var(--mono); color: var(--muted); }
.ai-chat-call .aga-id { display: block; }
.aga-chat .ai-msg.aga-new { box-shadow: 3px 3px 0 0 var(--accent-line); }
.aga-chat .ai-msg.tool.aga-err { border-color: var(--orange); background: rgba(255, 140, 46, 0.1); }
.aga-chat .ai-msg.tool.aga-err > b { color: var(--orange); }

/* 1 · o pedido de chamada */
.aga-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.aga-duo > section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 720px) { .aga-duo { grid-template-columns: 1fr; } }
.aga-exec { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 2px solid var(--purple); background: rgba(139, 92, 246, 0.08); }
.aga-out { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.aga-out:empty { display: none; }
.aga-out .ls-note code { font: 400 0.92em/1 var(--mono); color: var(--accent); }

/* 2 · o esquema com lacunas e os campos para arrastar */
.aga-code { margin: 0; padding: 12px 14px; overflow-x: auto; border: 2px solid var(--line-2); background: #0a0a0f; font: 400 12.5px/1.75 var(--mono); color: #d4d4d4; }
.aga-slot { display: inline-block; min-width: 64px; padding: 0 6px; border: 2px dashed var(--line-3); background: var(--bg-2); font: inherit; line-height: 1.5; color: var(--faint); vertical-align: baseline; cursor: pointer; }
.aga-slot:hover, .aga-slot.armed { border-color: var(--accent-line); }
.aga-slot.over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.aga-slot.filled { border-style: solid; color: #ce9178; }
.aga-slot.ok { border-color: var(--good); background: var(--good-soft); }
.aga-slot.no { border-color: var(--bad); background: var(--bad-soft); }
.aga-slot:focus-visible, .aga-chip:focus-visible, .aga-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aga-tray { display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px; padding: 10px; border: 2px dashed var(--line-2); background: var(--bg); }
.aga-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 5px 9px; border: 2px solid var(--line-2); background: var(--surface); box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.5); cursor: grab; text-align: left; }
.aga-chip[hidden] { display: none; }
.aga-chip code { font: 400 12px/1.35 var(--mono); color: #ce9178; white-space: normal; word-break: break-word; }
.aga-chip:hover { border-color: var(--line-3); }
.aga-chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.aga-msg { margin: 0; min-height: 1.5em; font-size: 13px; line-height: 1.5; color: var(--muted); }
.aga-msg.good { color: var(--good); }
.aga-msg.bad { color: var(--bad); }
.aga-valid { width: 100%; }
.aga-valid th, .aga-valid td { padding: 6px 10px; font-size: 12px; line-height: 1.35; }
.aga-valid .aga-td { text-align: left; color: var(--text-2); word-break: break-word; }
@media (max-width: 520px) { .aga-valid th, .aga-valid td { padding: 5px 6px; font-size: 11px; } }

/* 3 · o passo a passo do laço */
.aga-stepper { display: flex; flex-direction: column; gap: 8px; }
.aga-ev { margin: 0; min-height: 3em; padding: 8px 10px; border-left: 4px solid var(--accent); background: var(--bg); font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.aga-ev b { margin-right: 6px; font: 500 12px/1 var(--mono); color: var(--accent); }
.aga-sum { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.aga-sum b.good { color: var(--good); }
.aga-sum b.bad { color: var(--bad); }
.aga-trans .ai-chat { max-height: 460px; overflow: auto; padding-right: 4px; }

/* 4 · erros e limites: o que já foi visto */
.aga-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.aga-checks li { padding: 4px 8px; border: 2px solid var(--line-2); background: var(--bg); font: 500 12px/1.3 var(--mono); color: var(--muted); }
.aga-checks li.ok { border-color: var(--good); background: var(--good-soft); color: var(--good); }

/* 5 · segurança: marcar as ações e o cenário com injeção */
.aga-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aga-acts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 10px; border: 2px solid var(--line); border-left-width: 4px; background: var(--bg); }
.aga-acts li.ok { border-left-color: var(--good); }
.aga-acts li.no { border-left-color: var(--bad); }
.aga-acts code { font: 400 12.5px/1.4 var(--mono); color: var(--text); word-break: break-word; }
.aga-tog { padding: 5px 10px; border: 2px solid var(--line-2); background: var(--surface); font: 500 12px/1.2 var(--pixel); color: var(--muted); white-space: nowrap; }
.aga-tog::before { content: '□ '; }
.aga-tog[aria-pressed='true'] { border-color: #000; background: var(--accent); color: var(--accent-ink); }
.aga-tog[aria-pressed='true']::before { content: '■ '; }
.aga-why { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.aga-why:empty { display: none; }
.aga-acts li.ok .aga-why { color: var(--good); }
.aga-acts li.no .aga-why { color: var(--bad); }
@media (max-width: 520px) {
  .aga-acts li { grid-template-columns: 1fr; }
  .aga-tog { justify-self: start; }
}
.aga-cen { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 2px dashed var(--line-2); background: var(--bg); }
.aga-confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 2px solid var(--warn); background: var(--warn-soft); font-size: 13.5px; line-height: 1.5; color: var(--text); }
.aga-confirm p { margin: 0; }
.aga-confirm code { font: 400 0.92em/1 var(--mono); color: var(--warn); }

/* ---------- jogo ---------- */
/* prefixo .ag- · "O Labirinto de Ferramentas" (js/games/agentes/game.js); a base vem de .sg-* (games.css),
   os balões da conversa de .ai-chat/.ai-msg (ai.css) */

/* o mapa não é arrastável: o dedo que começa nele ainda rola a página (tocar numa sala ainda vale clique) */
.sg-canvas.ag-canvas { height: 270px; touch-action: pan-y; border-radius: 0; }
@media (max-width: 640px) { .sg-canvas.ag-canvas { height: 236px; } }
.ag .sg-formula, .ag .sg-goal, .ag .sg-msg, .ag .sg-stats div { border-radius: 0; }
.ag .btn kbd { margin-left: 6px; }
@media (hover: none) and (pointer: coarse) { .ag kbd, .ag-keys { display: none; } }

.ag-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ag-msg:empty { display: none; }
.ag-msg .sg-msg code, .ag-controls code, .ag-board .ag-note code { font: 400 0.92em/1.3 var(--mono); color: var(--accent); word-break: break-word; }
.ag-probs { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.ag-keys { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ag-keys .icon { flex: none; margin-top: 2px; }
.ag-board { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ag-board .sg-label, .ag-controls .sg-label { margin: 0; }
.ag-cap { margin-top: 2px; }
.ag-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* o pedido do cliente e o card "o agente quer executar" */
.ag-ask { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 2px solid var(--line-2); border-left: 4px solid var(--info); background: var(--bg); }
.ag-ask p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text); word-break: break-word; }
.ag-ask.ag-door { border-left-color: var(--warn); }
.ag-ask.ag-door code { color: var(--text); }
.ag-quest { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ag-quest code { color: var(--accent); }
.ag-tipo { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.ag-tipo b { font: 500 15px/1.3 var(--sans); color: var(--orange); }

/* opções grandes (fases 1 e 4): nome + descrição, com a tecla */
.ag-opts { display: flex; flex-direction: column; gap: 6px; }
.ag-opt {
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 8px 10px; text-align: left;
  border: 2px solid var(--line-2); border-left-width: 4px; background: var(--surface); color: var(--text-2);
  box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.45); transition: border-color 0.15s, transform 0.1s;
}
.ag-opt:hover:not(:disabled) { border-color: var(--accent-line); transform: translate(-1px, -1px); }
.ag-opt:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: none; }
.ag-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-opt:disabled { cursor: default; box-shadow: none; }
.ag-opt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.ag-opt-top > span { min-width: 0; word-break: break-word; }
.ag-opt-top kbd { flex: none; }
.ag-opt small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ag-opt.tried { opacity: 0.5; border-left-color: var(--bad); }
.ag-opt.tried .ag-opt-top { text-decoration: line-through; text-decoration-color: var(--bad); }
.ag-opt.pick { opacity: 1; border-color: var(--good); border-left-color: var(--good); background: var(--good-soft); }

/* fase 2 · as lacunas dos argumentos */
.ag-slots { display: flex; flex-direction: column; gap: 8px; }
.ag-slotrow { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 2px dashed var(--line-2); background: var(--bg); }
.ag-slotrow.cur { border-style: solid; border-color: var(--accent-line); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 4px 10px;
  border: 2px solid var(--line-2); background: var(--surface); font: 400 12.5px/1.3 var(--mono); color: #ce9178;
  transition: border-color 0.15s, background 0.15s;
}
.ag-chip:hover:not(:disabled) { border-color: var(--accent-line); }
.ag-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.45); }
.ag-chip:disabled { cursor: default; }
.ag-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.ag-two > section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 720px) { .ag-two { grid-template-columns: 1fr; } }
.ag-json, .ag-crash { margin: 0; padding: 10px 12px; max-height: 300px; overflow: auto; border: 2px solid var(--line-2); background: #0a0a0f; font: 400 12px/1.55 var(--mono); color: #d4d4d4; white-space: pre-wrap; word-break: break-word; }
.ag-crash { border-color: var(--bad); background: var(--bad-soft); color: var(--text); white-space: pre; }
.ag-hole { padding: 0 3px; border-bottom: 2px solid var(--accent); color: #ce9178; }
.ag-hole.vazia { border-bottom-style: dashed; border-bottom-color: var(--line-3); color: var(--faint); }
.ag-hole.cur { background: var(--accent-soft); }
.ag-res { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 2px solid var(--line-2); border-left-width: 4px; background: var(--bg); }
.ag-res code { font: 400 12.5px/1.45 var(--mono); color: var(--text); word-break: break-word; }
.ag-res.good { border-left-color: var(--good); }
.ag-res.bad { border-left-color: var(--orange); }
.ag-res.bad code { color: var(--orange); }
.ag-res.warn { border-left-color: var(--warn); }

/* fase 3 · o histórico, os botões do laço e o resultado na mão do robô */
.ag-chat .ai-msg { max-width: 100%; font-size: 13px; }
.ag-chat .ai-msg.ag-sys { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; font-size: 12px; }
.ag-chat .ai-msg.ag-sys > b { margin-right: 8px; }
.ag-chat .ai-msg.tool.ag-err { border-color: var(--orange); background: rgba(255, 140, 46, 0.1); }
.ag-chat .ai-msg.tool.ag-err > b { color: var(--orange); }
.ag-id { font: 400 11px/1.3 var(--mono); color: var(--muted); }
.ag-call { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ag-call .ai-chat-call { flex: 1 1 200px; min-width: 0; }
.ag-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--line-2); font: 500 11px/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.ag-tag .icon { width: 11px; height: 11px; }
.ag-tag.ok { border-color: rgba(100, 217, 139, 0.5); color: var(--good); }
.ag-tag.warn { border-color: rgba(255, 210, 63, 0.5); color: var(--warn); }
.ag-exec { border-radius: 0; }
.ag-loopbtns, .ag-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ag-act { justify-content: center; border-radius: 0; box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.45); }
.ag-act:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.ag-warnbtn { border-color: var(--warn); }
@media (max-width: 400px) { .ag-loopbtns, .ag-duo { grid-template-columns: 1fr; } }
.ag-coach { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border: 2px dashed var(--info); background: var(--info-soft); font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ag-coach .icon { flex: none; margin-top: 2px; color: var(--info); }
.ag-mao { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 2px solid var(--purple); background: rgba(139, 92, 246, 0.08); box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.45); }
.ag-mao code { font: 400 12.5px/1.4 var(--mono); color: var(--text); word-break: break-word; }
.ag-mao .ag-quest code { color: var(--accent); }
.ag-out { padding: 6px 8px; border-left: 3px solid var(--purple); background: var(--bg); }
.ag-ids { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-idbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border: 2px solid var(--line-2); background: var(--surface); box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.45); }
.ag-idbtn:hover:not(:disabled) { border-color: var(--accent); }
.ag-idbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-idbtn:disabled { opacity: 0.4; box-shadow: none; cursor: default; }

/* fase 4 · o laço sem saída */
.ag-loopnote { margin: 0; padding: 8px 10px; border: 2px dashed var(--orange); font: 400 12.5px/1.5 var(--mono); color: var(--orange); word-break: break-word; }

/* fase 5 · a fila na porta e as avaliações */
.ag-fila { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: fila; }
.ag-fila li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 6px 10px; border: 2px solid var(--line); border-left-width: 4px; background: var(--bg); opacity: 0.65; }
.ag-fila li code { font: 400 12.5px/1.4 var(--mono); color: var(--text-2); word-break: break-word; min-width: 0; }
.ag-fila li.cur { opacity: 1; border-color: var(--warn); box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.45); }
.ag-fila li.done { opacity: 1; }
.ag-revs { display: flex; flex-direction: column; gap: 4px; white-space: normal; }
.ag-rev { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 6px 8px; text-align: left; border: 2px solid var(--line-2); background: var(--bg); font: 400 12px/1.45 var(--mono); color: var(--text-2); }
.ag-rev span { min-width: 0; word-break: break-word; }
.ag-rev kbd { flex: none; }
.ag-rev:hover:not(:disabled) { border-color: var(--accent-line); }
.ag-rev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-rev:disabled { cursor: default; }
.ag-rev.no { opacity: 0.5; border-color: var(--line); text-decoration: line-through; text-decoration-color: var(--faint); }
.ag-rev.veneno { border-color: var(--bad); background: var(--bad-soft); color: var(--text); }

/* celular e tablet: o painel de controles some do layout (display: contents) para os filhos
   entrarem na ordem: fase, objetivo, mapa, controles, mensagem, quadro, ações */
@media (max-width: 920px) {
  .ag .sg-body { display: flex; flex-direction: column; gap: 14px; }
  .ag .sg-main, .ag .sg-ctrl { display: contents; }
  .ag .sg-main > *, .ag .sg-ctrl > * { min-width: 0; max-width: 100%; }
  .ag .sg-head { order: 0; }
  .ag .sg-goal { order: 1; }
  .ag .ag-canvas { order: 2; }
  .ag .sg-caption { order: 3; }
  .ag .ag-controls { order: 4; }
  .ag .ag-msg { order: 5; }
  .ag .ag-board { order: 6; }
  .ag .sg-actions { order: 7; }
}
@media (max-width: 520px) {
  .ag .sg-caption { gap: 4px 12px; font-size: 10.5px; }
  .ag-json { font-size: 11px; }
}