/**
 * App Shell Detection Styles
 *
 * CSS rules for PWA display-mode detection.
 * Provides classes and media queries to differentiate
 * standalone (installed) vs browser experience.
 *
 * Vendor: 360group.ai
 * Product: ai360agency-pwa
 * License: Commercial
 */

/* ── Standalone-only visibility ─────────────────────────────── */

.ai360-show-standalone {
    display: none !important;
}

.ai360-pwa-standalone .ai360-show-standalone {
    display: block !important;
}

/* ── Browser-only visibility ────────────────────────────────── */

.ai360-show-browser {
    display: block !important;
}

.ai360-pwa-standalone .ai360-show-browser {
    display: none !important;
}

/* ── Inline variants ────────────────────────────────────────── */

.ai360-show-standalone-inline {
    display: none !important;
}

.ai360-pwa-standalone .ai360-show-standalone-inline {
    display: inline !important;
}

.ai360-show-browser-inline {
    display: inline !important;
}

.ai360-pwa-standalone .ai360-show-browser-inline {
    display: none !important;
}

/* ── Flex variants ──────────────────────────────────────────── */

.ai360-show-standalone-flex {
    display: none !important;
}

.ai360-pwa-standalone .ai360-show-standalone-flex {
    display: flex !important;
}

.ai360-show-browser-flex {
    display: flex !important;
}

.ai360-pwa-standalone .ai360-show-browser-flex {
    display: none !important;
}

/* ── Media query fallback (works even before JS runs) ───────── */

@media (display-mode: standalone) {
    .ai360-show-standalone {
        display: block !important;
    }

    .ai360-show-browser {
        display: none !important;
    }

    .ai360-show-standalone-inline {
        display: inline !important;
    }

    .ai360-show-browser-inline {
        display: none !important;
    }

    .ai360-show-standalone-flex {
        display: flex !important;
    }

    .ai360-show-browser-flex {
        display: none !important;
    }
}