/* ============================================================
   Mobile-frame wrapper
   Renders the whole app inside a centered "large mobile" device
   frame (like a phone emulator), so there is no desktop view.
   Loaded AFTER main.css so these rules win.
   ============================================================ */

:root {
    --device-width: 430px;   /* large phone (≈ iPhone Pro Max / Pixel Pro) */
    --device-max-height: 932px;
    --device-pad: 16px;
    --device-radius: 28px;
}

/* The page background becomes the neutral "desk" the device sits on. */
html {
    background: #0b0b0d;
}

body.app-body,
body.auth-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;        /* dynamic vh: excludes Chrome's URL bar */
    background: #0b0b0d;       /* flat backdrop, drop the app gradient here */
    background-image: none;
    display: flex;
    justify-content: center;   /* horizontal centering */
    align-items: center;       /* vertical centering in the browser window */
    padding: var(--device-pad);
    box-sizing: border-box;
}

/* The device itself. transform:* makes this the containing block for any
   position:fixed descendants (e.g. .tabbar), so they pin to the frame. */
.device-frame {
    position: relative;
    transform: translateZ(0);
    width: 100%;
    max-width: var(--device-width);
    height: calc(100vh - (2 * var(--device-pad)));
    height: calc(100dvh - (2 * var(--device-pad)));  /* track visible viewport */
    max-height: var(--device-max-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* clip content to the rounded corners */
    border-radius: var(--device-radius);
    /* re-apply the app surface look that used to live on .app-body */
    background-color: var(--color-bg-primary, #0a0a0a);
    background-image:
        linear-gradient(135deg, rgba(212, 160, 23, 0.03) 0%, transparent 60%),
        linear-gradient(225deg, rgba(232, 120, 32, 0.03) 0%, transparent 60%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 24px 70px rgba(0, 0, 0, 0.65);
}

/* App layout: nav stays on top, content scrolls, tabbar pinned to frame bottom. */
.device-frame--app .app-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* clear the fixed tab bar + the device safe area (home indicator) */
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* The tab bar is position:fixed; contained by the frame it pins to the
   frame's bottom edge rather than the viewport. */
.device-frame--app .tabbar {
    left: 0;
    right: 0;
    bottom: 0;
    /* keep tab contents above the device home indicator / gesture bar */
    padding-bottom: env(safe-area-inset-bottom);
}

/* Auth layout has no fixed children, so the whole frame may scroll and
   the card is vertically centered. */
.device-frame--auth {
    justify-content: center;
    overflow-y: auto;
}

/* On a real phone the frame just fills the screen (corners barely visible),
   so it reads as a normal full-screen app. */
@media (max-width: 460px) {
    body.app-body,
    body.auth-body {
        padding: 0;
    }
    .device-frame {
        height: 100vh;
        height: 100dvh;        /* fill only the visible area, above the URL bar */
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }
}