/* ============================================================
   Alma · Animación de pensamiento a medida (v9 — modos neutralizados)
   alma-thinking v10
   Sustituye la pinza de langosta de OpenClaw por una chispa
   dorada de Alma, la diosa griega de la tecnología.
   Cubre TODOS los sitios donde aparece la pinza:
   1. Indicador de lectura/pensamiento del chat
   2. Indicador de continuación (2ª respuesta en adelante) ← v10
   3. Resumen de tarea (tiempo/tokens) con pinza respirando
   4. Indicador de actividad de subagentes
   v5: reglas globales que matan la pinza en CUALQUIER sitio,
   sin depender de la clase contenedora.
   v9 (2026-09-30): el build de OpenClaw 25/09 elige al azar entre
   12 variantes del indicador (southpaw, flurry, spin, shadowbox,
   backflip, zen, drummer, peekaboo, nodoff, curious, omnom, fakeout,
   neutral). Sus animaciones deforman/ocultan la estrella según el modo;
   v9 las neutraliza todas para que la estrella completa salga SIEMPRE.
   v10 (2026-09-30): la estrella que "desaparecía" en la 2ª respuesta
   era el `.chat-working-indicator--continuation` sin estrella sustituta.
   Se le añade la chispa de Alma y blindaje genérico para variantes.
   v11 (2026-09-30, investigación de Koppo en la app):
   - El `chat-working-indicator` ENVUELVE al `chat-reading-indicator`
     (template real del bundle control-ui-boot-shared-DJHdUjIH.js).
     v10 ponía estrella ::before al contenedor Y la burbuja interior
     ya tenía la suya + la mini orbital → primera respuesta = 3 estrellas
     (las dos estáticas solapadas = "estrella doble").
   - La pinza de la página de sesión nueva es la mascota
     `<openclaw-mascot mood="idle">` que dibuja la pinza en un
     <canvas> (NO es svg → el blindaje no la tocaba). Se oculta y se
     sustituye por la chispa grande de Alma.
   v12 (2026-09-30, Koppo reabrió la app y la estrella volvió a
   desaparecer en la primera respuesta): v11 dejó la chispa del
   contenedor SOLO en `--continuation`, y la primera respuesta pasó
   a depender del `::before` de la burbuja interior — pero la burbuja
   cambia de variante aleatoria cada mensaje y el propio bundle mata
   `::after` (.chat-reading-indicator:after{content:none}); demasiado
   frágil. SOLUCIÓN FINAL: UNA sola chispa en el CONTENEDOR
   (`.chat-working-indicator::before`), presente en TODOS los casos
   (primera respuesta y continuación), y se inutilizan las estrellas
   de la burbuja (::before/::after) para que nunca se dupliquen.
   v13 (2026-09-30): Koppo pidió recuperar la mini-chispa que orbita;
   vuelve como `::after` del contenedor (absolute, centrada sobre la
   estrella principal: left:8px), estable en TODOS los casos.
   v14 (2026-09-30): Koppo intuyó que la mini-chispa no "desaparecía":
   en móvil los mensajes van PEGADOS al borde izquierdo (sin columna de
   avatar, .chat-thread--direct .chat-group) y la órbita circular salía
   12px por la izquierda → la chispa se metía DETRÁS DEL MARCO de la
   pantalla. Fix: órbita ELÍPTICA VERTICAL (rx≈3px) que nunca abandona
   el ancho de la estrella; visible siempre.
   v15 (2026-09-30): Koppo pidió la órbita "en x" (horizontal, de lado
   a lado). Elipse horizontal rx≈7px / ry≈4px: extremo izquierdo a 1px
   del borde → visible siempre, sin escaparse por el marco.
   - Chispa principal amarillo-dorada con brillo interno
   - Respeta prefers-reduced-motion
   Creado: 2026-09-13 · v2 amarillo · v3 pinzas restantes · v4 órbita simétrica · v5 blindaje · v7 auto-check · v9 modos · v11 mascota canvas · v12 chispa única en contenedor
   ============================================================ */

/* ============ BLINDAJE NUCLEAR: mata cualquier pinza ============ */

/* La mandíbula de la pinza, dondequiera que esté */
svg .claw-icon__jaw {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Cualquier svg que sea el icono pinza (o que viva dentro de un
   indicador de estado del chat) */
.chat-reading-indicator svg,
.chat-working-indicator svg,
.chat-tasks-status__claw svg,
.chat-subagent-activity__indicator svg,
.chat-bubble.chat-reading-indicator svg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============ 1. Indicador de lectura/pensamiento ============ */

/* Ocultar la pinza original — reforzado con !important para que
   ninguna regla del bundle pueda devolverla a la vida */
.chat-reading-indicator.chat-reading-indicator svg {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* v12: la burbuja interior ya NO pinta estrellas — la única chispa
   vive en el CONTENEDOR `.chat-working-indicator::before` (sección 1b),
   que existe en TODOS los casos (primera respuesta y continuación).
   Inutilizamos los pseudo-elementos de la burbuja para que nunca se
   dupliquen ni desaparezcan según la variante aleatoria del mensaje. */
.chat-reading-indicator.chat-reading-indicator::before,
.chat-reading-indicator.chat-reading-indicator::after {
  content: none !important;
  display: none !important;
}

@keyframes alma-sparkle {
  0%,
  100% {
    transform: scale(0.9) rotate(0deg);
    opacity: 0.9;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.55));
  }
  35% {
    transform: scale(1.18) rotate(45deg);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 14px rgba(255, 200, 0, 0.4));
  }
  60% {
    transform: scale(1.02) rotate(22deg);
    opacity: 0.95;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
  }
}

@keyframes alma-orbit {
  /* v15: órbita ELÍPTICA HORIZONTAL (rx≈7px, ry≈4px) — Koppo la pidió
     "en x": la mini-chispa va de lado a lado alrededor de la estrella.
     El extremo izquierdo queda a left:8px − 7px = 1px del borde del
     contenedor → NUNCA se sale por el marco del móvil (los mensajes
     van pegados al borde en .chat-thread--direct). */
  0% {
    opacity: 0.85;
    transform: translate(7px, 0) scale(0.8) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: translate(0, 4px) scale(1) rotate(90deg);
  }
  50% {
    opacity: 0.85;
    transform: translate(-7px, 0) scale(0.8) rotate(180deg);
  }
  75% {
    opacity: 1;
    transform: translate(0, -4px) scale(1) rotate(270deg);
  }
  100% {
    opacity: 0.85;
    transform: translate(7px, 0) scale(0.8) rotate(360deg);
  }
}

/* ============ 1b. Indicador de continuación / trabajando ============ */

/* v12 (2026-09-30): UNA sola chispa en el contenedor, para TODOS los
   casos (primera respuesta y continuación). El template real del bundle
   (control-ui-boot-shared-BpwdVi0Y.js / DJHdUjIH.js) muestra:
     <div class="chat-working-indicator ${continuation?}">
       (burbuja .chat-reading-indicator SOLO si no es continuación)
       <span class="chat-working-indicator__status">…</span>
     </div>
   El contenedor existe SIEMPRE; la burbuja cambia de variante
   aleatoria por mensaje y su ::after lo mata el propio bundle
   (.chat-reading-indicator:after{content:none}). Por eso la chispa
   va aquí, en el contenedor, y la burbuja queda neutralizada (secc. 1).
   Resultado: EXACTAMENTE 1 estrella en primera respuesta y en
   continuación, inmune a las variantes. */
.chat-working-indicator.chat-working-indicator {
  position: relative;
}

.chat-working-indicator.chat-working-indicator::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: radial-gradient(
    circle at 35% 30%,
    #fff8cc 0%,
    #ffd700 45%,
    #ffb300 80%,
    #e69900 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: alma-sparkle 2.8s ease-in-out infinite;
}

/* Mini-chispa compañera: orbita alrededor de la estrella principal.
   Vive en el CONTENEDOR (::after, absoluto centrado sobre la estrella
   de 16px → left:8px), estable en TODOS los casos; la burbuja interior
   está neutralizada en la sección 1 y no puede interferir.
   v15: órbita ELÍPTICA HORIZONTAL "en x" (ver @keyframes alma-orbit):
   va de lado a lado sin salirse nunca por el marco del móvil. */
.chat-working-indicator.chat-working-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: -4px;
  background: radial-gradient(
    circle at 35% 30%,
    #fff8cc 0%,
    #ffd700 55%,
    #f59e0b 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.85;
  animation: alma-orbit 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* ============ 2. Resumen de tarea (tiempo/tokens) ============ */

/* Ocultar la pinza del recap y poner la chispa dorada en su lugar */
.chat-tasks-status__claw.chat-tasks-status__claw svg {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

.chat-tasks-status__claw.chat-tasks-status__claw {
  position: relative;
}

.chat-tasks-status__claw.chat-tasks-status__claw::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: radial-gradient(
    circle at 35% 30%,
    #fff8cc 0%,
    #ffd700 45%,
    #ffb300 80%,
    #e69900 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: alma-sparkle 2.8s ease-in-out infinite;
}

/* ============ 3. Actividad de subagentes ============ */

/* El span de subagentes también tiene .chat-reading-indicator, así que
   ya queda cubierto por las reglas de la sección 1. */

/* ============ 4. NEUTRALIZAR MODOS ALEATORIOS (build 25/09) ============ */

/* El bundle nuevo de OpenClaw elige al azar entre 12 variantes del
   indicador de pensamiento (`.chat-reading-indicator--southpaw`,
   `--flurry`, `--spin`, `--shadowbox`, `--backflip`, `--zen`,
   `--drummer`, `--peekaboo`, `--nodoff`, `--curious`, `--omnom`,
   `--fakeout`, `--neutral`). Sus animaciones se aplican al contenedor
   o al svg y hacen que la estrella de Alma aparezca distinta, rota,
   escondida o "desaparezca" según el modo que toque en cada mensaje.
   Forzamos el modo clásico: sin animaciones de variante. */

.chat-reading-indicator--southpaw,
.chat-reading-indicator--flurry,
.chat-reading-indicator--spin,
.chat-reading-indicator--shadowbox,
.chat-reading-indicator--backflip,
.chat-reading-indicator--zen,
.chat-reading-indicator--drummer,
.chat-reading-indicator--peekaboo,
.chat-reading-indicator--nodoff,
.chat-reading-indicator--curious,
.chat-reading-indicator--omnom,
.chat-reading-indicator--fakeout,
.chat-reading-indicator--neutral {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

/* v10: genérico por si futuros builds añaden clases nuevas de variante */
[class*="chat-reading-indicator--"] svg,
[class*="chat-working-indicator--"] svg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

[class*="chat-reading-indicator--"]::before,
[class*="chat-working-indicator--"]::before {
  animation: alma-sparkle 2.8s ease-in-out infinite !important;
}

.chat-reading-indicator--southpaw svg,
.chat-reading-indicator--flurry svg,
.chat-reading-indicator--spin svg,
.chat-reading-indicator--shadowbox svg,
.chat-reading-indicator--backflip svg,
.chat-reading-indicator--zen svg,
.chat-reading-indicator--drummer svg,
.chat-reading-indicator--peekaboo svg,
.chat-reading-indicator--nodoff svg,
.chat-reading-indicator--curious svg,
.chat-reading-indicator--omnom svg,
.chat-reading-indicator--fakeout svg {
  animation: none !important;
}

/* El ✦ sorpresa del modo shadowbox nunca debe aparecer */
.chat-reading-indicator--shadowbox::after {
  content: none !important;
  display: none !important;
}

/* El modo neutral usa puntitos en <span>; los ocultamos,
   la estrella de Alma es la única que manda */
.chat-reading-indicator--neutral > span {
  display: none !important;
}

/* ============ 5. MASCOTA DE BIENVENIDA (sesión nueva) ============ */

/* v11: la página de sesión nueva (`agent-chat__welcome-clawd`) renderiza
   `<openclaw-mascot mood="idle">` que dibuja la PINZA DE LANGOSTA en un
   <canvas>. No es un svg, así que el blindaje de arriba no la cubría
   (por eso Koppo veía la pinza al abrir sesión nueva, y no era caché).
   Ocultamos la mascota y ponemos la chispa grande de Alma. */
.agent-chat__welcome-clawd openclaw-mascot {
  display: none !important;
  visibility: hidden !important;
}

.agent-chat__welcome-clawd.agent-chat__welcome-clawd {
  position: relative;
}

.agent-chat__welcome-clawd.agent-chat__welcome-clawd::before {
  content: "";
  width: 56px;
  height: 56px;
  background: radial-gradient(
    circle at 35% 30%,
    #fff8cc 0%,
    #ffd700 45%,
    #ffb300 80%,
    #e69900 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: alma-sparkle 2.8s ease-in-out infinite;
}

/* Mascota pequeña del panel de asistente (16px, también canvas-pinza) */
.assistant-panel-title openclaw-mascot {
  display: none !important;
  visibility: hidden !important;
}

.assistant-panel-title.assistant-panel-title {
  position: relative;
}

.assistant-panel-title.assistant-panel-title::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: radial-gradient(
    circle at 35% 30%,
    #fff8cc 0%,
    #ffd700 45%,
    #ffb300 80%,
    #e69900 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1 L14.2 9.8 L23 12 L14.2 14.2 L12 23 L9.8 14.2 L1 12 L9.8 9.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: alma-sparkle 2.8s ease-in-out infinite;
}

/* ============ Movimiento reducido ============ */

@media (prefers-reduced-motion: reduce) {
  .chat-working-indicator.chat-working-indicator::before,
  .chat-tasks-status__claw.chat-tasks-status__claw::before,
  .agent-chat__welcome-clawd.agent-chat__welcome-clawd::before,
  .assistant-panel-title.assistant-panel-title::before {
    animation: none;
    transform: none;
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
  }
  .chat-working-indicator.chat-working-indicator::after {
    animation: none;
    opacity: 0.85;
    transform: translate(7px, -4px) scale(0.8);
  }
}