.pp-stream {
    --stream-bg: #c7d5e6;
    --stream-navy: #243858;
    --stream-green: #6f8d75;
    --stream-green-deep: #55735f;
    --stream-glow: rgba(222, 181, 82, 0.52);
    --stream-glow-soft: rgba(222, 181, 82, 0.16);

    width: 100%;
    min-height: 100dvh;
    overflow: hidden;

    color: var(--stream-navy);
    background:
        radial-gradient(
            circle at 50% 42%,
            #c3d0e1 0%,
            #9fb3cc 34%,
            #6f88aa 70%,
            #3f587c 100%
        );
}

.pp-moment {
    position: relative;

    width: 100%;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding:
        max(28px, env(safe-area-inset-top))
        24px
        max(34px, env(safe-area-inset-bottom));
}

.pp-moment__content {
    position: relative;
    z-index: 5;

    width: min(100%, 520px);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.pp-stream__preview-badge {
    position: absolute;
    top: calc(max(18px, env(safe-area-inset-top)));
    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    opacity: 0.46;
}

.pp-presence-field {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;
}

.pp-presence-light {
    position: absolute;

    width: var(--light-size);
    height: var(--light-size);

    left: var(--light-x);
    top: var(--light-y);

    border-radius: 50%;

    background: rgba(230, 182, 62, 0.96);

    box-shadow:
        0 0 12px rgba(210, 160, 35, 0.88),
        0 0 28px rgba(210, 160, 35, 0.52),
        0 0 52px rgba(210, 160, 35, 0.24);

    opacity: var(--light-opacity);

    transform: translate(-50%, -50%);

    animation:
        pp-presence-breathe
        var(--light-duration)
        ease-in-out
        var(--light-delay)
        infinite alternate;
}

.pp-presence-light.is-new {
    animation:
        pp-presence-arrive 1.7s ease-out forwards,
        pp-presence-breathe 5.5s ease-in-out 1.7s infinite alternate;
}

@keyframes pp-presence-breathe {
    from {
        transform:
            translate(-50%, -50%)
            scale(0.84);
        opacity: calc(var(--light-opacity) * 0.48);
        filter: brightness(0.88);
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.20);
        opacity: var(--light-opacity);
        filter: brightness(1.28);
    }
}

@keyframes pp-presence-arrive {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.18);
    }

    48% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.55);
    }

    100% {
        opacity: var(--light-opacity);
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

.pp-presence-number {
    margin-bottom: 4px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(76px, 22vw, 128px);
    line-height: 0.92;
    font-weight: 400;

    letter-spacing: -0.055em;

    color: var(--stream-navy);
}

.pp-presence-message {
    max-width: 430px;

    margin: 8px 0 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 7vw, 43px);
    line-height: 1.12;
    font-weight: 400;

    text-wrap: balance;
}

.pp-presence-subtitle {
    max-width: 330px;

    margin: 26px 0 0;

    font-size: 16px;
    line-height: 1.6;

    opacity: 0.76;
}

.pp-presence-action {
    min-height: 68px;

    margin-top: 32px;
}

.pp-stream-button {
    min-width: 190px;

    border: 0;
    border-radius: 999px;

    padding: 15px 27px;

    font: inherit;
    font-weight: 600;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            var(--stream-green),
            var(--stream-green-deep)
        );

    box-shadow:
        0 10px 30px rgba(66, 94, 73, 0.16);

    cursor: pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.pp-stream-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 13px 34px rgba(66, 94, 73, 0.2);
}

.pp-stream-button:active {
    transform: translateY(1px);
}

.pp-stream-button:focus-visible {
    outline: 3px solid rgba(36, 56, 88, 0.26);
    outline-offset: 4px;
}

.pp-stream-joined {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.3;
}

.pp-stream-stay {
    margin-top: 7px;

    font-size: 14px;

    opacity: 0.62;
}

.pp-stream-chevron {
    position: absolute;

    left: 50%;
    bottom: max(15px, env(safe-area-inset-bottom));

    transform: translateX(-50%);

    z-index: 5;

    font-size: 18px;

    opacity: 0.22;
}

html[dir="rtl"] .pp-stream {
    direction: rtl;
}

@media (max-width: 480px) {
    .pp-moment {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-presence-light,
    .pp-presence-light.is-new {
        animation: none !important;
    }

    .pp-stream-button {
        transition: none !important;
    }
}

/* STAR LIGHT */
.pp-presence-light {
    overflow: visible;
}

.pp-presence-star {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,1) 20%,
            rgba(255,246,214,0.98) 38%,
            rgba(255,228,142,0.82) 56%,
            rgba(255,228,142,0.18) 76%,
            rgba(255,228,142,0) 100%
        );
    box-shadow:
        0 0 8px rgba(255,255,255,1),
        0 0 18px rgba(255,241,196,0.95),
        0 0 34px rgba(247,211,112,0.62);
    animation:
        pp-presence-breathe 4.2s ease-in-out infinite alternate,
        pp-star-twinkle 2.6s ease-in-out infinite;
    z-index: 4;
}

.pp-presence-star::before,
.pp-presence-star::after {
    width: 76px;
    height: 5px;
    border-radius: 999px;
    background:
        linear-gradient(
            to right,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.18) 8%,
            rgba(255,255,255,0.72) 28%,
            rgba(255,255,255,1) 47%,
            rgba(255,255,255,1) 53%,
            rgba(255,255,255,0.72) 72%,
            rgba(255,255,255,0.18) 92%,
            rgba(255,255,255,0) 100%
        );
    clip-path: polygon(
        0% 50%,
        38% 28%,
        50% 0%,
        62% 28%,
        100% 50%,
        62% 72%,
        50% 100%,
        38% 72%
    );
    box-shadow:
        0 0 10px rgba(255,255,255,0.95),
        0 0 22px rgba(255,238,176,0.7);
}

.pp-presence-star::before {
    width: 5px;
    height: 104px;
    border-radius: 999px;
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0%,
            rgba(255,255,255,0.18) 8%,
            rgba(255,255,255,0.72) 28%,
            rgba(255,255,255,1) 47%,
            rgba(255,255,255,1) 53%,
            rgba(255,255,255,0.72) 72%,
            rgba(255,255,255,0.18) 92%,
            rgba(255,255,255,0) 100%
        );
    clip-path: polygon(
        50% 0%,
        72% 38%,
        100% 50%,
        72% 62%,
        50% 100%,
        28% 62%,
        0% 50%,
        28% 38%
    );
    box-shadow:
        0 0 10px rgba(255,255,255,0.95),
        0 0 22px rgba(255,238,176,0.7);
}

.pp-presence-star::after {
    width: 34px;
    height: 4px;
    box-shadow: 0 0 14px rgba(255, 239, 188, 0.5);
}

@keyframes pp-star-twinkle {
    0% {
        filter: brightness(0.92);
    }

    50% {
        filter: brightness(1.32);
    }

    100% {
        filter: brightness(1.02);
    }
}


/* STAR SHAPE OVERRIDE */
.pp-presence-star {
    overflow: visible !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow:
        0 0 8px 3px rgba(255,255,255,0.95),
        0 0 20px 9px rgba(255,235,155,0.70),
        0 0 40px 18px rgba(255,220,100,0.34) !important;
}

.pp-presence-star::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 18px !important;
    height: 110px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 0 !important;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.28) 18%,
        rgba(255,255,255,0.90) 43%,
        #ffffff 50%,
        rgba(255,255,255,0.90) 57%,
        rgba(255,255,255,0.28) 82%,
        rgba(255,255,255,0) 100%
    ) !important;
    clip-path: polygon(
        50% 0%,
        66% 42%,
        100% 50%,
        66% 58%,
        50% 100%,
        34% 58%,
        0% 50%,
        34% 42%
    ) !important;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.95)) !important;
    pointer-events: none !important;
}

.pp-presence-star::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 78px !important;
    height: 16px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 0 !important;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.28) 18%,
        rgba(255,255,255,0.90) 43%,
        #ffffff 50%,
        rgba(255,255,255,0.90) 57%,
        rgba(255,255,255,0.28) 82%,
        rgba(255,255,255,0) 100%
    ) !important;
    clip-path: polygon(
        0% 50%,
        42% 34%,
        50% 0%,
        58% 34%,
        100% 50%,
        58% 66%,
        50% 100%,
        42% 66%
    ) !important;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.95)) !important;
    pointer-events: none !important;
}


/* ==========================================================
   PHASE 4 — MULTI-MOMENT STREAM
   ========================================================== */

.pp-stream {
    position: relative;

    width: 100%;
    height: 100dvh;
    min-height: 100dvh;

    overflow: hidden;

    color: var(--stream-navy);
}

.pp-stream__track {
    width: 100%;
    height: 100dvh;

    overflow-x: hidden;
    overflow-y: auto;

    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pp-stream__track::-webkit-scrollbar {
    display: none;
}

.pp-moment {
    position: relative;

    width: 100%;
    height: 100dvh;
    min-height: 100dvh;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    flex: 0 0 100dvh;
}

.pp-stream__preview-badge {
    position: fixed;

    top: max(
        18px,
        env(safe-area-inset-top)
    );

    left: 50%;

    transform: translateX(-50%);

    z-index: 50;

    white-space: nowrap;

    pointer-events: none;
}

.pp-moment__content {
    position: relative;

    z-index: 5;

    width: min(
        calc(100% - 40px),
        620px
    );
}


/* ==========================================================
   PRAYER MOMENT
   ========================================================== */

.pp-moment--prayer {
    color: #31445b;
}

.pp-prayer-headline {
    margin: 0 0 34px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            28px,
            7vw,
            42px
        );

    line-height: 1.12;
    font-weight: 400;

    text-wrap: balance;
}

.pp-prayer-body {
    max-width: 520px;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            20px,
            5vw,
            27px
        );

    line-height: 1.58;

    white-space: pre-line;

    text-wrap: balance;
}

.pp-moment-mark {
    margin-top: 42px;

    font-size: 11px;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    opacity: 0.42;
}


/* ==========================================================
   SCRIPTURE MOMENT
   ========================================================== */

.pp-moment--scripture {
    color: #263c59;
}

.pp-scripture-text {
    max-width: 570px;

    margin: 0;

    border: 0;
    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            29px,
            7vw,
            46px
        );

    line-height: 1.35;
    font-weight: 400;

    text-wrap: balance;
}

.pp-scripture-reference {
    margin-top: 34px;

    font-size:
        clamp(
            14px,
            3.8vw,
            17px
        );

    line-height: 1.4;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0.62;
}


/* ==========================================================
   STILLNESS MOMENT
   ========================================================== */

.pp-moment--stillness {
    color: #f3eee5;
}

.pp-stillness-headline {
    max-width: 510px;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            30px,
            7vw,
            46px
        );

    line-height: 1.2;
    font-weight: 400;

    text-wrap: balance;
}

.pp-stillness-body {
    max-width: 390px;

    margin: 38px 0 0;

    font-size:
        clamp(
            16px,
            4vw,
            19px
        );

    line-height: 1.7;

    opacity: 0.72;

    text-wrap: balance;
}


/* ==========================================================
   LIVE PRESENCE MOMENT
   Approved Phase 3 visual system retained
   ========================================================== */

.pp-moment--live-presence {
    color: var(--stream-navy);
}

.pp-moment--live-presence .pp-moment__content {
    width: min(
        calc(100% - 40px),
        520px
    );
}



/* ==========================================================
   DISTANT AMBIENT STARS
   Decorative only — never counted as live prayer presence
   ========================================================== */

.pp-presence-star-distant {
    position: absolute;

    left: var(--star-x);
    top: var(--star-y);

    width: var(--star-size);
    height: var(--star-size);

    z-index: 2;

    border-radius: 50%;

    background: #fffdf3;

    box-shadow:
        0 0 5px 1px rgba(255,255,255,0.92),
        0 0 12px 4px rgba(255,239,185,0.56),
        0 0 24px 8px rgba(243,205,105,0.22);

    opacity: var(--star-opacity);

    transform:
        translate(-50%, -50%)
        scale(0.9);

    pointer-events: none;

    animation:
        pp-distant-star-glow
        var(--star-duration)
        ease-in-out
        var(--star-delay)
        infinite alternate;
}

.pp-presence-star-distant::before,
.pp-presence-star-distant::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 999px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255,255,255,0.88),
            transparent
        );

    opacity: 0.72;

    pointer-events: none;
}

.pp-presence-star-distant::before {
    width: calc(var(--star-size) * 3.2);
    height: 1px;
}

.pp-presence-star-distant::after {
    width: 1px;
    height: calc(var(--star-size) * 3.2);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,0.88),
            transparent
        );
}

@keyframes pp-distant-star-glow {
    from {
        opacity:
            calc(
                var(--star-opacity) * 0.48
            );

        transform:
            translate(-50%, -50%)
            scale(0.72);

        filter:
            brightness(0.86);
    }

    to {
        opacity:
            var(--star-opacity);

        transform:
            translate(-50%, -50%)
            scale(1.12);

        filter:
            brightness(1.34);
    }
}


/* ==========================================================
   LOADING / ERROR STATE
   ========================================================== */

.pp-stream-state {
    color: #31445b;

    background:
        linear-gradient(
            180deg,
            #f3eee5,
            #e7dfd1
        );
}

.pp-stream-state__content {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.pp-stream-state__title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            28px,
            7vw,
            42px
        );

    line-height: 1.2;
    font-weight: 400;
}

.pp-stream-retry {
    margin-top: 28px;

    border: 0;
    border-bottom:
        1px solid
        rgba(49, 68, 91, 0.34);

    padding:
        6px
        2px;

    font: inherit;

    color: inherit;
    background: transparent;

    cursor: pointer;

    opacity: 0.66;
}

.pp-stream-retry:focus-visible {
    outline:
        3px solid
        rgba(49, 68, 91, 0.2);

    outline-offset: 5px;
}


/* ==========================================================
   RTL
   ========================================================== */

html[dir="rtl"] .pp-stream,
html[dir="rtl"] .pp-moment__content {
    direction: rtl;
}

html[dir="rtl"] .pp-scripture-reference {
    letter-spacing: 0;
    text-transform: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 480px) {
    .pp-moment {
        padding:
            max(
                54px,
                env(safe-area-inset-top)
            )
            20px
            max(
                42px,
                env(safe-area-inset-bottom)
            );
    }

    .pp-prayer-headline {
        margin-bottom: 28px;
    }

    .pp-moment-mark {
        margin-top: 32px;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .pp-stream__track {
        scroll-behavior: auto;
    }


    .pp-presence-light,
    .pp-presence-light.is-new,
    .pp-presence-star,
    .pp-presence-star-distant {
        animation: none !important;
    }
}


/* ==========================================================
   PHASE 6.5 — DEMO PRESENCE PRESENTATION
   ========================================================== */

.pp-stream-demo-badge {
    position: fixed;

    left: 50%;
    bottom: max(
        10px,
        env(safe-area-inset-bottom)
    );

    transform: translateX(-50%);

    z-index: 60;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;

    opacity: 0.35;

    pointer-events: none;
}

.pp-presence-number.is-count-changing {
    animation:
        pp-count-change
        420ms
        ease-out;
}

@keyframes pp-count-change {
    0% {
        opacity: 0.65;
        transform: scale(0.97);
    }

    55% {
        opacity: 1;
        transform: scale(1.025);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-presence-number.is-count-changing {
        animation: none !important;
    }
}


/* ==========================================================
   PRAYER ROOM ACTIONS
   ========================================================== */

.pp-presence-room-label {
    margin: 0 0 18px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: rgba(23, 50, 79, 0.62);
}


.pp-presence-room-actions {
    position: relative;
    z-index: 6;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    width: min(100%, 520px);

    margin: 30px auto 0;
}


.pp-presence-room-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 13px 24px;

    border-radius: 999px;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}


.pp-presence-room-action--primary {
    color: #ffffff;

    background: #17324f;

    box-shadow:
        0 10px 28px
        rgba(23, 50, 79, 0.18);
}


.pp-presence-room-action--secondary {
    color: #17324f;

    border:
        1px solid
        rgba(23, 50, 79, 0.24);

    background:
        rgba(255, 255, 255, 0.34);

    backdrop-filter: blur(10px);
}


@media (hover: hover) {

    .pp-presence-room-action:hover {
        transform: translateY(-2px);
    }

}


@media (max-width: 480px) {

    .pp-presence-room-actions {
        flex-direction: column;

        width: min(100%, 320px);

        margin-top: 24px;
    }

    .pp-presence-room-action {
        width: 100%;
    }

}


@media (prefers-reduced-motion: reduce) {

    .pp-presence-room-action {
        transition: none !important;
    }

}