/* ════════════════════════════════════════════════════════════════
   ALYX POLISH — Micro-animaciones premium
   ════════════════════════════════════════════════════════════════
   Aplicado sobre elementos existentes via selectores CSS, sin tocar
   JavaScript. Coherente con el branding (dorado + crimson) y la
   identidad oscura del proyecto.

   Cubre:
     · Simple Mode cards (.sm-card2) — hover zoom + glow dorado
     · Curva de intensidad — glow al hover sobre el wrap
     · Transform/Effect/Vocal buttons — hover lift + glow
     · Quick Ideas — hover scale + glow emocional
     · Emotion buttons — hover scale
     · Genre cards — hover lift
     · Insights items — hover slide
     · Compose button — hover pulse
     · Help button — hover rotate

   IMPORTANTE: NO meto métricas inventadas (Coherence Score, etc.)
   ni "chat estilo Alyx" porque eso son features, no polish, y
   están descartadas para v1.
   ════════════════════════════════════════════════════════════════ */

/* ── Simple Mode Cards ─────────────────────────────────────── */
.sm-card2{
  transition:
    transform .25s cubic-bezier(.4, 0, .2, 1),
    box-shadow .25s ease,
    border-color .25s ease;
  will-change: transform;
}
.sm-card2:hover:not(.selected){
  transform: translateY(-3px) scale(1.015);
  box-shadow:
    0 8px 24px rgba(0,0,0,.5),
    0 0 0 1px rgba(232,184,75,.35),
    0 0 28px rgba(232,184,75,.18);
}
.sm-card2.selected{
  box-shadow:
    0 4px 16px rgba(0,0,0,.5),
    0 0 0 2px rgba(232,184,75,.7),
    0 0 36px rgba(232,184,75,.28);
}
.sm-card2-img{
  transition: filter .3s ease;
}
.sm-card2:hover .sm-card2-img{
  filter: brightness(1.08) saturate(1.1);
}

/* Card description textarea — focus glow */
.sm-card2-desc{
  transition: background .2s, box-shadow .2s;
}
.sm-card2-desc:focus{
  background: rgba(232,184,75,.05);
  box-shadow: inset 0 0 0 1px rgba(232,184,75,.4);
  outline: none;
}

/* ── Intensity Curve — glow at hover ───────────────────────── */
.sm2-curve-wrap{
  transition: box-shadow .35s ease;
  border-radius: 6px;
}
.sm2-curve-wrap:hover{
  box-shadow:
    inset 0 0 0 1px rgba(232,184,75,.25),
    0 0 40px rgba(232,184,75,.12);
}

/* The Advanced Mode curves area too */
#apmCurves{
  transition: box-shadow .35s ease;
}
#apmCurves:hover{
  box-shadow:
    inset 0 0 0 1px rgba(232,184,75,.18),
    0 0 36px rgba(232,184,75,.08);
}

/* ── Transform / Effect / Vocal buttons — premium hover ────── */
.alyx-rp-tx-btn{
  position: relative;
  overflow: hidden;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .2s ease;
}
.alyx-rp-tx-btn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(232,184,75,.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.alyx-rp-tx-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 4px 12px rgba(0,0,0,.3),
    0 0 0 1px rgba(232,184,75,.5);
}
.alyx-rp-tx-btn:hover::before{
  opacity: 1;
}
.alyx-rp-tx-btn:active{
  transform: translateY(0) scale(.98);
  transition-duration: .08s;
}

/* Effects buttons — cyan accent overrides */
.alyx-rp-tx-btn-effect:hover{
  box-shadow:
    0 4px 12px rgba(0,0,0,.3),
    0 0 0 1px rgba(74,208,216,.55);
}
.alyx-rp-tx-btn-effect::before{
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(74,208,216,.2) 0%, transparent 60%);
}

/* Vocal buttons — crimson accent */
.alyx-rp-tx-btn-vocal:hover{
  box-shadow:
    0 4px 12px rgba(0,0,0,.3),
    0 0 0 1px rgba(232,74,96,.55);
}
.alyx-rp-tx-btn-vocal::before{
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
              rgba(232,74,96,.2) 0%, transparent 60%);
}

/* ── Quick Ideas — scale + glow ────────────────────────────── */
.alyx-quick-emo-btn{
  position: relative;
  transition:
    transform .18s cubic-bezier(.34, 1.4, .64, 1),
    background .15s,
    border-color .15s,
    color .15s,
    box-shadow .2s;
}
.alyx-quick-emo-btn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 6px 16px rgba(0,0,0,.4),
    0 0 24px rgba(232,184,75,.18);
}
.alyx-quick-emo-btn:active{
  transform: translateY(0) scale(.97);
}
.alyx-quick-emo-icon{
  transition: transform .2s ease;
  display: inline-block;
}
.alyx-quick-emo-btn:hover .alyx-quick-emo-icon{
  transform: scale(1.15) rotate(-3deg);
}

/* ── Emotion buttons — scale ───────────────────────────────── */
.em-btn2{
  transition: transform .15s, background .15s, border-color .15s;
}
.em-btn2:hover{
  transform: translateY(-1px);
}
.em-btn2.active{
  box-shadow: 0 0 0 1px rgba(232,184,75,.6), 0 0 18px rgba(232,184,75,.2);
}

/* ── Genre cards — lift on hover ───────────────────────────── */
.gp-rec-card,
.genre-item{
  transition: transform .15s, background .15s, border-color .15s, box-shadow .2s !important;
}
.gp-rec-card:hover,
.genre-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3), 0 0 0 1px rgba(232,184,75,.5);
}

/* ── Insights items — slide on hover ───────────────────────── */
.alyx-ins-item{
  transition: transform .15s, background .15s;
}
.alyx-ins-item[data-secid]:hover{
  transform: translateX(3px);
}

/* ── Compose button — gentle pulse + hover pop ─────────────── */
#alyxComposeBtn{
  position: relative;
  animation: alyx-compose-pulse 3.5s ease-in-out infinite;
  transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), background .15s, box-shadow .2s !important;
}
#alyxComposeBtn:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 8px 24px rgba(232,184,75,.35),
    0 0 0 1px rgba(232,184,75,.6) !important;
  animation: none;
}
#alyxComposeBtn:active{
  transform: translateY(0) scale(.98);
}
@keyframes alyx-compose-pulse{
  0%, 100%{ box-shadow: 0 2px 12px rgba(0,0,0,.4); }
  50%     { box-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 22px rgba(232,184,75,.22); }
}

/* ── Help button — rotate on hover ─────────────────────────── */
.alyx-ob-help{
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), border-color .2s, color .2s, box-shadow .25s !important;
}
.alyx-ob-help:hover{
  transform: scale(1.12) rotate(15deg);
}

/* ── Topbar more button — rotate on hover ──────────────────── */
.alyx-topbar-more{
  transition: transform .2s, background .15s, border-color .15s, color .15s !important;
}
.alyx-topbar-more:hover{
  transform: rotate(90deg);
}

/* ── Suggestion items — slide ──────────────────────────────── */
.alyx-rp-sug-item{
  transition: transform .15s, background .15s, border-color .15s !important;
}
.alyx-rp-sug-item:hover{
  transform: translateX(3px);
}

/* ── Sidebar tool buttons (if any) ─────────────────────────── */
.alyx-sb-tool-btn{
  transition: transform .15s, background .15s, border-color .15s !important;
}
.alyx-sb-tool-btn:hover{
  transform: translateX(3px);
}

/* ── Tooltip Next button — already has bounce, accentuated ── */
.alyx-ob-next{
  transition: transform .2s cubic-bezier(.34, 1.4, .64, 1), background .15s, box-shadow .2s !important;
}
.alyx-ob-next:hover{
  transform: translateY(-2px) scale(1.04);
}

/* ════════════════════════════════════════════════════════════════
   v2 POLISH — Celda activa, tipografía, Generate dominante, mini-map
   ════════════════════════════════════════════════════════════════ */

/* ── 2. Celda activa con glow dorado + elevación ───────────── */
.seq-cell.selected{
  position: relative;
  z-index: 6;
  transform: translateY(-2px);
  transition: transform .15s ease, box-shadow .2s ease;
}
.seq-cell.selected::before{
  content: '';
  position: absolute;
  inset: 0;
  box-shadow:
    0 0 0 2px rgba(232,184,75,.85),
    0 4px 14px rgba(0,0,0,.4),
    0 0 24px rgba(232,184,75,.35),
    0 0 48px rgba(232,184,75,.15);
  pointer-events: none;
  border-radius: 3px;
  z-index: 5;
  animation: alyx-cell-glow 2.5s ease-in-out infinite;
}
@keyframes alyx-cell-glow{
  0%, 100%{
    box-shadow:
      0 0 0 2px rgba(232,184,75,.85),
      0 4px 14px rgba(0,0,0,.4),
      0 0 24px rgba(232,184,75,.35),
      0 0 48px rgba(232,184,75,.15);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(255,210,110,1),
      0 4px 16px rgba(0,0,0,.5),
      0 0 34px rgba(232,184,75,.55),
      0 0 68px rgba(232,184,75,.25);
  }
}

/* ── 1. Reducir ruido visual (conservador) ─────────────────── */
/* Bajar contraste de divisorias 30% */
.seq-cell{
  border-right-color: rgba(255,255,255,.05) !important;
}
.track-col-headers,
.track-row{
  border-color: rgba(255,255,255,.06) !important;
}
/* Texto secundario más tenue (15%) */
.ls-tag,
.scale-desc,
.track-sub,
.seq-cell-sub{
  opacity: .82;
}
/* Labels auxiliares un punto más discretos */
.ls-label{
  opacity: .88;
}

/* ── 4. Jerarquía tipográfica ──────────────────────────────── */
/* Títulos más grandes */
.insp-panel-tab,
.alyx-rp-selected-title,
.alyx-ins-title{
  font-size: 13px !important;
  letter-spacing: 1.2px !important;
}
.ls-logo-text{
  font-size: 22px !important;
}
.step-title{
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* Descripciones un punto más pequeñas */
.step-desc{
  font-size: 11px !important;
  opacity: .75;
}
.alyx-rp-selected-clip{
  font-size: 11.5px !important;
}
/* Labels secundarios más discretos */
.t-meta,
.t-stats span{
  font-size: 10.5px !important;
  opacity: .8;
}

/* ── 6. Botón Generate / Compose más dominante ─────────────── */
#alyxComposeBtn{
  padding: 14px 22px !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  background: linear-gradient(180deg, rgba(232,184,75,.28), rgba(232,184,75,.14)) !important;
  border-width: 1.5px !important;
  box-shadow:
    0 4px 18px rgba(0,0,0,.5),
    0 0 20px rgba(232,184,75,.2) !important;
}
#alyxComposeBtn:hover{
  box-shadow:
    0 8px 28px rgba(232,184,75,.4),
    0 0 0 1.5px rgba(232,184,75,.8) !important;
}
/* Export en transport — también un poco más dominante */
.t-action-btn.gold{
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: 0 0 0 1px rgba(232,184,75,.4), 0 0 16px rgba(232,184,75,.18);
}

/* ── 3. Más protagonismo a Insights cuando hay novedad ─────── */
#alyxInsightsPanel.alyx-ins-has-news{
  animation: alyx-ins-glow 2s ease-in-out infinite;
}
@keyframes alyx-ins-glow{
  0%, 100%{
    box-shadow:
      0 -2px 12px rgba(0,0,0,.3),
      0 0 0 0 rgba(232,184,75,0);
  }
  50%{
    box-shadow:
      0 -2px 16px rgba(0,0,0,.4),
      0 -2px 24px rgba(232,184,75,.25);
  }
}
/* Title del insights más grande cuando está flotante */
#alyxInsightsPanel.alyx-ins-floating .alyx-ins-title{
  font-size: 14px !important;
  letter-spacing: 1.6px !important;
}

/* ── 7. Mini mapa de estructura (dentro del sequencer) ─────── */
.alyx-mini-map{
  display: flex;
  gap: 2px;
  padding: 6px 14px;
  background: var(--bg2, #1e1e26);
  border-bottom: 1px solid var(--border, #28283a);
}
.alyx-mini-map-section{
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  transition: all .2s ease;
  cursor: pointer;
  position: relative;
}
.alyx-mini-map-section:hover{
  height: 6px;
  margin-top: -1px;
  background: rgba(232,184,75,.4);
}
.alyx-mini-map-section.active{
  background: var(--gold, #e8b84b);
  box-shadow: 0 0 8px rgba(232,184,75,.5);
}
.alyx-mini-map-section[data-phase="intro"]    { background: #4a78c8; }
.alyx-mini-map-section[data-phase="build"]    { background: #74a8d8; }
.alyx-mini-map-section[data-phase="climax"]   { background: #e84a60; }
.alyx-mini-map-section[data-phase="aftermath"]{ background: #a04ae8; }
.alyx-mini-map-section[data-phase="outro"]    { background: #4ac870; }

/* ── 5. Header con métricas (duration, sections, instruments) ── */
.alyx-meta-header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--bg2, #1e1e26);
  border-bottom: 1px solid var(--border, #28283a);
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
}
.alyx-meta-item{
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.alyx-meta-label{ opacity: .65; }
.alyx-meta-value{
  font-family: var(--ff-mono, monospace);
  font-size: 12px;
  color: var(--gold, #e8b84b);
  letter-spacing: .5px;
}

/* ════════════════════════════════════════════════════════════════
   v3 POLISH — Add Section bar reorganizada
   ════════════════════════════════════════════════════════════════ */

.seq-add-row{
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 0 14px !important;
  height: 44px;
}
.seq-add-sec{
  flex-shrink: 0;
}
.seq-add-sep{
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
.seq-add-toolbar{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.seq-add-tool{
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  color: var(--text2, #b8b0a2);
  width: 30px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .12s ease;
  padding: 0;
}
.seq-add-tool:hover{
  background: var(--bg3, #252532);
  border-color: rgba(232,184,75,.5);
  color: var(--gold, #e8b84b);
  transform: translateY(-1px);
}
.seq-add-tool:active{
  transform: translateY(0) scale(.96);
}
.seq-add-drag-hint{
  flex: 1;
  text-align: center;
  font-family: var(--ff-cinzel, serif);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
  opacity: .6;
}

/* ════════════════════════════════════════════════════════════════
   v4 POLISH — Prompt preview en vivo abajo del sequencer
   ════════════════════════════════════════════════════════════════ */

.alyx-prompt-preview{
  flex: 1;
  min-height: 120px;
  background: linear-gradient(180deg, rgba(10,10,18,.5), rgba(8,8,14,.7));
  border-top: 1px solid rgba(232,184,75,.12);
  padding: 14px 18px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alyx-pp-header{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.alyx-pp-mode-tag{
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold, #e8b84b);
  background: rgba(232,184,75,.1);
  border: 1px solid rgba(232,184,75,.3);
  padding: 2px 7px;
  border-radius: 3px;
}
.alyx-pp-mode-tag.alyx-pp-mode-solo{
  color: #ff6680;
  background: rgba(255,102,128,.12);
  border-color: rgba(255,102,128,.4);
}
.alyx-pp-title{
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3, #8c8490);
}
.alyx-pp-body{
  font-family: var(--ff-mono, monospace);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text2, #b8b0a2);
  white-space: pre-wrap;
  word-break: break-word;
}
.alyx-pp-global-body{
  padding: 4px 0;
}
.alyx-pp-solo-body{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.alyx-pp-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.alyx-pp-sec{
  font-family: var(--ff-cinzel, serif);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold, #e8b84b);
  flex-shrink: 0;
  min-width: 80px;
}
.alyx-pp-arrow{
  color: var(--text3, #8c8490);
  flex-shrink: 0;
}
.alyx-pp-text{
  flex: 1;
  font-family: var(--ff-mono, monospace);
  font-size: 11.5px;
}
.alyx-pp-empty{
  color: var(--text3, #8c8490);
  font-style: italic;
  opacity: .5;
}

/* ════════════════════════════════════════════════════════════════
   Onboarding — fix blur tapping the target
   ════════════════════════════════════════════════════════════════ */
/* Bajamos el blur a 4px (era 8px, oscurecía demasiado y se veía borroso) */
.alyx-ob-overlay.alyx-ob-overlay-show{
  background: rgba(8, 8, 14, .68) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* El elemento target debe quedar nítido — elevamos su z-index con
   pointer-events para que se vea por encima del blur del overlay.
   Usamos una clase que JS añade al elemento target. */
.alyx-ob-target-elevated{
  position: relative !important;
  z-index: 10560 !important;
  isolation: isolate !important;
}

/* ── Simple-mode tour: drop the blur backdrop ──
   Targets in the simple-mode tour live inside #simpleModeOverlay, which has
   position:fixed + z-index:400 → it creates its own stacking context, and
   that context confines descendant z-index. So the .alyx-ob-target-elevated
   trick above (10560) doesn't escape the parent's z:400 — the highlighted
   element stays under the tour's z:10500 blurred backdrop and gets blurred
   along with everything else, leaving the gold glow ring pointing at a smear.

   Rather than tear apart the stacking model, we just suppress the blur for
   the simple-mode tour. The breathing gold glow ring + tooltip are plenty
   of visual signal on their own (it's how Intro.js, Shepherd etc. work by
   default). Body class `alyx-ob-active-simple` is added by start() in
   atp-onboarding.js and removed by _end(). */
body.alyx-ob-active-simple .alyx-ob-overlay.alyx-ob-overlay-show{
  background: rgba(8, 8, 14, .22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ════════════════════════════════════════════════════════════════
   v5 POLISH — Sequencer doble alto, preview altura limitada
   ════════════════════════════════════════════════════════════════ */

/* Forzar 5 filas de tracks visibles. Cada .track-row real mide
   ~78px (incluye padding + waveform preview), así que 5 × 78 = 390px
   con margen de seguridad → 460px. */
#seqRows{
  min-height: 460px !important;
  flex: 2 1 auto !important;
}

/* Preview del prompt: ocupa el espacio QUE QUEDA hasta abajo del
   centro. Termina justo encima del transport — alineado con la base
   de Quick Actions del sidebar. NO altura fija — flex 1. Marco fino
   para separarlo de Add Section. */
.alyx-prompt-preview{
  flex: 1 1 auto !important;
  min-height: 140px !important;
  max-height: none !important;
  overflow-y: auto !important;
  margin: 8px 12px 12px !important;
  border: 1px solid rgba(232,184,75,.18) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(10,10,18,.55), rgba(8,8,14,.75)) !important;
}

/* El centro principal: que reparta dando prioridad al sequencer
   pero respetando un mínimo al preview. */
.app-center{
  display: flex !important;
  flex-direction: column !important;
}

/* ── Fix dos scrolls solapados en lateral derecho ─────────────
   El inspector-panel (legacy) está fixed en right:-340px cuando
   no está open, pero sigue mostrando su scrollbar. Lo ocultamos
   completamente cuando no está open. */
.inspector-panel:not(.open){
  display: none !important;
}

/* El ctx-panel mantiene su scroll único en .ctx-body */


/* Quick Ideas: visible dentro del sidebar en su posición natural */
.alyx-quick-ideas-block{
  display: block !important;
  visibility: visible !important;
}