/**
 * native-feel.css · Welle 43.C NACHT-22 · Native-App-Feel Layer
 * ════════════════════════════════════════════════════════════════════
 * Visuell:
 *  - Splash-Loader (Hex-Pulse aus components/hex-loader.html Pattern 01)
 *  - Page-Transition Fade-In/Out
 *  - Tap-Ripple Material-Design-Style
 *  - Toast Container/Cards
 *  - Pull-to-Refresh Hex-Indicator
 *  - iOS-Standalone-Polish
 */

/* ════════════════════════════════════════════════════════════════════
 * 1 · SPLASH-OVERLAY (Hex-Pulse)
 * ════════════════════════════════════════════════════════════════════ */
#fs-splash {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg, #0A0A0C);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease-out;
}
#fs-splash.is-hidden {
  opacity: 0; pointer-events: none;
}
#fs-splash .fs-splash-inner {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
#fs-splash .fs-splash-hex {
  width: 63px; height: 63px;
  background: #7C3AED;
  clip-path: polygon(50% 5%, 90% 28%, 90% 72%, 50% 95%, 10% 72%, 10% 28%);
  animation: fs-splash-pulse 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 16px rgba(124,58,237,0.5));
}
@keyframes fs-splash-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.5; }
}
#fs-splash .fs-splash-label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--accent-text, #B696F5);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
 * 2 · PAGE-TRANSITIONS (Fade-In/Out)
 * WICHTIG: KEIN transform auf body — sonst werden alle position:fixed
 * Children (Tab-Bar, Header, Photo-Modal) relativ zum body gepositioniert
 * statt zum Viewport → scrollen mit.  NACHT-23 Fix
 * ════════════════════════════════════════════════════════════════════ */
body.fs-page-enter {
  opacity: 0;
  transition: opacity .22s ease-out;
}
body.fs-page-shown {
  opacity: 1;
}
body.fs-page-leaving {
  opacity: 0;
  transition: opacity .12s ease-in;
}

/* ════════════════════════════════════════════════════════════════════
 * 3 · TAP-RIPPLE (Material-Design)
 * ════════════════════════════════════════════════════════════════════ */
.fs-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  pointer-events: none;
  animation: fs-ripple-grow 0.6s ease-out forwards;
}
@keyframes fs-ripple-grow {
  from { transform: scale(0); opacity: 1; }
  to { transform: scale(1); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════
 * 4 · TOAST (statt alert)
 * ════════════════════════════════════════════════════════════════════ */
#fs-toast-container {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  z-index: 9998;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.fs-toast {
  pointer-events: auto;
  min-width: 260px; max-width: 90vw;
  padding: 14px 18px;
  background: rgba(15,15,18,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--accent-line, rgba(124,58,237,0.25));
  border-left: 3px solid var(--accent, #7C3AED);
  border-radius: 12px;
  color: var(--paper, #F0F0F0);
  font-family: Inter, sans-serif;
  font-size: 0.88rem; line-height: 1.4;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  transition: opacity .26s ease-out, transform .26s ease-out;
}
.fs-toast.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fs-toast-success { border-left-color: #34D399; }
.fs-toast-error { border-left-color: #EF4444; }
.fs-toast-warn { border-left-color: #FBBF24; }
.fs-toast-info { border-left-color: var(--accent, #7C3AED); }

/* ════════════════════════════════════════════════════════════════════
 * 5 · PULL-TO-REFRESH (Hex-Indicator)
 * ════════════════════════════════════════════════════════════════════ */
#fs-ptr {
  position: fixed; top: 0; left: 50%;
  transform: translate(-50%, -60px);
  width: 54px; height: 54px;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
}
#fs-ptr .fs-ptr-hex {
  width: 36px; height: 36px;
  background: var(--accent, #7C3AED);
  clip-path: polygon(50% 5%, 90% 28%, 90% 72%, 50% 95%, 10% 72%, 10% 28%);
  transition: transform .2s;
}
#fs-ptr.is-ready .fs-ptr-hex {
  transform: scale(1.2);
  filter: drop-shadow(0 0 12px rgba(124,58,237,0.6));
}
#fs-ptr.is-refreshing .fs-ptr-hex {
  animation: fs-splash-pulse 1s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════════════
 * 6 · SKELETON LOADER (für Listen während Fetch)
 * ════════════════════════════════════════════════════════════════════ */
.fs-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: fs-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes fs-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.fs-skeleton-card {
  height: 72px; margin-bottom: 10px;
  border-radius: 14px;
}
.fs-skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════════
 * 7 · iOS-STANDALONE POLISH
 * ════════════════════════════════════════════════════════════════════ */
.is-standalone-ios {
  /* Statusbar wird sehr leicht abgesetzt damit Hero-Mega nicht verschluckt */
}
.is-standalone-ios .app-bar {
  padding-top: max(env(safe-area-inset-top, 0px), 20px);
}

/* Tap-Highlight global aus (zu cleanerem Feel) */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* Smooth-Scroll überall */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* iOS Bounce-Scroll am Body deaktivieren (außer wo nötig wie chat-stream) */
body {
  overscroll-behavior-y: contain;
}