/* ════════════════════════════════════════════════════════════════
   ALYX — PER-CELL REGENERATION (CSS)
   ────────────────────────────────────────────────────────────────
   Panel mínimo. Una fila de gestos, un susurro de contexto.
   No header, no labels de formulario, no botones de cancelar
   (Esc y click fuera cancelan). El conjunto debe leerse como un
   instrumento, no como un cuadro de diálogo.

   Layout:
     ┌───────────────────────────────────────────────┐
     │  [scope pills]   [✦]   [↻]   [✕]              │
     │  piano · climax — grief, in D Minor           │
     └───────────────────────────────────────────────┘
   ════════════════════════════════════════════════════════════════ */

/* ── Panel container ─────────────────────────────────────────── */
.alyx-regen-panel {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 14px);
  z-index: 10000;

  background: rgba(20, 20, 32, .82);
  border: 1px solid rgba(167, 139, 250, .15);
  /* Pill alargada con pie suave para acomodar el whisper. El whisper
     gestiona su propia altura — si está vacío no añade espacio. */
  border-radius: 22px;
  padding: 6px 8px 7px 14px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, .55),
    0 0 24px rgba(139, 92, 246, .06);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: rgba(232, 224, 248, .92);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .22s cubic-bezier(.2, .8, .3, 1),
    transform .26s cubic-bezier(.2, .8, .3, 1),
    visibility 0s linear .26s;
}
.alyx-regen-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity .22s cubic-bezier(.2, .8, .3, 1),
    transform .26s cubic-bezier(.2, .8, .3, 1),
    visibility 0s linear 0s;
}

/* ── Fila única de controles ─────────────────────────────────── */
.arp-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Scope pills (los tres modos) ────────────────────────────── */
.arp-scope {
  display: inline-flex;
  gap: 2px;
}
.arp-scope-pill {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(232, 224, 248, .50);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: .1px;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.arp-scope-pill:hover:not(.is-active) {
  color: rgba(232, 224, 248, .85);
  background: rgba(255, 255, 255, .04);
}
.arp-scope-pill.is-active {
  background: linear-gradient(180deg,
    rgba(167, 139, 250, .20),
    rgba(139, 92, 246, .10));
  color: rgba(238, 232, 255, .96);
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .32);
  font-style: normal;
}

/* ── Blend toggle (✦) ────────────────────────────────────────── */
/* Una sola estrella que pulsa muy suavemente cuando está activa.
   Toggle visceral, sin label. Tooltip explica si hace falta. */
.arp-blend {
  appearance: none;
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(232, 224, 248, .30);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  margin-left: 4px;
  transition: color .25s ease, background .25s ease, transform .15s ease;
}
.arp-blend:hover {
  color: rgba(232, 224, 248, .8);
  background: rgba(255, 255, 255, .05);
}
.arp-blend.is-on {
  color: rgba(190, 165, 255, .92);
  animation: arpBlendPulse 3.2s ease-in-out infinite;
}
.arp-blend:active {
  transform: scale(.92);
}
@keyframes arpBlendPulse {
  0%, 100% { opacity: .85; text-shadow: 0 0 0 transparent; }
  50%      { opacity: 1;   text-shadow: 0 0 8px rgba(167, 139, 250, .55); }
}

/* ── Regenerate (↻) — acción primaria ────────────────────────── */
.arp-go {
  appearance: none;
  background: linear-gradient(180deg,
    rgba(167, 139, 250, .26),
    rgba(109, 63, 223, .14));
  border: 1px solid rgba(167, 139, 250, .42);
  color: rgba(248, 244, 255, 1);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.arp-go:hover {
  background: linear-gradient(180deg,
    rgba(167, 139, 250, .38),
    rgba(109, 63, 223, .22));
  border-color: rgba(167, 139, 250, .65);
  box-shadow: 0 0 14px rgba(139, 92, 246, .25);
}
.arp-go:active {
  transform: scale(.94) rotate(35deg);
}

/* ── Close (✕) — sutil ──────────────────────────────────────── */
.arp-close {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(232, 224, 248, .35);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
  transition: color .15s, background .15s;
}
.arp-close:hover {
  color: rgba(232, 224, 248, .85);
  background: rgba(255, 255, 255, .05);
}

/* ── Susurro contextual ─────────────────────────────────────── */
.arp-whisper {
  margin: 5px 8px 0 14px;
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .25px;
  color: rgba(232, 224, 248, .42);
  text-align: center;
  line-height: 1.4;
  min-height: 0;
}
.arp-whisper:empty {
  display: none;
}

/* ── Focus accesible ─────────────────────────────────────────── */
.arp-scope-pill:focus-visible,
.arp-blend:focus-visible,
.arp-go:focus-visible,
.arp-close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(167, 139, 250, .55),
    0 0 12px rgba(139, 92, 246, .2);
}

/* ── Item Anchor en el ctxMenu ──────────────────────────────── */
/* El glifo ⟡ debe sentirse como una marca, no como un candado de
   sistema. Pequeño ajuste de opacidad y sin highlight loud. */
.ctx-item .ctx-lock-label {
  display: inline;
}
.ctx-item.disabled {
  opacity: .35;
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .alyx-regen-panel {
    bottom: 14px;
    left: 12px;
    right: 12px;
    transform: translateY(14px);
    width: auto;
    border-radius: 18px;
    padding: 6px 8px;
  }
  .alyx-regen-panel.is-open {
    transform: translateY(0);
  }
  .arp-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  .arp-scope-pill {
    font-size: 10px;
    padding: 5px 9px;
  }
}

/* ── Light theme parity ─────────────────────────────────────── */
[data-theme="light"] .alyx-regen-panel {
  background: rgba(252, 250, 255, .92);
  border-color: rgba(139, 92, 246, .22);
  color: rgba(40, 25, 70, .92);
  box-shadow:
    0 16px 48px rgba(60, 40, 100, .22),
    0 0 24px rgba(139, 92, 246, .06);
}
[data-theme="light"] .arp-scope-pill          { color: rgba(40, 25, 70, .50); }
[data-theme="light"] .arp-scope-pill:hover:not(.is-active) {
  background: rgba(0, 0, 0, .04);
  color: rgba(40, 25, 70, .92);
}
[data-theme="light"] .arp-scope-pill.is-active {
  background: linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(109, 63, 223, .10));
  color: rgba(30, 15, 70, .96);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .32);
}
[data-theme="light"] .arp-blend               { color: rgba(40, 25, 70, .30); }
[data-theme="light"] .arp-blend:hover         { color: rgba(40, 25, 70, .85); background: rgba(0, 0, 0, .04); }
[data-theme="light"] .arp-blend.is-on         { color: rgba(109, 63, 223, .92); }
[data-theme="light"] .arp-close               { color: rgba(40, 25, 70, .35); }
[data-theme="light"] .arp-close:hover         { color: rgba(40, 25, 70, .85); background: rgba(0, 0, 0, .04); }
[data-theme="light"] .arp-whisper             { color: rgba(40, 25, 70, .50); }