/* ──────────────────────────────────────────────────────────────────────
   Broadcast chrome — TV-news style strips overlaying the video frame.
   Used by host (dashboard), viewers, and the recorder (composite).
   ────────────────────────────────────────────────────────────────────── */

/* ── Design-canvas stage ──────────────────────────────────────────────
   Everything inside the live frame (chrome strips, video tiles, chat
   overlay, controls, name pills, reaction popups, etc.) is laid out at
   a fixed 1920×1080 reference resolution and then uniformly scaled to
   fit whatever real size the `.live-video-wrap` ends up at. Result:
   a 400px-wide embed looks like a perfect miniature of the fullscreen
   broadcast — fonts, logos, paddings all shrink in lockstep.

   In fullscreen we disable the transform and let the stage fill the
   wrap naturally so the existing fullscreen layout (collapsible chat
   aside, controls positioning) continues to work unchanged. */
.bcast-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    transform: scale(var(--bcast-scale, 1));
    /* Hint the compositor — this layer animates on every resize. */
    will-change: transform;
    /* Safari iOS sometimes lets transformed absolutely-positioned
       children escape an `overflow: hidden` parent when the parent
       uses `aspect-ratio` for height. `backface-visibility` and
       `contain: layout paint` force a fresh compositing layer that
       is properly clipped by the parent. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: layout paint;
}

body.bcast-host-body > .bcast-stage {
    /* Composite renders at the native 1920×1080 design resolution
       directly (FFmpeg egress canvas), so skip the transform. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    contain: none;
}

.live-video-wrap {
    --bcast-top-h: 44px;
    --bcast-small-h: 56px;
    --bcast-big-h: 120px;
}
body.bcast-host-body {
    --bcast-top-h: 30px;
    --bcast-small-h: 38px;
    --bcast-big-h: 86px;
}

/* The chrome layers sit ABOVE the LiveKit tiles + controls but below
   modals and the join panel. */
.bcast-top,
.bcast-strip-small,
.bcast-strip-big {
    z-index: 10;
    pointer-events: none;
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ── Top strip ────────────────────────────────────────────────────── */
.bcast-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--bcast-top-h);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.78));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    /* Allow the anoncoin logo to overflow above/below the strip so it
       reads as a standalone mark, not part of the bar. The marquee
       child clips itself. */
    overflow: visible;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.22);
}

.bcast-top-logo {
    /* Oversize the anoncoin logo so it visually sits ABOVE the strip
       instead of looking like it's inside it. Pinned to the top so it
       overhangs downward into the video area. */
    height: 80px;
    width: auto;
    flex: 0 0 auto;
    object-fit: contain;
    align-self: flex-start;
    margin: -10px 0 0 0;
}

.bcast-marquee {
    flex: 1 1 auto;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent);
}

.bcast-marquee-track {
    display: inline-flex;
    gap: 28px;
    align-items: center;
    white-space: nowrap;
    /* Animation is driven from JS (requestAnimationFrame in
       live-broadcast-chrome.js). iOS Safari pauses CSS keyframe animations
       on children of `transform: scale()`d ancestors (our `.bcast-stage`),
       which left this ticker frozen on iPhone. The rAF loop keeps ticking
       regardless of compositor layer state. */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.bcast-marquee-item {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bcast-marquee-item img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}

.bcast-marquee-item .lbl { color: #fff; }
.bcast-marquee-item .pr  { color: rgba(255, 255, 255, 0.92); font-weight: 700; }
.bcast-marquee-item .ch  { font-weight: 800; }
.bcast-marquee-item .ch.up   { color: #22c55e; }
.bcast-marquee-item .ch.down { color: #ef4444; }

.bcast-live {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: #fff;
    background: #ef4444;
    padding: 5px 10px;
    border-radius: 3px;
    line-height: 1;
    text-transform: uppercase;
}

.bcast-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
    animation: bcastLivePulse 1.2s ease-in-out infinite;
}

@keyframes bcastLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.8); }
}

/* ── Bottom small strip (top story / coin info) ────────────────────── */
.bcast-strip-small {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--bcast-big-h);
    height: var(--bcast-small-h);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.92));
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 14px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.22);
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.22);
}

.bcast-strip-small-left {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
}

.bcast-breaking-pill {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    padding: 4px 9px;
    border-radius: 3px;
    flex: 0 0 auto;
    text-transform: uppercase;
    line-height: 1;
}

.bcast-strip-small-headline {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 280ms ease;
    flex: 1 1 auto;
    min-width: 0;
}

.bcast-strip-small-headline.is-fading { opacity: 0; }

.bcast-story-thumb {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 280ms ease;
}

.bcast-story-thumb[hidden] { display: none; }
.bcast-story-thumb.is-fading { opacity: 0; }

.bcast-story-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bcast-coin-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.bcast-coin-row .img {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.08);
}

.bcast-coin-row .img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bcast-coin-row .sym  { font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.bcast-coin-row .name {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.bcast-coin-row .mcap {
    font-weight: 900;
    color: #fff;
    flex: 0 0 auto;
}

.bcast-coin-row .ch {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}
.bcast-coin-row .ch.is-up   { color: #22c55e; }
.bcast-coin-row .ch.is-down { color: #ef4444; }

.bcast-strip-small-right {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.bcast-strip-small-right img {
    height: 20px;
    width: auto;
    flex: 0 0 auto;
}

/* ── Bottom big strip (logo + title + date) ────────────────────────── */
.bcast-strip-big {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bcast-big-h);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.97));
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 18px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.22);
}

.bcast-strip-big-logo {
    height: calc(var(--bcast-big-h) - 8px);
    width: auto;
    flex: 0 0 auto;
    object-fit: contain;
}

.bcast-strip-big-meta {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bcast-strip-big.is-feed-logo-hidden {
    gap: 0;
}

.bcast-strip-big.is-feed-logo-hidden .bcast-strip-big-meta {
    width: 100%;
}

.bcast-strip-big-title {
    font-size: clamp(20px, 2.6vw, 30px);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcast-strip-big-date {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

/* Responsive sizing is handled by the .bcast-stage transform: scale(),
   so per-element media queries are no longer needed — the entire stage
   shrinks uniformly. Keep this block intentionally empty as a marker. */

/* Hide the chrome while the video frame is in fullscreen mobile mode
   so the strips don't get awkwardly cropped — they reappear on exit. */
.live-video-wrap.is-fs .bcast-top,
.live-video-wrap.is-fs .bcast-strip-small,
.live-video-wrap.is-fs .bcast-strip-big,
.live-video-wrap.is-fs-ios .bcast-top,
.live-video-wrap.is-fs-ios .bcast-strip-small,
.live-video-wrap.is-fs-ios .bcast-strip-big {
    /* keep visible — the broadcast chrome is the point of the layout */
}

/* Note: the old fullscreen `right: var(--fs-chat-w)` overrides on the
   chrome strips are obsolete now — strips live inside .bcast-stage,
   which is sized to only the video area (the JS scaler subtracts the
   chat aside width before computing scale). */

/* Windowed (non-fullscreen) wrap: the .bcast-stage transform scales
   the entire 1920-wide canvas down to fit a ~960px viewport, which
   halves every font/icon size. Bump the design-canvas typography up
   so the strips read comfortably at typical desktop wrap widths. */
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-marquee-item {
    font-size: 20px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-marquee-item img {
    width: 26px;
    height: 26px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-live {
    font-size: 18px;
    padding: 7px 14px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-live-dot {
    width: 11px;
    height: 11px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-strip-small-left {
    font-size: 20px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-breaking-pill {
    font-size: 16px;
    padding: 6px 12px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-strip-small-right {
    font-size: 17px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-strip-small-right img {
    height: 28px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-story-thumb,
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-coin-row .img {
    width: 36px;
    height: 36px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-coin-row .ch {
    font-size: 18px;
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-strip-big-title {
    font-size: clamp(28px, 3.4vw, 42px);
}
.live-video-wrap:not(.is-fs):not(.is-fs-ios) .bcast-strip-big-date {
    font-size: 16px;
}

/* Mobile fullscreen: shrink chrome strips + fonts so the LiveKit tiles
   (camera + screenshare) get most of the limited phone real estate. */
.live-video-wrap.is-fs.is-fs-mobile,
.live-video-wrap.is-fs-ios.is-fs-mobile {
    --bcast-top-h: 20px;
    --bcast-small-h: 24px;
    --bcast-big-h: 52px;
}
.live-video-wrap.is-fs.is-fs-mobile .bcast-marquee-item,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-marquee-item {
    font-size: 10px;
}
.live-video-wrap.is-fs.is-fs-mobile .bcast-live,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-live {
    font-size: 9px;
}
.live-video-wrap.is-fs.is-fs-mobile .bcast-strip-small-left,
.live-video-wrap.is-fs.is-fs-mobile .bcast-strip-small-right,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-strip-small-left,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-strip-small-right {
    font-size: 10px;
}
.live-video-wrap.is-fs.is-fs-mobile .bcast-strip-small-tag,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-strip-small-tag {
    font-size: 9px;
}
.live-video-wrap.is-fs.is-fs-mobile .bcast-strip-big,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-strip-big {
    padding: 0 10px;
    gap: 10px;
}
.live-video-wrap.is-fs.is-fs-mobile .bcast-strip-big-meta,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-strip-big-meta {
    gap: 2px;
}
.live-video-wrap.is-fs.is-fs-mobile .bcast-strip-big-title,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-strip-big-title {
    font-size: clamp(12px, 3.6vw, 16px);
    letter-spacing: 0.03em;
}
.live-video-wrap.is-fs.is-fs-mobile .bcast-strip-big-date,
.live-video-wrap.is-fs-ios.is-fs-mobile .bcast-strip-big-date {
    font-size: 9px;
    letter-spacing: 0.15em;
}

/* ── Composite (recorder) only: solid black strips ─────────────────
   In composite.html we render an animated MP4 backdrop behind the
   video tiles. The default translucent strip backgrounds let that
   video bleed through. Force solid black so the strips read as
   chrome, not as part of the picture. */
body.bcast-host-body .bcast-strip-small,
body.bcast-host-body .bcast-strip-big {
    background: #000;
}
body.bcast-host-body .bcast-top {
    background: #000;
}