/* Video thumbnails: keep a clear, non-interactive play mark for video media. */
.profile-media-play-badge {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(7, 12, 22, .66);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
    pointer-events: none;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(6px);
}

.profile-media-play-badge svg {
    width: 25px;
    height: 25px;
    margin-left: 2px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.3;
}

/* Free-media hover actions belong to the bottom edge of their own post. */
.profile-reel-hover {
    inset: auto 0 0;
    min-height: 54px;
    padding: 18px 12px 10px;
    align-items: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}

.profile-post-video { position: relative; }
.profile-post-video::after {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    background: rgba(7, 12, 22, .66);
    color: #fff;
    content: '\25B6';
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
}

/* Reserve the right rail so controls do not cover the media itself. */
.profile-modal-player {
    right: 86px;
    width: auto;
}

/* Audio is always available at the modal's upper-right corner. */
.profile-modal-mute {
    top: 24px;
    right: -55px;
    bottom: auto;
    z-index: 12;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .34);
    background: rgba(0, 0, 0, .56);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
}

.profile-modal-mute:hover,
.profile-modal-mute:focus-visible {
    border-color: rgba(255, 255, 255, .78);
    background: rgba(236, 72, 153, .84);
    outline: 3px solid rgba(255, 255, 255, .88);
    outline-offset: 3px;
}

/* Mobile keeps a dedicated, touch-sized fullscreen action over video media. */
.profile-modal-fullscreen-mobile {
    display: none;
    position: absolute;
    z-index: 12;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 50%;
    background: rgba(0, 0, 0, .56);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    touch-action: manipulation;
    backdrop-filter: blur(10px);
}

.profile-modal-fullscreen-mobile svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.profile-modal-fullscreen-mobile:hover,
.profile-modal-fullscreen-mobile:focus-visible {
    border-color: rgba(255, 255, 255, .78);
    background: rgba(236, 72, 153, .84);
    outline: 3px solid rgba(255, 255, 255, .88);
    outline-offset: 3px;
}

/* Previous and next stay as a vertical pair in the right-side rail. */
.profile-media-modal-nav {
    right: 16px !important;
    left: auto !important;
    z-index: 11;
    min-width: 48px;
    min-height: 48px;
    font-size: 0;
    border-color: rgba(251, 182, 205, .9) !important;
    background: rgba(255, 232, 240, .94) !important;
    color: #ec4899 !important;
    box-shadow: 0 8px 24px rgba(236, 72, 153, .2);
}

.profile-media-modal-nav:hover,
.profile-media-modal-nav:focus-visible {
    border-color: #f472a3 !important;
    background: #fbc4d7 !important;
    color: #be185d !important;
}

.profile-media-modal-nav::before {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}

.profile-media-modal-nav.is-prev { top: calc(50% - 64px) !important; right: 16px !important; }
.profile-media-modal-nav.is-next { top: calc(50% + 12px) !important; right: 16px !important; }
.profile-media-modal-nav.is-prev::before { content: '\2191'; }
.profile-media-modal-nav.is-next::before { content: '\2193'; }

/* Photo entries use the viewer shell but do not expose video controls. */
.profile-modal-image {
    position: relative;
    z-index: 2;
    display: none;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    object-fit: contain;
}

.profile-modal-player.is-photo video,
.profile-modal-player.is-photo .profile-modal-play,
.profile-modal-player.is-photo .profile-modal-mute,
.profile-modal-player.is-photo .profile-modal-fullscreen-mobile,
.profile-modal-player.is-photo .ctrl-bar {
    display: none;
}

.profile-modal-player.is-photo .profile-modal-image {
    display: block;
}

/* The mute trigger sits beside the player, so also key the safeguard off the modal. */
.profile-media-modal.is-photo .profile-modal-mute {
    display: none !important;
}

/* Stack previous/next in the upper-right, separate from the social rail. */
.profile-media-modal-nav.is-prev {
    top: 82px !important;
    right: 24px !important;
    left: auto !important;
}

.profile-media-modal-nav.is-next {
    top: 148px !important;
    right: 24px !important;
    left: auto !important;
}

.profile-media-modal.is-photo .profile-media-modal-nav.is-prev {
    top: 24px !important;
}

.profile-media-modal.is-photo .profile-media-modal-nav.is-next {
    top: 90px !important;
}

@media (max-width: 768px) {
    .profile-media-play-badge { width: 42px; height: 42px; }
    .profile-media-play-badge svg { width: 22px; height: 22px; }
    .profile-modal-player { right: 68px; }
    .profile-media-modal-nav::before { font-size: 28px; }
    .profile-modal-mute {
        top: calc(12px + env(safe-area-inset-top));
        right: calc(-44px - env(safe-area-inset-right));
        width: 48px;
        height: 48px;
    }
    .profile-modal-fullscreen-mobile {
        display: grid;
        top: calc(68px + env(safe-area-inset-top));
        right: calc(-44px - env(safe-area-inset-right));
    }
    .profile-media-modal-nav.is-prev {
        top: calc(124px + env(safe-area-inset-top)) !important;
        right: calc(24px + env(safe-area-inset-right)) !important;
    }
    .profile-media-modal-nav.is-next {
        top: calc(180px + env(safe-area-inset-top)) !important;
        right: calc(24px + env(safe-area-inset-right)) !important;
    }
    .profile-modal-player .ctrl-bar {
        padding: 28px 16px calc(12px + env(safe-area-inset-bottom));
    }
    .profile-modal-player .ctrl-bar .progress-container {
        height: 5px;
        margin: 0;
        opacity: 1;
    }
    .profile-modal-player .ctrl-bar .progress-thumb { opacity: 1; }
    .profile-modal-player .ctrl-buttons { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-media-modal-nav,
    .profile-modal-mute { transition: none; }
}

/* Use the focused full-screen stage layout from TOOL/creators for public profiles. */
.profile-media-modal { background: #000; }
.profile-media-modal-backdrop { background: #000; }
.profile-modal-ambient { inset: -48px; }
.profile-modal-ambient::after { background: linear-gradient(90deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .14) 38%, rgba(0, 0, 0, .14) 62%, rgba(0, 0, 0, .5)); }
.profile-modal-ambient img { opacity: .58; filter: blur(34px) saturate(.9); }
.profile-modal-player { right: 0; width: 100%; }
.profile-modal-player video { z-index: 2; background: transparent; }
.profile-modal-player .ctrl-bar { display: none; }

.profile-media-modal-close { top: 24px; left: 28px; width: 56px; height: 56px; border-color: rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .48); font-size: 38px; }
.profile-media-modal-nav { right: 24px !important; width: 60px; height: 60px; min-width: 60px; min-height: 60px; border: 1px solid rgba(255, 255, 255, .28) !important; border-radius: 16px; background: rgba(0, 0, 0, .54) !important; color: #fff !important; box-shadow: 0 10px 32px rgba(0, 0, 0, .38); }
.profile-media-modal-nav:hover,.profile-media-modal-nav:focus-visible { border-color: rgba(236, 72, 153, .72) !important; background: rgba(236, 72, 153, .88) !important; color: #fff !important; }
.profile-media-modal-nav.is-prev { top: 16% !important; }
.profile-media-modal-nav.is-next { top: calc(16% + 68px) !important; }
.profile-modal-mute { top: 24px; right: 28px; bottom: auto; border-color: rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .48); }
.profile-modal-fullscreen-mobile { top: 80px; right: 28px; }
.profile-modal-social-rail { top: 43%; right: 24px; }

.profile-modal-footer { position: absolute; z-index: 6; right: 112px; bottom: 22px; left: 28px; display: flex; min-height: 108px; align-items: flex-end; color: #fff; pointer-events: none; }
.profile-modal-content-info { max-width: min(680px, 62vw); text-shadow: 0 2px 10px rgba(0, 0, 0, .85); }
.profile-modal-content-info strong { display: block; font-size: 18px; }
.profile-modal-content-info p { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: #f8fafc; font-size: 14px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

@media (max-width: 768px) {
    .profile-media-modal-close { top: calc(14px + env(safe-area-inset-top)); left: 14px; width: 48px; height: 48px; }
    .profile-modal-mute { top: calc(14px + env(safe-area-inset-top)); right: 14px; }
    /* Mobile uses swipe for media navigation; keep the stage free of duplicate controls. */
    .profile-modal-fullscreen-mobile,
    .profile-media-modal-nav { display: none !important; }
    .profile-modal-social-rail { right: 8px; }
    .profile-modal-footer { right: 66px; bottom: 16px; left: 14px; min-height: 82px; }
    .profile-modal-content-info { max-width: 100%; }
    .profile-modal-content-info strong { font-size: 15px; }
    .profile-modal-content-info p { margin-top: 6px; font-size: 12px; -webkit-line-clamp: 2; }
}