/**
 * Bitesback mobile flow — compact persona picker, step guide, bottom-sheet upload.
 *
 * All behaviour is scoped to clapback mode (`body.bt-clapback`) and phones
 * (max-width: 767.98px). Desktop and Interpret mode are untouched: the picker
 * keeps its full cards and the upload form stays inline.
 */

/* Per-persona accent so the step guide + sheet match the selected card. */
body[data-bt-skin="wholesome_pup"]      { --bt-accent: #1cb5c9; --bt-on-accent: #ffffff; --bt-sheet-bg: #fffdf9; }
body[data-bt-skin="judgmental_bastard"] { --bt-accent: #c026d3; --bt-on-accent: #ffffff; --bt-sheet-bg: #fffdf9; }
body[data-bt-skin="sick_puppy"]         { --bt-accent: #b8ff2e; --bt-on-accent: #0e0e0e; --bt-sheet-bg: #141414; }

/* Hidden by default — only the mobile media query below turns these on. */
.bt-steps,
.bt-picker-hint,
.bt-sheet-header,
.bt-sheet-scrim { display: none; }

@media (max-width: 767.98px) {

    /* ── 1. Compact 3-across persona picker ── */
    body.bt-clapback .tier-selector {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    body.bt-clapback .tier-card { min-height: 0; }
    body.bt-clapback .tier-card-mascot { height: 82px; }
    body.bt-clapback .tier-card[data-tier="sick_puppy"] .tier-mascot-img { height: 118%; }
    body.bt-clapback .tier-card-body { padding: 0.45rem 0.4rem 0.6rem; }
    body.bt-clapback .tier-card .tier-badge { font-size: 0.5rem; margin-bottom: 0.15rem; }
    body.bt-clapback .tier-card .tier-name { font-size: 0.72rem; margin: 0.1rem 0; }
    body.bt-clapback .tier-card .tier-desc { display: none; }
    body.bt-clapback .tier-card .tier-lock-icon { top: 0.35rem; right: 0.35rem; font-size: 0.72rem; }

    /* A freshly-selected card pops in (cards re-render on each pick). */
    body.bt-clapback .tier-card.selected { animation: btPop 0.34s cubic-bezier(0.22, 1, 0.36, 1); }

    /* ── 2. Step guide: Pick → Upload → Roast ── */
    body.bt-clapback .bt-steps {
        display: flex;
        list-style: none;
        margin: 0.25rem 0 0.9rem;
        padding: 0;
        gap: 6px;
    }
    body.bt-clapback .bt-step {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 4px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        color: #8a8f98;
        background: rgba(128, 128, 128, 0.12);
        transition: color 0.25s, background 0.25s;
    }
    body.bt-clapback .bt-step-num {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.68rem;
        background: #b7bcc4;
        color: #fff;
        transition: background 0.25s;
    }
    body.bt-clapback .bt-step.is-active {
        color: var(--bt-accent, #1cb5c9);
        background: color-mix(in srgb, var(--bt-accent, #1cb5c9) 16%, transparent);
    }
    body.bt-clapback .bt-step.is-active .bt-step-num,
    body.bt-clapback .bt-step.is-done .bt-step-num {
        background: var(--bt-accent, #1cb5c9);
        color: var(--bt-on-accent, #fff);
    }
    body.bt-clapback .bt-step.is-done { color: var(--bt-accent, #1cb5c9); }
    body[data-bt-skin="sick_puppy"].bt-clapback .bt-step { background: rgba(255, 255, 255, 0.08); }

    body.bt-clapback .bt-picker-hint {
        display: block;
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        opacity: 0.8;
        margin: 0 0 0.5rem;
    }
    /* Once the sheet is open there's nothing to pick — hide the hint. */
    body.bt-clapback.bt-sheet-open .bt-picker-hint { visibility: hidden; }

    /* ── 3. Bottom-sheet upload ── */
    body.bt-clapback.bt-sheet-open { overflow: hidden; }

    /* .upload-container has position:relative;z-index:1, which forms a stacking
       context. The scrim + sheet live inside it (siblings), so lift the whole
       container above other body content while the sheet is open — otherwise the
       body-level layers would sit over the sheet. */
    body.bt-clapback.bt-sheet-open .upload-container { z-index: 10040; }

    body.bt-clapback .bt-sheet-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10040;
        /* No backdrop-filter: on iOS Safari it lifts the scrim above higher
           z-index siblings, painting over (and blurring) the sheet itself. */
        background: rgba(10, 12, 18, 0.55);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    body.bt-clapback.bt-sheet-open .bt-sheet-scrim { opacity: 1; visibility: visible; }

    body.bt-clapback .upload-form-container {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10045;
        margin: 0;
        max-height: 88dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--bt-sheet-bg, #fffdf9);
        border-radius: 22px 22px 0 0;
        box-shadow: 0 -14px 34px rgba(0, 0, 0, 0.24);
        padding: 0 1rem calc(1.25rem + env(safe-area-inset-bottom));
        transform: translateY(105%);
        transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.bt-clapback.bt-sheet-open .upload-form-container { transform: translateY(0); }

    body.bt-clapback .bt-sheet-header {
        display: flex;
        align-items: center;
        gap: 10px;
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 0.5rem 0 0.75rem;
        background: var(--bt-sheet-bg, #fffdf9);
    }
    body.bt-clapback .bt-sheet-handle {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        /* !important overrides a global touch-target rule (min-height/padding on
           buttons) that otherwise bloats this thin grab-bar into a gray block. */
        width: 42px !important;
        height: 5px !important;
        min-height: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none;
        border-radius: 3px;
        background: rgba(128, 128, 128, 0.4);
        cursor: pointer;
    }
    body.bt-clapback .bt-sheet-mascot {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--bt-accent, #1cb5c9);
        margin-top: 6px;
    }
    body.bt-clapback .bt-sheet-persona-name {
        font-weight: 700;
        font-size: 0.95rem;
        margin-top: 6px;
    }
    body.bt-clapback .bt-sheet-close {
        margin-left: auto;
        margin-top: 6px;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: rgba(128, 128, 128, 0.15);
        color: inherit;
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
    }

    /* Cloud bobs gently while the sheet is open. */
    body.bt-clapback.bt-sheet-open .upload-icon { animation: btBob 2.6s ease-in-out infinite; }

    /* The submit CTA sticks to the bottom of the sheet once a file is chosen. */
    body.bt-clapback #filePreview .analyze-btn {
        position: sticky;
        bottom: 0;
        width: 100%;
    }

    /* ── 4. Tame the mascot toys during the core task ── */
    body.bt-clapback.bt-sheet-open .mascot-controls,
    body.bt-clapback.bt-sheet-open #mascot-container { display: none; }
}

@keyframes btPop {
    0%   { transform: scale(0.94); }
    60%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
@keyframes btBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    body.bt-clapback .tier-card.selected,
    body.bt-clapback.bt-sheet-open .upload-icon { animation: none; }
    body.bt-clapback .upload-form-container { transition: none; }
}

/* ── Tier 3: right-size hero copy + first-run coach mark ── */
.bt-coach { display: none; }

@media (max-width: 767.98px) {
    /* Keep the all-caps hero titles from ballooning inside the sheet. */
    body.bt-clapback .upload-title { font-size: 1.15rem !important; line-height: 1.22; }
    body[data-bt-skin="sick_puppy"].bt-clapback .upload-title,
    body[data-bt-skin="judgmental_bastard"].bt-clapback .upload-title {
        font-size: 1.02rem !important;
        letter-spacing: 0.03em;
    }
    body.bt-clapback .upload-description { font-size: 0.9rem; }

    /* First-run coach mark, sitting above the persona picker. */
    body.bt-clapback .bt-coach.is-visible {
        display: block;
        position: relative;
        margin: 0.25rem 0 0.85rem;
        padding: 0.7rem 2.3rem 0.7rem 0.9rem;
        background: var(--bt-accent, #1cb5c9);
        color: var(--bt-on-accent, #fff);
        border-radius: 14px;
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.35;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
        animation: btCoachIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.bt-clapback .bt-coach.is-visible::after {
        content: '';
        position: absolute;
        left: 32px;
        bottom: -8px;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 9px solid var(--bt-accent, #1cb5c9);
    }
    body.bt-clapback .bt-coach-close {
        position: absolute;
        top: 6px;
        right: 8px;
        width: 22px;
        height: 22px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.28);
        color: inherit;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
    }
    /* Coach replaces the plain hint on first run to avoid saying it twice. */
    body.bt-clapback .bt-coach.is-visible ~ .bt-picker-hint { display: none; }
}

@keyframes btCoachIn {
    0%   { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    body.bt-clapback .bt-coach.is-visible { animation: none; }
}