/* Customização do chat n8n para PillAI */

/* Container principal do chat */
.n8n-chat {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Header do chat */
.n8n-chat-header {
  background: linear-gradient(135deg, hsl(221.2 83.2% 53.3%), hsl(262.1 83.3% 57.8%));
  padding: 1.5rem;
  border-radius: 1.5rem 1.5rem 0 0;
}

/* Título e subtítulo do header */
.n8n-chat-header h3,
.n8n-chat-header-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.n8n-chat-header p,
.n8n-chat-header-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 400;
}

/* Mensagens do usuário */
.n8n-chat-message.user {
  background: linear-gradient(135deg, hsl(221.2 83.2% 53.3%), hsl(262.1 83.3% 57.8%));
  color: white;
  border-radius: 1rem 1rem 0 1rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mensagens do bot */
.n8n-chat-message.bot,
.n8n-chat-message.assistant {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem 1rem 1rem 0;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  line-height: 1.6;
}

/* Mensagem de boas-vindas / inicial */
.n8n-chat-message.bot:first-child,
.n8n-chat-message.assistant:first-child {
  background: linear-gradient(135deg, rgba(66, 99, 235, 0.1), rgba(168, 85, 247, 0.1));
  border: 1px solid hsla(221.2, 83.2%, 53.3%, 0.3);
  font-weight: 500;
}

/* Input de mensagem */
.n8n-chat-input {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: hsl(var(--foreground));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.n8n-chat-input:focus {
  outline: none;
  border-color: hsl(221.2 83.2% 53.3%);
  box-shadow: 0 0 0 3px hsla(221.2, 83.2%, 53.3%, 0.1);
}

/* Botão de enviar */
.n8n-chat-send-button {
  background: linear-gradient(135deg, hsl(221.2 83.2% 53.3%), hsl(262.1 83.3% 57.8%));
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.n8n-chat-send-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Área de mensagens */
.n8n-chat-messages {
  background: hsl(var(--background));
  padding: 1rem;
}

/* Scrollbar customizada */
.n8n-chat-messages::-webkit-scrollbar {
  width: 8px;
}

.n8n-chat-messages::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 4px;
}

.n8n-chat-messages::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground));
  border-radius: 4px;
}

.n8n-chat-messages::-webkit-scrollbar-thumb:hover {
  background: hsl(221.2 83.2% 53.3%);
}

/* Loading indicator */
.n8n-chat-loading {
  color: hsl(221.2 83.2% 53.3%);
}

/* Stronger overrides scoped to the embedded container */
#n8n-chat-container {
  /* Theme via CSS variables (preferred by n8n chat) */
  --chat--color-primary: hsl(221.2 83.2% 53.3%);
  --chat--color-secondary: hsl(262.1 83.3% 57.8%);
  --chat--header--background: linear-gradient(135deg, hsl(221.2 83.2% 53.3%), hsl(262.1 83.3% 57.8%));
  --chat--header--color: #ffffff;
  --chat--message--bot--background: hsl(var(--card));
  --chat--message--bot--color: hsl(var(--foreground));
  --chat--message--user--background: hsl(221.2 83.2% 53.3%);
  --chat--message--user--color: #ffffff;
  --chat--body--background: hsl(var(--background));
  --chat--footer--background: hsl(var(--background));
  --chat--window--border-radius: 1.5rem;
  --chat--message--border-radius: 1rem;
  --chat--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* High-specificity fallbacks (in case variables are not picked) */
#n8n-chat-container .n8n-chat-header {
  background: linear-gradient(135deg, hsl(221.2 83.2% 53.3%), hsl(262.1 83.3% 57.8%)) !important;
  color: #ffffff !important;
  padding: 1.5rem !important;
  border-radius: 1.5rem 1.5rem 0 0 !important;
}

#n8n-chat-container .n8n-chat-header h3,
#n8n-chat-container .n8n-chat-header-title {
  color: #ffffff !important;
}

#n8n-chat-container .n8n-chat-header p,
#n8n-chat-container .n8n-chat-header-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
}

#n8n-chat-container .n8n-chat-message.user {
  background: linear-gradient(135deg, hsl(221.2 83.2% 53.3%), hsl(262.1 83.3% 57.8%)) !important;
  color: #ffffff !important;
  border-radius: 1rem 1rem 0 1rem !important;
}

#n8n-chat-container .n8n-chat-message.bot,
#n8n-chat-container .n8n-chat-message.assistant {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

#n8n-chat-container .n8n-chat-input {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

#n8n-chat-container .n8n-chat-send-button {
  background: linear-gradient(135deg, hsl(221.2 83.2% 53.3%), hsl(262.1 83.3% 57.8%)) !important;
  color: #ffffff !important;
}

#n8n-chat-container .n8n-chat-messages {
  background: hsl(var(--background)) !important;
}