/* MH-Phone PWA — style (mobilne, granatowy motyw jak apka). */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --granat: #0d47a1; --granat2: #1565c0; --zielony: #2e7d32;
  --czerwony: #c62828; --tlo: #f2f4f7; --karta: #fff; --tekst: #111;
  --szary: #6b7280; --kresk: #e0e0e0;
}
html, body { margin: 0; height: 100%; }
body {
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--tlo); color: var(--tekst);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.ukryty { display: none !important; }

/* ekrany zajmują cały ekran, przełączane klasą .ukryty */
.ekran { min-height: 100vh; display: flex; flex-direction: column; }

/* --- rejestracja / oczekiwanie (wyśrodkowane) --- */
#ekran-rejestracja, #ekran-oczekiwanie {
  justify-content: center; align-items: center; text-align: center;
  padding: 24px; gap: 12px;
}
.tytul { font-size: 32px; font-weight: 700; color: var(--granat); }
.tytul-m { font-size: 22px; font-weight: 700; }
.pod { color: var(--szary); margin: 0; }
.drobne { color: var(--szary); font-size: 13px; }
#ekran-rejestracja label { display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; max-width: 360px; font-size: 13px; color: var(--szary); gap: 4px; }
#ekran-rejestracja input, #ekran-czat input, .szukaj {
  font: inherit; padding: 10px 12px; border: 1px solid #bbb; border-radius: 10px;
  width: 100%; background: #fff;
}
.serwer-info { color: var(--szary); font-size: 13px; }
button { font: inherit; cursor: pointer; }
.glowny, .drugi {
  width: 100%; max-width: 360px; padding: 14px; border-radius: 12px; border: none;
  font-weight: 700; font-size: 17px;
}
.glowny { background: var(--granat); color: #fff; }
.drugi { background: #fff; color: var(--granat); border: 1px solid var(--granat); }
.link { background: none; border: none; color: var(--granat); text-decoration: underline; }
.komunikat { background: #fff3cd; border: 1px solid #ffe08a; color: #664d03;
  padding: 8px 12px; border-radius: 8px; max-width: 360px; }
.komunikat.blad { background: #fdecea; border-color: #f5c6cb; color: #842029; }
.klepsydra { font-size: 56px; }
.wiruje { width: 34px; height: 34px; border: 4px solid #cfd8dc;
  border-top-color: var(--granat); border-radius: 50%; animation: obrot 1s linear infinite; }
@keyframes obrot { to { transform: rotate(360deg); } }

/* --- pasek nagłówka --- */
.pasek { display: flex; align-items: center; gap: 8px; background: var(--granat);
  color: #fff; padding: 10px 12px; position: sticky; top: 0; z-index: 5; }
.pasek-tytul { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.pasek-prawa { display: flex; gap: 4px; }
.ikonka { background: none; border: none; color: #fff; font-size: 20px;
  padding: 6px 8px; border-radius: 8px; }
.ikonka:active { background: rgba(255,255,255,.2); }

/* --- lista kontaktów --- */
.szukaj { margin: 8px 12px; width: auto; }
.lista { flex: 1; overflow-y: auto; }
.kontakt { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--kresk); background: #fff; }
.kropka { width: 12px; height: 12px; border-radius: 50%; background: #9e9e9e; flex: none; }
.kropka.on { background: var(--zielony); }
.kontakt-tekst { flex: 1; min-width: 0; }
.kontakt-imie { font-weight: 600; }
.kontakt-pod { font-size: 13px; color: var(--szary); }
.plakietka { background: var(--czerwony); color: #fff; border-radius: 12px;
  font-size: 12px; padding: 1px 7px; min-width: 20px; text-align: center; }
.kontakt-dzwon { color: var(--zielony); font-size: 22px; background: none; border: none; }

/* --- czat --- */
.glos-pasek { display: flex; align-items: center; gap: 10px; background: #e8f0fe;
  color: #0b3d91; padding: 8px 14px; font-size: 14px; }
.glos-sciezka { color: var(--szary); font-size: 12px; white-space: pre-line; flex: 1; }
.czat-okno { flex: 1; overflow-y: auto; padding: 12px; display: flex;
  flex-direction: column; gap: 6px; }
.dymek { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 15px;
  word-wrap: break-word; }
.dymek-moj { align-self: flex-end; background: #d6e4ff; border-bottom-right-radius: 4px; }
.dymek-jego { align-self: flex-start; background: #fff; border: 1px solid var(--kresk);
  border-bottom-left-radius: 4px; }
.dymek img { max-width: 100%; border-radius: 8px; display: block; }
.kiedy { font-size: 11px; color: var(--szary); margin-top: 2px; text-align: right; }
.czat-forma { display: flex; align-items: center; gap: 6px; padding: 8px;
  border-top: 1px solid var(--kresk); background: #fff; }
.czat-forma input#c-pole { flex: 1; border-radius: 20px; }
.czat-forma .ikonka { color: var(--granat); }

/* --- obszar wideo --- */
.wideo-obszar { position: relative; background: #000; width: 100%;
  aspect-ratio: 3/4; max-height: 55vh; overflow: hidden; }
.wideo-zdalne { width: 100%; height: 100%; object-fit: contain; background: #000;
  display: block; }
.wideo-brak { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #9aa0a6; font-size: 15px; text-align: center; padding: 20px; }
.wideo-moje { position: absolute; right: 10px; bottom: 10px; width: 28%;
  max-width: 130px; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px;
  border: 2px solid rgba(255,255,255,.7); background: #222; transform: scaleX(-1); }
.okragly.maly.wlaczona { background: var(--granat2); }

/* --- przyciski połączenia --- */
.okragly { border: none; border-radius: 22px; color: #fff; padding: 12px 22px;
  font-weight: 700; font-size: 16px; }
.okragly.maly { padding: 6px 14px; font-size: 14px; }
.zielony { background: var(--zielony); }
.czerwony { background: var(--czerwony); }

/* --- baner przychodzącego --- */
.baner-polaczenie { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  background: var(--granat); color: #fff; padding: 16px;
  box-shadow: 0 3px 12px rgba(0,0,0,.3); padding-top: calc(16px + env(safe-area-inset-top)); }
.baner-tresc { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#baner-kto { font-weight: 700; }
.baner-przyciski { display: flex; gap: 8px; }

/* --- diagnostyka --- */
.diag { padding: 16px; }
.diag .wiersz { display: flex; justify-content: space-between; padding: 10px 0;
  border-bottom: 1px solid var(--kresk); }
.diag .tak { color: var(--zielony); font-weight: 700; }
.diag .nie { color: var(--czerwony); font-weight: 700; }
.diag .werdykt { margin-top: 16px; padding: 12px; border-radius: 10px;
  background: #e8f0fe; }

@media (prefers-color-scheme: dark) {
  :root { --tlo: #101318; --karta: #14171c; --tekst: #e8eaed; --szary: #9aa0a6;
    --kresk: #2a2f36; }
  #ekran-rejestracja input, .szukaj, .czat-forma input#c-pole { background: #1b1f25;
    color: #e8eaed; border-color: #3a4048; }
  .kontakt, .dymek-jego, .czat-forma { background: #14171c; }
  .dymek-moj { background: #1a3a6b; }
  .drugi { background: #14171c; }
}