/* ============================================================================
   Friend-streak celebration modal (Home.FriendStreak.cs) - the pair milestone.
   Visually distinct from the personal milestone modal: the PAIR flame is
   dual-tone (amber warmth + violet brand in one gradient), flanked by both
   avatars, with the tier badge underneath. Amber #FBBF24 / red #F87171 are the
   same literals the streak clock uses in 01-topbar.css; everything else runs
   through the base tokens so the dark theme needs no spot-fixes here.

   Owner rules honoured: fixed card height + internal scroll (content growth
   never resizes the overlay, and the queue can swap content while open), no
   pulse animations, reduced-motion safe, max-width inside the 420-520 band.
   ============================================================================ */

.modal-friend-milestone {
    max-width: 440px;
    /* Fixed, not content-driven: the modal can swap to the next queued milestone
       while open, and a longer friend name must scroll INSIDE, never move the
       frame. min() keeps short phones inside the viewport budget. */
    height: min(440px, 86vh);
    text-align: center;
    align-items: center;
    overflow: hidden;
}

/* Everything except the action row lives in the internal scroll region. */
.friend-milestone-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 2px;
}

/* ---- both-avatars motif: you + the friend around the shared flame ---------- */
.friend-milestone-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 4px;
}

/* Upsize the shared FriendAvatar (base 32px in 29-friends.css) for the hero row.
   The ring is split by the same two tones the flame burns with - the left half
   violet (you, the brand), the right half amber (the friend, the warmth). */
.friend-milestone-avatar .friend-avatar {
    width: 64px;
    height: 64px;
    font-size: 26px;
    border: 3px solid transparent;
    background:
        linear-gradient(var(--chronos-card-bg), var(--chronos-card-bg)) padding-box,
        linear-gradient(135deg, var(--chronos-violet) 0%, #FBBF24 100%) border-box;
}
.friend-milestone-avatar .friend-avatar-initial {
    background:
        linear-gradient(var(--chronos-chip-bg), var(--chronos-chip-bg)) padding-box,
        linear-gradient(135deg, var(--chronos-violet) 0%, #FBBF24 100%) border-box;
}

/* ---- the dual-tone pair flame ---------------------------------------------
   Drawn, not the personal fire-sprite: the pair flame is its own mark. A teardrop
   (border-radius trick) filled amber-to-violet with a lighter inner tongue.
   Static by design - no keyframes, so there is nothing to pulse and nothing for
   prefers-reduced-motion to switch off. */
.friend-milestone-flame {
    position: relative;
    width: 44px;
    height: 56px;
    flex: 0 0 auto;
    background: linear-gradient(180deg, #FBBF24 0%, #F5A524 38%, var(--chronos-lavender) 72%, var(--chronos-violet) 100%);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    transform: rotate(45deg) scale(0.82);
    border-top-left-radius: 4px;
    filter: drop-shadow(0 6px 14px rgba(124, 58, 237, 0.35));
}
.friend-milestone-flame::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 58%;
    width: 45%;
    height: 45%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #FDE68A 0%, var(--chronos-violet-light) 100%);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    border-top-left-radius: 2px;
    opacity: 0.9;
}

/* ---- tier badge: the day count over the tier name -------------------------- */
.friend-milestone-tier {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 22px;
    border-radius: var(--radius-card);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--chronos-violet) 14%, transparent) 0%,
            color-mix(in srgb, #FBBF24 16%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--chronos-violet) 30%, transparent);
}
.friend-milestone-tier-days {
    font-family: var(--chronos-font-mono);
    font-size: 34px;
    font-weight: var(--weight-black);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--chronos-violet);
}
.friend-milestone-tier-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--chronos-fg-secondary);
}

/* The action row stays pinned under the scroll region. */
.modal-friend-milestone .milestone-actions {
    flex: 0 0 auto;
}

/* Phones (375px is verification priority 1): the fixed height eats too much of a
   short landscape viewport - shrink the hero row a step, keep the frame fixed. */
@media (max-width: 480px) {
    .modal-friend-milestone { height: min(400px, 88vh); }
    .friend-milestone-avatar .friend-avatar { width: 52px; height: 52px; font-size: 21px; }
    .friend-milestone-flame { width: 36px; height: 46px; }
}