/* ====================================================================
   Style wlaczane TYLKO w aplikacji (APK). Na stronie web nic sie nie zmienia:
   klasa .native-app jest dodawana z native.js wylacznie w srodowisku Capacitor.
   ==================================================================== */

/* 0. FIX PRZEWIJANIA (wazne!)
   Na stronie media-query ustawia na <html> overflow-x:hidden, przez co <html>
   staje sie kontenerem przewijania o wysokosci calej tresci - a to w WebView
   Androida POTRAFI ZAMROZIC przewijanie dotykiem ("zastygly ekran").
   W aplikacji przywracamy normalne przewijanie dokumentu: <html> bez overflow,
   a poziomy nadmiar przycinamy na <body> przez overflow-x:clip (nie tworzy
   kontenera przewijania, wiec pionowe przewijanie dziala). */
html.native-app {
  overflow: visible;
  height: auto;
  -webkit-overflow-scrolling: touch;
}
.native-app body {
  overflow-x: clip;
  overflow-y: visible;
  height: auto;
}

/* 1. Zachowanie "jak aplikacja", a nie "jak strona" */
.native-app, .native-app body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;          /* brak menu po przytrzymaniu */
}
.native-app * { -webkit-tap-highlight-color: transparent; }  /* brak szarego blysku po tapnieciu */
.native-app body { overscroll-behavior: none; }               /* brak "gumowego" odbicia przy przewijaniu */

/* teksty do zaznaczania/wpisywania nadal dzialaja normalnie */
.native-app input,
.native-app textarea,
.native-app [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* 2. Bezpieczne odstepy pod "czolke"/zaokraglenia ekranu (iPhone/Android z wcieciem) */
.native-app .top       { padding-top: env(safe-area-inset-top); }

/* ====================================================================
   APP-SHELL: dolna nawigacja zamiast stopki strony (tylko w aplikacji)
   ==================================================================== */
.native-app #footer { display: none; }                      /* stopka strony - zbedna w aplikacji */
.native-app #chatFab { display: none; }                     /* czat przeniesiony do zakladki "Hilfe" */
.native-app #navHow { display: none; }                      /* "Wie es funktioniert" -> zakladka Hilfe */
.native-app .topbar [data-act="sell"] { display: none; }    /* Verkaufen jest w dolnej nawigacji */

/* W aplikacji NIE pokazujemy zgody na cookies / ustawien prywatnosci
   (Pixel i reklamy sa tylko na stronie web, nie w APK). */
.native-app #consent { display: none !important; }
.native-app #privModal { display: none !important; }
.native-app [data-act="priv-open"] { display: none; }

.native-app body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

#appTabs { display: none; }                                 /* na stronie web nie istnieje; na wszelki wypadek ukryte */
.native-app #appTabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.native-app #appTabs .tab-btn {
  flex: 1; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 6px; color: var(--muted);
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.native-app #appTabs .tab-btn svg { width: 24px; height: 24px; display: block; }
.native-app #appTabs .tab-btn.active { color: #F04E23; }
.native-app #appTabs .tab-btn:active { transform: scale(0.94); }

.native-app #chatWin { bottom: calc(68px + env(safe-area-inset-bottom)); }

/* 8. Plynne przejscia i odczuwalna reakcja na dotyk */
.native-app .btn:active,
.native-app button:active,
.native-app [data-act]:active {
  transform: scale(0.97);
  transition: transform .06s ease;
}
.native-app { scroll-behavior: smooth; }

/* delikatne pojawienie sie nowego ekranu (klasa dodawana z native.js) */
.native-app #main.view-in { animation: viewIn .26s cubic-bezier(.33,.9,.4,1); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 9. Gdy widoczna klawiatura - plynnie bez skokow */
.native-app.kb-open #chatFab { opacity: 0; pointer-events: none; }

/* ====================================================================
   DODATKOWE USPRAWNIENIA (tylko aplikacja)
   ==================================================================== */

/* Pasek ladowania u gory - podczas zapytan sieciowych */
#appLoadbar { display: none; }
.native-app #appLoadbar {
  display: block; position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: #F04E23; z-index: 99998; border-radius: 0 3px 3px 0;
  opacity: 0; transition: width .3s ease, opacity .3s ease;
}
.native-app #appLoadbar.on { opacity: 1; }

/* Pull-to-refresh - wskaznik (ekran Konto) */
#ptr { display: none; }
.native-app #ptr {
  display: flex; position: fixed; top: 0; left: 50%;
  transform: translateX(-50%) translateY(-44px);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  align-items: center; justify-content: center; color: #F04E23;
  z-index: 155; pointer-events: none; transition: transform .18s ease;
}
.native-app #ptr svg { width: 20px; height: 20px; }
.native-app #ptr.spin svg { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* Onboarding - pierwsze uruchomienie */
#onbo { display: none; }
.native-app #onbo {
  display: flex; position: fixed; inset: 0; z-index: 99999;
  flex-direction: column; background: #0f1115; color: #fff;
  padding: calc(22px + env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom));
}
.native-app #onbo.hidden { display: none; }
#onbo .skip { align-self: flex-end; background: none; border: 0; color: #9a9aa6; font-size: 14px; cursor: pointer; padding: 6px; }
#onbo .slides { flex: 1; display: flex; align-items: center; }
#onbo .slide { width: 100%; text-align: center; }
#onbo .slide.on { animation: viewIn .3s ease; }
#onbo .ic {
  width: 92px; height: 92px; border-radius: 26px; margin: 0 auto 26px;
  background: rgba(240,78,35,.16); color: #F04E23;
  display: flex; align-items: center; justify-content: center;
}
#onbo .ic svg { width: 46px; height: 46px; }
#onbo h2 { margin: 0 0 12px; font-size: 24px; font-weight: 800; }
#onbo p { margin: 0 auto; max-width: 300px; font-size: 15px; line-height: 1.55; color: #b9b9c2; }
#onbo .dots { display: flex; gap: 8px; justify-content: center; margin: 22px 0; }
#onbo .dot { width: 8px; height: 8px; border-radius: 50%; background: #33343c; transition: all .2s ease; }
#onbo .dot.on { background: #F04E23; width: 22px; border-radius: 4px; }
#onbo .next {
  width: 100%; border: 0; border-radius: 14px; background: #F04E23; color: #fff;
  font-size: 16px; font-weight: 700; padding: 16px; cursor: pointer;
}

/* ====================================================================
   Ekran "brak polaczenia" - pokazywany przez native.js, gdy serwer
   jest nieosiagalny. Domyslnie ukryty (takze na stronie web).
   ==================================================================== */
#offlineScreen {
  position: fixed; inset: 0; z-index: 99999;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center;
  background: #0f1115; color: #e9e9ee;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
#offlineScreen.show { display: flex; }
#offlineScreen .ic {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,78,35,0.14); font-size: 40px;
}
#offlineScreen h3 { margin: 0; font-size: 20px; font-weight: 800; }
#offlineScreen p  { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.5; color: #a7a7b3; }
#offlineScreen button {
  margin-top: 6px; border: 0; cursor: pointer;
  background: #F04E23; color: #fff; font-weight: 700; font-size: 15px;
  padding: 13px 26px; border-radius: 12px;
}