/* [ap-assistente-v1] Assistente de Configuracao do Agente de IA. Tudo dentro de .aia (nada vaza para o painel);
   cores do style.css do painel, com reserva. Prototipo aprovado: artifact UrBzgbqjtGiihV1YVHP3BY. */
.aia {
  --aia-card: var(--bg-card, #fff); --aia-fg: var(--text-primary, #09090b); --aia-soft: var(--text-secondary, #495057);
  --aia-muted: var(--text-muted, #6c757d); --aia-border: var(--border, #e4e4e7); --aia-border2: #d4d4d8;
  --aia-primary: var(--primary, #00346e); --aia-primary2: var(--primary-light, #058fcb); --aia-wash: #eef4fb;
  --aia-accent: var(--accent, #00bcd4);
  --aia-ok: #16a34a; --aia-ok-wash: #ecfdf3; --aia-warn: #b45309; --aia-warn-wash: #fff7e6; --aia-bad: #dc2626; --aia-bad-wash: #fef2f2;
  --aia-me: #dcf8c6; --aia-bot: #fff; --aia-chatbg: #efeae2;
  --aia-r: var(--radius, 12px); --aia-rs: var(--radius-sm, 8px);
  color: var(--aia-fg); font-size: 14px; line-height: 1.5;
}
.aia *, .aia-modal * { box-sizing: border-box; }
.aia h2, .aia h3 { margin: 0; text-wrap: balance; }
.aia :focus-visible { outline: 2px solid var(--aia-primary2); outline-offset: 2px; }

.aia-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.aia-crumb { font-size: 13px; color: var(--aia-muted); }
.aia-crumb b { color: var(--aia-fg); font-weight: 600; }
.aia-progress { height: 4px; background: var(--aia-border); border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.aia-progress i { display: block; height: 100%; background: var(--aia-primary2); transition: width .3s; }

.aia-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .aia-grid { grid-template-columns: 200px minmax(0, 1fr); } .aia-side { grid-column: 1 / -1; } }
@media (max-width: 760px) { .aia-grid { grid-template-columns: minmax(0, 1fr); } }

.aia-rail { background: var(--aia-card); border: 1px solid var(--aia-border); border-radius: var(--aia-r); padding: 8px; position: sticky; top: 72px; }
.aia-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.aia-rail button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; background: none; border: 0; padding: 7px 8px; border-radius: var(--aia-rs); cursor: pointer; color: var(--aia-soft); font-size: 13px; }
.aia-rail button:hover { background: var(--aia-wash); }
.aia-rail button[disabled] { cursor: default; opacity: .55; }
.aia-rail button[disabled]:hover { background: none; }
.aia-n { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; border: 1px solid var(--aia-border2); color: var(--aia-muted); font-variant-numeric: tabular-nums; }
.aia-rail li.done .aia-n { background: var(--aia-ok); border-color: var(--aia-ok); color: #fff; }
.aia-rail li.cur button { background: var(--aia-wash); color: var(--aia-fg); font-weight: 600; }
.aia-rail li.cur .aia-n { border-color: var(--aia-primary); color: var(--aia-primary); }
@media (max-width: 760px) { .aia-rail { position: static; } .aia-rail ol { flex-direction: row; overflow-x: auto; gap: 4px; } .aia-rail .aia-t { display: none; } .aia-rail button { padding: 6px; } }

.aia-step { background: var(--aia-card); border: 1px solid var(--aia-border); border-radius: var(--aia-r); padding: 22px; min-width: 0; }
@media (max-width: 560px) { .aia-step { padding: 16px; } }
.aia-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--aia-muted); font-weight: 600; margin-bottom: 4px; }
.aia-step h2 { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.aia-lead { color: var(--aia-soft); margin: 0 0 16px; max-width: 68ch; }
.aia-q { margin: 18px 0 6px; font-weight: 600; }
.aia-hint { font-size: 12.5px; color: var(--aia-muted); margin: -2px 0 8px; max-width: 68ch; }
.aia-field { width: 100%; border: 1px solid var(--aia-border2); border-radius: var(--aia-rs); background: var(--aia-card); color: var(--aia-fg); padding: 7px 10px; min-height: 36px; font: inherit; }
textarea.aia-field { resize: vertical; min-height: 80px; }
select.aia-field { padding-right: 28px; }
.aia-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aia-row > .aia-grow { flex: 1 1 220px; min-width: 0; }

.aia-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.aia-opt { border: 1px solid var(--aia-border2); border-radius: var(--aia-rs); padding: 12px; background: var(--aia-card); color: var(--aia-fg); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; font: inherit; transition: border-color .15s, background .15s; }
.aia-opt:hover { border-color: var(--aia-primary2); }
.aia-opt[aria-pressed="true"] { border-color: var(--aia-primary); background: var(--aia-wash); box-shadow: inset 0 0 0 1px var(--aia-primary); }
.aia-opt b { font-size: 14px; }
.aia-opt small { color: var(--aia-muted); font-size: 12.5px; }
.aia-opt .aia-aviso { font-size: 12px; color: var(--aia-warn); }
.aia-entry { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 6px; }
.aia-entry .aia-opt { padding: 16px; gap: 6px; }
.aia-entry .aia-opt b { font-size: 16px; }

.aia-checks { display: flex; flex-direction: column; gap: 4px; }
.aia-checks label, .aia-radios label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 6px 8px; border-radius: 6px; font-weight: 400; margin: 0; }
.aia-checks label:hover, .aia-radios label:hover { background: var(--aia-wash); }
.aia-checks input, .aia-radios input { margin-top: 3px; accent-color: var(--aia-primary); flex: 0 0 auto; width: auto; height: auto; }
.aia-radios { display: flex; flex-direction: column; gap: 2px; }
.aia-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px 16px; }
.aia-sub { font-size: 12.5px; color: var(--aia-muted); }

.aia-callout { border-radius: var(--aia-rs); padding: 10px 12px; font-size: 13px; margin: 12px 0; border: 1px solid; color: var(--aia-fg); }
.aia-callout.warn { background: var(--aia-warn-wash); border-color: #f3d19c; }
.aia-callout.warn b { color: var(--aia-warn); }
.aia-callout.ok { background: var(--aia-ok-wash); border-color: #a7e3bd; }
.aia-callout.ok b { color: var(--aia-ok); }
.aia-callout.bad { background: var(--aia-bad-wash); border-color: #f5b5b5; }
.aia-callout.bad b { color: var(--aia-bad); }
.aia-callout.info { background: var(--aia-wash); border-color: #b9d3ee; }

.aia-suggest { border: 1px solid var(--aia-border); border-radius: var(--aia-rs); overflow: hidden; }
.aia-suggest .aia-s { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--aia-border); }
.aia-suggest .aia-s:first-child { border-top: 0; }
.aia-suggest .aia-s input { margin-top: 6px; }
@media (max-width: 560px) { .aia-suggest .aia-s { grid-template-columns: minmax(0, 1fr); } }
.aia-seg { display: inline-flex; border: 1px solid var(--aia-border2); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.aia-seg button { border: 0; background: none; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--aia-soft); font: inherit; font-size: 12px; }
.aia-seg button[aria-pressed="true"] { background: var(--aia-primary); color: #fff; }

.aia-tbl { overflow-x: auto; }
table.aia-dest { width: 100%; border-collapse: collapse; font-size: 13px; }
table.aia-dest th { text-align: left; font-weight: 600; color: var(--aia-muted); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--aia-border); }
table.aia-dest td { padding: 6px 8px; border-bottom: 1px solid var(--aia-border); vertical-align: middle; }
table.aia-dest select, table.aia-dest input { min-width: 160px; }

.aia-meter { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--aia-soft); margin: 8px 0; }
.aia-meter b { color: var(--aia-fg); font-variant-numeric: tabular-nums; }

.aia-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--aia-border); }
.aia-foot .aia-r { display: flex; gap: 8px; flex-wrap: wrap; }
.aia .btn-ghost { background: transparent; color: var(--aia-soft); border: 1px solid transparent; }
.aia .btn-ghost:hover { background: var(--aia-wash); }
.aia .btn-go { background: var(--aia-ok); color: #fff; }
.aia .btn[disabled] { opacity: .5; cursor: not-allowed; }
.aia-link { font-size: 12.5px; border: 0; background: none; color: var(--aia-primary2); cursor: pointer; padding: 0; text-decoration: underline; font: inherit; font-size: 12.5px; }

.aia-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.aia-box { background: var(--aia-card); border: 1px solid var(--aia-border); border-radius: var(--aia-r); padding: 14px; }
.aia-box h3 { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--aia-muted); font-weight: 600; margin-bottom: 8px; }
.aia-tip { border-left: 3px solid var(--aia-accent); padding-left: 10px; font-size: 13.5px; }
.aia-tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aia-tools li { font-size: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
.aia-tools small { display: block; color: var(--aia-muted); font-size: 12px; }
.aia-tools .off b { font-weight: 400; color: var(--aia-muted); }
.aia-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--aia-ok); }
.aia-dot.off { background: var(--aia-border2); }
.aia-chip { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--aia-wash); color: var(--aia-primary); font-weight: 500; }
.aia-chip.ok { background: var(--aia-ok-wash); color: var(--aia-ok); }
.aia-chip.warn { background: var(--aia-warn-wash); color: var(--aia-warn); }

.aia-draft { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; border: 1px solid var(--aia-border); border-radius: var(--aia-rs); padding: 12px 14px; margin-top: 8px; }
.aia-draft .aia-meta { font-size: 12.5px; color: var(--aia-muted); }

.aia-keysteps { counter-reset: aiak; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.aia-keysteps li { counter-increment: aiak; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.aia-keysteps li::before { content: counter(aiak); width: 24px; height: 24px; border-radius: 50%; background: var(--aia-wash); color: var(--aia-primary); display: grid; place-items: center; font-weight: 600; font-size: 12px; }

/* chat de teste */
.aia-testgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .aia-testgrid { grid-template-columns: minmax(0, 1fr); } }
.aia-chat { background: var(--aia-chatbg); border: 1px solid var(--aia-border); border-radius: var(--aia-rs); display: flex; flex-direction: column; height: 460px; min-width: 0; }
.aia-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.aia-bub { max-width: 82%; padding: 7px 10px; border-radius: 9px; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.aia-bub.me { align-self: flex-end; background: var(--aia-me); }
.aia-bub.bot { align-self: flex-start; background: var(--aia-bot); }
.aia-act { align-self: center; font-size: 12px; background: var(--aia-card); border: 1px solid var(--aia-border2); border-radius: 999px; padding: 3px 10px; color: var(--aia-soft); text-align: center; max-width: 95%; }
.aia-act b { color: var(--aia-primary); }
.aia-act.trava { border-color: #f3d19c; background: var(--aia-warn-wash); }
.aia-act.trava b { color: var(--aia-warn); }
.aia-act.erro { border-color: #f5b5b5; background: var(--aia-bad-wash); color: var(--aia-bad); }
.aia-digitando { align-self: flex-start; font-size: 12px; color: var(--aia-muted); padding: 2px 6px; }
.aia-chatform { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--aia-border); background: var(--aia-card); border-radius: 0 0 var(--aia-rs) var(--aia-rs); }
.aia-chatform input { flex: 1; min-width: 0; }
.aia-chatbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--aia-muted); }
.aia-scen { display: flex; flex-direction: column; gap: 8px; }
.aia-sc { border: 1px solid var(--aia-border); border-radius: var(--aia-rs); padding: 10px; background: var(--aia-card); }
.aia-sc .aia-h { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.aia-sc .aia-exp { font-size: 12.5px; color: var(--aia-muted); margin: 4px 0 6px; }
.aia-sc .aia-l { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.aia-sc.okk { border-color: #a7e3bd; background: var(--aia-ok-wash); }
.aia-sc.nok { border-color: #f5b5b5; background: var(--aia-bad-wash); }

.aia-summary { border: 1px solid var(--aia-border); border-radius: var(--aia-rs); }
.aia-summary .aia-it { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--aia-border); font-size: 13px; align-items: start; }
.aia-summary .aia-it:first-child { border-top: 0; }
.aia-summary .aia-k { color: var(--aia-muted); }
@media (max-width: 560px) { .aia-summary .aia-it { grid-template-columns: minmax(0, 1fr) auto; } .aia-summary .aia-k { grid-column: 1 / -1; } }
details.aia-prompt { margin-top: 14px; border: 1px solid var(--aia-border); border-radius: var(--aia-rs); }
details.aia-prompt summary { cursor: pointer; padding: 10px 12px; font-weight: 600; }
details.aia-prompt pre { margin: 0; padding: 12px; border-top: 1px solid var(--aia-border); white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; max-height: 420px; overflow: auto; background: #fbfbfc; }

/* lista de agentes no celular: com o botao "Testar" os 3 botoes nao cabem ao lado do nome; descem para a linha de baixo */
@media (max-width: 600px) {
  #page-agent-pro .template-card { flex-wrap: wrap; gap: 12px; }
  #page-agent-pro .template-actions { flex-wrap: wrap; }
}

/* modal do teste de agente ja salvo */
.aia-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.aia-modal .aia-dialog { background: var(--bg-card, #fff); border-radius: var(--radius, 12px); width: min(720px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0, 0, 0, .15); }
.aia-modal .aia-dh { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border, #e4e4e7); }
.aia-modal .aia-dh h3 { font-size: 16px; margin: 0; }
.aia-modal .aia-db { padding: 14px 16px; overflow-y: auto; }
.aia-modal .aia-x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-muted, #6c757d); padding: 4px 8px; }
.aia-modal .aia-chat { height: min(460px, calc(100vh - 220px)); }
@media (prefers-reduced-motion: reduce) { .aia *, .aia-modal * { transition: none !important; } }