/**
 * Joint Session Mockup Styles
 * Styles specific to the joint session mockup
 * Animation loop: ~15 seconds
 *
 * Timeline:
 * 0-1s: Initial state, workout screen visible
 * 1-3s: Request banner slides in
 * 3-4s: Request banner dismissed (accepted)
 * 4-5s: Started banner + friends icon appear
 * 5-6s: Started banner fades
 * 6-8s: Progress banner slides in
 * 8-10s: Support banner slides in + heart icon
 * 10-13s: Hold final state
 * 13-15s: Fade out and reset
 */

/* ============================================
   Joint Session Screen
   ============================================ */
.joint-session-screen {
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
}

/* ============================================
   Joint Session Header Icons
   ============================================ */
.joint-session-icons {
    display: flex;
    gap: 6px;
    align-items: center;
}

.joint-icon {
    position: relative;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
}

.joint-icon.friends-icon {
    background: rgba(52, 199, 89, 0.3);
    animation: friendsIconAppear 15s ease infinite;
}

.joint-icon.heart-icon {
    background: rgba(0, 210, 255, 0.3);
    animation: heartIconAppear 15s ease infinite;
}

.icon-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #1C1C1E;
}

.icon-badge.orange-badge {
    background: var(--mockup-orange);
}

.icon-badge-count {
    position: absolute;
    top: -2px;
    right: -4px;
    background: var(--mockup-cyan);
    border-radius: 10px;
    min-width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: white;
    font-weight: 700;
}

/* ============================================
   Banner Container
   ============================================ */
.joint-banner-container {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ============================================
   Joint Banners - Base Styles
   Push content down with max-height animation
   ============================================ */
.joint-banner {
    background: rgba(20, 20, 30, 0.95);
    border-radius: 12px;
    display: flex;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    transform: translateY(-10px);
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease, transform 0.3s ease;
}

.banner-left-accent {
    width: 4px;
    flex-shrink: 0;
}

.banner-left-accent.cyan-accent {
    background: var(--mockup-cyan);
}

.banner-left-accent.green-accent {
    background: #34C759;
}

.banner-left-accent.orange-accent {
    background: var(--mockup-orange);
}

.banner-content {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================
   Banner Row Layouts
   ============================================ */
.banner-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.banner-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.banner-icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.banner-icon-circle.small {
    width: 22px;
    height: 22px;
}

.banner-icon-circle.cyan-bg {
    background: var(--mockup-cyan);
}

.banner-icon-circle.green-bg {
    background: #34C759;
}

.banner-text {
    flex: 1;
    min-width: 0;
}

.banner-title {
    font-size: 12px;
    font-weight: 600;
    color: white;
    line-height: 1.2;
}

.banner-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1px;
}

.banner-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 2px;
}

.banner-exercise {
    font-size: 11px;
    font-weight: 500;
    color: white;
    margin-top: 1px;
}

.banner-progress-text {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1px;
}

.banner-support-msg {
    font-size: 11px;
    font-weight: 500;
    color: white;
    margin-top: 1px;
}

.support-emoji {
    font-size: 20px;
    flex-shrink: 0;
}

/* ============================================
   Banner Avatar (reuse from activity feed)
   ============================================ */
.joint-banner .avatar-circle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.joint-banner .avatar-circle.small {
    width: 26px;
    height: 26px;
}

.joint-banner .avatar-circle img {
    width: 16px;
    height: 16px;
}

.joint-banner .avatar-circle.small img {
    width: 14px;
    height: 14px;
}

/* ============================================
   Banner Action Buttons
   ============================================ */
.banner-actions {
    display: flex;
    gap: 8px;
}

.banner-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.banner-btn.primary-btn {
    background: var(--mockup-cyan);
    color: white;
}

.banner-btn.secondary-btn {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.banner-btn img {
    width: 12px;
    height: 12px;
    filter: brightness(0) invert(1);
}

/* ============================================
   View Pill Buttons
   ============================================ */
.view-pill {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.view-pill.green-pill {
    background: #34C759;
}

.view-pill.orange-pill {
    background: var(--mockup-orange);
}

/* ============================================
   Exercise Card Adjustments
   ============================================ */
.joint-exercise-card {
    flex: 1;
    margin: 0 10px;
    overflow: hidden;
}

.joint-exercise-card .previous-section {
    margin-bottom: 8px;
}

.joint-exercise-card .sets-table {
    margin-bottom: 8px;
}

.card-btn.full-width {
    width: 100%;
}

/* ============================================
   Banner Animations
   Using max-height to push content down
   ============================================ */

/* Request Banner - appears 1-3s, dismissed 3-4s */
.request-banner {
    animation: requestBannerAnim 15s ease infinite;
}

@keyframes requestBannerAnim {
    0%, 6% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transform: translateY(-10px);
    }
    10%, 18% {
        max-height: 150px;
        opacity: 1;
        margin-bottom: 8px;
        transform: translateY(0);
    }
    22%, 100% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transform: translateY(-10px);
    }
}

/* Started Banner - appears 4-6s */
.started-banner {
    animation: startedBannerAnim 15s ease infinite;
}

@keyframes startedBannerAnim {
    0%, 24% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transform: translateY(-10px);
    }
    28%, 36% {
        max-height: 80px;
        opacity: 1;
        margin-bottom: 8px;
        transform: translateY(0);
    }
    40%, 100% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transform: translateY(-10px);
    }
}

/* Progress Banner - appears 6-10s */
.progress-banner {
    animation: progressBannerAnim 15s ease infinite;
}

@keyframes progressBannerAnim {
    0%, 38% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transform: translateY(-10px);
    }
    42%, 60% {
        max-height: 90px;
        opacity: 1;
        margin-bottom: 8px;
        transform: translateY(0);
    }
    65%, 100% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transform: translateY(-10px);
    }
}

/* Support Banner - appears 8-13s */
.support-banner {
    animation: supportBannerAnim 15s ease infinite;
}

@keyframes supportBannerAnim {
    0%, 52% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transform: translateY(-10px);
    }
    56%, 82% {
        max-height: 80px;
        opacity: 1;
        margin-bottom: 8px;
        transform: translateY(0);
    }
    88%, 100% {
        max-height: 0;
        opacity: 0;
        margin-bottom: 0;
        transform: translateY(-10px);
    }
}

/* Friends Icon Animation - appears with started banner */
@keyframes friendsIconAppear {
    0%, 26% {
        opacity: 0;
        transform: scale(0.5);
    }
    30%, 85% {
        opacity: 1;
        transform: scale(1);
    }
    90%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Heart Icon Animation - appears with support banner */
@keyframes heartIconAppear {
    0%, 54% {
        opacity: 0;
        transform: scale(0.5);
    }
    58%, 85% {
        opacity: 1;
        transform: scale(1);
    }
    90%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* ============================================
   Timer Animation for Joint Session
   Starts at 1:03, counts up 1 second per real second
   15s loop: 1:03 -> 1:18 -> back to 1:03
   ============================================ */
.joint-session-screen .timer-mins::after {
    content: "1";
    animation: none;
}

.joint-session-screen .timer-secs::after {
    content: "03";
    animation: jointTimerSecs 15s linear infinite;
}

@keyframes jointTimerSecs {
    0%, 5% { content: "03"; }
    6%, 11% { content: "04"; }
    12%, 17% { content: "05"; }
    18%, 23% { content: "06"; }
    24%, 29% { content: "07"; }
    30%, 35% { content: "08"; }
    36%, 41% { content: "09"; }
    42%, 47% { content: "10"; }
    48%, 53% { content: "11"; }
    54%, 59% { content: "12"; }
    60%, 65% { content: "13"; }
    66%, 71% { content: "14"; }
    72%, 77% { content: "15"; }
    78%, 83% { content: "16"; }
    84%, 89% { content: "17"; }
    90%, 100% { content: "18"; }
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .request-banner,
    .started-banner,
    .progress-banner,
    .support-banner,
    .joint-icon.friends-icon,
    .joint-icon.heart-icon,
    .joint-session-screen .timer-secs::after {
        animation: none !important;
    }

    /* Show static state for reduced motion - show support banner */
    .support-banner {
        max-height: 80px;
        opacity: 1;
        margin-bottom: 8px;
        transform: translateY(0);
    }

    .joint-icon.friends-icon,
    .joint-icon.heart-icon {
        opacity: 1;
        transform: scale(1);
    }

    .joint-session-screen .timer-secs::after {
        content: "03";
    }
}