# Frogames Ai Changelog
**Source:** https://en.cursos.frogamesformacion.com/pages/frogames-ai-changelog
**Language:** English

---

AI Companion Widget - Changelog & Mejoras

CORE FIX

### 1. Resolución de Conflicto CSS Global

Se detectó que el widget sobrescribía los estilos globales del `body` de la escuela, forzando
un fondo gris (#f0f0f0).

- **Fix:** Eliminada la regla `body { ... }` del archivo
  `style.css` del widget.
- **Impacto:** El widget ahora respeta el fondo negro/oscuro nativo de Frogames.

UX / UI

### 2. Mejora en Visualización de Código

Los bloques de código generados por la IA se desbordaban y eran difíciles de leer/copiar.

- **Scroll Horizontal:** Añadido `overflow-x: auto` a los bloques
  `<pre>`.
- **Botón Copiar:** Implementado botón inteligente en la esquina superior derecha de cada
  bloque de código que copia el contenido al portapapeles.
- **Estilo:** Fondo oscuro (#1e1e1e) con bordes redondeados para mayor contraste.

LOGIC

### 3. Prevención de Widgets en Popups (Anti-Inception)

Los widgets se duplicaban dentro del popup de "Gamification Hub" al cargar la página completa en un
iframe.

- **Lógica:** Se añade comprobación `iframe detection` al inicio de
  `app.js` (Chat) y `rpg-floater.js`.
- **Código:** `if (window.self !== window.top) return;`
- **Resultado:** Los widgets solo cargan en la ventana principal, nunca dentro de
  iframes/popups.

DESIGN

### 4. Refinamiento del Input de Chat

Mejoras visuales para hacer la caja de escritura más cómoda y elegante.

- **Placeholder Fantasma:** Color blanco translúcido (40%) y cursiva para el texto
  *"Pregunta lo que quieras..."*.
- **Dimensiones:** Aumentada la altura mínima a **45px** (antes 20px) para
  facilitar el clic.
- **Padding:** Aumentado el espacio interpara que el texto toque los bordes.

Demo Visual: