/* FASE 1: FALLBACK OTIMIZADO - Fontes de sistema para performance máxima */
/* Removendo web fonts para eliminar FOIT/FOUT e reduzir FCP drasticamente */

@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes shimmer {
  0% { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}

@keyframes slide-in-bottom {
  0% { 
    transform: translateY(100%);
    opacity: 0;
  }
  100% { 
    transform: translateY(0);
    opacity: 1;
  }
}

/* ANIMAÇÕES PARA CHAT MELHORADAS - WHATSAPP STYLE */
@keyframes typingDot {
  0%, 60%, 100% { 
    opacity: 0.4;
    transform: scale(1);
  }
  30% { 
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes messageSlideIn {
  0% { 
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  100% { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes chatButtonHover {
  0% { transform: scale(1); }
  100% { transform: scale(1.02); }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
    opacity: 0.5;
  }
  40% { 
    transform: scale(1);
    opacity: 1;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;

    /* Adicionando variáveis HSL para cores da marca para uso em AIVisualEffects */
    --brand-primary-hsl: 225 73% 57%; /* Exemplo: Azul (#2E5BFF) */
    --brand-secondary-hsl: 256 100% 74%; /* Exemplo: Roxo (#9C7CFF) */
    --brand-pink-hsl: 321 100% 71%; /* Exemplo: Rosa (#FF6BDE) */

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    
    /* Adicionando variáveis HSL para cores da marca para tema escuro, se necessário */
    --brand-primary-hsl: 225 73% 57%;
    --brand-secondary-hsl: 256 100% 74%;
    --brand-pink-hsl: 321 100% 71%;

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold;
  }

  .container {
    @apply px-4 md:px-8 mx-auto;
  }
}

@layer components {
  .btn-primary {
    @apply bg-brand-pink text-white font-medium py-3 px-6 rounded-lg hover:opacity-90 transition-all;
  }
  
  .btn-secondary {
    @apply bg-transparent border-2 border-brand-primary text-brand-primary font-medium py-3 px-6 rounded-lg hover:bg-brand-primary/5 transition-all;
  }
  
  .section-padding {
    @apply py-12 md:py-20;
  }

  /* ========== WHATSAPP CHAT WIDGET STYLES - VERSÃO OTIMIZADA ========== */
  
  .chatWidget {
    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }

  .chatHeader {
    background: #075E54;
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .chatAvatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    background: #128C7E;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 20px;
    position: relative;
    border: 2px solid white;
    flex-shrink: 0;
    overflow: hidden;
  }

  .chatAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .chatAvatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    background: #25D366;
    border: 2px solid white;
    border-radius: 50%;
  }

  .chatHeaderText {
    flex: 1;
    min-width: 0;
  }

  .chatHeaderText h3 {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }

  .chatHeaderText p {
    margin: 2px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 1.2;
  }

  /* Melhorias nas mensagens - LAYOUT OTIMIZADO */
  .chatMessages {
    padding: 0 8px;
    background: #e5ddd5;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29-22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    flex: 1;
    overflow-y: auto;
    max-width: 100%;
  }

  .chatMessage {
    margin-bottom: 12px;
    max-width: 85%;
    animation: fadeIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: auto;
  }

  .chatMessage.bot {
    align-self: flex-start;
  }

  .chatMessage.user {
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
  }

  .chatMessageContent {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    word-wrap: break-word;
    white-space: pre-wrap;
    min-height: 20px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .bot .chatMessageContent {
    background: white;
    border-top-left-radius: 2px;
    color: #111b21;
  }

  .user .chatMessageContent {
    background: #d9fdd3;
    border-top-right-radius: 2px;
    color: #111b21;
  }

  .chatMessageTime {
    font-size: 11px;
    color: #667781;
    margin-top: 4px;
    text-align: right;
    padding: 0 6px;
  }

  .bot .chatMessageTime {
    text-align: left;
  }

  /* Input area - LAYOUT OTIMIZADO */
  .chatInputContainer {
    padding: 16px 8px;
    background: #f0f2f5;
    border-top: 1px solid #e9edef;
    width: 100%;
    box-sizing: border-box;
  }

  .chatInputWrapper {
    display: flex;
    background: white;
    border-radius: 8px;
    padding: 10px 16px;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    width: 100%;
    max-width: 100%;
  }

  .chatInputField {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 0;
    font-size: 14px;
    background: transparent;
    min-height: 20px;
    resize: none;
    line-height: 1.4;
  }

  .chatSendButton {
    background: transparent;
    border: none;
    color: #008069;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
  }

  .chatSendButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .chatSendButton:not(:disabled):hover {
    background: rgba(0, 128, 105, 0.1);
  }

  /* Typing indicator - MELHORADO */
  .chatTypingIndicator {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border-top-left-radius: 2px;
    width: fit-content;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    margin-bottom: 12px;
  }

  .chatTypingIndicator span {
    width: 6px;
    height: 6px;
    background: #9e9e9e;
    border-radius: 50%;
    display: inline-block;
  }

  .chatTypingIndicator .typing-dot-1 {
    animation: bounce 1.4s infinite ease-in-out both;
    animation-delay: 0s;
  }

  .chatTypingIndicator .typing-dot-2 {
    animation: bounce 1.4s infinite ease-in-out both;
    animation-delay: 0.2s;
  }

  .chatTypingIndicator .typing-dot-3 {
    animation: bounce 1.4s infinite ease-in-out both;
    animation-delay: 0.4s;
  }

  /* Scrollbar personalizada */
  .chatMessages::-webkit-scrollbar {
    width: 6px;
  }

  .chatMessages::-webkit-scrollbar-track {
    background: transparent;
  }

  .chatMessages::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  /* Botões do chat - LAYOUT APRIMORADO */
  .chatButtons {
    padding: 16px 8px;
    border-top: 1px solid #e9edef;
    background: #f0f2f5;
    gap: 12px;
    display: flex;
    flex-direction: column;
  }

  .chatActionButton {
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
  }

  .chatActionButton.whatsapp {
    background: #25D366;
    color: white;
  }

  .chatActionButton.whatsapp:hover {
    background: #20BA5A;
    transform: translateY(-1px);
  }

  .chatActionButton.schedule {
    background: white;
    color: #075E54;
    border: 2px solid #128C7E;
  }

  .chatActionButton.schedule:hover {
    background: #f0f9ff;
    transform: translateY(-1px);
  }

  /* RESPONSIVIDADE APRIMORADA */
  @media (max-width: 480px) {
    .chatWidget {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      border-radius: 0;
      padding: 0 12px;
    }
    
    .chatMessages {
      padding: 0 4px;
    }
    
    .chatMessage {
      max-width: 90%;
    }
    
    .chatMessageContent {
      padding: 10px 14px;
    }
    
    .chatInputContainer {
      padding: 12px 4px;
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    .chatButtons {
      padding: 12px 4px;
    }
    
    .chatHeader {
      padding: 16px 0;
    }
    
    .chatAvatar {
      width: 44px;
      height: 44px;
      min-width: 44px;
      min-height: 44px;
      font-size: 18px;
    }
    
    .chatAvatar::after {
      width: 12px;
      height: 12px;
    }
  }

  /* ========== REGRAS DEFINITIVAS PARA PARAR WHATSAPP DE PISCAR ========== */
  
  /* REGRA 1: REMOVER TODAS AS ANIMAÇÕES PULSE DE ELEMENTOS WHATSAPP */
  [class*="whatsapp"] *,
  [data-whatsapp] *,
  .floating-whatsapp *,
  button[aria-label*="WhatsApp"] *,
  button[aria-label*="whatsapp"] *,
  [class*="WhatsApp"] *,
  [class*="chat"] * {
    animation: none !important;
  }

  /* REGRA 2: FORÇA BADGE DO WHATSAPP A SER ESTÁTICO */
  button[aria-label*="WhatsApp"] .absolute,
  button[aria-label*="whatsapp"] .absolute,
  [class*="whatsapp"] .absolute,
  [class*="chat"] .absolute {
    animation: none !important;
    transform: none !important;
  }

  /* REGRA 3: COMPONENTES ESPECÍFICOS DE CHAT */
  .chat-messages *,
  .chat-buttons *,
  .chat-input *,
  .chat-header *,
  .cora-chat *,
  .floating-whatsapp-button * {
    animation: none !important;
  }

  /* REGRA 5: OVERRIDE COMPLETO PARA QUALQUER PULSE RESTANTE */
  .animate-pulse,
  [class*="pulse"] {
    animation: none !important;
  }

  /* ================================================================== */

  /* Optimized animations for better CLS and performance */
  .smart-card {
    @apply relative overflow-hidden;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
  
  .smart-card:hover {
    transform: scale(1.01);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .smart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(46, 91, 255, 0.08), transparent);
    transition: left 0.4s ease-out;
  }

  .smart-card:hover::before {
    left: 100%;
  }

  .connection-line {
    position: absolute;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, #2E5BFF, #9C7CFF);
    transition: height 0.6s ease-in-out;
    opacity: 0;
  }

  .smart-card:hover .connection-line {
    height: 80px;
    opacity: 1;
  }

  /* Optimized motion for better performance */
  .motion-button {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    transform-origin: center;
  }

  .motion-button:hover {
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(46, 91, 255, 0.12);
  }

  .motion-icon {
    transition: transform 0.15s ease-out, filter 0.15s ease-out;
  }

  .motion-icon:hover {
    transform: scale(1.03);
    filter: drop-shadow(0 0 3px rgba(46, 91, 255, 0.25));
  }

  .smooth-rise {
    animation: smoothRise 0.6s ease-out;
  }

  .data-flow {
    position: relative;
    overflow: hidden;
  }

  .data-flow::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2E5BFF, transparent);
    animation: dataFlow 2.5s infinite;
  }
}

/* Keyframes para animações otimizadas - removidas animações não utilizadas */
@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.5; }
  25% { transform: translateY(-12px) translateX(6px); opacity: 0.9; }
  50% { transform: translateY(-6px) translateX(-6px); opacity: 1; }
  75% { transform: translateY(-15px) translateX(4px); opacity: 0.7; }
}