body { font-family: 'Poppins', sans-serif; }

    .glass-nav {
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(229,231,235,0.5);
    }
    .survey-card { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
    .survey-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);
    }
    @keyframes fadeIn {
      from { opacity:0; transform:scale(0.98); }
      to   { opacity:1; transform:scale(1); }
    }
    .animate-fadeIn { animation: fadeIn 0.3s ease-out; }

    /* ══ PANEL — controlado 100% por JS, sin Tailwind ══ */
    #ai-panel {
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 100%;
      max-width: 430px;
      background: #ffffff;
      z-index: 99998;
      box-shadow: -4px 0 30px rgba(0,0,0,0.18);
      display: flex;
      flex-direction: column;
      transform: translateX(110%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
    }

    /* ══ OVERLAY ══ */
    #ai-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 99997;
      display: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* ══ AVATAR FLOTANTE — izquierda ══ */
    #ai-avatar-wrap {
      position: fixed;
      bottom: 2rem;
      left: 2rem;           /* ← IZQUIERDA */
      z-index: 99999;       /* siempre encima de todo */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      pointer-events: none; /* el wrap NO captura eventos */
    }
    #ai-label {
      background: white;
      color: #334155;
      font-size: 11px;
      font-weight: 700;
      font-family: 'Poppins', sans-serif;
      padding: 5px 12px;
      border-radius: 9999px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      border: 1px solid #e2e8f0;
      white-space: nowrap;
      pointer-events: none;
    }
    #ai-avatar-inner {
      position: relative;
      pointer-events: none;
      animation: aiFloat 3s ease-in-out infinite;
    }
    @keyframes aiFloat {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-8px); }
    }
    .ai-pulse {
      position: absolute;
      inset: -5px;
      border-radius: 9999px;
      border: 3px solid #4262b9;
      animation: aiPulse 2s ease-out infinite;
      pointer-events: none;
    }
    @keyframes aiPulse {
      0%   { transform:scale(1);   opacity:0.7; }
      100% { transform:scale(1.6); opacity:0;   }
    }

    /* ══ BOTÓN ROBOT — pointer-events explícito ══ */
    #btn-ai-abrir {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: linear-gradient(135deg, #2D4A99, #4262b9);
      box-shadow: 0 10px 25px rgba(66,98,185,0.45);
      border: none;
      cursor: pointer;
      font-size: 1.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      pointer-events: all; /* ← CRÍTICO */
      position: relative;
      z-index: 99999;
    }
    #btn-ai-abrir:hover {
      transform: scale(1.12);
      box-shadow: 0 14px 30px rgba(66,98,185,0.55);
    }
    #btn-ai-abrir:active { transform: scale(0.96); }

    /* Chips */
    .ai-chip {
      transition: all 0.2s ease;
      cursor: pointer;
      border: 2px solid #e2e8f0;
      background: #f8fafc;
    }
    .ai-chip:hover  { transform:translateX(5px); border-color:#4262b9; background:#EEF2FF; color:#4262b9; }
    .ai-chip.active { background:#4262b9; color:#fff; border-color:#4262b9; transform:translateX(5px); }

    /* Typing dots */
    .ai-typing span {
      display:inline-block; width:8px; height:8px;
      background:#4262b9; border-radius:50%; margin:0 2px;
      animation: aiBounce 1.2s infinite;
    }
    .ai-typing span:nth-child(2) { animation-delay:.2s; }
    .ai-typing span:nth-child(3) { animation-delay:.4s; }
    @keyframes aiBounce {
      0%,80%,100% { transform:translateY(0);   opacity:.3; }
      40%          { transform:translateY(-8px); opacity:1; }
    }

    /* Resultado */
    .ai-result { animation: aiSlide .4s ease-out; }
    @keyframes aiSlide {
      from { opacity:0; transform:translateY(12px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* Scrollbar */
    #ai-scroll::-webkit-scrollbar       { width:4px; }
    #ai-scroll::-webkit-scrollbar-track { background:#f1f5f9; }
    #ai-scroll::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }

    /* Tabs */
    .tab-btn { transition: all .2s ease; }
    .tab-btn.tab-active { background:#4262b9 !important; color:#fff !important; }