/* ==========================================================================
   Agent Builder v2 — wizard de 6 etapas
   ========================================================================== */

/* Topbar meta */
.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Bloqueia scroll do body no wizard — só o painel rola */
body.cz-ab { overflow: hidden; }
@media (max-width: 900px) {
  body.cz-ab { overflow: auto; }
}
.ab-draft-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  border-radius: 999px;
}

/* Layout principal — stepper fixo, só o painel rola */
.ab2-main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  height: calc(100vh - 72px);
  overflow: hidden;
}
@media (max-width: 900px) {
  .ab2-main {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }
}

/* Stepper — fixo ocupando a coluna inteira */
.ab2-stepper {
  padding: 32px 22px;
  border-right: 1px solid var(--border);
  background: var(--card);
  height: 100%;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .ab2-stepper {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 16px 14px;
  }
}
.ab2-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: step;
}
@media (max-width: 900px) {
  .ab2-steps {
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
  }
}
.ab2-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
  color: var(--muted);
  position: relative;
  user-select: none;
}
.ab2-step:hover {
  background: var(--hover-bg);
  color: var(--hover-fg);
  border-color: var(--hover-border);
}
.ab2-step.is-active {
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
  color: var(--fg);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.ab2-step.is-complete { color: var(--fg); }
.ab2-step-num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font: 700 13px/1 var(--font-mono);
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
}
.ab2-step.is-active .ab2-step-num {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}
.ab2-step.is-complete .ab2-step-num {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}
.ab2-step-body { display: flex; flex-direction: column; min-width: 0; }
.ab2-step-title {
  font: 600 13.5px/1.3 var(--font-body);
  letter-spacing: -0.005em;
}
.ab2-step-sub {
  font: 500 11.5px/1.3 var(--font-body);
  color: var(--muted);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .ab2-step { padding: 8px 10px; min-width: max-content; }
  .ab2-step-sub { display: none; }
}

/* Panel (conteúdo da etapa) — único elemento que rola */
.ab2-panel {
  padding: 40px clamp(20px, 4vw, 48px);
  padding-bottom: 60px;
  max-width: 880px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  height: 100%;
}
@media (max-width: 900px) {
  .ab2-panel {
    overflow-y: visible;
    height: auto;
  }
}
.ab2-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ab2-kicker {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
}
.ab2-title {
  font: 800 clamp(26px, 3.4vw, 34px)/1.1 var(--font-mono);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}
.ab2-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 680px;
}

/* ===== Etapa 1 — Cards de Preset ===== */
.ab2-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.ab2-preset-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  padding: 18px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color 140ms, transform 140ms, box-shadow 140ms, background 140ms;
  font-family: var(--font-body);
  color: inherit;
}
.ab2-preset-card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}
.ab2-preset-card.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.ab2-preset-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ab2-preset-ico {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.ab2-preset-title {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.ab2-preset-cat {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}
.ab2-preset-name {
  font: 700 15px/1.3 var(--font-body);
  color: var(--fg);
  margin-top: 4px;
}
.ab2-preset-tag {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.ab2-preset-tag--ready {
  background: color-mix(in srgb, var(--good) 14%, transparent);
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 35%, transparent);
}
.ab2-preset-tag--custom {
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--muted);
  border: 1px solid var(--border);
}
.ab2-preset-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.ab2-preset-caps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ab2-preset-caps li {
  font-size: 12.5px;
  color: var(--fg);
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}
.ab2-preset-caps li::before {
  content: '✓';
  color: var(--good);
  position: absolute;
  left: 0;
  font-weight: 700;
}
.ab2-preset-foot {
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--muted);
}
.ab2-preset-canais strong { color: var(--fg); font-weight: 700; }

/* Keyword form (Instagram preset) */
.ab2-preset-kw {
  margin-top: 20px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--primary) 4%, var(--card));
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ab2-kw-head h4 {
  font: 700 14px/1.3 var(--font-body);
  color: var(--fg);
  margin: 0 0 4px 0;
}
.ab2-kw-head p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.ab2-kw-list { display: flex; flex-direction: column; gap: 8px; }
.ab2-kw-row {
  display: grid;
  grid-template-columns: 160px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.ab2-kw-row input {
  font: 400 13.5px/1.4 var(--font-body);
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
  outline: none;
}
.ab2-kw-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}
.ab2-kw-del {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.ab2-kw-del:hover { background: var(--hover-bg); color: var(--hover-fg); }
@media (max-width: 700px) {
  .ab2-kw-row { grid-template-columns: 1fr 32px; }
  .ab2-kw-row input:first-child { grid-column: 1 / -1; }
}

/* ===== Etapa 6 — Resumo do canal escolhido ===== */
.ab2-canal-resumo {
  padding: 16px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab2-canal-resumo-head {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ab2-canal-resumo-ico { font-size: 28px; line-height: 1; }
.ab2-canal-resumo-label {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.2em;
  color: var(--muted);
  display: block;
  margin-bottom: 4px;
}
.ab2-canal-resumo-head strong { font: 700 14.5px/1.3 var(--font-body); color: var(--fg); }
.ab2-canal-resumo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab2-canal-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font: 600 11.5px/1 var(--font-mono);
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ab2-canal-resumo-edit {
  font: 600 12px/1 var(--font-body);
  color: var(--primary);
  text-decoration: none;
  align-self: flex-start;
}
.ab2-canal-resumo-edit:hover { text-decoration: underline; }
.ab2-canal-resumo-empty { font-size: 13px; color: var(--muted); margin: 0; }

/* Formulários genéricos */
.ab2-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ab2-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) { .ab2-grid2 { grid-template-columns: 1fr; } }
.ab2-field { display: flex; flex-direction: column; gap: 6px; }
.ab2-field label {
  font: 600 13px/1.3 var(--font-body);
  color: var(--fg);
}
.ab2-req { color: var(--primary); }
.ab2-hint {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}
.ab2-field input[type="text"],
.ab2-field input[type="email"],
.ab2-field textarea {
  font: 400 14px/1.5 var(--font-body);
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
  resize: vertical;
  width: 100%;
}
.ab2-field input:focus,
.ab2-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Chips (tom / emojis) */
.ab2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab2-chip {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font: 500 13px/1 var(--font-body);
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.ab2-chip:hover {
  background: var(--hover-bg);
  color: var(--hover-fg);
  border-color: var(--hover-border);
}
.ab2-chip.is-active {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}

/* Plan pill (etapa IA) */
.ab2-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  align-self: flex-start;
}
.ab2-plan-label {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.2em;
  color: var(--muted);
}
.ab2-plan-name {
  font: 700 13px/1 var(--font-mono);
  color: var(--primary);
}
.ab2-plan-sep { color: var(--muted); }
.ab2-plan-quota {
  font: 500 12.5px/1 var(--font-body);
  color: var(--fg);
}

/* LLM cards grid */
.ab2-llm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.ab2-llm-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: var(--card);
  cursor: pointer;
  transition: border-color 160ms, transform 160ms, background 160ms;
  position: relative;
  text-align: left;
  font-family: inherit;
}
.ab2-llm-card:hover {
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
  transform: translateY(-2px);
}
.ab2-llm-card.is-selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
  box-shadow: 0 8px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}
.ab2-llm-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ab2-llm-name {
  font: 700 16px/1.2 var(--font-mono);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.ab2-llm-vendor {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
}
.ab2-llm-tag {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  text-transform: uppercase;
  white-space: nowrap;
}
.ab2-llm-tag--velocidade { background: color-mix(in srgb, #06B6D4 16%, var(--card)); color: #06B6D4; border: 1px solid color-mix(in srgb, #06B6D4 32%, transparent); }
.ab2-llm-tag--economico { background: color-mix(in srgb, var(--good) 14%, var(--card)); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 28%, transparent); }
.ab2-llm-tag--recomendado { background: color-mix(in srgb, var(--primary) 16%, var(--card)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent); }
.ab2-llm-tag--multimodal { background: color-mix(in srgb, #8B5CF6 16%, var(--card)); color: #8B5CF6; border: 1px solid color-mix(in srgb, #8B5CF6 32%, transparent); }
.ab2-llm-tag--avancado { background: color-mix(in srgb, #3B82F6 16%, var(--card)); color: #3B82F6; border: 1px solid color-mix(in srgb, #3B82F6 32%, transparent); }
.ab2-llm-tag--premium { background: color-mix(in srgb, #F59E0B 16%, var(--card)); color: #F59E0B; border: 1px solid color-mix(in srgb, #F59E0B 36%, transparent); }
.ab2-llm-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.ab2-llm-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ab2-llm-stat {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  font-family: var(--font-mono);
}
.ab2-llm-stat-label { color: var(--muted); }
.ab2-llm-stat-value { color: var(--fg); font-weight: 600; }
.ab2-llm-check {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--card), 0 4px 12px var(--primary-glow);
  z-index: 2;
}
.ab2-llm-card.is-selected .ab2-llm-check { display: inline-flex; }

/* Treinamentos */
.ab2-train-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  align-self: flex-start;
}
.ab2-train-tab {
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: 500 13px/1 var(--font-body);
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.ab2-train-tab:hover { color: var(--fg); }
.ab2-train-tab.is-active {
  background: var(--card);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}
.ab2-train-panel { display: flex; flex-direction: column; gap: 16px; }
.ab2-train-panel[hidden] { display: none !important; }

.ab2-drop {
  display: block;
  padding: 32px 20px;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: var(--card);
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
}
.ab2-drop:hover,
.ab2-drop.is-dragover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}
.ab2-drop-body { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.ab2-drop-ico { font-size: 28px; }
.ab2-drop-title { font: 600 14.5px/1.3 var(--font-body); color: var(--fg); }
.ab2-drop-sub { font-size: 12.5px; color: var(--muted); }
.ab2-audio-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.ab2-train-actions { display: flex; justify-content: flex-end; }
.ab2-train-list-block { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ab2-train-list-title {
  font: 700 11.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ab2-train-count {
  font: 600 11px/1 var(--font-mono);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}
.ab2-train-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ab2-train-empty {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}
.ab2-train-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.ab2-train-item-ico { font-size: 18px; }
.ab2-train-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ab2-train-item-name { font: 600 13.5px/1.3 var(--font-body); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab2-train-item-sub { font-size: 12px; color: var(--muted); }
.ab2-train-item-remove {
  padding: 6px 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms;
  font: 500 12px/1 var(--font-body);
}
.ab2-train-item-remove:hover {
  background: var(--hover-bg);
  color: var(--bad);
  border-color: var(--hover-border);
}

/* Integrações */
.ab2-section-title {
  font: 700 11.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 0;
}
.ab2-section-desc {
  font-size: 13px;
  color: var(--muted);
  margin: -6px 0 0;
}
.ab2-canais {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.ab2-canal-card {
  display: block;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  cursor: pointer;
  transition: border-color 160ms, background 160ms;
  overflow: hidden;
}
.ab2-canal-card:hover { border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); }
.ab2-canal-card input[type="checkbox"] { display: none; }
.ab2-canal-card:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}
.ab2-canal-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.ab2-canal-ico { font-size: 28px; flex-shrink: 0; }
.ab2-canal-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ab2-canal-name { font: 700 15px/1.2 var(--font-mono); color: var(--fg); }
.ab2-canal-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.ab2-canal-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ab2-canal-card:has(input:checked) .ab2-canal-check {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
}
.ab2-canal-extra {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px dashed var(--border);
  margin-top: 6px;
  padding-top: 14px;
}
.ab2-canal-video {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg);
  font: 500 13px/1.3 var(--font-body);
  transition: background 140ms;
}
.ab2-canal-video:hover { background: var(--hover-bg); }
.ab2-play {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding-left: 2px;
}

.ab2-sugest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.ab2-sugest-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ab2-sugest-name {
  font: 600 13.5px/1.3 var(--font-body);
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ab2-sugest-ico { font-size: 18px; }
.ab2-sugest-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Bloco "Recomendadas pela nossa IA" */
.ab2-ai-reco {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--card)) 0%, var(--card) 100%);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
}
.ab2-ai-reco-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ab2-ai-reco-ico {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.ab2-ai-reco-title {
  font: 700 14px/1.3 var(--font-body);
  color: var(--fg);
  margin: 0 0 4px 0;
}
.ab2-ai-reco-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.ab2-ai-reco #btn-ai-reco { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; }
.ab2-ai-reco-out {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  font: 400 13.5px/1.65 var(--font-body);
  color: var(--fg);
  white-space: pre-wrap;
}
.ab2-ai-reco-out--loading {
  color: var(--muted);
  font-style: italic;
}

.ab2-custom-int { display: flex; flex-direction: column; gap: 10px; }
.ab2-custom-int textarea {
  font: 400 14px/1.5 var(--font-body);
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  resize: vertical;
}
.ab2-custom-int textarea:focus { border-color: var(--primary); }
.ab2-custom-int-out {
  padding: 14px 16px;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre-wrap;
}

/* Testar — summary + chat */
.ab2-test-summary {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.ab2-test-sum-item { display: flex; flex-direction: column; gap: 3px; }
.ab2-test-sum-label {
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.ab2-test-sum-value {
  font: 600 13.5px/1.3 var(--font-body);
  color: var(--fg);
}

.ab2-chat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  height: 640px;
  min-height: 480px;
  max-height: 78vh;
}
.ab2-chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ab2-msg { max-width: 80%; }
.ab2-msg-text { font-size: 15px; line-height: 1.6; }
.ab2-msg-bubble { padding: 12px 16px; }
.ab2-chat-composer textarea { font-size: 15px; padding: 10px 12px; min-height: 40px; }
.ab2-msg { display: flex; gap: 10px; max-width: 88%; }
.ab2-msg--user { margin-left: auto; flex-direction: row-reverse; }
.ab2-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ab2-msg--user .ab2-msg-avatar { background: var(--primary); color: var(--bg); }
.ab2-msg-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ab2-msg--user .ab2-msg-bubble {
  background: var(--primary);
  color: var(--bg);
}
.ab2-msg-name {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ab2-msg--user .ab2-msg-name { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.ab2-msg-text {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ab2-chat-composer {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--card);
}
.ab2-chat-composer textarea {
  flex: 1;
  font: 400 14px/1.45 var(--font-body);
  color: var(--fg);
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  padding: 8px 10px;
  max-height: 120px;
}
.ab2-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 0;
  background: var(--primary);
  color: var(--bg);
  cursor: pointer;
  transition: background 140ms;
}
.ab2-chat-send:hover { background: var(--primary-dark); }
.ab2-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

.ab2-finish {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.ab2-finish-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.ab2-finish-note strong { color: var(--fg); }

/* Botões genéricos */
.ab2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font: 600 13.5px/1 var(--font-body);
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms, transform 120ms;
}
.ab2-btn:hover {
  background: var(--hover-bg);
  color: var(--hover-fg);
  border-color: var(--hover-border);
}
.ab2-btn--primary {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}
.ab2-btn--primary:hover { background: var(--primary-light); color: var(--bg); border-color: var(--primary-light); box-shadow: 0 0 28px var(--primary-glow); transform: translateY(-1px); }
.ab2-btn--ghost { background: transparent; }
.ab2-btn--big { padding: 14px 26px; font-size: 14.5px; border-radius: 12px; }
.ab2-btn--small { padding: 8px 14px; font-size: 12.5px; }
.ab2-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Rodapé de navegação entre etapas */
.ab2-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}
.ab2-nav-left { display: flex; gap: 10px; }
.ab2-nav-right { display: flex; gap: 10px; }

/* Estado "digitando…" no chat de teste */
.ab2-msg--pending .ab2-msg-text {
  opacity: 0.6;
  font-style: italic;
}