/* robotatut.pl - dolne menu jak w aplikacji na telefonie */
.tabbar{display:none}

@media (max-width:760px){
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}

  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1100;
    background:#0E0D09;
    border-top:1px solid #8A6510;
    padding-bottom:env(safe-area-inset-bottom,0px);
    box-shadow:0 -8px 26px rgba(0,0,0,.34)}

  .tabbar .tb{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:8px 2px 7px;text-decoration:none;min-width:0;
    color:rgba(255,255,255,.52);-webkit-tap-highlight-color:transparent}

  .tabbar .tbi{position:relative;display:block;width:23px;height:23px}
  .tabbar .tb svg{width:23px;height:23px;display:block;fill:currentColor}

  .tabbar .tbt{
    font-family:var(--f-display,inherit);font-weight:700;font-size:9px;
    letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:100%}

  .tabbar .tb.on{color:#F2DC96}
  .tabbar .tb.on .tbt{color:#F2DC96}

  /* licznik nieprzeczytanych */
  .tabbar .tbb{
    position:absolute;top:-5px;right:-8px;min-width:16px;height:16px;padding:0 4px;
    border-radius:9px;background:#C4392A;color:#fff;
    font-family:var(--f-display,inherit);font-weight:800;font-size:9.5px;line-height:16px;
    text-align:center;border:1.5px solid #0E0D09}

  /* srodkowy przycisk - wizytowka z QR */
  .tabbar .tb.mid{position:relative}
  .tabbar .tb.mid .tbi{
    width:46px;height:46px;margin-top:-26px;margin-bottom:12px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#A6790F,#F7E9AE);
    transform:rotate(45deg);
    box-shadow:0 5px 16px rgba(166,121,15,.5);
    border:2px solid #0E0D09}
  .tabbar .tb.mid svg{transform:rotate(-45deg);width:21px;height:21px;fill:#14130F}
  .tabbar .tb.mid .tbt{color:#F2DC96;margin-top:-2px}
  .tabbar .tb.mid.on .tbi{box-shadow:0 5px 22px rgba(247,233,174,.72)}

  /* pasek instalacji nie moze zaslaniac menu */
  #pwabar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* w trybie aplikacji (zainstalowana PWA) menu jest zawsze */
@media (display-mode:standalone){
  .tabbar{display:flex}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}