/* ============================================================
   ScribeVids Mobile / PWA styles.
   Desktop (>=768px) is intentionally unchanged unless noted.
   ============================================================ */

/* Larger tap targets across the app */
@media (max-width: 767.98px) {
  .btn, .btn-sm, .form-control, .form-control-sm, .form-select,
  .nav-link, .dropdown-item, .page-link, a.tab {
    min-height: 44px;
  }
  body { padding-bottom: 76px; } /* room for bottom tab bar */
  h1.display-4, h1.display-5, h1.display-6 { font-size: 1.85rem; }
  .display-4 { font-size: 2rem; }
  .container { padding-left: .9rem; padding-right: .9rem; }
}

/* Hide promotional / SEO / tools UI on mobile only */
@media (max-width: 767.98px) {
  .mobile-hide { display: none !important; }
  /* Mobile-only nav links visible only on small screens */
  .mobile-only-nav { display: block !important; }
}
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
  .mobile-only-nav { display: none !important; }
}

/* ---------- Bottom tab bar (mobile only) ---------- */
.mobile-tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1040;
  background: #1a1d20;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: none;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 12px rgba(0,0,0,0.35);
}
.mobile-tabbar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  color: #adb5bd;
  text-decoration: none;
  font-size: 0.72rem;
  border-radius: 10px;
  min-height: 56px;
}
.mobile-tabbar .tab svg { width: 22px; height: 22px; }
.mobile-tabbar .tab.active { color: #ffc107; }
.mobile-tabbar .tab:active { background: rgba(255,255,255,0.05); }
@media (max-width: 767.98px) {
  .mobile-tabbar { display: flex; }
}

/* ---------- Install / A2HS banner ---------- */
.pwa-install-banner {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 84px;
  z-index: 1050;
  background: #2b3035;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  gap: 12px;
}
.pwa-install-banner img { width: 40px; height: 40px; border-radius: 8px; }
.pwa-install-banner .body { flex: 1; min-width: 0; }
.pwa-install-banner .title { font-weight: 600; font-size: .95rem; }
.pwa-install-banner .sub { font-size: .8rem; color: #adb5bd; }
.pwa-install-banner .actions { display: flex; gap: 6px; }
@media (min-width: 768px) {
  .pwa-install-banner { display: none !important; }
}

/* ---------- Mobile result page polish ---------- */
@media (max-width: 767.98px) {
  .transcript-content { max-height: 320px; }
  .card { border-radius: 14px; }
  .btn-lg { font-size: 1rem; padding: 0.8rem 1rem; }
  .navbar-brand img { height: 32px !important; }
  /* Stack hero image smaller on mobile */
  .hero-logo { height: 80px !important; }
  /* Footer is noisy on small screens */
  footer { padding-bottom: 80px; }
}

/* Language picker tiles — ensure 44px tap targets on mobile */
@media (max-width: 767.98px) {
  .lang-cell-home label,
  .lang-cell label {
    min-height: 48px;
    padding: 10px 8px !important;
    font-size: 0.95rem;
  }
  .lang-cell-home input.form-check-input,
  .lang-cell input.form-check-input {
    width: 20px;
    height: 20px;
  }
}

/* iOS PWA standalone safe-area padding for top nav */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
}