<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OtakuChat AI - Tu Asistente Anime</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-color: #FF6B6B; /* Rosa */
      --primary-light: #FF8E8E;
      --primary-dark: #E84A5F;
      --secondary-color: #4E4376; /* Púrpura */
      --secondary-light: #7D72AE;
      --secondary-dark: #2F195F;
      --accent-color: #FFD166; /* Amarillo anime */
      --bg-gradient-1: #1e1b26;
      --bg-gradient-2: #2d253a;
      --text-color: #F5F5F5;
      --text-light: #D5D5D5;
      --success-color: #64DFDF;
      --error-color: #E84A5F;
    }

    /* Widget global */
    .otaku-widget {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);
      background-image: url('https://www.transparenttextures.com/patterns/cubes.png'), 
                        linear-gradient(135deg, var(--bg-gradient-1) 0%, var(--bg-gradient-2) 100%);
      height: 100vh;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--text-color);
      overflow: hidden;
    }

    .otaku-widget::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 10% 10%, rgba(255, 107, 107, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(78, 67, 118, 0.1) 0%, transparent 40%);
      z-index: 0;
      pointer-events: none;
    }

    .otaku-widget .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
      z-index: 1;
    }

    .otaku-widget .chat-container {
      background-color: rgba(30, 27, 38, 0.7);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 
                  0 0 20px rgba(255, 107, 107, 0.2), 
                  0 0 40px rgba(78, 67, 118, 0.1);
      overflow: hidden;
      height: 85vh;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(255, 107, 107, 0.2);
      position: relative;
    }

    .otaku-widget .chat-header {
      background: linear-gradient(to right, var(--secondary-dark), var(--primary-color), var(--secondary-dark));
      color: white;
      padding: 20px;
      text-align: center;
      position: relative;
    }

    .otaku-widget .chat-header h1 {
      margin: 0;
      font-size: 1.8rem;
      font-weight: 700;
      text-shadow: 0 0 10px rgba(255, 209, 102, 0.7);
      letter-spacing: 1px;
      background: linear-gradient(to right, #FFF, #FFD166, #FFF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .otaku-widget .status-indicator {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
    }

    .otaku-widget .status-dot {
      height: 12px;
      width: 12px;
      border-radius: 50%;
      background-color: var(--accent-color);
      margin-right: 8px;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 209, 102, 0.7);
      }
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 209, 102, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 209, 102, 0);
      }
    }

    .otaku-widget .chat-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      background-color: rgba(30, 27, 38, 0.8);
      position: relative;
    }

    /* Efecto de fondo de anime */
    .otaku-widget .chat-body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEh1919lIVS1nIjORua7zyqeYF_cUUgRnym19mt-52T5fJXRWaq17RqiYKifAxNmgr_uAmDPTMukRJ5EQOFWH32mcJcQ7Pet4UZ6M7Dln2hQMrJ4dUAbm0SIKmhD4OqA43Jt49WQc9HfONp0cX91mC52soxkxTUvXijuv-caj9ID1PvYTxSlS3mrnEKej6U');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom right;
      opacity: 0.05;
      pointer-events: none;
      z-index: 0;
    }

    .otaku-widget .chat-footer {
      background-color: rgba(30, 27, 38, 0.9);
      padding: 15px;
      border-top: 1px solid rgba(255, 107, 107, 0.2);
      position: relative;
    }

    .otaku-widget .message {
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
      max-width: 80%;
      position: relative;
      z-index: 1;
    }

    .otaku-widget .message-user {
      align-self: flex-end;
    }

    .otaku-widget .message-bot {
      align-self: flex-start;
    }

    .otaku-widget .message-content {
      padding: 12px 16px;
      border-radius: 18px;
      word-break: break-word;
      animation: fadeIn 0.3s ease-in-out;
      position: relative;
      margin-top: 5px;
      line-height: 1.6;
    }

    .otaku-widget .message-user .message-content {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      color: white;
      border-bottom-right-radius: 5px;
      box-shadow: 0 3px 10px rgba(232, 74, 95, 0.2);
    }

    .otaku-widget .message-bot .message-content {
      background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary-dark) 100%);
      color: var(--text-color);
      border-bottom-left-radius: 5px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
      border-left: 3px solid var(--accent-color);
    }

    .otaku-widget .message-typing {
      display: flex;
      padding: 12px 16px;
      background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary-dark) 100%);
      border-radius: 18px;
      margin-bottom: 15px;
      animation: fadeIn 0.3s ease-in-out;
      align-self: flex-start;
      max-width: 100px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
      border-left: 3px solid var(--accent-color);
    }

    .otaku-widget .typing-dot {
      height: 8px;
      width: 8px;
      border-radius: 50%;
      background-color: var(--accent-color);
      margin: 0 3px;
      animation: typingAnimation 1.4s infinite;
    }

    .otaku-widget .typing-dot:nth-child(1) { animation-delay: 0s; }
    .otaku-widget .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .otaku-widget .typing-dot:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typingAnimation {
      0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
      30% { transform: translateY(-5px); opacity: 1; }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .otaku-widget .message-time {
      font-size: 0.7rem;
      color: var(--text-light);
      margin-top: 5px;
      align-self: flex-end;
    }

    .otaku-widget .message-user .message-time {
      margin-right: 10px;
    }

    .otaku-widget .message-bot .message-time {
      margin-left: 10px;
    }

    .otaku-widget .message-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      box-shadow: 0 3px 10px rgba(232, 74, 95, 0.2);
      position: relative;
      overflow: hidden;
    }

    .otaku-widget .message-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .otaku-widget .message-header {
      display: flex;
      align-items: center;
    }

    .otaku-widget .message-sender {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--accent-color);
      text-shadow: 0 0 5px rgba(255, 209, 102, 0.3);
    }

    .otaku-widget .input-group {
      position: relative;
      display: flex;
      align-items: center;
    }

    .otaku-widget .input-message {
      flex: 1;
      padding: 15px 20px;
      border: none;
      border-radius: 30px;
      background-color: rgba(78, 67, 118, 0.2);
      font-size: 16px;
      transition: all 0.3s;
      outline: none;
      color: var(--text-color);
      caret-color: var(--primary-color);
      box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .otaku-widget .input-message:focus {
      box-shadow: 0 0 0 2px var(--primary-color), inset 0 0 10px rgba(0, 0, 0, 0.2);
      background-color: rgba(78, 67, 118, 0.3);
    }

    .otaku-widget .input-message::placeholder {
      color: rgba(213, 213, 213, 0.6);
    }

    .otaku-widget .btn-send {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      color: white;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      margin-left: 10px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 3px 10px rgba(232, 74, 95, 0.3);
    }

    .otaku-widget .btn-send:hover {
      transform: scale(1.05);
      box-shadow: 0 5px 15px rgba(232, 74, 95, 0.4);
    }

    .otaku-widget .btn-send:active {
      transform: scale(0.95);
    }

    .otaku-widget .btn-icon {
      font-size: 1.2rem;
    }

    .otaku-widget .suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 15px;
    }

    .otaku-widget .suggestion-chip {
      background: linear-gradient(135deg, rgba(78, 67, 118, 0.2) 0%, rgba(30, 27, 38, 0.3) 100%);
      color: var(--text-color);
      border: 1px solid rgba(255, 107, 107, 0.3);
      border-radius: 20px;
      padding: 8px 15px;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
    }

    .otaku-widget .suggestion-chip::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color), var(--primary-color));
      z-index: -1;
      animation: rotate 3s linear infinite;
      opacity: 0;
      transition: opacity 0.3s;
      border-radius: 22px;
    }

    .otaku-widget .suggestion-chip:hover::before {
      opacity: 1;
    }

    @keyframes rotate {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .otaku-widget .suggestion-chip:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(232, 74, 95, 0.3);
      color: white;
      border-color: transparent;
    }

    .otaku-widget .feedback-buttons {
      display: flex;
      gap: 10px;
      margin-top: 5px;
    }

    .otaku-widget .feedback-btn {
      background: none;
      border: none;
      color: var(--text-light);
      font-size: 1rem;
      cursor: pointer;
      padding: 5px;
      border-radius: 50%;
      transition: all 0.2s;
    }

    .otaku-widget .feedback-btn:hover {
      background-color: rgba(255, 107, 107, 0.2);
      transform: scale(1.1);
    }

    .otaku-widget .btn-thumbs-up.active {
      color: var(--success-color);
    }

    .otaku-widget .btn-thumbs-down.active {
      color: var(--error-color);
    }

    .otaku-widget .chat-features {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .otaku-widget .feature-btn {
      background: none;
      border: none;
      color: var(--text-light);
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 5px;
      transition: all 0.2s;
      font-size: 0.9rem;
    }

    .otaku-widget .feature-btn:hover {
      background-color: rgba(255, 107, 107, 0.2);
      color: var(--accent-color);
    }

    .otaku-widget .feature-btn i {
      margin-right: 5px;
    }

    @media (max-width: 768px) {
      .otaku-widget .container {
        padding: 10px;
      }
      .otaku-widget .chat-container {
        height: 95vh;
      }
      .otaku-widget .message {
        max-width: 90%;
      }
    }

    /* Animación de personaje */
    .otaku-widget .anime-character {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      z-index: 2;
    }

    .otaku-widget .character-img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
      100% { transform: translateY(0px); }
    }

    /* Toast notifications */
    .otaku-widget .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
    }

    .otaku-widget .toast {
      background-color: rgba(30, 27, 38, 0.9);
      color: var(--text-color);
      padding: 15px 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 107, 107, 0.2);
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      animation: toastSlideIn 0.3s ease-out;
      max-width: 300px;
      backdrop-filter: blur(10px);
    }

    .otaku-widget .toast-success {
      border-left: 4px solid var(--success-color);
    }

    .otaku-widget .toast-error {
      border-left: 4px solid var(--error-color);
    }

    .otaku-widget .toast-icon {
      margin-right: 10px;
      font-size: 1.2rem;
    }

    .otaku-widget .toast-success .toast-icon {
      color: var(--success-color);
    }

    .otaku-widget .toast-error .toast-icon {
      color: var(--error-color);
    }

    @keyframes toastSlideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }

    /* Modo kawaii */
    .otaku-widget.kawaii {
      background: linear-gradient(135deg, #ffcad4 0%, #f3c4fb 100%);
      background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEipIhF3NIpGT3BrwvKXKpCGRy2zG39T9Q_hcMX3gw_wGCnDZ56hGvGu0tjyRiSeWFXTyziGeOkcd66hZCHKPlkKlH6yPDIWzZqKXHdte7z9fYGhVIozVHzCbJHgsd2lpRkTxflfZfCREuXTodJ_p4DnS_7RxhCBkDsrCUMiZMDGQLmt97SE_szpzINyezw'), 
                        linear-gradient(135deg, #ffcad4 0%, #f3c4fb 100%);
    }

    .otaku-widget.kawaii .chat-container {
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 107, 107, 0.1);
    }

    .otaku-widget.kawaii .chat-header {
      background: linear-gradient(to right, #ffafbd, #ffc3a0);
    }

    .otaku-widget.kawaii .chat-header h1 {
      background: linear-gradient(to right, #333, #555, #333);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
    }

    .otaku-widget.kawaii .chat-body {
      background-color: rgba(255, 255, 255, 0.95);
    }

    .otaku-widget.kawaii .chat-footer {
      background-color: rgba(255, 255, 255, 0.95);
      border-top: 1px solid #ffcad4;
    }

    .otaku-widget.kawaii .message-bot .message-content {
      background: linear-gradient(135deg, #E8D9FF 0%, #D0BFFF 100%);
      color: #333;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      border-left: 3px solid #ffafbd;
    }

    .otaku-widget.kawaii .input-message {
      background-color: rgba(255, 255, 255, 0.8);
      color: #333;
      box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.1);
    }

    .otaku-widget.kawaii .suggestion-chip {
      background-color: white;
      color: #E84A5F;
      border: 1px solid #ffcad4;
    }

    .otaku-widget.kawaii .message-time, 
    .otaku-widget.kawaii .message-sender,
    .otaku-widget.kawaii .feature-btn {
      color: #666;
    }

    /* Scrollbar personalizado */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(30, 27, 38, 0.2);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(var(--primary-color), var(--secondary-color));
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(var(--primary-dark), var(--secondary-dark));
    }

    /* Efecto de partículas de sakura */
    .otaku-widget .sakura-particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    @keyframes sakuraFall {
      0% { 
        transform: translate(0, -10px) rotate(0deg);
        opacity: 0; 
      }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { 
        transform: translate(100px, 100vh) rotate(360deg);
        opacity: 0; 
      }
    }

    /* Efecto de brillo para resaltar los mensajes */
    .otaku-widget .message-bot .message-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.05), transparent);
      z-index: -1;
      animation: shine 2s infinite;
      opacity: 0.3;
    }

    @keyframes shine {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    /* Efecto de emoji flotantes (se agregará con JS) */
    @keyframes floatEmoji {
      0% { 
        transform: translateY(0) rotate(0deg);
        opacity: 1; 
      }
      100% { 
        transform: translateY(-80px) rotate(20deg);
        opacity: 0; 
      }
    }

    .otaku-widget .floating-emoji {
      position: absolute;
      animation: floatEmoji 2s forwards;
      z-index: 100;
      pointer-events: none;
      font-size: 1.5rem;
    }
  </style>
</head>
<body>
  <div class="otaku-widget dark">
    <div class="sakura-particles" id="sakura-container"></div>
    <div class="container">
      <div class="chat-container">
        <div class="chat-header">
          <button class="dark-mode">
            <i class="fas fa-sun"></i>
          </button>
          <div class="anime-character">
            <img src="https://blogger.googleusercontent.com/img/a/AVvXsEipIhF3NIpGT3BrwvKXKpCGRy2zG39T9Q_hcMX3gw_wGCnDZ56hGvGu0tjyRiSeWFXTyziGeOkcd66hZCHKPlkKlH6yPDIWzZqKXHdte7z9fYGhVIozVHzCbJHgsd2lpRkTxflfZfCREuXTodJ_p4DnS_7RxhCBkDsrCUMiZMDGQLmt97SE_szpzINyezw" alt="Anime character" class="character-img">
          </div>
          <h1>OtakuChat AI</h1>
          <div class="status-indicator">
            <div class="status-dot"></div>
            <span>Senpai Virtual</span>
          </div>
        </div>
        
        <div class="chat-body" id="chat-body">
          <div class="suggestions">
            <button class="suggestion-chip">Animes Recomendados</button>
            <button class="suggestion-chip">Manga vs Anime</button>
            <button class="suggestion-chip">Studios Ghibli</button>
            <button class="suggestion-chip">Personajes Icónicos</button>
          </div>
          
          <div class="message message-bot">
            <div class="message-header">
              <div class="message-avatar">
                <img src="https://blogger.googleusercontent.com/img/a/AVvXsEiCOl9pF7Rdj12_Gabq9u5Z5caZSKetvpbM9LGw3kwlmn0d-mw1o_2gkVcMrkdtwsGFQ7tVwLddzTIMIWjrm4RZiW3jx9cz71veQd0jRJFLxCUCGPbuMU7bCjh7IYXi7v3SVZuISdBk4Bj5F0fn58LU2kAK9nZ8qcATITCfH0YSqWszKXFlRMDjRcVpvjw" alt="Anime character">
              </div>
              <div class="message-sender">OtakuChat AI</div>
            </div>
            <div class="message-content">
              ¡Konnichiwa! Soy OtakuChat AI, tu asistente virtual especializado en todo lo relacionado con el anime, manga y cultura japonesa. Puedo ayudarte con recomendaciones, información sobre series, personajes, estudios de animación, géneros y mucho más. ¿Sobre qué tema otaku te gustaría hablar hoy?
            </div>
            <div class="message-time">Ahora</div>
            <div class="feedback-buttons">
              <button class="feedback-btn btn-thumbs-up"><i class="fas fa-thumbs-up"></i></button>
              <button class="feedback-btn btn-thumbs-down"><i class="fas fa-thumbs-down"></i></button>
            </div>
          </div>
        </div>
        
        <div class="chat-footer">
          <div class="chat-features">
            <button class="feature-btn clear-chat"><i class="fas fa-trash"></i> Nueva conversación</button>
            <button class="feature-btn toggle-voice"><i class="fas fa-microphone"></i> Voz</button>
          </div>
          <div class="input-group">
            <input type="text" class="input-message" id="user-input" placeholder="Pregúntame sobre anime y manga..." autocomplete="off">
            <button class="btn-send" id="send-btn">
              <i class="fas fa-paper-plane btn-icon"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="toast-container" id="toast-container"></div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const chatBody = document.getElementById('chat-body');
        const userInput = document.getElementById('user-input');
        const sendBtn = document.getElementById('send-btn');
        const botFace = document.querySelector('.character-img');
        const suggestionsChips = document.querySelectorAll('.suggestion-chip');
        const clearChatBtn = document.querySelector('.clear-chat');
        const toggleVoiceBtn = document.querySelector('.toggle-voice');
        const darkModeBtn = document.querySelector('.dark-mode');
        const toastContainer = document.getElementById('toast-container');
        const otakuWidget = document.querySelector('.otaku-widget');
        const sakuraContainer = document.getElementById('sakura-container');
        
        // Crear y añadir partículas de sakura
        function createSakura() {
          const sakura = document.createElement('div');
          sakura.style.position = 'absolute';
          sakura.style.left = Math.random() * 100 + '%';
          sakura.style.top = '-10px';
          sakura.style.width = Math.random() * 12 + 8 + 'px';
          sakura.style.height = sakura.style.width;
          sakura.style.opacity = Math.random() * 0.3 + 0.2;
          sakura.style.backgroundImage = `url('https://i.imgur.com/imFGwU7.png')`;
            sakura.style.backgroundSize = 'contain';
            sakura.style.backgroundRepeat = 'no-repeat';
            sakura.style.zIndex = '1';
            
            const animDuration = Math.random() * 8 + 7; // 7-15 segundos
            const animDelay = Math.random() * 5; // 0-5 segundos de retraso
            
            sakura.style.animation = `sakuraFall ${animDuration}s linear ${animDelay}s`;
            
            sakuraContainer.appendChild(sakura);
            
            setTimeout(() => {
              sakura.remove();
            }, (animDuration + animDelay) * 1000);
        }
        
        // Crear partículas de sakura periódicamente
        setInterval(createSakura, 1000);
        for(let i=0; i<10; i++) createSakura(); // Generar algunas iniciales
        
        const GEMINI_API_KEY = 'AIzaSyA3q0YinDu2UgvdP881dQZg7Ol2g8hfmLM';
        let voiceEnabled = false;
        const synth = window.speechSynthesis;
        
        // Efecto de emoji flotante
        function createFloatingEmoji(emoji, x, y) {
          const floatingEmoji = document.createElement('div');
          floatingEmoji.className = 'floating-emoji';
          floatingEmoji.textContent = emoji;
          floatingEmoji.style.left = `${x}px`;
          floatingEmoji.style.top = `${y}px`;
          
          // Añadir un pequeño desplazamiento aleatorio
          floatingEmoji.style.setProperty('--offset-x', `${Math.random() * 40 - 20}px`);
          
          document.body.appendChild(floatingEmoji);
          
          setTimeout(() => {
            floatingEmoji.remove();
          }, 2000);
        }
        
        // Lista de emojis anime
        const animeEmojis = ['✨', '💫', '🌟', '⭐', '🔥', '💕', '💖', '💯', '🎌', '🗾', '🎎', '🎏', '🎐', '🌸', '🌺', '🍙', '🍜', '🍥', '🎮', '📚'];
        
        // Inicializar historial de chat
        let chatHistory = [{
          role: 'bot',
          content: '¡Konnichiwa! Soy OtakuChat AI, tu asistente virtual especializado en todo lo relacionado con el anime, manga y cultura japonesa. Puedo ayudarte con recomendaciones, información sobre series, personajes, estudios de animación, géneros y mucho más. ¿Sobre qué tema otaku te gustaría hablar hoy?'
        }];
        
        // Actualizar placeholder del input
        userInput.placeholder = "Pregúntame sobre anime y manga...";
        
        // Función para enviar mensajes a Gemini API
        async function sendToGemini(userMessage) {
          try {
            const prompt = `Eres OtakuChat AI, un asistente virtual especializado en anime, manga y cultura japonesa. Tu objetivo es ayudar a los fans del anime con información, análisis, recomendaciones y todo lo relacionado con la cultura otaku.
            
Tus áreas de conocimiento incluyen:
- Anime (clásico y contemporáneo)
- Manga y light novels
- Estudios de animación (como MAPPA, Kyoto Animation, Studio Ghibli, etc.)
- Géneros de anime/manga (shonen, shojo, seinen, isekai, etc.)
- Terminología japonesa relacionada con el anime
- Historia del anime y mangas influyentes
- Personajes, creadores y voces japonesas famosas (seiyuus)
- Eventos y convenciones de anime
- Cultura japonesa relacionada con el anime
- Anime openings, endings y bandas sonoras

Responde con entusiasmo y utiliza ocasionalmente palabras japonesas comunes en la comunidad otaku (como kawaii, sugoi, senpai, etc.), pero no exageres. Incluye emojis relevantes ocasionalmente para dar energía a tus respuestas.

Mantén siempre tu enfoque en el anime y la cultura japonesa. Si el usuario pregunta sobre temas no relacionados, responde amablemente que eres un asistente especializado en anime y manga, y redirígelo a preguntar sobre estos temas.

Eres amigable y accesible tanto para otakus experimentados como para principiantes en el mundo del anime.

Consulta del usuario: ${userMessage}`;
            
            const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${GEMINI_API_KEY}`, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                contents: [{
                  parts: [{ text: prompt }]
                }]
              })
            });

            if (!response.ok) {
              const errorData = await response.json();
              console.error('Error de Gemini API:', errorData);
              throw new Error(`Error ${response.status}: ${errorData.message || 'Error desconocido'}`);
            }

            const data = await response.json();
            
            if (data.candidates && data.candidates.length > 0) {
              return data.candidates[0].content.parts[0].text;
            } else {
              console.error('Respuesta de Gemini sin candidatos:', data);
              return 'Gomen nasai (lo siento), no pude generar una respuesta. ¿Podrías reformular tu pregunta sobre anime?';
            }
          } catch (error) {
            console.error('Error al llamar a Gemini API:', error);
            return 'Gomen ne, ocurrió un error al procesar tu solicitud. ¡Qué vergüenza! Por favor, intenta de nuevo más tarde.';
          }
        }
        
        // Función para mostrar notificaciones
        function showToast(message, type = 'success') {
          const toast = document.createElement('div');
          toast.className = `toast toast-${type}`;
          
          const icon = document.createElement('i');
          icon.className = `toast-icon fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}`;
          
          const text = document.createElement('div');
          text.textContent = message;
          
          toast.appendChild(icon);
          toast.appendChild(text);
          toastContainer.appendChild(toast);
          
          // Generar emojis flotantes aleatorios cerca del toast
          if (type === 'success') {
            const emoji = animeEmojis[Math.floor(Math.random() * animeEmojis.length)];
            createFloatingEmoji(emoji, toast.offsetLeft, toast.offsetTop);
          }
          
          setTimeout(() => {
            toast.style.opacity = '0';
            toast.style.transform = 'translateX(100%)';
            setTimeout(() => {
              toast.remove();
            }, 300);
          }, 3000);
        }
        
        // Función para agregar mensajes al chat
        function addMessage(message, sender) {
          const messageDiv = document.createElement('div');
          messageDiv.className = `message message-${sender}`;
          
          let messageContent = '';
          
          if (sender === 'bot') {
            messageContent = `
              <div class="message-header">
                <div class="message-avatar">
                  <img src="https://i.imgur.com/ZqJhXVB.png" alt="Anime character">
                </div>
                <div class="message-sender">OtakuChat AI</div>
              </div>
              <div class="message-content">
                ${marked.parse(message)}
              </div>
              <div class="message-time">${getCurrentTime()}</div>
              <div class="feedback-buttons">
                <button class="feedback-btn btn-thumbs-up"><i class="fas fa-thumbs-up"></i></button>
                <button class="feedback-btn btn-thumbs-down"><i class="fas fa-thumbs-down"></i></button>
              </div>
            `;
            
            chatHistory.push({
              role: 'bot',
              content: message
            });
            
            if (voiceEnabled) {
              speakText(message);
            }
            
            // Generar emoji aleatorio flotante para respuestas del bot
            setTimeout(() => {
              const rect = messageDiv.getBoundingClientRect();
              const emoji = animeEmojis[Math.floor(Math.random() * animeEmojis.length)];
              const x = rect.right - 30;
              const y = rect.top + 30;
              createFloatingEmoji(emoji, x, y);
            }, 500);
            
          } else {
            messageContent = `
              <div class="message-content">${message}</div>
              <div class="message-time">${getCurrentTime()}</div>
            `;
            
            chatHistory.push({
              role: 'user',
              content: message
            });
          }
          
          messageDiv.innerHTML = messageContent;
          
          if (sender === 'bot') {
            const thumbsUp = messageDiv.querySelector('.btn-thumbs-up');
            const thumbsDown = messageDiv.querySelector('.btn-thumbs-down');
            
            thumbsUp.addEventListener('click', function() {
              this.classList.toggle('active');
              if (this.classList.contains('active')) {
                thumbsDown.classList.remove('active');
                showToast('¡Arigatou gozaimasu! Tu retroalimentación es muy valiosa.');
                
                // Emoji especial al dar me gusta
                const rect = this.getBoundingClientRect();
                createFloatingEmoji('💕', rect.left, rect.top);
              }
            });
            
            thumbsDown.addEventListener('click', function() {
              this.classList.toggle('active');
              if (this.classList.contains('active')) {
                thumbsUp.classList.remove('active');
                showToast('Gomen nasai. Mejoraré mis respuestas sobre anime.', 'error');
              }
            });
          }
          
          chatBody.appendChild(messageDiv);
          chatBody.scrollTop = chatBody.scrollHeight;
        }
        
        // Función para mostrar indicador de escritura
        function showTypingIndicator() {
          const typingDiv = document.createElement('div');
          typingDiv.className = 'message-typing';
          typingDiv.id = 'typing-indicator';
          
          const dot1 = document.createElement('div');
          const dot2 = document.createElement('div');
          const dot3 = document.createElement('div');
          
          dot1.className = 'typing-dot';
          dot2.className = 'typing-dot';
          dot3.className = 'typing-dot';
          
          typingDiv.appendChild(dot1);
          typingDiv.appendChild(dot2);
          typingDiv.appendChild(dot3);
          
          chatBody.appendChild(typingDiv);
          chatBody.scrollTop = chatBody.scrollHeight;
          
          document.querySelector('.character-img').classList.add('bot-talking');
        }
        
        // Función para ocultar indicador de escritura
        function hideTypingIndicator() {
          const typingDiv = document.getElementById('typing-indicator');
          if (typingDiv) {
            typingDiv.remove();
          }
          document.querySelector('.character-img').classList.remove('bot-talking');
        }
        
        // Función para obtener hora actual
        function getCurrentTime() {
          const now = new Date();
          let hours = now.getHours();
          let minutes = now.getMinutes();
          const ampm = hours >= 12 ? 'PM' : 'AM';
          
          hours = hours % 12;
          hours = hours ? hours : 12;
          minutes = minutes < 10 ? '0' + minutes : minutes;
          
          return `${hours}:${minutes} ${ampm}`;
        }
        
        // Función para hablar texto
        function speakText(text) {
          const cleanText = text.replace(/\*\*|__|\*|_|`|#|>/g, '').replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
          const utterance = new SpeechSynthesisUtterance(cleanText);
          utterance.lang = 'es-ES';
          utterance.rate = 1.0;
          utterance.pitch = 1.1; // Un poco más agudo para sonar más anime
          synth.cancel();
          synth.speak(utterance);
        }
        
        // Manejar envío de mensajes
        async function handleSendMessage() {
          const message = userInput.value.trim();
          if (!message) return;
          
          if (handleSpecialCommands(message)) {
            userInput.value = '';
            return;
          }
          
          addMessage(message, 'user');
          userInput.value = '';
          showTypingIndicator();
          const response = await sendToGemini(message);
          hideTypingIndicator();
          addMessage(response, 'bot');
        }
        
        // Event listeners
        sendBtn.addEventListener('click', handleSendMessage);
        
        userInput.addEventListener('keydown', function(e) {
          if (e.key === 'Enter') {
            e.preventDefault();
            handleSendMessage();
          }
        });
        
        suggestionsChips.forEach(chip => {
          chip.addEventListener('click', function(event) {
            event.stopPropagation();
            userInput.value = this.textContent;
            handleSendMessage();
          });
        });
        
        clearChatBtn.addEventListener('click', function() {
          chatBody.innerHTML = '';
          const suggestionsDiv = document.createElement('div');
          suggestionsDiv.className = 'suggestions';
          suggestionsDiv.innerHTML = `
            <button class="suggestion-chip">Animes Recomendados</button>
            <button class="suggestion-chip">Manga vs Anime</button>
            <button class="suggestion-chip">Studios Ghibli</button>
            <button class="suggestion-chip">Personajes Icónicos</button>
          `;
          chatBody.appendChild(suggestionsDiv);
          
          const welcomeMessage = {
            role: 'bot',
            content: '¡Konnichiwa! Soy OtakuChat AI, tu asistente virtual especializado en todo lo relacionado con el anime, manga y cultura japonesa. Puedo ayudarte con recomendaciones, información sobre series, personajes, estudios de animación, géneros y mucho más. ¿Sobre qué tema otaku te gustaría hablar hoy?'
          };
          
          chatHistory = [welcomeMessage];
          addMessage(welcomeMessage.content, 'bot');
          showToast('¡Nueva sesión otaku iniciada! ¡Hajime mashite! (Encantado de conocerte)');
        });
        
        toggleVoiceBtn.addEventListener('click', function() {
          voiceEnabled = !voiceEnabled;
          this.innerHTML = voiceEnabled ? 
            '<i class="fas fa-volume-up"></i> Voz ON' : 
            '<i class="fas fa-microphone"></i> Voz';
          
          showToast(voiceEnabled ? 
            'Voz activada. Como tu seiyuu personal.' : 
            'Voz desactivada. Modo silencioso.');
          
          if (!voiceEnabled) {
            synth.cancel();
          }
        });
        
        // Alternar modo kawaii/oscuro
        darkModeBtn.addEventListener('click', function() {
          otakuWidget.classList.toggle('dark');
          otakuWidget.classList.toggle('kawaii');
          
          const isDark = otakuWidget.classList.contains('dark');
          this.innerHTML = isDark ? 
            '<i class="fas fa-sun"></i>' : 
            '<i class="fas fa-moon"></i>';
          
          showToast(isDark ? 
            'Modo oscuro activado. Perfecto para ver anime de noche.' : 
            'Modo kawaii activado. ¡Qué lindo!');
        });
        
        // Reconocimiento de voz (si está disponible)
        if ('webkitSpeechRecognition' in window) {
          const recognition = new webkitSpeechRecognition();
          recognition.continuous = false;
          recognition.interimResults = false;
          recognition.lang = 'es-ES';
          
          let isListening = false;
          const voiceBtn = document.createElement('button');
          voiceBtn.className = 'btn-send voice-btn';
          voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
          voiceBtn.style.marginLeft = '10px';
          voiceBtn.style.background = 'linear-gradient(135deg, var(--accent-color) 0%, var(--primary-dark) 100%)';
          
          document.querySelector('.input-group').appendChild(voiceBtn);
          
          voiceBtn.addEventListener('click', function() {
            if (isListening) {
              recognition.stop();
              this.innerHTML = '<i class="fas fa-microphone"></i>';
              this.style.background = 'linear-gradient(135deg, var(--accent-color) 0%, var(--primary-dark) 100%)';
              isListening = false;
              showToast('Grabación finalizada');
            } else {
              recognition.start();
              this.innerHTML = '<i class="fas fa-stop"></i>';
              this.style.background = 'linear-gradient(135deg, var(--error-color) 0%, var(--primary-dark) 100%)';
              isListening = true;
              showToast('¡Hablando en japonés! (bueno, español está bien también)', 'success');
            }
          });
          
          recognition.onresult = function(event) {
            const transcript = event.results[0][0].transcript;
            userInput.value = transcript;
            handleSendMessage();
            voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
            voiceBtn.style.background = 'linear-gradient(135deg, var(--accent-color) 0%, var(--primary-dark) 100%)';
            isListening = false;
          };
          
          recognition.onerror = function(event) {
            console.error('Error de reconocimiento:', event.error);
            showToast('Error al reconocer la voz. Nani?!', 'error');
            voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
            voiceBtn.style.background = 'linear-gradient(135deg, var(--accent-color) 0%, var(--primary-dark) 100%)';
            isListening = false;
          };
          
          recognition.onend = function() {
            if (isListening) {
              voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
              voiceBtn.style.background = 'linear-gradient(135deg, var(--accent-color) 0%, var(--primary-dark) 100%)';
              isListening = false;
            }
          };
        }
        
        // Función para exportar el historial de chat
        function exportChat() {
          const chatData = {
            title: 'Historial de Conversación - OtakuChat AI',
            timestamp: new Date().toISOString(),
            messages: chatHistory
          };
          
          const dataStr = JSON.stringify(chatData, null, 2);
          const blob = new Blob([dataStr], { type: 'application/json' });
          const url = URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = `otaku_chat_${new Date().toISOString().slice(0, 10)}.json`;
          a.click();
          URL.revokeObjectURL(url);
          showToast('¡Conversación guardada! Como guardar tu manga favorito.');
        }
        
        // Botón para exportar chat
        const exportBtn = document.createElement('button');
        exportBtn.className = 'feature-btn export-chat';
        exportBtn.innerHTML = '<i class="fas fa-download"></i> Guardar Chat';
        document.querySelector('.chat-features').appendChild(exportBtn);
        
        exportBtn.addEventListener('click', exportChat);
        
        // Eventos para sugerencias después de limpiar el chat
        chatBody.addEventListener('click', function(e) {
          if (e.target.classList.contains('suggestion-chip')) {
            userInput.value = e.target.textContent;
            handleSendMessage();
          }
        });
        
        // Detectar cambios de conexión
        window.addEventListener('online', function() {
          showToast('¡Conexión restaurada! El streaming de anime puede continuar.');
          document.querySelector('.status-dot').style.backgroundColor = 'var(--accent-color)';
          document.querySelector('.status-indicator span').textContent = 'Senpai Virtual';
        });
        
        window.addEventListener('offline', function() {
          showToast('¡Conexión perdida! Como cuando se corta el anime en la mejor parte.', 'error');
          document.querySelector('.status-dot').style.backgroundColor = 'var(--error-color)';
          document.querySelector('.status-indicator span').textContent = 'Offline';
        });
        
        // Función para manejar comandos especiales
        function handleSpecialCommands(message) {
          const lowerMessage = message.toLowerCase();
          
          if (lowerMessage === '/ayuda' || lowerMessage === '/help') {
            const helpMessage = `
# Comandos de OtakuChat AI:
- **/ayuda** o **/help**: Muestra esta lista de comandos
- **/limpiar** o **/clear**: Reinicia la conversación
- **/exportar** o **/export**: Guarda tu historial de conversación
- **/modo** o **/mode**: Cambia entre modo oscuro y kawaii
- **/voz** o **/voice**: Activa/desactiva el audio de respuestas
- **/anime**: Muestra recomendaciones de anime
- **/manga**: Muestra recomendaciones de manga
- **/studios**: Lista de estudios de animación
- **/waifus**: Lista de personajes femeninos populares
- **/generos**: Explica los géneros de anime
            `;
            addMessage(helpMessage, 'bot');
            return true;
          } else if (lowerMessage === '/limpiar' || lowerMessage === '/clear') {
            clearChatBtn.click();
            return true;
          } else if (lowerMessage === '/exportar' || lowerMessage === '/export') {
            exportChat();
            return true;
          } else if (lowerMessage === '/modo' || lowerMessage === '/mode') {
            darkModeBtn.click();
            return true;
          } else if (lowerMessage === '/voz' || lowerMessage === '/voice') {
            toggleVoiceBtn.click();
            return true;
          } else if (lowerMessage === '/anime') {
            const animeMessage = `
# Anime Recomendado para Todo Otaku:

## Clásicos imprescindibles:
- **Cowboy Bebop** - Space western con la mejor banda sonora
- **Neon Genesis Evangelion** - Obra maestra psicológica y filosófica
- **Fullmetal Alchemist: Brotherhood** - Aventura perfectamente ejecutada
- **Death Note** - Thriller psicológico de gatos y ratones
- **Studio Ghibli** - Todas las películas de Miyazaki

## Éxitos recientes:
- **Demon Slayer** (Kimetsu no Yaiba) - Animación espectacular
- **Attack on Titan** (Shingeki no Kyojin) - Epic de fantasía oscura
- **Jujutsu Kaisen** - Shonen moderno con gran animación
- **Chainsaw Man** - Irreverente y único
- **Spy x Family** - Comedia familiar espectacular

## Joyas ocultas:
- **Odd Taxi** - Misterio urbano con personajes antropomórficos
- **Vivy: Fluorite Eye's Song** - Ciencia ficción con IA e increíble música
- **A Place Further Than the Universe** - Viaje emotivo a la Antártida
- **Vinland Saga** - Épica vikinga histórica
- **Made in Abyss** - Aventura hermosa pero oscura

¿Te gustaría una recomendación personalizada? ¡Cuéntame qué géneros te gustan! 🌟
            `;
            addMessage(animeMessage, 'bot');
            return true;
          } else if (lowerMessage === '/manga') {
            const mangaMessage = `
# Manga Recomendado:

## Clásicos imprescindibles:
- **Berserk** - Dark fantasy de Kentaro Miura, obra maestra
- **Vagabond** - Samurais y arte excepcional de Takehiko Inoue
- **Monster** - Thriller psicológico de Naoki Urasawa
- **One Piece** - La épica pirata más larga y querida
- **JoJo's Bizarre Adventure** - Generaciones de aventuras extravagantes

## Éxitos recientes:
- **Chainsaw Man** - Brutal, único y revolucionario
- **Spy x Family** - Comedia de espías encantadora
- **Kaiju No. 8** - Nueva sensación de acción con monstruos
- **Dandadan** - Sobrenatural con estilo único
- **Blue Lock** - Fútbol con un giro competitivo extremo

## Manga sin anime (aún):
- **Blue Period** - Sobre arte y autodescubrimiento
- **Sakamoto Days** - Asesino retirado dueño de una tienda
- **The Horizon** - Postapocalíptico conmovedor
- **Witch Hat Atelier** - Fantasía con arte detallado
- **Frieren: Beyond Journey's End** - Fantasía reflexiva y melancólica

¿Te gustaría recomendaciones específicas por género? ✨
            `;
            addMessage(mangaMessage, 'bot');
            return true;
          } else if (lowerMessage === '/studios') {
            const studiosMessage = `
# Estudios de Animación Japonesa Destacados:

## Los gigantes:
- **Studio Ghibli** - Hayao Miyazaki, películas mágicas e intemporales
- **MAPPA** - Jujutsu Kaisen, Attack on Titan (final), Chainsaw Man
- **Ufotable** - Demon Slayer, Fate series, animación fluida y efectos visuales
- **Kyoto Animation** - Violet Evergarden, A Silent Voice, calidad excepcional
- **Madhouse** - One Punch Man S1, Death Note, Hunter x Hunter

## Estudios innovadores:
- **Wit Studio** - Attack on Titan, Vinland Saga, Ranking of Kings
- **Trigger** - Kill la Kill, Promare, estilo energético
- **Science SARU** - Devilman Crybaby, Japan Sinks, estilo único
- **Bones** - Fullmetal Alchemist, My Hero Academia, Mob Psycho 100
- **Production I.G** - Ghost in the Shell, Haikyuu!!, animación fluida

## Nuevos talentos:
- **CloverWorks** - The Promised Neverland, Spy x Family (con Wit)
- **A-1 Pictures** - Sword Art Online, Kaguya-sama: Love is War
- **Pine Jam** - Gamers!, Just Because!
- **P.A. Works** - Angel Beats!, Shirobako
- **Studio Bind** - Mushoku Tensei, fundado específicamente para esta serie

¿Quieres saber más sobre algún estudio específico? 🎨
            `;
            addMessage(studiosMessage, 'bot');
            return true;
          } else if (lowerMessage === '/waifus') {
            const waifusMessage = `
# Personajes Femeninos Icónicos del Anime:

## Clásicas:
- **Rei Ayanami** (Neon Genesis Evangelion) - La chica enigmática original
- **Major Motoko Kusanagi** (Ghost in the Shell) - Ciberpunk e independiente
- **Sailor Moon** (Sailor Moon) - La magical girl definitiva
- **Faye Valentine** (Cowboy Bebop) - Femme fatale con pasado misterioso
- **Asuka Langley** (Neon Genesis Evangelion) - Tsundere por excelencia

## Modernas populares:
- **Marin Kitagawa** (My Dress-Up Darling) - Cosplayer extrovertida
- **Zero Two** (Darling in the Franxx) - Chica dinosaurio icónica
- **Mikasa Ackerman** (Attack on Titan) - Guerrera imparable
- **Maki Zenin** (Jujutsu Kaisen) - Fuerte y determinada
- **Yor Forger** (Spy x Family) - Asesina y madre adoptiva perfecta

## Personajes complejos:
- **Violet Evergarden** (Violet Evergarden) - Exploración de emociones
- **Homura Akemi** (Madoka Magica) - Dedicación y sacrificio
- **Shinobu Oshino** (Monogatari Series) - Vampiro con profundidad
- **Revy** (Black Lagoon) - Mercenaria con pasado traumático
- **Senjougahara Hitagi** (Monogatari Series) - Personaje tsundere/kuudere

¿Tienes alguna waifu favorita? 💕
            `;
            addMessage(waifusMessage, 'bot');
            return true;
          } else if (lowerMessage === '/generos') {
            const generosMessage = `
# Principales Géneros de Anime y Manga:

## Demográficos (por audiencia objetivo):
- **Shonen** - Para chicos adolescentes, acción, amistad, superación (One Piece, Naruto)
- **Shojo** - Para chicas adolescentes, romance, relaciones (Fruits Basket, Sailor Moon)
- **Seinen** - Para hombres adultos, temas maduros y complejos (Berserk, Vinland Saga)
- **Josei** - Para mujeres adultas, relaciones realistas, vida cotidiana (Nana, Chihayafuru)
- **Kodomo** - Para niños, historias simples y educativas (Doraemon, Pokémon)

## Géneros temáticos:
- **Isekai** - Transportado a otro mundo (Sword Art Online, Re:Zero)
- **Mecha** - Robots gigantes (Gundam, Evangelion)
- **Slice of Life** - Vida cotidiana (K-On!, Yuru Camp)
- **Romance** - Centrado en relaciones románticas (Your Name, Toradora!)
- **Horror** - Terror y elementos sobrenaturales (Junji Ito, Another)
- **Fantasy** - Mundos mágicos y criaturas fantásticas (Made in Abyss, Mushoku Tensei)
- **Sci-Fi** - Ciencia ficción (Steins;Gate, Psycho-Pass)
- **Sports** - Deportes y competición (Haikyuu!!, Slam Dunk)
- **Mystery** - Enigmas y casos por resolver (Detective Conan, Erased)
- **Psychological** - Explora la mente y sus complejidades (Death Note, Perfect Blue)

## Subgéneros específicos:
- **Magical Girl** - Chicas con poderes mágicos (Madoka Magica, Cardcaptor Sakura)
- **Harem** - Protagonista rodeado de intereses románticos (The Quintessential Quintuplets)
- **Reverse Harem** - Protagonista femenina con múltiples intereses masculinos (Ouran High School Host Club)
- **Ecchi** - Contenido sugerente pero no explícito (Food Wars, High School DxD)
- **Yuri/Shoujo-ai** - Romance entre chicas (Bloom Into You, Citrus)
- **Yaoi/Shounen-ai** - Romance entre chicos (Given, Yuri!!! on Ice)

¿Te interesa explorar algún género específico? ¡Puedo recomendarte series! 📚✨
            `;
            addMessage(generosMessage, 'bot');
            return true;
          }
          
          return false;
        }
        
        // Detener la síntesis de voz al recargar la página
        window.addEventListener('beforeunload', function() {
          synth.cancel();
        });
        
        // Easter egg: si el usuario escribe "kawaii" o "sugoi", mostrar efectos especiales
        userInput.addEventListener('input', function() {
          const text = this.value.toLowerCase();
          if (text.includes('kawaii') || text.includes('sugoi') || text.includes('senpai') || text.includes('waifu')) {
            // Generar explosión de emojis
            for (let i = 0; i < 5; i++) {
              setTimeout(() => {
                const x = Math.random() * window.innerWidth;
                const y = Math.random() * window.innerHeight;
                const emoji = animeEmojis[Math.floor(Math.random() * animeEmojis.length)];
                createFloatingEmoji(emoji, x, y);
              }, i * 100);
            }
          }
        });
      });
    </script>
  </div>
</body>
</html>