/* ---------- Builder do chatbot — complementos (sem box-shadow!) ---------- */

/* Nome inline no cabeçalho */
.bot-name-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bot-name-input { width: min(360px, 100%); font-weight: 700; font-size: 16px; }

/* Cartão raiz destacado */
.bot-card--root { background: #fbfefc; }
.bot-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bot-start-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-tonal); color: var(--green-strong);
  border: 1px solid var(--green);
  border-radius: var(--r-full);
  padding: 4px 13px;
  font-size: 12.5px; font-weight: 700;
}

/* Prefixo "quando tocar em:" do rótulo da opção */
.bot-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bot-when__pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-tonal); color: var(--primary);
  border-radius: var(--r-full);
  padding: 5px 12px;
  font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.bot-when__pill svg { width: 13px; height: 13px; }
.bot-when .input { flex: 1; min-width: 150px; width: auto; }

/* Link que revela as variações da mensagem */
.bot-reveal {
  display: inline-flex; align-items: center;
  color: var(--primary);
  font-size: 13px; font-weight: 650;
  cursor: pointer;
  user-select: none;
}
.bot-reveal:hover { text-decoration: underline; }
.bot-reveal input { position: absolute; opacity: 0; pointer-events: none; }

/* Respiro dentro dos cartões */
.bot-card form .field { margin-bottom: 12px; }
.bot-card form { margin-bottom: 2px; }
.bot-tree > .bot-step > .bot-card { margin-bottom: 4px; }

/* Coluna do celular: sticky no wrapper para a legenda acompanhar */
#bot-phone { position: sticky; top: 24px; }
#bot-phone .phone-wrap { position: static; }
.bot-phone-legend { text-align: center; font-size: 12.5px; color: var(--text-2); margin-top: 10px; }
@media (max-width: 1100px) { .split #bot-phone { display: none; } }