/* perspective.css */
body { background:#fafafa; }

.app-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.canvas-wrap{
  position:relative;
  width:100%;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  overflow:hidden;
  user-select:none;
  touch-action:none;
}

canvas{ display:block; width:100%; height:auto; }

.help-mini{ font-size:.9rem; color:#666; }

.pill{
  font-size: .8rem;
  padding: .15rem .5rem;
  border-radius: 999px;
  background:#f3f3f3;
  display:inline-block;
}

.is-hidden{ display:none !important; }

.value-badge{
  display:inline-block;
  min-width:3.5rem;
  text-align:right;
  font-variant-numeric: tabular-nums;
  color:#444;
}

.slider-row{
  display:flex;
  gap:.75rem;
  align-items:center;
}
.slider-row input[type="range"]{ flex: 1; }

.sticky-panel{
  position: sticky;
  top: 0.75rem;
  max-height: calc(100vh - 1.5rem);
  overflow: auto;
  padding-right: .25rem;
  -webkit-overflow-scrolling: touch;
}

.fab-row{
  position:absolute;
  right: 12px;
  bottom: 12px;
  display:flex;
  gap:10px;
  z-index: 20;
  pointer-events: none;
}

.fab-row .button{
  pointer-events: auto;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  border-radius: 999px;
}

/* VP overlay */
.vp-overlay{
  position:absolute;
  inset:0;
  z-index: 15;
  pointer-events: auto; /* WAS none */
}


.vp-chip{
  position:absolute;
  transform: translate(-50%, -50%);
  pointer-events:auto;
  user-select:none;
  touch-action:none;

  min-width: 64px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background: rgba(0,0,0,0.82);
  color: rgba(255,255,255,0.96);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;

  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);

  cursor: grab;
}
.vp-chip:active{ cursor: grabbing; }

/* BIG invisible hit area so it’s easy to grab */
.vp-chip::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:999px;
  background: transparent;
}

.vp-chip .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
}

.vp-chip.is-off{
  min-width: 70px;
  height: 42px;
}

.vp-chip.is-active{
  outline: 3px solid rgba(72,95,199,0.45);
}

.vp-chip.is-hidden{
  display:none !important;
}