/* ======================================
   快证照 PWA 全屏沉浸引擎
   ====================================== */

/* ---------- 隐藏滚动条 ---------- */
html { overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
body { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; padding-top: env(safe-area-inset-top,0px); padding-bottom: env(safe-area-inset-bottom,0px); }
::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* ====== 页面切换淡入动画 ====== */
@keyframes pwaPageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body > *:first-child { animation: pwaPageEnter 0.25s ease-out; }

/* ====== 骨架屏 ====== */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text   { height: 14px; margin-bottom: 8px; width: 80%; }
.skeleton-title  { height: 20px; margin-bottom: 12px; width: 60%; }
.skeleton-block  { height: 180px; width: 100%; border-radius: 12px; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-card   { padding: 16px; background: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* ====== 全局加载遮罩 ====== */
.pwa-global-loading {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.pwa-global-loading.show { opacity: 1; pointer-events: auto; }
.pwa-loading-spinner {
  width: 40px; height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #438EDB;
  border-radius: 50%;
  animation: pwaSpin 0.8s linear infinite;
}
@keyframes pwaSpin { to { transform: rotate(360deg); } }

/* ====== 桌面快捷引导弹窗（手动引导，不依赖 beforeinstallprompt） ====== */
.pwa-add-guide-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.6);
  display: none; align-items: flex-end; justify-content: center;
  padding-bottom: 120px;
}
.pwa-add-guide-overlay.show { display: flex; }
.pwa-add-guide-card {
  background: #fff; border-radius: 20px;
  max-width: 340px; width: 90%;
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  animation: pwaGuideIn 0.3s ease-out;
}
@keyframes pwaGuideIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwa-add-guide-card h3 { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.pwa-add-guide-card p  { font-size: 13px; color: #6b7280; margin-bottom: 16px; line-height: 1.5; }
.pwa-add-guide-steps { text-align: left; margin-bottom: 16px; }
.pwa-add-guide-step { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 13px; color: #374151; }
.pwa-add-guide-step .step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: #438EDB; color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pwa-add-guide-btns { display: flex; gap: 8px; }
.pwa-add-guide-btns button {
  flex: 1; padding: 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; border: none; cursor: pointer;
}
.pwa-add-guide-btn-primary { background: #438EDB; color: #fff; }
.pwa-add-guide-btn-ghost { background: #f3f4f6; color: #6b7280; }

/* ---------- 底部 Tab ---------- */
@media (max-width: 1023px) {
  .pwa-tab-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9999 !important;
    background: rgba(255,255,255,0.97);
    border-top: 1px solid #e5e7eb;
    padding: 4px 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 4px));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .pwa-tab-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px; padding: 4px 0;
    cursor: pointer; user-select: none; -webkit-user-select: none;
    color: #9ca3af; text-decoration: none;
    transition: color 0.15s;
  }
  .pwa-tab-item.active { color: #438EDB; }
  .pwa-tab-item iconify-icon { font-size: 22px; }
  .pwa-tab-label { font-size: 10px; line-height: 1.2; font-weight: 500; }
  .pwa-content { padding-bottom: 70px; padding-bottom: calc(70px + env(safe-area-inset-bottom,0px)); }
  #registerModal { z-index: 99999 !important; }
}
@media (min-width: 1024px) {
  .pwa-tab-bar { display: none !important; }
  .pwa-content { padding-bottom: 0; }
  html, body { overscroll-behavior: auto; }
}

/* ---------- 全屏按钮 ---------- */
@media (max-width: 1023px) {
  .pwa-fullscreen-btn {
    display: flex;
    position: fixed;
    right: 16px; z-index: 9998;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(67,142,219,0.9);
    border: none; color: white; font-size: 20px;
    align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(67,142,219,0.4);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s;
  }
  .pwa-fullscreen-btn.hidden { display: none !important; }
}
@media (min-width: 1024px) {
  .pwa-fullscreen-btn { display: none !important; }
}
@media all and (display-mode: standalone), all and (display-mode: fullscreen) {
  .pwa-fullscreen-btn { display: none !important; }
}
:-webkit-full-screen .pwa-fullscreen-btn, :fullscreen .pwa-fullscreen-btn { display: none !important; }

/* ---------- 引导弹窗 ---------- */
@media (max-width: 1023px) {
  .pwa-install-banner {
    position: fixed;
    bottom: 80px; left: 50%;
    transform: translateX(-50%);
    z-index: 9997;
    background: #1E293B; color: white;
    border-radius: 14px;
    max-width: 340px; width: 90%;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    display: none;
    animation: pwaBannerIn 0.4s ease-out;
  }
  .pwa-install-banner.show { display: block; }
}
@keyframes pwaBannerIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}