/* ================================================================
   ByteSide.io — Mobile Shell (voidcore.os mobile)
   --------------------------------------------------------------
   Mobile-OS-Metapher für Phones (≤767px). Aktiviert via
   `body.mobile-os`-Klasse (gesetzt von mobile-shell.js bei Init,
   wenn isMobile()).

   Architektur:
   - Body-Class-Guard: alle Regeln scoped unter `.mobile-os`
   - Window-Reuse: bestehende .window Elements werden wiederverwendet,
     CSS macht aktive App fullscreen
   - Existing Chrome (Menubar, Dock-Wrap, Mobile-Banner) hidden
   - Eigenes Chrome: #mobile-statusbar, #mobile-home, #mobile-dock

   Cascade-Reihenfolge: NACH responsive.css. Der Body-Class-Guard
   überstimmt die degraded-stacked-cards-Regeln dort.
   ================================================================ */

/* ----- Layout-Tokens (lokal, nicht global) -----
   Safe-Area-Insets in Bar-Höhe inkludiert: alle Konsumenten
   (Desktop, Window, Home, Boot-Overlay) positionieren via diese
   Vars und kriegen Notch-/Home-Indicator-Awareness automatisch.
   Statusbar+Dock-Elements nutzen padding-top/-bottom für die
   Inner-Padding der Safe-Area. */
.mobile-os {
    --mob-statusbar-h: calc(32px + env(safe-area-inset-top, 0px));
    --mob-dock-h: calc(60px + env(safe-area-inset-bottom, 0px));
    --mob-bg: #06171E;
    --mob-bg-elev: rgba(255, 255, 255, 0.04);
    --mob-border: rgba(255, 255, 255, 0.08);
    --mob-text: #d8e3ec;
    --mob-text-dim: #7a8b96;
    --mob-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

/* ----- Body lock + scroll ----- */
body.mobile-os {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    background: var(--mob-bg);
    color: var(--mob-text);
    /* Pull-to-refresh blocken (iOS Safari, Chrome Android) */
    overscroll-behavior-y: contain;
}

/* All scroll-containers contain their own bounce — no chaining to body */
body.mobile-os .window__body,
body.mobile-os .mobile-home {
    overscroll-behavior: contain;
}

/* ----- Hide existing desktop chrome ----- */
body.mobile-os .menubar,
body.mobile-os .dock-wrap,
body.mobile-os .mobile-banner,
body.mobile-os .desktop-icons,
body.mobile-os .sticky-notes-host,
body.mobile-os .wallpaper__clock {
    display: none !important;
}

/* Wallpaper bleibt als Hintergrund, aber ohne Interaktion */
body.mobile-os .wallpaper {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ----- Desktop-Container wird zum Window-Host ----- */
body.mobile-os .desktop {
    position: fixed;
    inset: var(--mob-statusbar-h) 0 var(--mob-dock-h) 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: block;
    background: transparent;
}

/* ----- Window Layout & Slide-Transitions -----
   Etappe 2: Windows sind alle gemountet, off-screen via translateX(100%).
   Active app slides in. Visibility-trick verhindert dass off-screen-
   Apps interagierbar sind. Bei reduced-motion: nur opacity-fade. */
body.mobile-os .window {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: var(--mob-statusbar-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mob-dock-h) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s linear 320ms;
}

body.mobile-os .window.mobile-active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    z-index: 100;
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
    body.mobile-os .window {
        transform: none;
        opacity: 0;
        transition: opacity 150ms ease, visibility 0s linear 150ms;
    }
    body.mobile-os .window.mobile-active {
        opacity: 1;
        transition: opacity 150ms ease, visibility 0s linear 0s;
    }
}

/* Window-Body braucht volles Flex auf Mobile */
body.mobile-os .window.mobile-active .window__body {
    flex: 1;
    max-height: none;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Resizer: irrelevant auf Mobile */
body.mobile-os .window .resizer {
    display: none !important;
}

/* Titlebar wird zum App-Header */
body.mobile-os .window.mobile-active .titlebar {
    position: relative;
    flex-shrink: 0;
    cursor: default;
    padding: 10px 14px;
    background: var(--mob-bg);
    border-bottom: 1px solid var(--mob-border);
}

/* Traffic-Lights ausblenden — ersetzt durch Back-Button */
body.mobile-os .window.mobile-active .titlebar .traffic {
    display: none !important;
}

/* Titlebar-Title: zentrieren, kein Drag-Cursor */
body.mobile-os .window.mobile-active .titlebar__title {
    text-align: center;
    font-family: var(--mob-mono);
    font-size: 14px;
    color: var(--mob-text);
}

/* ================================================================
   STATUSBAR (top, fixed)
   ================================================================ */
.mobile-statusbar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mob-statusbar-h); /* incl. safe-area-inset-top */
    z-index: 1500;
    background: var(--mob-bg);
    border-bottom: 1px solid var(--mob-border);
    font-family: var(--mob-mono);
    font-size: 12px;
    color: var(--mob-text-dim);
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0); /* push content below notch */
    align-items: center;
    justify-content: space-between;
}

body.mobile-os .mobile-statusbar {
    display: flex;
}

.mobile-statusbar__left,
.mobile-statusbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-statusbar__clock {
    color: var(--mob-text);
    font-variant-numeric: tabular-nums;
}

.mobile-statusbar__app-name {
    color: var(--mob-text-dim);
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 40vw;
}

.mobile-statusbar__cursor {
    color: #ff9c4f;
    font-weight: 700;
    animation: mob-cursor-blink 1s steps(2) infinite;
}

/* Global cursor-blink keyframe — used by statusbar, mini-boot,
   login-prompt-lockscreen. Single source of truth. */
@keyframes mob-cursor-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-statusbar__cursor {
        animation: none;
        opacity: 1;
    }
}

/* ================================================================
   HOME SCREEN (Icon-Grid)
   ================================================================ */
.mobile-home {
    display: none;
    position: fixed;
    top: var(--mob-statusbar-h); /* var includes safe-area */
    left: 0;
    right: 0;
    bottom: var(--mob-dock-h);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 24px 16px 32px;
    z-index: 50;
}

body.mobile-os .mobile-home {
    display: block;
}

/* Hide home when an app is active */
body.mobile-os.app-active .mobile-home {
    display: none;
}

.mobile-home__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 12px;
    max-width: 540px;
    margin: 0 auto;
}

@media (max-width: 360px) {
    .mobile-home__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 10px;
    }
}

.mobile-home__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--mob-text);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.mobile-home__icon-tile {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mob-bg-elev);
    border: 1px solid var(--mob-border);
    border-radius: 14px;
    font-size: 26px;
    color: var(--app-glow-color, #ff9c4f);
    transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 120ms ease;
}

.mobile-home__icon:active .mobile-home__icon-tile {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.08);
}

/* Brand-Color-Mapping (CSS-Variables — Glow in Etappe 4) */
.mobile-home__icon[data-color="red"]    { --app-glow-color: #ff5f57; }
.mobile-home__icon[data-color="teal"]   { --app-glow-color: #2ec4b6; }
.mobile-home__icon[data-color="blue"]   { --app-glow-color: #4d9de0; }
.mobile-home__icon[data-color="purple"] { --app-glow-color: #b388eb; }
.mobile-home__icon[data-color="amber"]  { --app-glow-color: #ffb454; }
.mobile-home__icon[data-color="green"]  { --app-glow-color: #95c96b; }
.mobile-home__icon[data-color="orange"] { --app-glow-color: #ff9c4f; }

.mobile-home__icon-label {
    font-size: 11px;
    font-family: var(--mob-mono);
    color: var(--mob-text-dim);
    text-align: center;
    line-height: 1.2;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* DDG-Pflicht-Footer: Imprint + Privacy reachable from home (1-tap) */
.mobile-home__footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--mob-border);
    text-align: center;
    font-family: var(--mob-mono);
    font-size: 11px;
    color: var(--mob-text-dim);
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mobile-home__footer a,
.mobile-home__footer button {
    color: var(--mob-text-dim);
    background: none;
    border: none;
    text-decoration: none;
    padding: 6px 8px;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mobile-home__footer a:active,
.mobile-home__footer button:active {
    color: var(--mob-text);
}

/* ================================================================
   BACK-BUTTON (DOM-injected by mobile-shell.js)
   ================================================================ */
.mobile-back {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--mob-text);
    font-family: var(--mob-mono);
    font-size: 18px;
    padding: 6px 10px;
    cursor: pointer;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

.mobile-back:active {
    opacity: 0.6;
}

/* ================================================================
   BOTTOM DOCK
   ================================================================ */
.mobile-dock {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mob-dock-h); /* incl. safe-area-inset-bottom */
    z-index: 1500;
    background: var(--mob-bg);
    border-top: 1px solid var(--mob-border);
    padding: 0 12px;
    padding-bottom: env(safe-area-inset-bottom, 0); /* push content above home-indicator */
    align-items: center;
    justify-content: space-around;
    gap: 4px;
}

body.mobile-os .mobile-dock {
    display: flex;
}

.mobile-dock__btn {
    flex: 1;
    max-width: 80px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--mob-text-dim);
    font-size: 22px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 120ms ease, background-color 120ms ease;
}

.mobile-dock__btn:active {
    background: rgba(255, 255, 255, 0.06);
    color: var(--mob-text);
}

/* ================================================================
   APP-Specific Overrides für Mobile-Active-Mode
   ================================================================ */
/* Reader: Sidebar→Tabs auf Mobile (existiert teilweise — wird in
   Etappe 5 detailliert gepflegt). Hier nur sicherstellen dass
   der Body wirklich scrollt. */
body.mobile-os .window.mobile-active[data-window="reader"] .window__body {
    overflow-y: auto;
}

/* Hero-Terminal: Body soll volle Höhe nehmen */
body.mobile-os .window.mobile-active[data-window="terminal"] .window__body {
    height: 100%;
}

/* ================================================================
   Virtual Keyboard (iOS Safari + Chrome Android)
   --------------------------------------------------------------
   visualViewport-API in mobile-shell.js togglet `.keyboard-open` auf
   Body wenn Keyboard sichtbar. Statusbar + Dock weg → mehr Platz für
   Input-Field. Custom-Back-Button im App-Header bleibt sichtbar.
   ================================================================ */
body.mobile-os.keyboard-open .mobile-statusbar,
body.mobile-os.keyboard-open .mobile-dock {
    display: none;
}
body.mobile-os.keyboard-open .window.mobile-active {
    top: 0 !important;
    bottom: 0 !important;
}

/* ================================================================
   Reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .mobile-home__icon-tile,
    .mobile-dock__btn {
        transition: none !important;
    }
}