/**
 * Modul: PWA Native Feel
 * Zweck: Natives Touch- und Scrollverhalten, Safe Areas, Touch-Targets
 * Abhängigkeiten: tokens.css, layout.css
 */

/* ── Kein Rubber-Banding, kein Body-Scroll ──
 * overflow: hidden NUR auf body - NICHT auf html setzen.
 * iOS Safari Bug: overflow:hidden auf <html> clippt position:fixed-Elemente,
 * was body::after (Safe-Area-Fill) unsichtbar macht.
 * overscroll-behavior: none auf html+body deaktiviert Pull-to-Refresh/Rubber-Banding. */
html {
  overscroll-behavior: none;
}

body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Kein Tap-Highlight auf allen Elementen (Android Chrome) ──
 * reset.css setzt es nur auf html; hier global für alle Elemente */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Safe Area Insets (Notch, Dynamic Island, Gesture Bar) ──
 * Nur horizontale Safe Areas auf body. Vertikale Safe Areas werden über
 * .app-shell (padding-top im Standalone-Modus) und body::after (unten) gehandhabt.
 * KEIN body padding-top/bottom - das würde .app-shell (height: 100dvh)
 * um den Safe-Area-Betrag aus dem Viewport schieben und Scroll-Bleed erzeugen. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Touch-Targets werden über tokens.css (--target-sm/md/lg) und
 * komponentenspezifische Styles gehandhabt - siehe Redesign Phase E.
 * Keine globale min-size-Regel hier, da sie mit dem bestehenden
 * Touch-Target-System kollidiert (::before-Expansion auf kleinen Elementen). */

/* ── Smooth Momentum-Scrolling in scrollbaren Containern ── */
.scroll-container,
.nav-bottom__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ── Kein Text-Selection in UI-Elementen (nur in Content-Bereichen) ── */
/* Geteilte Kopf-Klassen statt einer Vier-Modul-Namensliste: sonst haben nur
 * vier der dreizehn Modul-Köpfe kein Text-Select (Issue #577). */
nav,
.nav-bottom,
.nav-sidebar,
.page-toolbar,
.sub-tabs-bar,
.modal-panel__header {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Standalone-Modus: Status-Bar-Bereich berücksichtigen ── */
@media (display-mode: standalone) {
  /* padding-top auf .app-shell (nicht body): So bleibt app-shell exakt 100dvh
   * hoch und überläuft den Viewport nicht - body-padding hätte .app-shell
   * nach unten verschoben und Scroll-Bleed verursacht. */
  .app-shell {
    padding-top: env(safe-area-inset-top);
  }

  /* Kein Scroll-Bleed - Content bleibt in seinem Container */
  .app-content {
    overscroll-behavior-y: contain;
  }

  /* iOS PWA: Home-Indicator-Bereich unter der Nav füllen.
   * position:fixed ist erforderlich, damit body::after auch dann sichtbar ist,
   * wenn der App-Shell-Inhalt den Home-Indicator-Bereich nicht erreicht.
   * Funktioniert nur wenn html KEIN overflow:hidden hat (iOS Safari Bug:
   * overflow:hidden auf <html> clippt position:fixed-Elemente). */
  body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom, 0px);
    background-color: color-mix(in srgb, var(--color-surface) 85%, transparent);
    /* Derselbe Blur wie die Tab-Bar darueber (glass.css): der Streifen ist
     * deren Fortsetzung in die Safe-Area, nicht eine eigene Flaeche. */
    backdrop-filter: var(--blur-md) saturate(180%);
    -webkit-backdrop-filter: var(--blur-md) saturate(180%);
    z-index: calc(var(--z-nav) - 1);
  }
}