/*
Utilities Bootstrap never shipped.

What belongs here:
Generic, single-purpose, reusable by any page —
the rule Bootstrap would have written had it covered this property.
Named in Bootstrap's own convention so they read as part of the set.

What does not:
Anything that changes what a Bootstrap class does (bootstrap_overrides.css),
and anything carrying a decision about one specific component (application.css).
The test: could another page use this without knowing why it exists?

Load order does not strictly matter for these, since they collide with nothing.
They load after vendor/bootstrap.css anyway, alongside the overrides.
The load order (manifest) is defined in `_head.html.erb`.
*/

/*
Bootstrap has no min-width utility,
and a flex child will not shrink below its content width without one.
So text-truncate does nothing inside a flex row until this is applied.
*/
.min-w-0 {
  min-width: 0;
}

/*
Collapse the doubled seam where bordered siblings touch,
the same -1px overlap btn-group uses between its buttons.
Note: -1px, not the -0.25rem the Bootstrap spacing scale would imply for "1".
*/
.ms-n1 {
  margin-left: -1px;
}

/*
Mobile Safari sizes 100vh to the LARGE viewport (chrome retracted),
but the chrome only retracts when the page scrolls, and a room never does.
So vh alone parks the bottom of the layout (the chat composer) behind the URL bar.
Measured on an iPhone: lvh 836, svh 736. Exactly 100px of composer was hiding.

svh is the SMALLEST viewport, what is visible with the chrome fully expanded,
so it fits in every chrome state.
dvh measures the same 736 on a page that cannot scroll and would work too.
svh is preferred only because it is static, with no recomputation to depend on.

Neither helps when the on-screen keyboard is up.
Every viewport unit measures the layout viewport
and iOS shrinks only the visual one. See SYSTEM.md.

Two declarations rather than two classes:
browsers that do not know svh keep the vh line,
so the fallback lives here rather than in the markup.
*/
.svh-100 {
  height: 100vh !important;
  height: 100svh !important;
}

/*
object-fit-contain centers the image in its letterbox.
The stage wants the video snapped to a corner instead,
with the spare room below and to one side.
Bootstrap ships object-fit utilities but none for object-position.
*/
.object-position-top-start {
  object-position: left top;
}

/*
The end variant is for a mirrored preview (scaleX(-1)),
which flips the whole element, pillarbox gap included.
To appear snapped left on screen, the picture must sit at the right before the flip.
*/
.object-position-top-end {
  object-position: right top;
}

/*
Keeps light-on-anything overlays legible over whatever is behind them.
filter: drop-shadow rather than text-shadow,
because an SVG icon is not text and text-shadow does not paint it.
*/
.overlay-shadow {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}