/* ================================================================
   ByteSide.io — Mobile Shell Apps Polish
   --------------------------------------------------------------
   Etappe 5: Per-App-Mobile-Polish über alle 13 Apps. Lädt NACH
   mobile-shell-effects.css. Scoped unter `body.mobile-os`.

   Strategie: Common-Patterns hier — pro-App-spezifisches in den
   jeweiligen apps/<id>.css mit `@media (max-width: 767px)` (greift
   automatisch im Fullscreen-Mobile-Context, gleicher Viewport).

   Existing App-CSS Mobile-Regeln blieben unverändert — sie werden
   durch mobile-shell.css's höhere Specificity überschrieben wo
   nötig (max-height: 70vh → none etc.).
   ================================================================ */

/* ================================================================
   1. iOS-Zoom-on-Input-Focus-Fix (KRITISCH)
   --------------------------------------------------------------
   iOS Safari zoomt bei Tap auf Input mit font-size < 16px auf
   den Input → unschöner Layout-Sprung. Fix: alle inputs/textareas
   auf 16px minimum. Affects: terminal-shell, mail, visitors,
   bytebreaker (profile-input), suggest-resource.
   ================================================================ */
body.mobile-os .window.mobile-active input[type="text"],
body.mobile-os .window.mobile-active input[type="email"],
body.mobile-os .window.mobile-active input[type="search"],
body.mobile-os .window.mobile-active input[type="url"],
body.mobile-os .window.mobile-active input[type="tel"],
body.mobile-os .window.mobile-active input:not([type]),
body.mobile-os .window.mobile-active textarea,
body.mobile-os .window.mobile-active [contenteditable="true"],
body.mobile-os .window.mobile-active [contenteditable="plaintext-only"] {
    font-size: 16px !important;
}

/* ================================================================
   2. (Removed) WINDOW-BODY safe-area-padding-bottom
   --------------------------------------------------------------
   Removed in v224: --mob-dock-h already includes
   env(safe-area-inset-bottom). Window is positioned bottom:
   var(--mob-dock-h), so its content area ends BEFORE the home-
   indicator region. Adding extra padding-bottom here was
   double-counting → ByteBreaker canvas lost ~34px height on
   notch-iPhones in bb-fullscreen mode. Sticky-bottom-buttons
   (mail submit, visitors send) get their padding via per-app
   rules below.
   ================================================================ */

/* ================================================================
   3. Reader (Blog) — Reading Comfort
   --------------------------------------------------------------
   Etappe 5 Plan: font-size 16px (lesbar auf Mobile), line-height
   1.6, code-blocks horizontal-scroll. reader.css 600px-breakpoint
   stacked schon das main/aside-layout. Hier ergänzend.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="reader"] .blog-post__content,
body.mobile-os .window.mobile-active[data-window="reader"] .blog-post__body {
    font-size: 16px;
    line-height: 1.65;
}

body.mobile-os .window.mobile-active[data-window="reader"] .blog-post__content pre,
body.mobile-os .window.mobile-active[data-window="reader"] .blog-post__body pre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Prevent code from wrapping awkwardly — let it scroll horizontally */
    white-space: pre;
    max-width: 100%;
}

body.mobile-os .window.mobile-active[data-window="reader"] .blog-post__content img,
body.mobile-os .window.mobile-active[data-window="reader"] .blog-post__body img {
    max-width: 100%;
    height: auto;
}

/* ================================================================
   4. Terminal Hero — Mobile Touch-Targets
   --------------------------------------------------------------
   terminal.css hat schon Mobile-Layouts (2× 767px-blocks). Hier:
   shell-input touch-target, scroll-snap auf bottom für output.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="terminal"] .hero {
    /* Override potential min-heights from terminal.css for fullscreen */
    min-height: 100%;
}
body.mobile-os .window.mobile-active[data-window="terminal"] .hero__content {
    padding: 16px;
}

/* ================================================================
   5. Mail / Visitors / Suggest — Form-Mobile
   --------------------------------------------------------------
   Forms mit Submit-Button: sticky bottom, klar erkennbar. Buttons
   brauchen 44px+ touch-target.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="mail"] button[type="submit"],
body.mobile-os .window.mobile-active[data-window="visitors"] button[type="submit"] {
    min-height: 48px;
    width: 100%;
    margin-top: 12px;
}

/* ================================================================
   6. Finder — Card-Grid forced 1-Spalte
   --------------------------------------------------------------
   finder.css hat 1 media-query. Defensiv 1-spaltig forcieren auf
   mobile-active für Touch-Friendly-Tiles.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="finder"] .finder__grid,
body.mobile-os .window.mobile-active[data-window="finder"] .finder__projects {
    grid-template-columns: 1fr !important;
}

/* ================================================================
   7. Resources — Card-Grid + Search-Layout
   --------------------------------------------------------------
   resources.css hat 0 media-queries! Mobile-Polish komplett hier:
   1-Spalte cards, search-input prominently, kategorie-chips
   horizontal-scroll.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="resources"] .resources__grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
}
body.mobile-os .window.mobile-active[data-window="resources"] .resources__categories,
body.mobile-os .window.mobile-active[data-window="resources"] .resources__filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
}
body.mobile-os .window.mobile-active[data-window="resources"] .resources__categories::-webkit-scrollbar,
body.mobile-os .window.mobile-active[data-window="resources"] .resources__filters::-webkit-scrollbar {
    display: none;
}

/* ================================================================
   8. ByteBreaker — Canvas-Stage Fullscreen + Game-Mode
   --------------------------------------------------------------
   ByteBreaker-Engine hat ResizeObserver auf winBody — reagiert
   automatisch auf Container-Größenänderung. BEM-Klassen
   (.bytebreaker__*) statt .bb-*.

   Game-Fullscreen-Mode: body.bb-fullscreen wird gesetzt von
   mobile-shell.js auf byte:bytebreaker-started Event (gefired vom
   MutationObserver in bytebreaker.js wenn Window non-minimized).
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="bytebreaker"] .bytebreaker {
    width: 100%;
    height: 100%;
}
body.mobile-os .window.mobile-active[data-window="bytebreaker"] .bytebreaker__canvas {
    width: 100%;
    height: 100%;
    touch-action: none; /* prevent iOS double-tap-zoom and rubber-band */
}

/* Game-Fullscreen-Mode: hide statusbar+dock, expand window to
   notch-safe full viewport. Titlebar bleibt VISIBLE damit Mobile-
   Back-Button erreichbar bleibt (User kann immer raus). */
body.mobile-os.bb-fullscreen .mobile-statusbar,
body.mobile-os.bb-fullscreen .mobile-dock {
    display: none !important;
}
body.mobile-os.bb-fullscreen .window.mobile-active {
    top: env(safe-area-inset-top, 0) !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
}

/* ByteBreaker Menus (Start, Pause, Game-Over, Victory, Daily,
   First-Run): touch-targets 44px+ auf Mobile. Existing
   bytebreaker.css 767px-Block handelt die meiste Sizing. */
body.mobile-os .window.mobile-active[data-window="bytebreaker"] .bytebreaker__btn {
    min-height: 44px;
    padding: 10px 18px;
}
body.mobile-os .window.mobile-active[data-window="bytebreaker"] .bytebreaker__menu {
    padding: 16px;
}

/* ByteBreaker Initials-Input — full-width für besseren Touch-Tap.
   Plus iOS-Zoom-Fix greift via globaler Rule. */
body.mobile-os .window.mobile-active[data-window="bytebreaker"] .bytebreaker__initials {
    width: 100%;
    box-sizing: border-box;
}

/* HUD: Tap-Targets sicherstellen, plus Stack-Layout falls eng */
body.mobile-os .window.mobile-active[data-window="bytebreaker"] .bytebreaker__hud {
    padding: 8px 10px;
    font-size: 12px;
}

/* ================================================================
   9. System Monitor — Panels stacked
   --------------------------------------------------------------
   System-Monitor hat 3 Panels (Processes/System/Storage). Bei
   schmalem Viewport sollten sie stack-en. system-monitor.css hat
   1 media-query — defensiv ergänzen.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="system-monitor"] .sysmon__panels,
body.mobile-os .window.mobile-active[data-window="system-monitor"] .sysmon__grid {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
}

/* ================================================================
   10. Records — Album-Hub Mobile
   --------------------------------------------------------------
   Track-list 1-spalte, cover kleiner.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="records"] .records__layout {
    flex-direction: column;
    gap: 16px;
}
body.mobile-os .window.mobile-active[data-window="records"] .records__cover {
    max-width: 220px;
    margin: 0 auto;
}

/* ================================================================
   11. Settings — Sidebar/Tabs
   --------------------------------------------------------------
   settings.css hat schon Mobile-Anpassung. Hier: defensive
   force für mobile-active.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="settings"] .settings__layout {
    flex-direction: column;
    gap: 12px;
}

/* ================================================================
   12. Legal — DE/EN-Switch sichtbar
   --------------------------------------------------------------
   legal.css hat 3 media-queries inkl 640px. Sollte alles
   funktionieren. Defensive: language-switch positioning.
   ================================================================ */
body.mobile-os .window.mobile-active[data-window="legal"] .legal__lang-switch {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mob-bg, #06171E);
    padding: 8px 0;
}

/* ================================================================
   13. About / Records / etc. — Generic Touch-Padding
   --------------------------------------------------------------
   Alle Apps kriegen mindestens ausreichend Touch-Padding für
   internal Buttons (44px+).
   ================================================================ */
body.mobile-os .window.mobile-active button,
body.mobile-os .window.mobile-active a.btn,
body.mobile-os .window.mobile-active [role="button"] {
    min-height: 36px;
}

/* ================================================================
   Reduced motion — keine Animation-Overrides nötig (existing
   App-CSS handelt das schon)
   ================================================================ */