/* ── PWA / Mobile styles ── */

/* Bottom navigation bar */
.pwa-bottom-nav {
  display: none;
}

/* Service worker install banner */
.pwa-install-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #2D2D44;
  border-top: 1px solid rgba(201,168,76,0.3);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 200;
  align-items: center;
  gap: 12px;
}
.pwa-install-bar.show { display: flex; }
.pwa-install-bar img { width: 40px; height: 40px; border-radius: 10px; }
.pwa-install-bar-text { flex: 1; }
.pwa-install-bar-text strong { display: block; color: #fff; font-size: 0.875rem; }
.pwa-install-bar-text span { color: #9999BB; font-size: 0.75rem; }
.pwa-install-btn { background: #C9A84C; color: #08080E; border: none; border-radius: 100px; padding: 8px 16px; font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pwa-install-close { background: none; border: none; color: #9999BB; font-size: 1.2rem; cursor: pointer; padding: 4px 8px; }

@media (max-width: 768px) {
  /* Show bottom nav, hide sidebar */
  .pwa-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #2D2D44;
    border-top: 1px solid #3D3D5C;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pwa-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px 6px;
    text-decoration: none;
    color: #9999BB;
    font-size: 10px;
    font-weight: 600;
    gap: 3px;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .pwa-nav-item.active { color: #C9A84C; }
  .pwa-nav-icon { font-size: 21px; line-height: 1; }

  /* Content padding so bottom nav doesn't overlap */
  .app-main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
  .course-layout { height: calc(100vh - 52px - 60px - env(safe-area-inset-bottom, 0px)) !important; }

  /* Hide desktop sidebar */
  .sidebar { display: none !important; }
  .app-layout { grid-template-columns: 1fr !important; }

  /* Tighten up app topbar */
  .app-topbar { padding: 10px 14px; }

  /* Course sidebar full-screen overlay on mobile */
  .course-sidebar {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 80;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    border-right: none !important;
  }
  .course-sidebar.open { transform: translateX(0); }
  .course-sidebar-close {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 16px;
    border-bottom: 1px solid #3D3D5C;
  }

  /* Misc touch improvements */
  .lesson-item { min-height: 44px; }
  .btn { min-height: 44px; }
}

/* iPhone notch / Dynamic Island support */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-topbar {
    padding-top: max(12px, env(safe-area-inset-top));
  }
}