/* ============================================================
   app-shell.css -- installed app me neeche buttons (27 Sep)
   Sab kuch html.app-mode ke andar, aur sirf patli screen (phone)
   par. Laptop par install ki hui app me website jaisi hi rehti hai.

   Rang: har page ke apne token. Website (theme.css) par hara;
   scanner (style.css, dark) par uska --teal. Koi hex nahi.
   ============================================================ */
.app-tb { display: none; }

@media (max-width: 899px) {
  html.app-mode {
    --app-tb-h: 64px;
    --app-safe: env(safe-area-inset-bottom, 0px);
  }
  html.app-mode body { padding-bottom: calc(var(--app-tb-h) + var(--app-safe)); }

  /* Upar: sirf logo. Hamburger, Sign in/Up, drawer -- neeche buttons me hain */
  html.app-mode .nav-hamburger,
  html.app-mode .nav-actions,
  html.app-mode .nav-links,
  html.app-mode #mobileDrawer { display: none !important; }
  html.app-mode .nav-inner { padding-block: 10px; }

  /* Neeche chipakne wali cheezein buttons ke upar khisko */
  html.app-mode .wac { bottom: calc(var(--app-tb-h) + var(--app-safe) + 12px); }
  html.app-mode .toast { bottom: calc(var(--app-tb-h) + var(--app-safe) + 14px); }

  /* ---------- neeche ke 5 button ---------- */
  html.app-mode .app-tb {
    --tb-on: var(--accent, var(--teal));
    --tb-on-bg: var(--accent-light, var(--green-soft));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    box-sizing: border-box; height: calc(var(--app-tb-h) + var(--app-safe));
    padding: 4px 4px var(--app-safe);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, .25);
  }
  .app-tab {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-height: 48px; padding: 3px 0; border: 0; background: transparent; cursor: pointer;
    color: var(--text-muted); text-decoration: none;
    font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
  }
  .app-lbl { white-space: nowrap; }
  .app-ic {
    width: 52px; height: 28px; border-radius: 999px;
    display: grid; place-items: center;
    transition: background .2s ease, transform .15s ease;
  }
  .app-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .app-tab:active .app-ic { transform: scale(.92); }
  .app-tab.on { color: var(--tb-on); }
  .app-tab.on .app-ic { background: var(--tb-on-bg); }
  .app-tab.on svg { stroke-width: 2.1; }
  .app-tab:focus-visible { outline: 2px solid var(--tb-on); outline-offset: -2px; border-radius: 12px; }

  /* ---------- Tukda 4: Sign in / Sign up / Forgot -- app jaisa ----------
     Form, uska JS aur suraksha wahi (auth.js). Sirf roop: beech me bada
     app icon, beech me heading, patla khaali-pan. */
  html.app-mode .auth-right { padding: calc(env(safe-area-inset-top, 0px) + 34px) 22px 28px; align-items: flex-start; }
  html.app-mode .ab-top { display: block; text-align: center; margin-bottom: 22px; }
  html.app-mode .ab-top .al-brand { flex-direction: column; gap: 12px; }
  html.app-mode .ab-top .al-mark { width: 68px; height: 68px; border-radius: 20px; box-shadow: var(--shadow-md); }
  html.app-mode .ab-top .al-mark svg { width: 36px; height: 36px; }
  html.app-mode .ab-top .al-name { font-size: 15px; }
  html.app-mode .ab-top .al-sub { display: none; }
  html.app-mode .ab-head { text-align: center; margin-bottom: 22px; }
  html.app-mode .ab-head h1 { font-size: 26px; margin: 4px 0 6px; }
  html.app-mode .ab-head .kicker { display: none; }
  html.app-mode .ab-head p { font-size: 13.5px; }
  html.app-mode .ab-form .btn.full { padding-block: 15px; }
  html.app-mode .ab-alt { text-align: center; }

}

@media (prefers-reduced-motion: reduce) {
  .app-ic { transition: none !important; }
}