/* Shared native video surface; surrounding existing page/modal styles remain. */
.thm-native-video {
  position: relative;
  width: 100%; height: 100%; overflow: hidden;
  background: #000; color: #fff; direction: ltr;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y; isolation: isolate;
}
.thm-native-video > video {
  position: absolute; left: var(--thm-video-left, 0px); top: var(--thm-video-top, 0px); width: var(--thm-video-width, 100%); height: var(--thm-video-height, 100%);
  border: 0; display: block; object-fit: contain;
}
.thm-native-video > video::-webkit-media-controls { display: none !important; }
.thm-native-video:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.thm-video-spinner {
  position: absolute; left: 50%; top: calc(var(--thm-video-top, 0px) + var(--thm-video-height, 100%) / 2); z-index: 3;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 2px solid rgba(255,255,255,.25); border-top-color: rgba(255,255,255,.95);
  border-radius: 50%; animation: thm-video-spin .75s linear infinite;
  pointer-events: none;
}
.thm-video-spinner[hidden] { display: none; }
@keyframes thm-video-spin { to { transform: rotate(360deg); } }
.thm-video-seek {
  position: absolute; z-index: 4; left: var(--thm-video-left, 0px); width: var(--thm-video-width, 100%); right: auto; top: var(--thm-seek-top, 0px);
  height: 44px; padding: 0; margin: 0; cursor: pointer;
  touch-action: none; outline: none;
}
.thm-video-seek-track {
  position: absolute; left: 0; right: 0; top: var(--thm-track-top, 22px);
  height: 2px; border-radius: 0; overflow: hidden;
  background: rgba(255,255,255,.23); transition: height .12s ease;
}
.thm-video-seek-fill {
  display: block; height: 100%; width: 100%; background: rgba(255,255,255,.85);
  transform: scaleX(0); transform-origin: left center;
}
.thm-video-seek[data-scrubbing="true"] .thm-video-seek-track,
.thm-video-seek:focus-visible .thm-video-seek-track { height: 6px; }
.thm-video-seek[aria-disabled="true"] { cursor: default; }
.thm-video-seek[aria-disabled="true"] .thm-video-seek-track { opacity: .4; }
.thm-native-frame-mount { position: absolute; inset: 0; }
.thm-video-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.thm-video-screenreader.thm-video-error {
  left: 20px; right: 20px; bottom: 46px; width: auto; height: auto;
  margin: 0; padding: 10px 14px; clip: auto; white-space: normal;
  border-radius: 10px; background: rgba(0,0,0,.65); color: #fff;
  font-size: 14px; line-height: 1.45; text-align: center;
  pointer-events: none;
}
.thm-feed-close {
  position: fixed; top: calc(var(--nav-height,76px) + 14px); right: max(16px,env(safe-area-inset-right));
  z-index: 30; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 30px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
[data-thm-provider="bunny"] .videoNumber,
[data-thm-provider="bunny"] .loadingLabel { display: none; }
@media (prefers-reduced-motion: reduce) {
  .thm-video-seek-track { transition: none; }
}

/* A modal's video keeps its existing dimensions. Its seek control is portalled
   outside clipped modal ancestors, but stays aligned with the 9:16 picture edges. */
.thm-video-seek-viewport {
  position: fixed; right: auto; z-index: 2147483000;
  direction: ltr; -webkit-tap-highlight-color: transparent;
}
.thm-video-seek[hidden] { display: none; }
/* Keep the portrait image centered; only Bunny's feed surface/rail spans the viewport. */
[data-thm-provider="bunny"] .feedStage { padding: 0; }
[data-thm-provider="bunny"] .feed { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
[data-thm-provider="bunny"] .videoPage,
[data-thm-provider="bunny"] .playerShell { border-radius: 0; }