/* ============================================================
   Tokens locais do modulo Chatbot (builder + listagem)
   Linguagem "Bee refinada": neutros frios, azul royal como unico
   acento, raio 6px, elevacao por hairline.
   Mesmos valores da fundacao global pendente (stash de app.css);
   escopados ao modulo ate ela ser aplicada. Quando os tokens
   globais chegarem ao :root, DELETAR este bloco — as utilities
   semanticas (border-border, bg-muted, rounded-lg...) passam a
   resolver os valores do :root sem nenhuma outra mudanca.
   ============================================================ */
.chatbot-builder,
.chatbot-list-page {
  --primary: 224 78% 52%;
  --ring: 224 78% 52%;
  --foreground: 224 25% 12%;
  --muted-foreground: 220 9% 46%;
  --border: 220 13% 91%;
  --input: 220 13% 89%;
  --muted: 220 14% 96%;
  --secondary: 220 14% 96%;
  --destructive: 0 72% 51%;
  --success: 152 60% 38%;
  --warning: 35 92% 44%;
  --radius: 0.375rem;
  /* Elevacao fria (tinta rgb(16 24 40) = slate). Nomes proprios
     --cb-* pra nao colidir com os --shadow-* da fundacao global. */
  --cb-shadow-xs: 0 1px 2px 0 rgb(16 24 40 / 0.04);
  --cb-shadow-sm: 0 1px 2px 0 rgb(16 24 40 / 0.04), 0 1px 3px 0 rgb(16 24 40 / 0.04);
  --cb-shadow-md: 0 2px 4px -1px rgb(16 24 40 / 0.05), 0 4px 8px -2px rgb(16 24 40 / 0.06);
  --cb-shadow-lg: 0 4px 8px -2px rgb(16 24 40 / 0.06), 0 12px 24px -6px rgb(16 24 40 / 0.10);
}

/* Fundo frio do modulo (mesmo do canvas do builder). O header sticky usa o
   mesmo fundo para o conteudo nao aparecer por baixo ao rolar. */
.chatbot-list-page[data-v-030d30bd] {
  background: #f8f9fb;
}
.chatbot-page-header[data-v-030d30bd] {
  background: #f8f9fb;
}

/* PageHeader dentro da barra sticky: remove a margem inferior propria (mb-6)
   para colar na borda inferior do header. */
.chatbot-page-header[data-v-030d30bd] .mb-6 {
  margin-bottom: 0;
}

/* Formulario do sheet de criacao. */
.chatbot-create-form[data-v-030d30bd] {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}
.chatbot-create-form__field[data-v-030d30bd] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chatbot-create-form__label[data-v-030d30bd] {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
}
.chatbot-create-form__label--required[data-v-030d30bd]::after {
  content: ' *';
  color: #dc2626;
}
.chatbot-create-form__textarea[data-v-030d30bd] {
  width: 100%;
  min-height: 84px;
  padding: 8px 12px;
  border: 1px solid hsl(220 13% 89%);
  border-radius: 8px;
  background: #fff;
  font-size: 0.875rem;
  color: #1e293b;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chatbot-create-form__textarea[data-v-030d30bd]:focus {
  border-color: hsl(224 78% 52%);
  box-shadow: 0 0 0 3px hsl(224 78% 52% / 0.1);
}
.chatbot-create-form__textarea[data-v-030d30bd]::-moz-placeholder {
  color: #94a3b8;
}
.chatbot-create-form__textarea[data-v-030d30bd]::placeholder {
  color: #94a3b8;
}
.chatbot-create-footer[data-v-030d30bd] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid hsl(220 13% 93%);
}
@keyframes fade-in-030d30bd {
from {
    opacity: 0;
    transform: translateY(4px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.animate-in[data-v-030d30bd] {
  animation: fade-in-030d30bd 0.2s ease-out backwards;
}