@import url('/music/assets/css/app.css');

/* Header */
.interpreter-meta{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.interpreter-meta input{
  width:100%;padding:12px;border-radius:12px;border:1px solid #2a2a33;
  background:#111;color:#fff;font-weight:700
}

/* Lyrics editor */
#lyrics-editor{line-height:2.2;user-select:none}
.lyric-word{display:inline-flex;gap:2px;margin:2px}
.lyric-segment{
  padding:4px 6px;border-radius:10px;border:1px solid rgba(0,0,0,0.3);
  cursor:pointer;transition:transform 120ms ease, opacity 120ms ease;
  min-width:10px
}
.lyric-segment:active{transform:scale(0.94)}
.lyric-segment.locked{opacity:0.28;filter:grayscale(1);cursor:not-allowed}
.lyric-segment.editing{outline:2px dashed rgba(255,255,255,0.35)}
/* AI suggested word split */
.lyric-word.ai-suggested{outline:1px dashed rgba(255,255,255,0.18);border-radius:12px;padding:2px}

/* Confidence badge */
.conf{
  display:inline-block;margin-left:4px;font-size:0.75rem;opacity:0.8
}
.conf.high{color:#4caf50}
.conf.medium{color:#ffc107}
.conf.low{color:#f44336}

/* Picker (strip) */
#nochord-picker{
  position:fixed;left:0;right:0;bottom:0;background:#000;
  border-top:1px solid #222;padding:12px;z-index:1000
}
#nochord-picker.hidden{display:none}
.picker-title{text-align:center;color:#aaa;font-weight:800;font-size:0.85rem;margin-bottom:10px}
.picker-strip{display:flex;gap:6px;justify-content:space-between}
.picker-item{
  flex:1;height:56px;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#000;font-weight:900;font-size:0.9rem;
  transition:transform 120ms ease, opacity 120ms ease;
}
.picker-item span{font-size:0.65rem;font-weight:800;opacity:0.85}
.picker-item:active{transform:scale(0.92)}
.picker-item.locked{opacity:0.22;pointer-events:none}
#picker-close{
  margin-top:12px;width:100%;padding:10px;border-radius:14px;
  background:#111;border:1px solid #222;color:#fff;font-weight:900
}

/* Split controls */
#split-controls{
  position:fixed;background:#000;border:1px solid #222;
  padding:8px;border-radius:14px;display:flex;gap:8px;z-index:1100
}
#split-controls.hidden{display:none}
#split-controls button{
  background:#111;border:1px solid #222;color:#fff;
  padding:8px 10px;border-radius:12px;font-weight:900
}

/* Weight controls */
#weight-controls{
  position:fixed;background:#000;border:1px solid #222;
  padding:8px;border-radius:14px;display:flex;gap:8px;z-index:1100
}
#weight-controls.hidden{display:none}
#weight-controls button{
  background:#111;border:1px solid #222;color:#fff;
  padding:8px 10px;border-radius:12px;font-weight:900;min-width:44px
}

/* Side panel */
#stage-panel{margin-top:14px}
.stage-colors{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.stage-color{width:26px;height:26px;border-radius:999px;border:2px solid #000}
.stage-color.locked{opacity:0.25}