/* PHSBOT — Indicador de escritura (teclado estilizado, pulsación aleatoria una a una) */

/* Wrapper accesible */
.phs-typing-wrap{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  line-height:1;
}

/* Mantener texto para SR; visualmente oculto al montar el icono */
.phs-typing-wrap.has-icon .phs-typing-text{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}
.phs-typing-text{
  font-size:12px; text-transform:uppercase; letter-spacing:.04em; opacity:.9;
}

/* Icono teclado más grande y limpio */
.phs-typing-icon{
  width:44px;
  height:28px;
  display:inline-block;
}
.phs-typing-icon svg{ display:block; width:100%; height:100%; }

/* Carcasa del teclado (marco) */
.phs-kbd-shell{
  fill:#fff;                /* fondo blanco del teclado */
  stroke: currentColor;     /* borde toma el color del contenedor */
  stroke-opacity:.35;
  stroke-width:1.2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
  rx:8; ry:8;
}

/* Monitor / barra superior con respiración sutil */
.phs-kbd-monitor{
  fill: currentColor;
  opacity:.35;
  animation: phs-monitor 1.8s ease-in-out infinite;
}

@keyframes phs-monitor{
  0%,100% { opacity:.35; }
  50%     { opacity:.85; }
}

/* Teclas: por defecto BLANCAS con BORDE (sin animación CSS) */
.phs-key{
  fill:#fff;
  stroke: currentColor;
  stroke-opacity:.55;
  stroke-width:.9;
  rx:1.6; ry:1.6;
  transform-origin:center;
  transition: transform .12s ease, fill .12s ease, stroke .12s ease, stroke-opacity .12s ease;
}

/* Estado pulsada: VERDE OSCURO y leve bajada */
.phs-key.is-pressed{
  transform: translateY(1.6px);
  fill:#0a6a3a;                 /* verde oscuro */
  stroke:#0a6a3a;
  stroke-opacity:1;
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .phs-kbd-monitor{ animation:none; }
  .phs-key{ transition:none; }
}