/* ────────────────────────────────────────
   THE BAR ABOVE THE PICTURE
   The owner's layout of 2026-10-20 (run SECREV-2A, option A): DEBUG at the
   left, the status line (with the weak-connection pill) in the centre, the
   privacy line at the right - nothing of the page sits on the picture.
   The bar is the first part of #video-wrap, above #video-inner, so the
   page's grid is as it was and the phone's chat placement, which reads the
   TALK area's edge (_positionMobileChat), is unchanged.  A file of its own
   because style.css is held under 1,500 lines (W5-gate).  The three
   elements' own look is in style.css and debug-panel.css.
──────────────────────────────────────── */
#video-wrap { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
#video-inner { flex: 1 1 0; min-height: 0; height: auto; }

#info-bar {
  flex: none;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 10px;
  min-height: 26px;
}
#info-bar > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
#info-bar .bar-left  { justify-self: start; }
/* A long status line wraps here, and the weak-connection pill goes below it, rather than either being cut. */
#info-bar .bar-mid   { justify-self: center; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
#info-bar .bar-right { justify-self: end; }

/* Phone portrait: the video area has no padding; the bar keeps 10 px from the edges and the picture keeps its
   width-given height (the bar adds to the page instead). */
@media (max-width: 600px) and (orientation: portrait) {
  #video-wrap { gap: 6px; padding-top: 0; }
  #info-bar { padding: 6px 10px 0; }
  #video-inner { flex: none; }
}

/* Phone landscape: the video area's own 6 px padding; a slightly lower bar. */
@media (orientation: landscape) and (max-height: 500px) {
  #video-wrap { gap: 5px; }
  #info-bar { min-height: 24px; }
}