{{-- ===========================================================
     Channel page — MOBILE overrides
     This file owns every mobile/touch-screen rule. All selectors
     are wrapped in @media (max-width: 768px) or smaller so they
     cannot affect desktop. Editing here is safe.
     -----------------------------------------------------------
     • Edit here for: phone layout, tap-target sizing, mobile
       hero, mobile tabs, anything that should only apply on
       small viewports.
     • Add new mobile rules INSIDE one of the @media blocks below.
     =========================================================== --}}
<style>
/* ══════════════════════════════════════════════════
   MOBILE
══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   MOBILE — full redesign of the channel header
   Strategy: avatar floats over the banner, then name +
   meta + actions stack vertically below in a single
   column so nothing has to compete for width.
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ch-banner { height: 130px; }
    .ch-header { padding: 0 14px 18px; }

    /* Stack avatar + info instead of inline */
    .ch-header-inner {
        display: block; gap: 0;
        margin-top: -42px;
    }

    /* Centred floating avatar at top-left, overlapping the banner */
    .ch-avatar-wrap { display: inline-block; margin-bottom: 12px; }
    .ch-avatar {
        width: 84px; height: 84px; border-radius: 14px;
        box-shadow: 0 0 0 3px hsl({{ $hue }}, 55%, 42%),
                    0 8px 24px rgba(0,0,0,.6),
                    0 0 0 7px rgba(0,0,0,.45);
    }
    .ch-avatar-edit-btn { border-radius: 14px; font-size: 18px; opacity: .85; }

    /* Hide hover-only banner "Change banner" text — keep camera icon */
    .ch-banner-edit-btn {
        opacity: 1; padding: 0; width: 34px; height: 34px;
        justify-content: center; bottom: 10px; right: 10px;
        background: rgba(0,0,0,.55);
    }
    .ch-banner-edit-btn span { display: none; }
    .ch-banner-edit-btn i { font-size: 14px; }

    /* Info column takes full width */
    .ch-info { padding-top: 0; width: 100%; }

    /* Name big and tight */
    .ch-name-row { gap: 8px; margin-bottom: 6px; }
    .ch-name { font-size: 22px; line-height: 1.1; letter-spacing: -.3px; }
    .ch-verified-badge { width: 18px; height: 18px; font-size: 10px; }

    /* Meta pill — denser, horizontally scrolls if it would wrap awkwardly */
    .ch-meta-row {
        display: flex; flex-wrap: nowrap; overflow-x: auto;
        scrollbar-width: none;
        font-size: 12px; padding: 6px 12px;
        margin-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .ch-meta-row::-webkit-scrollbar { display: none; }
    .ch-meta-sep { margin: 0 8px; font-size: 11px; }
    .ch-meta-item { font-size: 12px; }
    .ch-meta-item i { font-size: 10px; }

    /* Bio readable on small screens */
    .ch-bio { font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
    .ch-bio-short { -webkit-line-clamp: 3; }

    /* Horoscope strip = full-width row, action row beneath */
    .ch-horo-strip { padding: 7px 11px; gap: 4px 10px; width: 100%; box-sizing: border-box; }
    .ch-horo-name { font-size: 13px; }
    .ch-horo-emoji { font-size: 20px; }

    /* Owner action row (horoscope-wrap parent flex) wraps on mobile */
    .ch-info > div[style*="display:flex"] { row-gap: 8px; }

    /* Manage/Upload/Preview row: full-width, evenly distributed */
    .ch-manage-wrap, .ch-btn-ghost, .ch-btn-icon { flex: 0 0 auto; }
    .ch-manage-btn, .ch-btn-ghost {
        height: 38px; padding: 0 13px; font-size: 13px; gap: 6px;
    }
    .ch-manage-btn span, .ch-btn-ghost span { display: inline; } /* keep labels readable */
    .ch-btn-icon {
        width: 38px; height: 38px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.14);
        color: var(--text-primary); text-decoration: none;
    }

    /* Social row */
    .ch-social-row { gap: 6px; margin-bottom: 12px; }
    .ch-social-btn { width: 38px; height: 38px; font-size: 14px; }

    /* sticky doesn't work inside .yt-main on mobile — use fixed instead */
    .ch-tabs-wrap {
        position: fixed !important;
        top: 56px;
        left: 0; right: 0;
        z-index: 80;
        padding: 0 12px;
        background: var(--bg-dark);
        border-bottom: 1px solid rgba(255,255,255,.07);
    }
    /* push tab content below the fixed tabs bar (46px height + 1px border) */
    .ch-tabs-spacer { display: block; height: 47px; }
    .ch-tab { padding: 0 14px; font-size: 12px; min-width: 0; }
    .ch-tab i { font-size: 13px; margin-right: 4px; }
    .ch-tab-badge { font-size: 10px; padding: 1px 5px; }
    .ch-tab-content { padding: 14px; }
    .ch-sort-bar { gap: 8px; flex-wrap: wrap; }
    .ch-about-card { padding: 16px; }
    .ch-stat-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .ch-stat-card { padding: 14px 12px; }
    .ch-stat-card-val { font-size: 22px; }
    .ch-wall-layout { grid-template-columns: 1fr; gap: 16px; }
    .ch-vid-search-wrap { max-width: 100%; }

    /* Manage dropdown — make taps comfortable on phones */
    .ch-manage-menu { min-width: 240px; padding: 8px; }
    .ch-manage-item { padding: 12px 14px; font-size: 14px; }
}

@media (max-width: 480px) {
    .ch-banner { height: 110px; }
    .ch-header { padding: 0 12px 16px; }
    .ch-header-inner { margin-top: -36px; }
    .ch-avatar { width: 72px; height: 72px; border-radius: 12px; }
    .ch-name { font-size: 20px; }
    .ch-horo-divider { display: none; }

    /* Stack the owner action row 2-up so labels stay visible */
    .ch-info > div[style*="display:flex"][style*="flex-wrap:wrap"] { gap: 8px; }

    .ch-meta-row { font-size: 11.5px; padding: 5px 11px; }
    .ch-meta-sep { margin: 0 7px; }

    .ch-tab { padding: 0 12px; font-size: 11.5px; }

    .ch-stat-cards { grid-template-columns: 1fr 1fr; }
}
</style>