/**
 * Theme CSS Variables
 * Sistema de variáveis CSS para customização de aparência do Typebot
 * Essas variáveis são sobrescritas dinamicamente pelo tema ativo
 */

:root {
  /* ========== HEADER ========== */
  --header-bg-start: #2fa518;
  --header-bg-end: #1e7b0f;
  --header-text: #ffffff;
  --header-gradient-direction: 135deg;
  --header-padding: 16px;

  /* Avatar */
  --avatar-bg: #65c9ff;
  --avatar-size: 48px;
  --avatar-border-radius: 50%; /* circle, rounded: 12px, square: 0 */

  /* Status online */
  --status-color: #22c55e;
  --status-size: 12px;

  /* ========== BUBBLES (MENSAGENS) ========== */
  /* Bot */
  --bubble-bot-bg: #d7fee4;
  --bubble-bot-text: #1a1a1a;
  --bubble-bot-shadow: none;

  /* Usuário */
  --bubble-user-bg: #2fa518;
  --bubble-user-text: #ffffff;
  --bubble-user-shadow: none;

  /* Geral */
  --bubble-border-radius: 18px;
  --bubble-max-width: 85%;
  --bubble-padding: 12px 16px;
  --bubble-gap: 8px;

  /* ========== CONTAINER DO CHAT ========== */
  --chat-bg: #ffffff;
  --chat-bg-pattern: none; /* url() para padrão de fundo */
  --chat-max-width: 420px;
  --chat-max-height: 700px;
  --chat-border-radius: 20px;
  --chat-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  --chat-border: none;

  /* ========== INPUT AREA ========== */
  --input-bg: #f8fafc;
  --input-border: #e2e8f0;
  --input-text: #1a1a1a;
  --input-placeholder: #9ca3af;
  --input-border-radius: 12px;
  --input-height: 48px;
  --input-padding: 12px 16px;

  /* ========== BOTÕES ========== */
  --button-bg: #2fa518;
  --button-text: #ffffff;
  --button-hover: #1e7b0f;
  --button-border-radius: 12px;
  --button-padding: 12px 24px;
  --button-shadow: 0 2px 8px rgba(47, 165, 24, 0.3);

  /* Botões secundários/outline */
  --button-secondary-bg: transparent;
  --button-secondary-text: #2fa518;
  --button-secondary-border: #2fa518;

  /* ========== TIPOGRAFIA ========== */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 15px;
  --font-size-small: 13px;
  --font-size-large: 17px;
  --font-weight: 400;
  --font-weight-bold: 600;
  --line-height: 1.5;

  /* ========== WIDGETS ESPECIAIS ========== */
  /* Verification Box */
  --widget-verification-bg: #f8fafc;
  --widget-verification-border: #e2e8f0;
  --widget-verification-text: #1a1a1a;
  --widget-verification-label: #6b7280;
  --widget-verification-icon: #22c55e;

  /* Analysis Box */
  --widget-analysis-bg-start: #22c55e;
  --widget-analysis-bg-end: #4ade80;
  --widget-analysis-text: #ffffff;

  /* Credit Slider */
  --widget-slider-bg: #f0fdf4;
  --widget-slider-track: #dcfce7;
  --widget-slider-fill: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  --widget-slider-thumb: #ffffff;
  --widget-slider-text: #1a1a1a;

  /* Receipt Box */
  --widget-receipt-bg: #ffffff;
  --widget-receipt-border: #e5e7eb;
  --widget-receipt-header: #f3f4f6;
  --widget-receipt-text: #1a1a1a;
  --widget-receipt-total: #16a34a;

  /* ========== CORES AUXILIARES ========== */
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  /* ========== ANIMAÇÕES ========== */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ========== DARK MODE OVERRIDE ========== */
/* Aplicado quando o tema tem chatBg escuro */
.theme-dark {
  --bubble-bot-bg: #2a2a3e;
  --bubble-bot-text: #e0e0e0;
  --widget-verification-bg: #1a1a2e;
  --widget-verification-border: #3a3a4e;
  --widget-verification-text: #e0e0e0;
  --widget-verification-label: #9ca3af;
  --widget-receipt-bg: #1a1a2e;
  --widget-receipt-border: #3a3a4e;
  --widget-receipt-header: #2a2a3e;
  --widget-receipt-text: #e0e0e0;
}

/* ========== WHATSAPP PATTERN ========== */
.chat-bg-pattern-whatsapp {
  --chat-bg-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4d4d4' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}