/* ─────────────────────────────────────────────────────────────────────
   viewer-controls.css — The overlay control panel injected by viewer.js
                         into any viewer with showControls:true.
                         Includes light sliders and morph target sliders.
───────────────────────────────────────────────────────────────────── */


/* ─── PANEL SHELL ────────────────────────────────────────────────────── */
.viewer-ctrl-panel {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  z-index:     10;
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         0.4rem;
  padding:     0.75rem 0.9rem;
  background:  linear-gradient(to top, rgba(18, 8, 30, 0.92) 0%, transparent 100%);
  pointer-events: none;
}
.viewer-ctrl-panel > * { pointer-events: auto; }

.viewer-ctrl-group {
  display:     flex;
  gap:         0.3rem;
  align-items: center;
}

/* Separator between groups */
.viewer-ctrl-group + .viewer-ctrl-group::before {
  content:      '';
  display:      block;
  width:        1px;
  height:       16px;
  background:   var(--border);
  margin-right: 0.1rem;
}


/* ─── BUTTONS & SELECT ───────────────────────────────────────────────── */
.vc-btn {
  padding:        0.28rem 0.7rem;
  background:     rgba(29, 27, 58, 0.75);
  border:         1px solid rgba(179, 141, 255, 0.25);
  border-radius:  4px;
  color:          rgba(251, 231, 255, 0.6);
  font-family:    var(--font-sans);
  font-size:      0.7rem;
  font-weight:    500;
  cursor:         pointer;
  transition:     all 0.15s ease;
  white-space:    nowrap;
  letter-spacing: 0.03em;
}
.vc-btn:hover {
  border-color: var(--accent);
  color:        var(--text);
  background:   rgba(179, 141, 255, 0.12);
}
.vc-btn.active {
  background:   rgba(179, 141, 255, 0.2);
  border-color: var(--accent);
  color:        var(--accent);
}

.vc-select {
  background:    rgba(29, 27, 58, 0.75);
  border:        1px solid rgba(179, 141, 255, 0.25);
  border-radius: 4px;
  color:         rgba(251, 231, 255, 0.6);
  font-family:   var(--font-sans);
  font-size:     0.7rem;
  padding:       0.28rem 0.5rem;
  outline:       none;
  cursor:        pointer;
  transition:    border-color 0.15s ease;
}
.vc-select:hover,
.vc-select:focus { border-color: var(--accent); }


/* ─── LIGHT SLIDERS ──────────────────────────────────────────────────── */
.vc-light-sliders {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
  width:          100%;
  padding-top:    0.5rem;
}

.vc-slider-row {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  cursor:      default;
}

.vc-slider-label {
  width:          52px;
  flex-shrink:    0;
  font-size:      0.64rem;
  font-family:    var(--font-sans);
  color:          rgba(251, 231, 255, 0.5);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vc-slider {
  flex:         1;
  height:       3px;
  accent-color: var(--accent);
  cursor:       pointer;
  min-width:    60px;
}


/* ─── MORPH TARGET (SHAPE KEY) SLIDERS ──────────────────────────────── */
.vc-morph-sliders {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
  width:          100%;
  padding-top:    0.5rem;
  max-height:     200px;
  overflow-y:     auto;
}

.vc-morph-sliders::-webkit-scrollbar       { width: 3px; }
.vc-morph-sliders::-webkit-scrollbar-track { background: transparent; }
.vc-morph-sliders::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Shape key names are camelCase from the GLB — skip uppercase transform */
.vc-morph-label {
  text-transform: none;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

/* Numeric readout next to each morph slider */
.vc-morph-value {
  font-size:   0.6rem;
  font-family: var(--font-mono);
  color:       rgba(251, 231, 255, 0.4);
  min-width:   28px;
  text-align:  right;
  flex-shrink: 0;
}