/* ============================================================
   SnowRabbit — native.css
   iOS-/WKWebView-Politur (Capacitor). Lädt NACH app.css.
   Nur additive Regeln: kein Kampf gegen app.css, nur Ergänzung.

   Einbinden (nach app.css):
     <link rel="stylesheet" href="native.css">
   ============================================================ */

/* ---------- Basis: Dynamic Type & Overscroll ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Rubber-Band-Fläche = Marken-Nacht statt Weiss */
  background: var(--night, #241548);
  overscroll-behavior-y: none;
}
body {
  overscroll-behavior-y: none;
  /* Kein Double-Tap-Zoom-Delay, Pan bleibt erlaubt */
  touch-action: manipulation;
}

/* ---------- Tap-Highlight & Long-Press-Callout ---------- */
* { -webkit-tap-highlight-color: transparent; }

a, button, label, summary,
.btn, .btn-ghost, .chip, .badge, .sticker,
.tabbar, .topbar, .tab-ico, .rabbit-ico, .rail, .stars, img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
img { -webkit-user-drag: none; }

/* Eingabefelder bleiben selektierbar */
input, textarea, select, [contenteditable] {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

/* ---------- Momentum-Scrolling ---------- */
.feed, .chips {
  -webkit-overflow-scrolling: touch;
}
.feed  { overscroll-behavior-y: contain; }  /* Feed-Scroll kettet nicht an den Body */
.chips { overscroll-behavior-x: contain; }

/* ============================================================
   Safe Areas — oben (Status Bar)
   viewport-fit=cover schiebt die Seite unter die Statusleiste;
   hier bekommt jeder Seitenkopf seinen Inset zurück.

   Hinweis: Die seiteneigenen <style>-Blöcke stehen NACH diesem
   Stylesheet. Selektoren, die dort mit gleicher Spezifität
   definiert sind, werden hier mit "html "-Präfix (+1 Typ)
   überstimmt — rein additiv, pro Property.
   ============================================================ */

/* Sticky Topbar (suchen, buchungen, buchen, bewertung, studio,
   gast, chat, profil, verifizierung). chat.html synct die sticky
   Kontextkarte per ResizeObserver an die Topbar-Höhe — passt. */
.topbar {
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

/* index.html: dunkler Hero ganz oben — Gradient läuft unter die
   Statusleiste, der Inhalt rückt darunter. */
.screen > .hero:first-child {
  padding-top: calc(var(--s6, 32px) + env(safe-area-inset-top, 0px));
}

/* alarm.html: iOS-Push-Mock ist das oberste Element — rückt wie
   eine echte Push unter die Uhr. (Der Hero hängt per negativem
   Margin daran und wandert automatisch mit.) */
html .push {
  margin-top: calc(var(--s3, 12px) + env(safe-area-inset-top, 0px));
}

/* feed.html: absolutes Kopf-Overlay (Wortmarke + Chips) über dem
   randlosen Video — Clip läuft unter die Statusleiste. */
html .feed-top {
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

/* onepager.html: Browser-Chrome-Mock ganz oben */
html .op-chrome {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ============================================================
   Safe Areas — unten (Home Indicator)
   Die .tabbar aus app.css ist bereits safe-area-aware
   (padding-bottom: calc(10px + env(...))) und wird höher.
   ============================================================ */

/* Screens ohne Tabbar (index, verifizierung): Auslauf unter dem
   letzten Inhalt. .feed-screen ist randlos und bleibt aussen vor. */
.screen:not(.has-tabbar):not(.feed-screen) {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Screens mit Tabbar: Content-Puffer wächst mit der Tabbar.
   chat.html hat einen eigenen, grösseren Puffer (Composer) und
   wird über :has(.composer) ausgenommen, damit dessen Regel
   weiterhin greift. */
.screen.has-tabbar:not(:has(.composer)) {
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* Fixe CTA-Leisten (profil bottom:70px, buchen bottom:78px) und
   Toasts (feed 104px, bewertung/gast 108px) sitzen über der
   Tabbar: margin-bottom hebt sie um den Inset an, ohne die je
   unterschiedlichen bottom-Werte anzufassen.
   (.composer in chat.html rechnet env() bereits selbst ein.) */
html .cta-bar, html .toast {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

/* feed.html: Clip-Overlays rücken mit der höheren Tabbar hoch */
html .fprogress { bottom: calc(76px  + env(safe-area-inset-bottom, 0px)); }
html .rail      { bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
html .fmeta     { bottom: calc(96px  + env(safe-area-inset-bottom, 0px)); }

/* onepager.html: Karte endet nicht am Home Indicator */
html .op { margin-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================
   Capacitor-Modus (Klasse setzt native.js)
   ============================================================ */

/* Im nativen Container: Text generell nicht selektierbar (App-
   Gefühl), Eingabefelder bleiben es. */
html.capacitor-native body {
  -webkit-user-select: none;
  user-select: none;
}
html.capacitor-native input,
html.capacitor-native textarea,
html.capacitor-native select,
html.capacitor-native [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}
html.capacitor-native body {
  -webkit-touch-callout: none;
}

/* ============================================================
   iOS Ease-of-Use — Politur (additiv, lädt nach app.css,
   vor den seiteneigenen <style>-Blöcken; wo nötig hebt ein
   "html "-Präfix die Spezifität pro Property an)
   ============================================================ */

/* ---------- 300ms-/Doppel-Tap-Delay auf Controls sicher weg ---------- */
a, button, input, textarea, select, label, [role="button"] {
  touch-action: manipulation;
}

/* ============================================================
   1) Tap-Targets: 44×44pt (Apple HIG)
   ============================================================ */

/* Grosszügig wachsen darf, was das Layout verträgt */
.btn:not(.btn--sm)       { min-height: 50px; }  /* primäre CTAs >= 50px */
.btn-ghost:not(.btn--sm) { min-height: 50px; }
.tabbar a  { min-height: 44px; justify-content: center; }
.set-row   { min-height: 52px; }   /* gast.html: Einstellungs-Zeilen */
.fam-add   { min-height: 48px; }   /* gast.html: "+ Profil hinzufügen" */
.slot, .group-opt, .level-opt, .pay-opt { min-height: 52px; } /* buchen.html */
.send      { min-width: 46px; min-height: 46px; } /* chat.html: Senden */
.searchbox { min-height: 46px; }   /* suchen.html */
.fsel      { min-height: 52px; }   /* suchen.html: Ort/Datum/Sport/Sortieren */
.input-row input { min-height: 46px; } /* chat.html */

/* Optisch kleine Controls: unsichtbare Trefferfläche per ::before
   auf mind. 44×44 aufblasen, ohne das Design zu vergrössern.
   (.pin und .mute sind bereits positioniert und bleiben es.) */
.chip, .btn--sm, .star-btn, .skip-link, .copy-btn, .ref-code button,
.logout button, .status, .ctx-link, .back, .topbar a, .rail button {
  position: relative;
}
.chip::before, .btn--sm::before, .star-btn::before, .skip-link::before,
.copy-btn::before, .ref-code button::before, .logout button::before,
.status::before, .ctx-link::before, .back::before, .topbar a::before,
.rail button::before, .pin::before, .mute::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* ============================================================
   2) Sofortiges Touch-Feedback (kurz gehalten, ~90ms)
   ============================================================ */
.btn, .btn-ghost, .chip, .send, .tabbar a, .hub a.card, .rcard,
.set-row, .slot, .group-opt, .level-opt, .pay-opt, .fam-add,
.share-btn, .clip, .status, .copy-btn, .ref-code button, .skip-link,
.ctx-link, .back, .mute, .rail button, .dropzone, .star-btn,
.logout button {
  transition:
    transform .09s ease,
    filter .09s ease,
    opacity .12s ease,
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}
.btn:active, .btn-ghost:active, .chip:active, .send:active,
.tabbar a:active, .hub a.card:active, .rcard:active, .set-row:active,
.slot:active, .group-opt:active, .level-opt:active, .pay-opt:active,
.fam-add:active, .share-btn:active, .clip:active, .status:active,
.copy-btn:active, .ref-code button:active, .skip-link:active,
.ctx-link:active, .back:active, .mute:active, .rail button:active,
.dropzone:active, .logout button:active {
  transform: scale(.97);
  filter: brightness(.97);
}
/* .pin (suchen.html) hat ein eigenes Basis-transform: nur abdunkeln */
.pin:active { filter: brightness(.9); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-ghost:active, .chip:active, .send:active,
  .tabbar a:active, .hub a.card:active, .rcard:active, .set-row:active,
  .slot:active, .group-opt:active, .level-opt:active, .pay-opt:active,
  .fam-add:active, .share-btn:active, .clip:active, .status:active,
  .copy-btn:active, .ref-code button:active, .skip-link:active,
  .ctx-link:active, .back:active, .mute:active, .rail button:active,
  .dropzone:active, .logout button:active {
    transform: none;
    filter: none;
    opacity: .72;   /* Feedback bleibt, Bewegung nicht */
  }
}

/* ============================================================
   3) Eingaben: nativ anfühlen, kein Fokus-Zoom
   ============================================================ */
html { accent-color: var(--purple, #6844C4); }
input, textarea { caret-color: var(--purple, #6844C4); }

/* iOS-Standardschatten/-optik der Textfelder entfernen */
input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="number"], input[type="password"],
textarea {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* Klarer Marken-Fokusring auf den echten Eingabefeldern */
html .input-row input:focus,     /* chat.html */
html .fb-text:focus {            /* bewertung.html */
  border-color: var(--purple, #6844C4);
  box-shadow: 0 0 0 3px rgba(104, 68, 196, .14);
}
html .fsel:focus-within {        /* suchen.html: Select-Karten */
  border-color: var(--purple, #6844C4);
  box-shadow: 0 0 0 3px rgba(104, 68, 196, .12);
}
:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: 2.5px solid var(--purple, #6844C4);
  outline-offset: 2px;
}

/* iOS zoomt bei Inputs < 16px in die Seite: im nativen Container
   Mindestgrösse erzwingen (Browser-Mock bleibt unangetastet).
   Spezifität bewusst über den seiteneigenen Regeln
   (.input-row input 15px, .fsel select 14.5px, .fb-text 15.2px). */
html.capacitor-native input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.capacitor-native textarea,
html.capacitor-native select:not([multiple]) {
  font-size: max(16px, 1em);
}

/* ============================================================
   4) Tastatur-bewusste Leisten (native.js setzt html.keyboard-open
      + --kb-height, sobald das iOS-Keyboard steht)
   ============================================================ */
.composer, .cta-bar { transition: bottom .2s ease; }

/* chat.html: Composer hebt sich direkt über die Tastatur */
html.keyboard-open .composer {
  bottom: var(--kb-height, 0px);
}
/* buchen.html / profil.html: fixe CTA-Leisten ebenso; der
   Safe-Area-Margin entfällt, die Tastatur deckt den Indicator ab */
html.keyboard-open .cta-bar {
  bottom: var(--kb-height, 0px);
  margin-bottom: 0;
}
/* Toasts bleiben über der Tastatur lesbar */
html.keyboard-open .toast {
  bottom: calc(var(--kb-height, 0px) + 90px);
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .composer, .cta-bar { transition: none; }
}

/* ============================================================
   5) Scroll-Gefühl: Chip-Reihen sanft, kein Quer-Overflow
   ============================================================ */
body { overflow-x: clip; }  /* clip statt hidden: bricht kein sticky */
.chips {
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--s4, 16px);
}
.chips .chip { scroll-snap-align: start; }