@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

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

/* =========================================================
   BASE — DESIGN TOKENS (SIEMPRE AQUÍ)
   ========================================================= */
@layer base {
  .chat-widget {
    /* Design tokens (light) */
    --bgcolor: 220 25% 97%;
    --background: 10 25% 97%;
    --foreground: 220 25% 10%;
    --card: 0 0% 100%;
    --card-foreground: 220 25% 10%;
    --primary: 0 0% 12%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 100%;             /* blanco */
    --secondary-foreground: 0 0% 20%;
    --muted: 0 0% 92%;
    --muted-foreground: 0 0% 45%;
    --border: 0 0% 85%;
    --brand-red: 0 0% 12%;
    --brand-light-red: 0 0% 22%;
    /* --radius: 0.75rem; */
  }

  /* DARK MODE — solo dentro del widget */
  .chat-widget.dark {
    --background: 220 25% 8%;
    --foreground: 220 15% 95%;
    --card: 220 25% 12%;
    --card-foreground: 220 15% 95%;
    --primary: 0 0% 96%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 18%;
    --secondary-foreground: 0 0% 85%;
    --muted: 0 0% 16%;
    --muted-foreground: 0 0% 65%;
    --border: 0 0% 28%;
    --brand-red: 0 0% 96%;
    --brand-light-red: 0 0% 28%;
  }
}

/* =========================================================
   COMPONENTS — ESTILOS DEL WIDGET
   ========================================================= */
@layer components {
  .chat-widget {
    font-family: "Inter", system-ui, sans-serif;
    color: hsl(var(--foreground));
    background-color: hsl(var(--background));
  }

  /* Normalización segura (no rompe Liferay / Clay) */
  .chat-widget *,
  .chat-widget *::before,
  .chat-widget *::after {
    box-sizing: border-box;
  }

  /* Neutraliza estilos heredados */
  .chat-widget button {
    background: none;
    border: none;
  }

  /* Typing indicator */
  @keyframes typing {
    0% {
      transform: translateY(0);
      opacity: 0.4;
    }
    20% {
      transform: translateY(-6px);
      opacity: 1;
    }
    40% {
      transform: translateY(0);
      opacity: 0.6;
    }
    100% {
      transform: translateY(0);
      opacity: 0.4;
    }
  }

  .typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: hsl(var(--muted-foreground));
    animation: typing 1.4s infinite ease-in-out;
  }

  .typing-dot.delay-1 {
    animation-delay: 0.2s;
  }

  .typing-dot.delay-2 {
    animation-delay: 0.4s;
  }
}