/* Zoom buttons over the camera (js/zoombar.js): a small see-through pill above the shutter, like
   the iPhone Camera app's. No blur (a blurred backdrop costs a repaint on every camera frame). */
.zoombar {
  position: absolute; left: 50%; bottom: calc(var(--cam-nav, 0px) + 137px); z-index: 3;   /* (the shutter row is 127, app.css) */
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; background: rgba(0, 0, 0, .3);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.zoombar[hidden] { display: none; }
.zoombar .zb {
  min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, .28); color: #fff;
  font: 700 12px/1 system-ui, -apple-system, sans-serif; letter-spacing: -.2px;
  transition: transform .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.zoombar .zb.on { color: #ffd60a; transform: scale(1.12); }
/* 44px tall to tap, the same look (an invisible edge above and below; side by side, each reaches
   into the 2px gap) */
.zoombar .zb { position: relative; }
.zoombar .zb::after { content: ""; position: absolute; left: -1px; right: -1px; top: -6px; bottom: -6px; }
.zoombar .zb:disabled { opacity: .55; }
.zoombar .zb.tick { animation: zoombar-tick .22s ease; }
@keyframes zoombar-tick { 50% { transform: scale(1.25); } }
/* the bar shows the zoom itself, so the old pinch pill stays away while it's there */
.has-zoombar .zoom-pill { display: none !important; }
@media (prefers-reduced-motion: reduce) { .zoombar .zb, .zoombar .zb.tick { transition: none; animation: none; } }
/* (RC 10-14) while recording, the shutter's ring grows and its red progress ran under the bar: the bar
   steps up out of its way. (:has() is iOS 15.4+; older iPhones keep the bar where it is.) */
#camera:has(.shutter.recording) .zoombar { transform: translate(-50%, -16px); }