/**
 * ShadowSeek – Responsive & Touch-UX für alle CNAME-Surfaces:
 * shadowseek.de · kooperation · tiktok · app
 */

:root {
    --ss-surface-touch: 48px;
    --ss-surface-touch-compact: 44px;
    --ss-surface-nav-z: 240;
    --ss-surface-cta-gradient: linear-gradient(110deg, #00ff9f 0%, #00e5ff 42%, #c054ff 78%, #ff2bd6 100%);
    --ss-surface-cta-shadow: 0 10px 28px rgba(0, 229, 255, 0.28), 0 0 22px rgba(192, 84, 255, 0.22);
    --ss-surface-pad-x: clamp(12px, 2.4vw, 28px);
    --ss-surface-pad-bottom-nav: max(88px, calc(72px + env(safe-area-inset-bottom, 0px)));
}

/* === Touch-Ziele (Mobile & Tablet) === */
@media (max-width: 980px) {
    :root {
        --ss-viewport-touch: var(--ss-surface-touch);
    }

    :is(
        body.ss-shell-body,
        body.coop-shell-body,
        body.tiktok-hub-body,
        body.app-download-body,
        body.ms-preview-lock-body
    ) :is(
        a,
        button,
        [role="button"],
        input[type="submit"],
        input[type="button"],
        select,
        .su-link,
        .su-bottom-nav__item,
        .su-btn-auth,
        .su-top-action,
        .su-userline,
        .coop-shell-nav a,
        .tiktok-hub-account-nav__btn,
        .tiktok-hub-subnav__link,
        .tiktok-hub-resolve-form__row button,
        .app-download-top__nav a,
        .ms-preview-lock__thumb
    ) {
        min-height: var(--ss-surface-touch);
    }

    :is(
        .su-btn-plus,
        .su-wallet.ss-wallet-chip
    ) {
        min-height: var(--ss-surface-touch-compact);
        min-width: var(--ss-surface-touch-compact);
    }
}

/* === Hauptseite: Bottom-Nav immer über Inhalt === */
@media (max-width: 980px) {
    body.ss-shell-body .su-bottom-nav,
    body.ss-shell-body .ss-mobile-bottom-nav {
        z-index: var(--ss-surface-nav-z);
        display: grid;
        visibility: visible;
        pointer-events: auto;
    }

    body.ss-shell-body .su-bottom-nav__item {
        min-height: var(--ss-surface-touch);
        padding-inline: 10px;
        font-size: 0.72rem;
    }

    body.ss-shell-body .su-bottom-nav__item--center,
    body.ss-shell-body .su-bottom-nav__plus {
        min-height: var(--ss-surface-touch);
        box-shadow: var(--ss-surface-cta-shadow);
    }

    body.ss-shell-body .su-sidebar {
        position: sticky;
        top: 0;
        z-index: 120;
    }

    body.ss-shell-body .su-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    body.ss-shell-body .su-nav::-webkit-scrollbar {
        display: none;
    }

    body.ss-shell-body .su-link {
        scroll-snap-align: start;
        min-width: max(7.5rem, 28vw);
    }

    body.ss-shell-body .su-content {
        padding-bottom: var(--ss-surface-pad-bottom-nav);
    }

    body.ss-shell-body .su-top-action {
        min-height: var(--ss-surface-touch);
    }

    body.ss-shell-body .su-userline {
        min-height: var(--ss-surface-touch);
    }
}

/* === Call-to-Action: einheitlich auffällig === */
:is(
    .su-guest-hint__cta,
    .su-btn-auth--register,
    .neon-btn--primary,
    .app-download-btn--android,
    .app-download-btn--primary,
    .ms-preview-lock__cta--primary,
    .cooperation-btn,
    .tiktok-hub-resolve-form__row button[type="submit"],
    .tiktok-hub-auth-actions__btn--primary
) {
    background: var(--ss-surface-cta-gradient) !important;
    color: #050508 !important;
    font-weight: 900 !important;
    border: 0 !important;
    box-shadow: var(--ss-surface-cta-shadow);
    text-shadow: none;
}

:is(
    .su-guest-hint__cta,
    .su-btn-auth,
    .neon-btn,
    .app-download-btn,
    .ms-preview-lock__cta,
    .cooperation-btn,
    .cooperation-btn--ghost,
    .tiktok-hub-auth-actions__btn
):focus-visible {
    outline: 2px solid #00e5ff;
    outline-offset: 3px;
}

@media (max-width: 980px) {
    :is(
        .su-guest-hint__cta,
        .su-btn-auth--register,
        .neon-btn,
        .app-download-btn--android,
        .ms-preview-lock__cta
    ) {
        min-height: var(--ss-surface-touch);
        padding-inline: clamp(16px, 4vw, 24px);
        font-size: clamp(0.92rem, 2.8vw, 1rem);
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    body.ss-shell-body .su-guest-hint__cta {
        flex: 1 1 100%;
    }
}

/* === Kooperation (kooperation.shadowseek.de) === */
@media (max-width: 980px) {
    body.coop-shell-body .coop-shell-sidebar {
        position: sticky;
        top: 0;
        z-index: 130;
    }

    body.coop-shell-body .coop-shell-nav a {
        min-height: var(--ss-surface-touch);
        padding-inline: 14px;
        font-size: 0.86rem;
    }

    body.coop-shell-body .coop-shell-content {
        padding-bottom: var(--ss-surface-pad-bottom-nav);
    }

    body.coop-shell-body .coop-shell-topbar__actions :is(a, button),
    body.coop-shell-body .cooperation-btn {
        min-height: var(--ss-surface-touch);
        font-weight: 800;
    }

    body.coop-shell-body .cooperation-btn--ghost {
        min-height: var(--ss-surface-touch);
    }
}

/* === TikTok Hub (tiktok.shadowseek.de) === */
@media (max-width: 920px) {
    body.tiktok-hub-body .tiktok-hub-sidebar {
        position: sticky;
        top: 0;
        z-index: 130;
        max-height: min(48vh, 420px);
    }

    body.tiktok-hub-body .tiktok-hub-account-nav,
    body.tiktok-hub-body .tiktok-hub-subnav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    body.tiktok-hub-body .tiktok-hub-account-nav::-webkit-scrollbar,
    body.tiktok-hub-body .tiktok-hub-subnav::-webkit-scrollbar {
        display: none;
    }

    body.tiktok-hub-body .tiktok-hub-account-nav__btn,
    body.tiktok-hub-body .tiktok-hub-subnav__link {
        flex: 0 0 auto;
        min-height: var(--ss-surface-touch);
        scroll-snap-align: start;
        padding-inline: 14px;
    }

    body.tiktok-hub-body .tiktok-hub-resolve-form__row button {
        min-height: var(--ss-surface-touch);
        font-weight: 800;
    }

    body.tiktok-hub-body .tiktok-hub-main {
        padding-bottom: var(--ss-surface-pad-bottom-nav);
    }
}

/* === App-Download (app.shadowseek.de) === */
@media (max-width: 640px) {
    body.app-download-body .app-download-top {
        position: sticky;
        top: 0;
        z-index: 120;
    }

    body.app-download-body .app-download-top__nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 8px;
    }

    body.app-download-body .app-download-top__nav::-webkit-scrollbar {
        display: none;
    }

    body.app-download-body .app-download-top__nav a {
        flex: 0 0 auto;
        min-height: var(--ss-surface-touch);
        padding-inline: 14px;
        white-space: nowrap;
    }

    body.app-download-body .app-download-btn {
        min-height: var(--ss-surface-touch);
        font-size: 1rem;
    }

    body.app-download-body .app-download-hero__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* === Vorschau-Sperre (shadowseek.de) === */
@media (max-width: 620px) {
    body.ms-preview-lock-body .ms-preview-lock__actions {
        position: sticky;
        bottom: max(8px, env(safe-area-inset-bottom));
        z-index: 50;
        padding: 10px 0 4px;
        background: linear-gradient(180deg, transparent, rgba(5, 5, 8, 0.92) 28%);
    }

    body.ms-preview-lock-body .ms-preview-lock__cta {
        min-height: var(--ss-surface-touch);
        font-size: 1rem;
    }

    body.ms-preview-lock-body .ms-preview-lock__portal-grid a {
        min-height: var(--ss-surface-touch);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* === Desktop: Navigation lesbar, CTAs klar === */
@media (min-width: 981px) {
    body.ss-shell-body .su-link {
        min-height: 42px;
    }

    body.ss-shell-body .su-guest-hint__cta {
        min-height: 44px;
        padding-inline: 18px;
    }
}

@media (min-width: 1280px) {
    body.ss-shell-body .su-content {
        padding-inline: clamp(16px, 1.6vw, 32px);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.su-bottom-nav, .coop-shell-nav, .tiktok-hub-subnav) {
        scroll-behavior: auto;
    }
}