/* =====================================================================
   Wygoda na telefonie (Android, iPhone, aplikacja i przeglądarka) — 22.10.2026.
   Ładowany jako ostatni. Zasady: cel dotyku min. 44–48 px, tekst min. 13 px,
   nic nie wychodzi poza ekran, treść nie wchodzi pod pasek telefonu ani pod „notch”.
   ===================================================================== */
@media (max-width:760px){
  /* --- górny pasek: menu | szukaj | dodaj --- */
  .topbar{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:8px; align-items:center;
    padding:calc(8px + env(safe-area-inset-top)) 12px 8px; background:color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .topbar-menu{display:grid!important; width:48px; height:48px; border-radius:14px; place-items:center}
  .topbar-menu .ik{width:24px; height:24px}
  .topbar-szukaj{min-width:0; max-width:none; height:48px; border-radius:14px; font-size:15px}
  .topbar-szukaj span{min-width:0}
  .topbar-akcje{gap:6px; margin-left:0}
  .topbar-akcje .menu-dodaj > .btn{width:48px; height:48px; padding:0; display:grid; place-items:center; border-radius:14px}
  .topbar-akcje .menu-dodaj > .btn .ik{width:22px; height:22px}
  .topbar-ico{width:48px; height:48px}
  .menu-lista{right:0; left:auto; min-width:min(280px, calc(100vw - 24px))}
  .menu-lista button, .menu-lista a{min-height:48px; font-size:15px}

  /* --- menu boczne (szuflada) --- */
  .nav{width:min(300px, 86vw); padding-top:calc(14px + env(safe-area-inset-top)); padding-bottom:calc(14px + env(safe-area-inset-bottom)); overflow-y:auto}
  .nav-poz{min-height:48px; font-size:15.5px}
  .nav-marka-t b{font-size:15px}

  /* --- dolne menu --- */
  .nav-mob{padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .nav-mob a, .nav-mob button{min-height:56px; justify-content:center; font-size:12px; padding:4px 0}
  .v2 main{padding:10px 14px calc(120px + env(safe-area-inset-bottom))}

  /* --- przyciski, pola, czytelność --- */
  .v2 .btn{min-height:44px; font-size:15px}
  .v2 .btn-s{min-height:40px; font-size:14px; padding:8px 12px}
  .v2 input, .v2 select, .v2 textarea, .v2 .inp{font-size:16px; min-height:44px}   /* 16 px = iPhone nie powiększa strony przy pisaniu */
  .v2 textarea.inp, .v2 textarea{min-height:88px}
  .zakladki, .filtry, .kal-seg{flex-wrap:wrap}
  .zakladki > *, .kal-seg > *{min-height:40px}
  .v2 h1{font-size:24px; line-height:1.2; overflow-wrap:anywhere}
  .v2 h2{font-size:19px; overflow-wrap:anywhere}
  .v2 .cichy-tekst, .v2 small{font-size:13px}
  .karta-btns, .row-btns{display:flex; flex-wrap:wrap; gap:8px}
  .karta-btns > *, .row-btns > *{flex:1 1 calc(50% - 8px); min-width:0; justify-content:center; text-align:center}
  .konektory{flex-wrap:wrap}
  .konektor{min-height:44px}
  table{font-size:14px}

  /* --- panel osoby, okna, czat agenta: pod paskiem telefonu, na cały ekran --- */
  .panel-boczny{padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}
  .karta-x{width:44px; height:44px}
  .okno-back{padding:calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom))}
  .okno{max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow:auto}
  .agent-czat{top:env(safe-area-inset-top); height:auto; bottom:0; padding-bottom:env(safe-area-inset-bottom)}
  .agent-x{min-width:44px; min-height:44px}
  .agent-stopka textarea{font-size:16px}
  .rozm-panel{bottom:calc(76px + env(safe-area-inset-bottom))}
  .v2 .talk-fab{width:56px; height:56px; right:14px; bottom:calc(84px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(90px + env(safe-area-inset-bottom)); left:12px; right:12px; max-width:none}

  /* --- drobny tekst: minimum 12.5 px --- */
  .tydz-dow, .tydz-ile, .kafel-czas, .kafel-stan, .kafel-notatka, .jakosc, .dzwon-powod, .dzwon-lab,
  .sort-th, .v2 th, .blok-t, .wl-lab, .panel-t, .krok-co, .os2-m, .poz2-t span{font-size:12.5px!important}
  .kafel-notatka{line-height:1.35}

  /* --- większe pola dotyku na listach (imię, telefon, „pokaż”) --- */
  .v2 a.glowny, .v2 a.poz2-nazwa, .v2 a.dzwon-tel, .v2 a.tel-link, .v2 .glowna td a, .v2 .glowna li a, .v2 .poz2 a,
  .v2 .glowna p > a, .v2 .glowna .blok a, .v2 .glowna .karta2 a:not(.btn){display:inline-flex; align-items:center; min-height:40px; padding:2px 0}
  .v2 a.wroc{display:inline-flex; align-items:center; min-height:44px}
  .v2 a.sort-th{display:inline-flex; align-items:center; min-height:36px}
  .ikona-sms, .lejek-delta, .lejek-konw, .czynnik{font-size:12.5px!important}
  .v2 .mini, .v2 button.mini{min-height:40px; padding:8px 12px; font-size:14px}
  .v2 .chip{min-height:40px; padding:8px 14px; font-size:14px}
  .v2 input[type=checkbox], .v2 input[type=radio]{min-height:0; width:22px; height:22px}
  .ptak{min-height:44px; align-items:center}
}
.topbar-agent{display:none}
@media (max-width:760px){
  /* Agent na górnym pasku zamiast pływającego przycisku — nic nie zasłania treści. */
  .v2 .talk-fab{display:none!important}
  .topbar-agent{display:grid; color:#fff; background:linear-gradient(135deg,#3502D0,#5212E6 55%,#7350E1); border:0}
  .topbar-agent .ik{stroke:#fff}
}
@media (max-width:760px){
  /* Szuflada menu: wiersze „ikona — nazwa — liczba”, jak w zwykłej aplikacji. */
  .nav{gap:2px; padding-left:12px; padding-right:12px}
  .nav-marka{justify-content:flex-start; padding:4px 6px 14px}
  .nav-poz{flex-direction:row!important; justify-content:flex-start; text-align:left; gap:14px; padding:6px 10px 6px 6px;
    font-size:15.5px!important; font-weight:650}
  .nav-poz .nav-t{flex:1; line-height:1.2}
  .nav-poz.on::before{left:-12px}
  .nav-licz{position:static!important; margin-left:auto; min-width:26px; height:24px; font-size:12.5px!important; padding:0 8px}
  .nav-user{justify-content:flex-start; padding:8px 6px}
}
@media (max-width:440px){
  /* Przyciski karty osoby: na wąskim ekranie jeden pod drugim, pełna szerokość — napis zawsze się mieści. */
  .karta-btns > *, .row-btns > *{flex:1 1 100%}
  .karta-btns > .rozm-mikrofon{justify-content:center}
}
@media (max-width:760px){
  .agent-czat{top:env(safe-area-inset-top)!important; bottom:0!important; left:0; right:0; height:auto!important; max-height:none;
    width:100%!important; max-width:100%!important; border-radius:0; z-index:90; padding-bottom:env(safe-area-inset-bottom)}
  .agent-zal, .agent-mic{min-width:44px; min-height:44px; display:grid; place-items:center; font-size:1.35rem}
  .agent-stopka{gap:4px; padding:8px 8px}
  .agent-stopka .btn{min-height:44px}
}
@media (max-width:760px){
  /* Zakładki Ustawień: wszystkie widoczne (siatka), bez ukrytego przewijania w bok. */
  .ustaw-nawi{display:grid!important; grid-template-columns:1fr 1fr; gap:6px; overflow:visible!important}
  .ustaw-nawi > a{min-height:48px; white-space:normal!important; line-height:1.2; font-size:14px; display:flex; align-items:center; gap:8px}
  .kafel-sms{font-size:12.5px!important; min-height:36px; min-width:48px; padding:6px 10px}
}
/* Zgody aplikacji i komunikat o nowej wersji */
.zgody{display:grid; gap:12px}
.zgody p{margin:0}
.zgoda{display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2)}
.zgoda > div{flex:1; display:grid; gap:4px}
.zgoda span{font-size:13.5px; color:var(--muted); line-height:1.4}
.zgoda-ok{color:var(--ok); font-weight:700; white-space:nowrap}
.zgoda-nie{color:var(--red); font-size:13px; max-width:160px}
.app-aktualizacja{position:fixed; left:12px; right:12px; top:calc(70px + env(safe-area-inset-top)); z-index:66; display:flex; align-items:center; gap:10px;
  padding:12px 12px 12px 14px; border-radius:16px; background:var(--surface); border:1px solid var(--mint); box-shadow:0 12px 32px rgba(82,18,230,.25)}
.app-aktualizacja > div{flex:1; display:grid; gap:2px; font-size:14px}
.app-aktualizacja span{font-size:13px; color:var(--muted)}
@media (max-width:420px){.zgoda{flex-wrap:wrap} .zgoda .btn{width:100%}}