/* -------- Fluid type & base -------- */
:root{
  --fz-1: 14px;
  --fz-2: 16px;
  --fz-3: 20px;
}
body{
  font-size: 16px;                 /* fallback for var() */
  font-size: var(--fz-2);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* -------- Safe areas (iOS notch) -------- */
/* Use calc() instead of max() to satisfy older linters */
.app-safe{
  padding: 12px; /* base */
  /* legacy iOS 11.2- uses constant(); newer uses env() */
  padding-top: calc(12px + constant(safe-area-inset-top));
  padding-right: calc(12px + constant(safe-area-inset-right));
  padding-bottom: calc(12px + constant(safe-area-inset-bottom));
  padding-left: calc(12px + constant(safe-area-inset-left));
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-right: calc(12px + env(safe-area-inset-right));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  padding-left: calc(12px + env(safe-area-inset-left));
}

/* -------- Tap target / touch tweaks -------- */
a, button, .btn, [role="button"]{ touch-action: manipulation; }
.btn, .nav-link, .list-group-item, [role="button"]{ min-height: 44px; }

/* -------- Viewport height fix (no 100dvh) -------- */
.min-h-100vh-fix{
  min-height: 100vh;                     /* fallback */
  min-height: calc(var(--vh, 1vh) * 100);
}

/* -------- Video grid -------- */
.video-grid{
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.video-grid video{
  width: 100%; height: auto; background: #000; border-radius: 12px;
}

/* -------- Sticky controls: gate backdrop-filter -------- */
.call-controls{
  position: sticky; bottom: 0; z-index: 20;
  background: rgba(0,0,0,.3);
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
  .call-controls{
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* -------- Overscroll behavior (feature-gated) -------- */
@supports (overscroll-behavior: contain){
  html, body{ overscroll-behavior: none; }
}