/* Caption overlay — ported from browser-plugin/content.css.
   Two changes from the source: this overlay is `position: absolute` inside
   a known video-wrapper container (see js/embed.js), not `position: fixed`
   on document.documentElement — mobile-reader owns its own page, so it
   doesn't need the "escape host-page CSS transforms" trick the extension
   needs (see docs/mobile-viewer-client-design.md §0.1/§1). And there's no
   drag-to-reposition in this first pass (no chrome.storage.local
   equivalent, no drag-handle pip, no manual-position hint) — see
   docs/mobile-viewer-client-design.md §9 phase 1 scope. Box/ticker mode
   rendering logic itself (js/captions.js) is otherwise a direct port.

   Font size and background transparency are user-editable (js/captions.js's
   setStyle()), following the extension's --bs-* custom-property pattern —
   size was already wired (--bs-size-scale) even before there was a UI for
   it. Background alpha is computed with calc() rather than stored as a
   second fixed token, so the .partial variant (--bs-bg-alpha * 0.7,
   matching content.js's PARTIAL_BG_FACTOR) stays in sync with whatever the
   viewer picks instead of needing its own separate setting. Font/color are
   deliberately still fixed (var(--caption-font)/var(--caption-color) from
   tokens.css) — out of scope per the user's request, unlike the extension
   which exposes both. */

#babelstreamer-overlay {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8%;
    justify-content: center;
    /* Max safe z-index, deliberately — a real report had captions
       invisible during fullscreen despite the wrapper (not the iframe)
       correctly being document.fullscreenElement. The iframe itself has
       z-index:auto/position:static, which should always lose to this
       absolutely-positioned overlay by normal stacking rules, but a
       cross-origin iframe gets its own compositing surface and some
       engines don't reliably respect sibling stacking order for one once
       fullscreen compositing is involved. Pairs with embed.js giving the
       iframe an explicit lower z-index, in case the real issue is the
       iframe having no declared position/z-index at all rather than pure
       compositing precedence. */
    z-index: 2147483647;
    box-sizing: border-box;
    padding: 0 16px;
    pointer-events: none;
}

#babelstreamer-caption {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    padding: 5px 14px;
    border-radius: 4px;
    background: rgba(0, 0, 0, var(--bs-bg-alpha, 0.78));
    color: var(--caption-color);
    font-family: var(--caption-font);
    font-size: calc(clamp(14px, 2.2vw, 26px) * var(--bs-size-scale, 1));
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    word-wrap: break-word;
    white-space: pre-wrap;
}

#babelstreamer-caption.partial {
    color: var(--caption-color-partial);
    font-style: italic;
    background: rgba(0, 0, 0, calc(var(--bs-bg-alpha, 0.78) * 0.7));
}

#babelstreamer-caption.box-mode {
    overflow: hidden;
}

#babelstreamer-caption.box-mode:not(.box-grown) .caption-box-line:first-child {
    display: none;
}

.caption-box-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

#babelstreamer-caption.ticker-mode {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
}

.ticker-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}