/* ==========================================
   SalmasFlix — Sync Player · Binary Together/Alone capsule
   Extracted from media.css in Phase 7.4.

   The Dynamic-Island-style glass pill at top-left of the player that
   carries the three zones of the binary sync-mode UI:
     1. My-mode toggle (Together/Alone icon swap, tap to flip)
     2. Partner avatar + meta (tappable when I'm Alone → snap to their time)
     3. Reactions entry (not included here — lives in its own module)

   Classes scoped to `.sync-role-wrap`, `.sync-role-capsule`, `.src-*`,
   `.srpc-*`. Everything retints through theme tokens — `var(--primary)`
   for Together, `var(--secondary)` for Alone — so the two-state signal
   stays readable across every preset.

   Visibility is driven by the auto-hide group on the player
   (`.media-show` / `.media-fs-show`), so the capsule fades + reappears
   in lockstep with the bottom controls.
   ========================================== */

@layer features {


.sync-role-wrap {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 22;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.media-player-wrap.media-show .sync-role-wrap,
.media-fs.media-fs-show .sync-role-wrap {
    opacity: 1;
    pointer-events: auto;
}
/* Safe-area padding in real/fake fullscreen so the wrap clears the
   iPhone notch + any URL bar that didn't fully hide. */
.media-fs .sync-role-wrap {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: calc(10px + env(safe-area-inset-left, 0px));
}

/* The unified pill — glass rim, rounded capsule, 3 inline zones. */
.sync-role-capsule {
    display: inline-flex;
    align-items: stretch;
    background: rgba(var(--secondary-rgb), 0.08);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 2px 14px rgba(0, 0, 0, 0.42);
    overflow: hidden;
    font-family: inherit;
}
.src-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.src-btn:hover:not([disabled]),
.src-btn:focus-visible:not([disabled]) {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}
.src-btn[disabled] { cursor: default; }
.src-btn svg { display: block; }

/* My-mode button — themed color, icon swaps. Primary (gold default) for
   Together, secondary (purple default) for Alone so the two states
   consistently theme-retint across all 8 presets. */
.src-btn-mine { color: var(--primary); padding-left: 14px; }
.src-btn-mine[data-state="alone"] { color: var(--secondary); }
.src-btn-mine:hover { background: rgba(var(--primary-rgb), 0.12); }
.src-btn-mine[data-state="alone"]:hover { background: rgba(var(--secondary-rgb), 0.15); }

/* Hairline dividers between zones — match the rim hairline. */
.src-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 5px 0;
    flex-shrink: 0;
}

/* Partner zone — avatar (with online-dot overlay) + 2-line meta. */
.srpc-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.srpc-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--primary);
    box-shadow: 0 0 5px rgba(var(--primary-rgb), 0.45);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: block;
}
/* Online indicator dot — bottom-right of the avatar. Color tracks
   partner's MODE so the dot doubles as a presence + mode signal:
     online + together → var(--primary)   (matches the "Together" pill)
     online + alone    → var(--secondary) (matches the "Alone" pill)
     offline           → muted grey
   Sized + outlined (10px on a 26px avatar with a #15122a stroke)
   so it stays glance-readable on phone without being clipped by the
   capsule's overflow. */
.srpc-online-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(150, 150, 150, 0.5);
    border: 2px solid #15122a;
    box-sizing: border-box;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
/* Online + Together → primary (matches the top-left mode pill). */
.src-btn-partner[data-online="true"][data-state="together"] .srpc-online-dot {
    background: var(--primary);
    box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.7);
}
/* Online + Alone → secondary (matches the Alone pill accent). */
.src-btn-partner[data-online="true"][data-state="alone"] .srpc-online-dot {
    background: var(--secondary);
    box-shadow: 0 0 6px rgba(var(--secondary-rgb), 0.7);
}
/* Offline (regardless of mode) → muted grey, no glow. */
.src-btn-partner[data-online="false"] .srpc-online-dot,
.src-btn-partner[data-state="offline"] .srpc-online-dot {
    background: rgba(150, 150, 150, 0.5);
    box-shadow: none;
}
.src-btn-partner[data-state="alone"] .srpc-avatar {
    border-color: var(--secondary);
    box-shadow: 0 0 6px rgba(var(--secondary-rgb), 0.55);
}
.srpc-meta {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    line-height: 1;
}
.srpc-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.78rem;
    max-width: 11ch;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}
.srpc-state {
    font-size: 0.62rem;
    color: var(--primary);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    line-height: 1;
}
.src-btn-partner[data-state="alone"] .srpc-state { color: var(--secondary); }
/* OFFLINE state — partner isn't connected to the session. Avatar
   desaturates, name dims, state text reads "offline" in a muted grey.
   The chip is `disabled` from JS too (can't snap to someone not here).
   This is the fix for "why does it show partner's name when they're
   not here" — now it still shows who the partner IS, but visibly
   signals they're not around. */
.src-btn-partner[data-state="offline"] .srpc-avatar {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: none;
    filter: grayscale(1) brightness(0.65);
}
.src-btn-partner[data-state="offline"] .srpc-name {
    color: rgba(255, 255, 255, 0.55);
}
.src-btn-partner[data-state="offline"] .srpc-state {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}
/* When I'm Alone AND partner is online, tapping the partner zone snaps
   my player to their position — render a subtle hover + a tiny pulsing
   dot so the affordance reads as "clickable / catch up." When I'm
   Together OR partner is offline, the button is `disabled` and reads
   as passive info. */
.src-btn-partner:not([disabled]):hover {
    background: rgba(var(--primary-rgb), 0.12);
}
.src-btn-partner:not([disabled]) { position: relative; }
.src-btn-partner:not([disabled])::after {
    content: '';
    position: absolute;
    top: 4px; right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 5px rgba(var(--primary-rgb), 0.75);
    animation: srpc-pulse 1.8s ease-in-out infinite;
}
@keyframes srpc-pulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.35); }
}

/* Mobile — keep the pill compact. Hide partner meta (avatar-only
   communicates presence). */
/* breakpoint snap 600px -> 768px (Phase 7.6 ladder) */
@media (max-width: 768px) {
    .src-btn { padding: 5px 10px; font-size: 0.74rem; }
    .src-btn-mine { padding-left: 12px; }
    .src-btn-partner { padding-right: 12px; }
    .src-btn-partner .srpc-meta { display: none; }
    .srpc-avatar { width: 24px; height: 24px; }
}


} /* end @layer features */