/* Camera opens as a narrow strip under search on either bottle view, and under Add
   Product's search in Settings. */
:is(.app-header, .add-pane) .barcode-panel {
  box-sizing: border-box;
  position: relative;
  width: calc(100% - max(16px, var(--safe-left)) - max(16px, var(--safe-right)));
  max-width: 520px;
  margin: 4px auto 5px;
  padding: 0;
  overflow: hidden;
  animation: barcode-drop var(--tr-quick) var(--tr-ease);
}
:is(.app-header, .add-pane) .barcode-panel video {
  width: 100%;
  /* About 2:1 on a phone: still a strip, with the camera's whole width and twice the old
     height of scene in view (2026-10-05, "too zoomed in"). */
  height: clamp(132px, 46vw, 200px);
  max-height: none;
  background: var(--tr-bg);
  /* Decoder takes the same centered crop from the source frame. */
  object-fit: cover;
}
:is(.app-header, .add-pane) .barcode-panel video[hidden] { display: none; }
:is(.app-header, .add-pane) .barcode-panel p {
  box-sizing: border-box;
  min-height: 0;
  margin: 0;
  padding: 6px 52px 7px 10px;
  color: var(--tr-bone);
  font: 400 12px/1.35 var(--tr-sans);
}
:is(.app-header, .add-pane) .barcode-panel p:empty { display: none; }
:is(.app-header, .add-pane) .barcode-panel [data-barcode-close] {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  text-shadow: 0 0 8px var(--tr-black-70), 0 0 2px var(--tr-black-70);
  color: var(--tr-bone);
  font: 400 26px/1 var(--tr-sans);
}
:is(.app-header, .add-pane) .barcode-panel [data-barcode-retry] {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-top: 1px solid var(--tr-hair);
  background: transparent;
  color: var(--tr-bone);
  font: 500 13px var(--tr-sans);
}
:is(.app-header, .add-pane) .barcode-panel.is-success {
  min-height: 68px;
  display: grid;
  place-items: center;
}
:is(.app-header, .add-pane) .barcode-panel.is-success p { padding: 12px 48px; text-align: center; }
@keyframes barcode-drop {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.app-header, .add-pane) .barcode-panel { animation: none; }
}
/* In Settings the strip takes the pane's width. */
.add-pane .barcode-panel { width: 100%; max-width: none; margin: 10px 0 0; }