/* Loopz v402 — viewport ownership, readable counts and uncropped responsive media.
   Scope is deliberately limited to the active Loopz page. No gesture, interaction,
   count data, avatar ring or audio-background behavior is replaced. */
html body[data-page="loopz"] .content,
html.sidebar-collapsed body[data-page="loopz"] .content {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
body[data-page="loopz"] [data-loopz-return-v228] { display: none !important; }
body[data-page="loopz"] .loopz-item {
    --loopz-fit-top: 72px;
    --loopz-fit-bottom: 244px;
    --loopz-meta-bottom: 80px;
    --loopz-safe-bottom: env(safe-area-inset-bottom, 0px);
    --loopz-fit-height: calc(var(--loopz-shell-height, 100dvh) - var(--loopz-fit-top) - var(--loopz-fit-bottom));
    --loopz-rail-width: 64px;
    --loopz-rail-inset: max(16px, calc((100% - 1280px) / 2 + 16px));
}
body[data-page="loopz"] .loopz-media-primary-frame,
body[data-page="loopz"] .loopz-media-safe-frame {
    top: var(--loopz-fit-top) !important;
    bottom: var(--loopz-fit-bottom) !important;
    left: max(16px, calc((100% - 1280px) / 2 + 80px)) !important;
    right: max(16px, calc((100% - 1280px) / 2 + 80px)) !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body[data-page="loopz"] .loopz-media-primary-frame > img,
body[data-page="loopz"] .loopz-media-primary-frame > .video-shell:not(:fullscreen) {
    width: min(100%, calc(var(--loopz-fit-height) * var(--loopz-media-ratio, 0.5625))) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: var(--loopz-media-ratio, 9 / 16) !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}
body[data-page="loopz"] .loopz-media-primary-frame > .video-shell > video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}
body[data-page="loopz"] .loopz-actions {
    position: absolute !important;
    inset-inline: auto !important;
    left: auto !important;
    right: var(--loopz-rail-inset) !important;
    top: auto !important;
    bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    width: var(--loopz-rail-width) !important;
    max-width: var(--loopz-rail-width) !important;
    height: auto !important;
    max-height: calc(100% - 80px) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box;
}
body[data-page="loopz"] .loopz-actions > button {
    box-sizing: border-box;
    flex: 0 0 auto !important;
    width: var(--loopz-rail-width) !important;
    min-width: 44px !important;
    min-height: 48px !important;
    height: 48px !important;
    max-height: none !important;
    padding: 1px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    line-height: 1 !important;
    overflow: visible !important;
}
body[data-page="loopz"] .loopz-actions > .loopz-follow-btn {
    width: 56px !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
}
body[data-page="loopz"] .loopz-actions .loopz-creator-avatar {
    flex: 0 0 auto !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
}
body[data-page="loopz"] .loopz-actions > button > span > svg {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
}
body[data-page="loopz"] .loopz-actions [data-count-for] {
    display: block !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    min-height: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 17px !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 3px #000;
}
body[data-page="loopz"] .loopz-meta,
html body[data-page="loopz"] .loopz-item.loopz-has-seek .loopz-meta {
    left: max(16px, calc((100% - 1280px) / 2 + 16px)) !important;
    right: calc(var(--loopz-rail-inset) + var(--loopz-rail-width) + 16px) !important;
    bottom: max(var(--loopz-meta-bottom, 80px), env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: 560px !important;
    max-height: 152px !important;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    body[data-page="loopz"] .loopz-item {
        --loopz-fit-top: 64px;
        --loopz-fit-bottom: 244px;
        --loopz-rail-width: 58px;
        --loopz-rail-inset: max(10px, env(safe-area-inset-right, 0px));
    }
    body[data-page="loopz"] .loopz-media-primary-frame,
    body[data-page="loopz"] .loopz-media-safe-frame {
        left: max(10px, env(safe-area-inset-left, 0px)) !important;
        right: calc(var(--loopz-rail-inset) + var(--loopz-rail-width) + 10px) !important;
    }
    body[data-page="loopz"] .loopz-actions { gap: 2px !important; }
    body[data-page="loopz"] .loopz-meta { left: max(12px, env(safe-area-inset-left, 0px)) !important; }
}
@media (max-height: 640px) {
    body[data-page="loopz"] .loopz-item { --loopz-meta-bottom: 12px; }
    body[data-page="loopz"] .loopz-gesture-hint-v206 { display: none !important; }
}
@media (max-height: 500px) {
    body[data-page="loopz"] .loopz-item {
        --loopz-fit-top: 60px;
        --loopz-fit-bottom: 100px;
        --loopz-rail-width: 54px;
        --loopz-rail-inset: max(10px, env(safe-area-inset-right, 0px));
    }
    body[data-page="loopz"] .loopz-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 54px) !important;
        width: 112px !important;
        max-width: 112px !important;
        gap: 4px !important;
        justify-items: center !important;
        bottom: 12px !important;
    }
    body[data-page="loopz"] .loopz-actions .loopz-creator-avatar { width: 48px !important; height: 48px !important; }
    body[data-page="loopz"] .loopz-actions > .loopz-follow-btn { width: 52px !important; }
    body[data-page="loopz"] .loopz-media-primary-frame,
    body[data-page="loopz"] .loopz-media-safe-frame { left: 12px !important; right: 138px !important; }
    body[data-page="loopz"] .loopz-meta,
    html body[data-page="loopz"] .loopz-item.loopz-has-seek .loopz-meta { right: 138px !important; max-height: 76px !important; }
}