/**
 * RMediaTech Mobile Native Experience
 * Strictly applied to phone-sized viewports (max-width: 767.98px)
 * Purpose: Fix control warping, improve typography, and respect device safe areas.
 */

@media (max-width: 767.98px) {

    /* --- 1. Fix Warped Controls (Studio & RTC) --- */

    /* Prevent flex containers from squashing buttons */
    .rtc-toolbar .btn,
    .studio-controls .btn,
    #studio-toolbar .btn,
    #nexus-toolbar .btn {
        flex-shrink: 0;
        /* Critical: Never let the button shrink below its content/min-width */
        min-width: var(--native-touch-target);
        min-height: var(--native-touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        /* Keeps circular/square buttons perfectly shaped */
    }

    /* Ensure icons inside buttons stay centered and don't shift */
    .rtc-toolbar .btn i,
    .studio-controls .btn i,
    #studio-toolbar .btn i,
    #nexus-toolbar .btn i {
        font-size: 1.25rem;
        /* Larger icons for touch readability */
        line-height: 1;
    }

    /* --- 2. Native Spacing & Safe Areas --- */

    body {
        /* Add padding to the bottom so content isn't covered by the home bar */
        padding-bottom: calc(var(--safe-bottom) + 1rem);
        /* Prevent horizontal scroll bounce on some mobile browsers */
        overscroll-behavior-x: none;
    }

    /* Fix fixed-position elements (like bottom navs or floating buttons) */
    .fixed-bottom,
    #global-feedback-btn {
        bottom: calc(var(--safe-bottom) + 1rem) !important;
    }

    /* --- 3. Landing Page Typography "Fix Up" --- */

    /* Make headings punchy but not overflowing */
    h1,
    .h1 {
        font-size: 2.25rem;
        /* ~36px */
        line-height: 1.15;
        letter-spacing: -0.02em;
        word-wrap: break-word;
        /* Prevent long words from breaking layout */
    }

    /* Make body text readable (like a native news app) */
    p {
        font-size: 1.05rem;
        /* Slightly larger than default 16px */
        line-height: 1.6;
        /* More breathing room between lines */
    }

    /* --- 4. Home View App Launcher --- */

    /* Transform the RTC links list into a grid of touch-friendly buttons */
    #rtc-home-nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 0;
    }

    #rtc-home-nav li {
        display: block;
        width: 100%;
    }

    #rtc-home-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        /* Big touch target */
        background-color: var(--rmt-bg-surface-2);
        border-radius: var(--rmt-radius-md);
        font-weight: 600;
        text-decoration: none;
        color: var(--rmt-text-primary);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: transform 0.1s;
    }

    #rtc-home-nav a:active {
        transform: scale(0.98);
        background-color: var(--rmt-bg-surface);
    }

    /* Make the card container invisible on mobile for a cleaner look */
    .app-launcher-card {
        background: transparent !important;
        box-shadow: none !important;
    }

    .app-launcher-card .card-body {
        padding: 0;
    }
}